Skip to content

Commit 00b4919

Browse files
andrew-l3andrew-l3
committed
added functionality
1 parent a297fc3 commit 00b4919

File tree

4 files changed

+229
-18
lines changed

4 files changed

+229
-18
lines changed

Diff for: ‎frontend/package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎frontend/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"autoprefixer": "10.4.15",
2121
"axios": "^1.7.2",
2222
"eslint-config-next": "13.4.19",
23-
"framer-motion": "^11.1.2",
23+
"framer-motion": "^11.2.13",
2424
"next": "13.4.12",
2525
"postcss": "8.4.29",
2626
"react": "18.2.0",

Diff for: ‎frontend/src/components/About/index.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Image from 'next/image';
22
import Link from 'next/link';
3+
import Stats from '../Stats';
34

45
const About = () => {
56
return (
@@ -9,16 +10,17 @@ const About = () => {
910
<h2 className="font-bold text-6xl">ABOUT</h2>
1011
</div>
1112
<div className="flex justify-center items-center">
12-
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
13+
<div className="lg:grid grid-cols-2 flex-1 max-w-[90rem]">
1314
{/* LEFT SIDE */}
14-
<div className="col-span-2 md:mx-5">
15-
<div className="flex items-center justify-center">
15+
<div className="col-span-2">
16+
{/* <div className="flex items-center justify-center">
1617
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
17-
</div>
18-
<h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
19-
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
20-
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
21-
<p>
18+
</div>*/}
19+
{/* <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
20+
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>*/}
21+
<Stats/>
22+
{/* <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>*/}
23+
{/* <p>
2224
CSESoc is the principal representative body for UNSW computing students.
2325
</p>
2426
<div className="my-4 flex gap-5">
@@ -35,11 +37,11 @@ const About = () => {
3537
<div className="flex gap-5">
3638
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
3739
[email protected]
38-
</div>
40+
</div>*/}
3941
</div>
4042
{/* RIGHT SIDE */}
41-
<div className="col-span-4 lg:mt-0 mt-10">
42-
<div className="rounded border border-[#595F6D] p-5 h-auto">
43+
<div className="col-span-4 lg:mt-0 mt-10 pt-8">
44+
{/* <div className="rounded border border-[#595F6D] p-5 h-auto">
4345
<p className="text-xs">
4446
csesoc/README<span className="text-[#7A8192]">.md</span>
4547
</p>
@@ -51,8 +53,8 @@ const About = () => {
5153
We are here to fulfil the social, personal and
5254
professional needs of CSE students, and promote computing through a variety of forms.
5355
</p>
54-
</div>
55-
<div className="mt-10">
56+
</div>*/}
57+
<div className="mt-10 mb-32">
5658
Pinned
5759
{/* TODO: refactor all of this */}
5860
<div className="sm:flex my-5">

Diff for: ‎frontend/src/components/Stats.tsx

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import Image from 'next/image';
2+
import { motion, useAnimationControls } from "framer-motion"
3+
import { useEffect } from 'react';
4+
5+
const Stats = () => {
6+
const r = 80;
7+
const controls = useAnimationControls()
8+
9+
const progress = {
10+
hidden: { pathLength: 0, opacity: 0 },
11+
visible: {
12+
pathLength: 0.7,
13+
opacity: 1,
14+
transition: {
15+
pathLength: { type: "spring", duration: 1.5, bounce: 0 },
16+
opacity: { duration: 0.05 }
17+
}
18+
}
19+
}
20+
21+
useEffect(() => {
22+
controls.start("hidden")
23+
controls.start("visible")
24+
controls.stop();
25+
}, []);
26+
27+
const revert = async() => {
28+
await controls.start("hidden")
29+
return await controls.start("visible")
30+
}
31+
32+
return (
33+
<div className="w-full">
34+
<div className="flex flex-col justify-center align-middle items-center relative grow w-full py-12">
35+
<Image className="z-10" src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
36+
<motion.svg
37+
className="absolute" width={200} height={200}
38+
style={{transform: "rotate(270deg)", top: "1.4rem"}}
39+
initial="hidden"
40+
animate={controls}
41+
>
42+
<motion.circle
43+
r={r}
44+
cx={100}
45+
cy={100}
46+
fill="transparent"
47+
stroke="#444F6F"
48+
strokeWidth={"0.75rem"}
49+
strokeLinecap="round"
50+
/>
51+
<motion.circle
52+
r={r}
53+
cx={100}
54+
cy={100}
55+
fill="transparent"
56+
stroke="rgb(248 250 252)"
57+
strokeWidth={"0.75rem"}
58+
strokeLinecap="round"
59+
variants={progress}
60+
/>
61+
</motion.svg>
62+
<h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
63+
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
64+
<div className="mt-14 mb-2 flex gap-2 flex-1 grow w-full">
65+
<div className="flex flex-col flex-1 gap-0 bg-slate-50 px-3 py-1 rounded-md text-right hover:cursor-pointer"
66+
onClick={() => {revert()}}>
67+
<Image className='ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
68+
<span className="text-[#727B8C] text-6xl leading-3 py-4 pb-6">433</span>
69+
<span className="text-[#727B8C] text-sm py-1 ">total members</span>
70+
</div>
71+
<div className="group flex flex-col flex-1 gap-0 bg-[#444F6F] hover:bg-slate-50 px-3 py-1 rounded-md text-right hover:cursor-pointer transition-all hover:text-[#444F6F]"
72+
onClick={() => {revert()}}>
73+
<Image className='text-white group-hover:text-[#727B8C] ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
74+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6 group-hover:text-[#727B8C]">53</span>
75+
<span className="text-[#ffffff] text-sm py-1 group-hover:text-[#727B8C]">events held</span>
76+
</div>
77+
<div className="flex flex-col flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right hover:cursor-pointer"
78+
onClick={() => {revert()}}>
79+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
80+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">343</span>
81+
<span className="text-[#ffffff] text-sm py-1 ">subcom</span>
82+
</div>
83+
<div className="flex flex-col flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right hover:cursor-pointer"
84+
onClick={() => {revert()}}>
85+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
86+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">343</span>
87+
<span className="text-[#ffffff] text-sm py-1 ">subcom</span>
88+
</div>
89+
{/* <div className="flex flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right">
90+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">53</span>
91+
<div className="flex flex-col text-left">
92+
<Image className='text-white pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
93+
<span className="text-[#ffffff] text-sm py-1 ">held</span>
94+
</div>
95+
</div>
96+
<div className="flex gap-2 bg-slate-50 px-3 py-1 rounded-md">
97+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
98+
<span className="text-[#727B8C]">300 subcom</span>
99+
</div>
100+
<div className="flex gap-2 bg-slate-50 px-3 py-1 rounded-md">
101+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
102+
<span className="text-[#727B8C]">52 events held</span>
103+
</div>*/}
104+
</div>
105+
{/* <div className="flex flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right">
106+
<div>
107+
<Image className="z-10" src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
108+
</div>
109+
<div className="flex flex-col">
110+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
111+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">53</span>
112+
<span className="text-[#ffffff] text-sm py-1 ">events held</span>
113+
</div>
114+
115+
</div>*/}
116+
{/* <div className="my-4 flex gap-5">
117+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
118+
Sydney, Australia
119+
</div>
120+
<div className="flex gap-5">
121+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
122+
[email protected]
123+
</div>
124+
125+
<div className="w-72 font-semibold text-xl lg:block hidden">
126+
<p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
127+
<hr className="mb-3 mt-5" />
128+
<div className="flex justify-between">
129+
<p>323,000</p>
130+
<p>Members</p>
131+
</div>
132+
<div className="flex justify-between">
133+
<p>300</p>
134+
<p>Team Members</p>
135+
</div>
136+
<div className="flex justify-between">
137+
<p>52</p>
138+
<p>Events held</p>
139+
</div>
140+
</div>*/}
141+
142+
</div>
143+
<div className="flex flex-col pb-14">
144+
<div className="flex flex-col">
145+
<div className="flex text-left">
146+
<Image className='pb-1 ml-5' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
147+
<span className="ml-3">CSESoc is the principal representative body for UNSW computing students.</span>
148+
</div>
149+
<div className="my-4 flex">
150+
<Image className="ml-5" src="/assets/location_icon.svg" alt="Location" width={17} height={17} />
151+
<span className="ml-4">Sydney, Australia</span>
152+
</div>
153+
<div className="flex">
154+
<Image className="ml-5" src="/assets/mail_icon.svg" alt="Mail" width={17} height={17} />
155+
<span className="ml-4">[email protected]</span>
156+
</div>
157+
</div>
158+
</div>
159+
160+
<div className="flex flex-col gap-4">
161+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
162+
<div className="flex flex-col">
163+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
164+
csesoc/README<span className="text-[#7A8192]">.md</span>
165+
</p>
166+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
167+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>CSESoc is one of the biggest and most active societies at</span><br/>
168+
2 &ensp;&ensp;UNSW, catering to over 3500 CSE students spanning across<br/>
169+
3 &ensp;&ensp;degrees in Computer Science, Software Engineering,<br/>
170+
4 &ensp;&ensp;Bioinformatics and Computer Engineering.
171+
<br/><br/>
172+
5 &ensp;&ensp;We are here to fulfil the social, personal and professional<br/>
173+
6 &ensp;&ensp;needs of CSE students, and promote computing through a<br/>
174+
7 &ensp;&ensp;variety of forms.
175+
</p>
176+
</div>
177+
<div>
178+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
179+
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm11.5 1a.5.5 0 0 0-.5.5v3.793L9.854 8.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L12 9.293V5.5a.5.5 0 0 0-.5-.5M3.56 7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/>
180+
</svg>
181+
</div>
182+
</div>
183+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
184+
<div className="flex flex-col">
185+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
186+
execs-directors-subcoms<span className="text-[#7A8192]">.md</span>
187+
</p>
188+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
189+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>100+ events (35+ careers related revents)</span><br/>
190+
2 &ensp;&ensp;41 sponsors<br/>
191+
3 &ensp;&ensp;480 000 discord messages<br/>
192+
4 &ensp;&ensp;200+ volunteers.<br/>
193+
5 &ensp;&ensp;Tiktok: 27.2k views, 2k+ likes<br/>
194+
6 &ensp;&ensp;Podcast: 10k downloads, 600+ average viewers<br/>
195+
7 &ensp;&ensp;500+ high school students reached.
196+
</p>
197+
</div>
198+
<div>
199+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
200+
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm11.5 1a.5.5 0 0 0-.5.5v3.793L9.854 8.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L12 9.293V5.5a.5.5 0 0 0-.5-.5M3.56 7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/>
201+
</svg>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
);
207+
};
208+
209+
export default Stats;

0 commit comments

Comments
 (0)