Skip to content

Commit d4a825f

Browse files
joye-fuujoye-fuu
committed
Add animation to about page
1 parent a5342ab commit d4a825f

File tree

1 file changed

+98
-88
lines changed

1 file changed

+98
-88
lines changed

‎frontend/src/pages/about/index.tsx

Lines changed: 98 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,30 @@ import PageTitle from "@/components/PageTitle";
33
import Image from 'next/image';
44
import Link from 'next/link';
55
import TabTitle from 'next/head';
6+
import FadeInAnimation from "@/components/Animations/FadeInAnimation";
67

78
export default function AboutPage() {
9+
10+
const animationSequence = {
11+
title: 0,
12+
mainContent: 0.2,
13+
sidebar: 0.2,
14+
}
15+
816
return (
917
<Layout>
1018
<TabTitle>
1119
<title>About Us | CSESoc UNSW</title>
1220
</TabTitle>
1321

14-
<PageTitle title="ABOUT US" />
15-
<section className="py-8 xl:px-24 sm:px-10 px-5">
16-
<div className="flex justify-center items-center">
17-
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
22+
<FadeInAnimation delay={animationSequence.title}>
23+
<PageTitle title="ABOUT US" />
24+
</FadeInAnimation>
25+
<section className="py-8 xl:px-24 sm:px-10 px-5">
26+
<div className="flex justify-center items-center">
27+
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
1828
{/* LEFT SIDE */}
19-
<div className="col-span-2 md:mx-5">
29+
<FadeInAnimation className="col-span-2 md:mx-5" delay={animationSequence.sidebar}>
2030
<div className="flex items-center justify-center">
2131
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
2232
</div>
@@ -43,103 +53,103 @@ export default function AboutPage() {
4353
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
4454
<a href="mailto:info@csesoc.org.au" className="hover:underline">info@csesoc.org.au</a>
4555
</div>
46-
</div>
47-
{/* RIGHT SIDE */}
48-
<div className="col-span-4 lg:mt-0 mt-10">
49-
<div className="rounded border border-[#595F6D] p-5 h-auto">
50-
<p className="text-xs">
51-
csesoc/README<span className="text-[#7A8192]">.md</span>
52-
</p>
53-
<div className="mt-5">
54-
<p>
55-
CSESoc is the official representative body of computing students at UNSW. We are one of the
56-
largest and most active societies at UNSW, and the largest computing society in the southern hemisphere.
57-
CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering,
58-
Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional
59-
needs of CSE students, and promote computing through a variety of forms.
60-
</p>
61-
<br />
62-
<p>
63-
We are a society for the students, by the students. Here’s an overview of what we do:
56+
</FadeInAnimation>
57+
{/* RIGHT SIDE */}
58+
<div className="col-span-4 lg:mt-0 mt-10">
59+
<FadeInAnimation delay={animationSequence.mainContent} className="rounded border border-[#595F6D] p-5 h-auto">
60+
<p className="text-xs">
61+
csesoc/README<span className="text-[#7A8192]">.md</span>
6462
</p>
63+
<div className="mt-5">
64+
<p>
65+
CSESoc is the official representative body of computing students at UNSW. We are one of the
66+
largest and most active societies at UNSW, and the largest computing society in the southern hemisphere.
67+
CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering,
68+
Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional
69+
needs of CSE students, and promote computing through a variety of forms.
70+
</p>
71+
<br />
72+
<p>
73+
We are a society for the students, by the students. Here’s an overview of what we do:
74+
</p>
6575

66-
<ul className="list-disc">
67-
<li className="ml-6">Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ</li>
68-
<li className="ml-6">Create original media content, including Podcasts, articles, YouTube videos, and live streams</li>
69-
<li className="ml-6">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</li>
70-
<li className="ml-6">Engage students with industry sponsors and representatives to develop their professional capacity and curiosity</li>
71-
<li className="ml-6">Develop our own open-source projects for students to get learn new skills and develop tools for our community</li>
72-
<li className="ml-6">Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers</li>
73-
</ul>
74-
</div>
75-
</div>
76-
<div className="mt-10">
77-
Pinned
78-
{/* TODO: refactor all of this */}
79-
<div className="sm:flex my-5">
80-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
81-
<div className="flex text-[#3A76F8]">
82-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
83-
<Link href="/about/execs-directors-subcoms">
84-
<span className="font-semibold hover:underline">execs-directors-subcoms</span>
85-
</Link>
86-
</div>
87-
<div className="my-5">CSESoc&apos;s execs, directors, subcommittees</div>
88-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
76+
<ul className="list-disc">
77+
<li className="ml-6">Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ</li>
78+
<li className="ml-6">Create original media content, including Podcasts, articles, YouTube videos, and live streams</li>
79+
<li className="ml-6">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</li>
80+
<li className="ml-6">Engage students with industry sponsors and representatives to develop their professional capacity and curiosity</li>
81+
<li className="ml-6">Develop our own open-source projects for students to get learn new skills and develop tools for our community</li>
82+
<li className="ml-6">Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers</li>
83+
</ul>
8984
</div>
90-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
91-
<div className="flex text-[#3A76F8]">
92-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
93-
<Link href="/about/constitution">
94-
<span className="font-semibold hover:underline">constitution</span>
95-
</Link>
85+
</FadeInAnimation>
86+
<div className="mt-10">
87+
Pinned
88+
{/* TODO: refactor all of this */}
89+
<div className="sm:flex my-5">
90+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
91+
<div className="flex text-[#3A76F8]">
92+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
93+
<Link href="/about/execs-directors-subcoms">
94+
<span className="font-semibold hover:underline">execs-directors-subcoms</span>
95+
</Link>
96+
</div>
97+
<div className="my-5">CSESoc&apos;s execs, directors, subcommittees</div>
98+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
9699
</div>
97-
<div className="my-5">Current and past constitutions</div>
98-
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
99-
</div>
100-
</div>
101-
<div className="sm:flex my-5">
102-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
103-
<div className="flex text-[#3A76F8]">
104-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
105-
<Link href="/about/our-history">
106-
<span className="font-semibold hover:underline">our-history</span>
107-
</Link>
100+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
101+
<div className="flex text-[#3A76F8]">
102+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
103+
<Link href="/about/constitution">
104+
<span className="font-semibold hover:underline">constitution</span>
105+
</Link>
106+
</div>
107+
<div className="my-5">Current and past constitutions</div>
108+
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
108109
</div>
109-
<div className="my-5">Dive into CSESoc&apos;s history</div>
110-
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
111110
</div>
112-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
113-
<div className="flex text-[#3A76F8]">
114-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
115-
<Link href="/about/faqs">
116-
<span className="font-semibold hover:underline">faqs</span>
117-
</Link>
111+
<div className="sm:flex my-5">
112+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
113+
<div className="flex text-[#3A76F8]">
114+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
115+
<Link href="/about/our-history">
116+
<span className="font-semibold hover:underline">our-history</span>
117+
</Link>
118+
</div>
119+
<div className="my-5">Dive into CSESoc&apos;s history</div>
120+
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
121+
</div>
122+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
123+
<div className="flex text-[#3A76F8]">
124+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
125+
<Link href="/about/faqs">
126+
<span className="font-semibold hover:underline">faqs</span>
127+
</Link>
128+
</div>
129+
<div className="my-5">Frequently asked questions</div>
130+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
118131
</div>
119-
<div className="my-5">Frequently asked questions</div>
120-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
121132
</div>
122-
</div>
123-
<div className="my-5">
124-
<div
125-
className="p-5 border border-[#595F6D] rounded-lg"
126-
style={{ width: 'calc(50% - 0.5rem)' }}
127-
>
128-
<div className="flex text-[#3A76F8]">
129-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
130-
<Link href="/about/election-guide">
131-
<span className="font-semibold hover:underline">election-guide</span>
132-
</Link>
133+
<div className="my-5">
134+
<div
135+
className="p-5 border border-[#595F6D] rounded-lg"
136+
style={{ width: 'calc(50% - 0.5rem)' }}
137+
>
138+
<div className="flex text-[#3A76F8]">
139+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
140+
<Link href="/about/election-guide">
141+
<span className="font-semibold hover:underline">election-guide</span>
142+
</Link>
143+
</div>
144+
<div className="my-5"> Our election nomination guide</div>
145+
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
133146
</div>
134-
<div className="my-5"> Our election nomination guide</div>
135-
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
136147
</div>
137148
</div>
138149
</div>
139150
</div>
140151
</div>
141-
</div>
142-
</section>
152+
</section>
143153
</Layout>
144154
);
145155
}

0 commit comments

Comments
 (0)