diff --git a/frontend/src/components/About/AboutHomepage.tsx b/frontend/src/components/About/AboutHomepage.tsx index 4492b71..a665178 100644 --- a/frontend/src/components/About/AboutHomepage.tsx +++ b/frontend/src/components/About/AboutHomepage.tsx @@ -1,61 +1,66 @@ import Image from "next/image"; +import ScrollEnterAnimation from '@/components/Animations/ScrollEnterAnimation'; export default function AboutHomePage() { return (
-
-

ABOUT

-
-
-
- {/* LEFT SIDE */} - {/* NOTE: there is slightly altered from about/index.tsx */} -
-
- CSESoc Icon -
-

CSESoc

-

unsw-computer-science-engineering-society

-
- People -
- 16k members · 146{' '} - internal members + +
+

ABOUT

+
+ + +
+
+ {/* LEFT SIDE */} + {/* NOTE: there is slightly altered from about/index.tsx */} +
+
+ CSESoc Icon +
+

CSESoc

+

unsw-computer-science-engineering-society

+
+ People +
+ 16k members · 146{' '} + internal members +
+
+
+ Location + Sydney, Australia +
+
-
- Location - Sydney, Australia -
- -
- {/* RIGHT SIDE */} -
-

- We are one of the largest and most active societies at UNSW, and {" "} - the largest computing society in the southern hemisphere. -

- CSESoc comprises {" "} - over 16k members - {" "}spanning across various degrees including Computer Science, - Software Engineering, Bioinformatics and Computer Engineering. -

- We are here to fulfil the social, personal and professional needs of CSE students, - and promote computing through a variety of forms. -

-
- - - + {/* RIGHT SIDE */} +
+

+ We are one of the largest and most active societies at UNSW, and {" "} + the largest computing society in the southern hemisphere. +

+ CSESoc comprises {" "} + over 16k members + {" "}spanning across various degrees including Computer Science, + Software Engineering, Bioinformatics and Computer Engineering. +

+ We are here to fulfil the social, personal and professional needs of CSE students, + and promote computing through a variety of forms. +

+
-
+
); } diff --git a/frontend/src/components/Animations/FadeInAnimation.tsx b/frontend/src/components/Animations/FadeInAnimation.tsx new file mode 100644 index 0000000..465d747 --- /dev/null +++ b/frontend/src/components/Animations/FadeInAnimation.tsx @@ -0,0 +1,30 @@ +import { ReactNode } from 'react' +import { motion } from 'framer-motion'; + +interface FadeInProps { + children: ReactNode; + delay?: number; + viewport?: number; + yInitial?: number; + className?: string; +} + +const FadeInAnimation = ({ children, delay = 0, yInitial = 30, className }: FadeInProps) => { + + return ( + + {children} + + ) +} + +export default FadeInAnimation \ No newline at end of file diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx new file mode 100644 index 0000000..4224c2f --- /dev/null +++ b/frontend/src/components/Animations/Loading.tsx @@ -0,0 +1,82 @@ +import React from 'react' +import { motion } from 'framer-motion'; + +const Loading = () => { + const [isLoading, setIsLoading] = React.useState(true); + + // Toggling the animation durations + const loadDuration = 3; + const loadStart = 0.1; + const loadEnd = 0.5; + + React.useLayoutEffect(() => { + + // Only show loading on initial load + if (!window || !window.sessionStorage) { + setIsLoading(true); + } else { + if (sessionStorage.getItem("firstload") === null) { + sessionStorage.setItem("firstload", "true"); + } else if (sessionStorage.getItem("firstload") === "true") { + setIsLoading(true); + sessionStorage.setItem("firstload", "false"); + } else { + // Don't show loading animation + setIsLoading(false); + return; + } + } + + // Otherwise, show loading animation + document.body.style.overflow = 'hidden'; + const startAnimation = () => { + const timer = setTimeout(() => { + document.body.style.overflow = ''; + setIsLoading(false); + }, loadDuration * 1000); + return timer; + }; + const timer = requestAnimationFrame(() => startAnimation()); + return () => { + cancelAnimationFrame(timer); + document.body.style.overflow = ''; + }; + }, []); + + if (!isLoading) { + return null; + } + + return ( + +
+ +
+ + ) +} + +export default Loading \ No newline at end of file diff --git a/frontend/src/components/Animations/ScrollEnterAnimation.tsx b/frontend/src/components/Animations/ScrollEnterAnimation.tsx new file mode 100644 index 0000000..0f81a50 --- /dev/null +++ b/frontend/src/components/Animations/ScrollEnterAnimation.tsx @@ -0,0 +1,28 @@ +import { ReactNode } from 'react' +import { motion } from 'framer-motion'; + +interface ScrollEnterProps { + children: ReactNode; + delay?: number; + viewport?: number; +} + +const ScrollEnterAnimation = ({ children, delay = 0 }: ScrollEnterProps) => { + + return ( + + {children} + + ) +} + +export default ScrollEnterAnimation \ No newline at end of file diff --git a/frontend/src/components/Background.tsx b/frontend/src/components/Background.tsx index 89fb7db..fee153f 100644 --- a/frontend/src/components/Background.tsx +++ b/frontend/src/components/Background.tsx @@ -1,11 +1,27 @@ import Spline from '@splinetool/react-spline'; +import { useState, useEffect } from 'react'; const Background = () => { + + // delay background loading + const [shouldLoad, setShouldLoad] = useState(false); + useEffect(() => { + const timer = setTimeout(() => { + setShouldLoad(true); + }, 700); + + return () => clearTimeout(timer); + }, []); + return ( - + <> + {shouldLoad && ( + + )} + ); }; diff --git a/frontend/src/components/Event/EventsBrief.tsx b/frontend/src/components/Event/EventsBrief.tsx index 65105eb..77ad358 100644 --- a/frontend/src/components/Event/EventsBrief.tsx +++ b/frontend/src/components/Event/EventsBrief.tsx @@ -1,28 +1,33 @@ import React from 'react'; import { events } from '../../../public/data/events'; import EventsCarousel from './EventsCarousel'; -import { ChevronRight } from 'lucide-react'; +import { ChevronRight, Facebook } from 'lucide-react'; +import ScrollEnterAnimation from '../Animations/ScrollEnterAnimation'; const EventBrief = () => { return (
-
-

UPCOMING EVENTS

-
- {events.length !== 0 ? - : -
-

No upcoming events... check back here later!

+ +
+

UPCOMING EVENTS

- } - + + + {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

+
+ } + +
); }; diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index dce454e..a065852 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -2,14 +2,27 @@ import React from 'react'; import { events } from '../../../public/data/events'; import EventsCarousel from './EventsCarousel'; import EventGallery from './EventsGallery'; +import FadeInAnimation from '../Animations/FadeInAnimation'; const Event = () => { + + const animationSequence = { + title: 0, + description: 0.1, + upcomingEventsTitle: 0.2, + upcomingEvents: 0.3, + previousEventsTitle: 0.4, + previousEvents: 0.5, + } + return (
-

EVENTS

+ +

EVENTS

+
-
+

We run a wide-variety of events for fun, learning new skills and careers. For full @@ -20,24 +33,28 @@ const Event = () => { >Facebook page!

-
-
+ +

Explore upcoming events

-
- {events.length !== 0 ? - : -
-

No upcoming events... check back here later!

-
- } -
+ + + {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

+
+ } + +

Previous events

-
- + + + +
); }; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index 1eeff62..6f216f7 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,34 +1,51 @@ import Background from '@/components/Background'; +import FadeInAnimation from '../Animations/FadeInAnimation'; +import React from 'react'; const Landing = () => { + const animationSequence = { + h1: 0.1, + h2: 0.2, + background: 2, + }; + return (
- - + + +
-
-

{'

'}

-

Hello World!

-

{''}

-
-
-

{'

'}

-

- We are the principal representative body for{' '} - - UNSW computing - - {' '}students. -

-

{''}

-
+ +
+

{'

'}

+

Hello World!

+

{''}

+
+ + +
+

{'

'}

+

+ We are the principal representative body for{' '} + + UNSW computing + + {' '}students. +

+

{''}

+
+
diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index 14ebb1f..b3e2722 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import Footer from '@/components/Footer'; import SponsorCarousel from './SponsorCarousel'; import { ChevronRight } from 'lucide-react'; +import ScrollEnterAnimation from '../Animations/ScrollEnterAnimation'; const Sponsors = () => { return ( @@ -9,24 +10,28 @@ const Sponsors = () => { className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20" id="sponsors" > -
-

OUR SPONSORS

-
-
-
- -
- - - + +
+

OUR SPONSORS

+
+ + + -
+
About Us | CSESoc UNSW - -
-
-
+ + + +
+
+
{/* LEFT SIDE */} -
+
CSESoc Icon
@@ -43,103 +54,103 @@ export default function AboutPage() { Mail info@csesoc.org.au
-
- {/* RIGHT SIDE */} -
-
-

- csesoc/README.md -

-
-

- CSESoc is the official representative body of computing students at UNSW. We are one of the - largest and most active societies at UNSW, and the largest computing society in the southern hemisphere. - CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering, - Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional - needs of CSE students, and promote computing through a variety of forms. -

-
-

- We are a society for the students, by the students. Here’s an overview of what we do: + + {/* RIGHT SIDE */} +

+ +

+ csesoc/README.md

+
+

+ CSESoc is the official representative body of computing students at UNSW. We are one of the + largest and most active societies at UNSW, and the largest computing society in the southern hemisphere. + CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering, + Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional + needs of CSE students, and promote computing through a variety of forms. +

+
+

+ We are a society for the students, by the students. Here’s an overview of what we do: +

-
    -
  • Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ
    • -
  • Create original media content, including Podcasts, articles, YouTube videos, and live streams
    • -
  • Run a highly successful First Year Camp and Peer Mentoring program, offering new CSE students (both undergraduate and postgraduate) a chance to meet and mingle with other newcomers
    • -
  • Engage students with industry sponsors and representatives to develop their professional capacity and curiosity
    • -
  • Develop our own open-source projects for students to get learn new skills and develop tools for our community
    • -
  • Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers
    • -
-
-
-
- Pinned - {/* TODO: refactor all of this */} -
-
-
- Book - - execs-directors-subcoms - -
-
CSESoc's execs, directors, subcommittees
-
+
    +
  • Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ
    • +
  • Create original media content, including Podcasts, articles, YouTube videos, and live streams
    • +
  • Run a highly successful First Year Camp and Peer Mentoring program, offering new CSE students (both undergraduate and postgraduate) a chance to meet and mingle with other newcomers
    • +
  • Engage students with industry sponsors and representatives to develop their professional capacity and curiosity
    • +
  • Develop our own open-source projects for students to get learn new skills and develop tools for our community
    • +
  • Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers
    • +
-
-
- Book - - constitution - + + + Pinned + {/* TODO: refactor all of this */} +
+
+
+ Book + + execs-directors-subcoms + +
+
CSESoc's execs, directors, subcommittees
+
-
Current and past constitutions
-
-
-
-
-
-
- Book - - our-history - +
+
+ Book + + constitution + +
+
Current and past constitutions
+
-
Dive into CSESoc's history
-
-
-
- Book - - faqs - +
+
+
+ Book + + our-history + +
+
Dive into CSESoc's history
+
+
+
+
+ Book + + faqs + +
+
Frequently asked questions
+
-
Frequently asked questions
-
-
-
-
-
- Book - - election-guide - +
+
+
+ Book + + election-guide + +
+
Our election nomination guide
+
-
Our election nomination guide
-
-
+
-
-
+
); } diff --git a/frontend/src/pages/contact-us.tsx b/frontend/src/pages/contact-us.tsx index 59e8a56..abc40f0 100644 --- a/frontend/src/pages/contact-us.tsx +++ b/frontend/src/pages/contact-us.tsx @@ -1,3 +1,4 @@ +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; import Contacts from '@/components/Contacts'; import Layout from '@/components/Layout'; import PageBody from '@/components/PageBody'; @@ -5,68 +6,78 @@ import PageTitle from '@/components/PageTitle'; import TabTitle from 'next/head'; export default function ContactUsPage() { + + const animationSequence = { + title: 0, + mainContent: 0.2, + } + return ( Contact Us | CSESoc UNSW - + + + - - + + + -
-

- And be sure to follow us on social media to be notified of upcoming events and - opportunities! -

- -
- +
+

+ And be sure to follow us on social media to be notified of upcoming events and + opportunities! +

+ +
+ + ); } diff --git a/frontend/src/pages/resources.tsx b/frontend/src/pages/resources.tsx index f5b16fa..b9ef245 100644 --- a/frontend/src/pages/resources.tsx +++ b/frontend/src/pages/resources.tsx @@ -3,8 +3,15 @@ import Image from 'next/image'; import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards'; import PageTitle from '@/components/PageTitle'; import TabTitle from 'next/head'; +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; export default function ResourcesPage() { + + const animationSequence = { + title: 0, + mainContent: 0.2, + }; + const boxStyling = 'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300'; @@ -14,11 +21,13 @@ export default function ResourcesPage() { Resources | CSESoc UNSW - + + +
-
+ Background
@@ -127,7 +136,7 @@ export default function ResourcesPage() { })}
-
+
diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx index 210b0de..d378f14 100644 --- a/frontend/src/pages/sponsors.tsx +++ b/frontend/src/pages/sponsors.tsx @@ -4,6 +4,7 @@ import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/d import SponsorModal from '@/components/Sponsors/SponsorModal'; import { EmojiRain } from 'next-emoji-rain'; import TabTitle from 'next/head'; +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; export default function SponsorsPage() { const logostyle = @@ -28,6 +29,15 @@ export default function SponsorsPage() { }, 4000); }; + const animationSequence = { + diamondSponsorsTitle: 0, + diamondSponsors: 0.1, + goldSponsorsTitle: 0.2, + goldSponsors: 0.3, + silverSponsorsTitle: 0.4, + silverSponsors: 0.5, + }; + return ( @@ -44,8 +54,12 @@ export default function SponsorsPage() {
-

handleRainClick('diamond')}>DIAMOND SPONSORS

-
+ +

handleRainClick('diamond')}> + DIAMOND SPONSORS

+ +
{showModal && (
-
-

handleRainClick('gold')}>GOLD SPONSORS

-
+ + +

handleRainClick('gold')} + >GOLD SPONSORS

+ +
{goldLinks.map((item, index) => { return ( @@ -75,9 +94,14 @@ export default function SponsorsPage() { ); })}
-
-

handleRainClick('silver')}>SILVER SPONSORS

-
+ + +

handleRainClick('silver')} + >SILVER SPONSORS

+ +
{silverLinks.map((item, index) => { return ( @@ -87,7 +111,7 @@ export default function SponsorsPage() { ); })}
-
+
); diff --git a/package.json b/package.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/package.json @@ -0,0 +1 @@ +{}