Skip to content

Commit 1c27673

Browse files
Domin0deDomin0de
authored
Merge pull request #36 from csesoc/CW2-53-improve-subcom-page
[CW2-53] Subcom display selection
2 parents 4f35f73 + 9c4ddcb commit 1c27673

File tree

7 files changed

+391
-215
lines changed

7 files changed

+391
-215
lines changed

Diff for: ‎frontend/public/data/execs.ts

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// TODO: Combine with portfolios.ts
2+
3+
export type Exec = {
4+
name: string,
5+
role: string,
6+
};
7+
8+
export const EXECS: Exec[] = [
9+
{
10+
name: "Elizabeth Zhu Chan",
11+
role: "Co-President",
12+
},
13+
{
14+
name: "Lesley Lu",
15+
role: "Co-President",
16+
},
17+
{
18+
name: "Ivan Chan",
19+
role: "Secretary",
20+
},
21+
{
22+
name: "Justin Son",
23+
role: "Treasurer",
24+
},
25+
{
26+
name: "Sophie Khov",
27+
role: "Arc Delegate",
28+
},
29+
{
30+
name: "Catherine Kim",
31+
role: "Grievance, Equity, Diversity and Inclusion Officer",
32+
},
33+
{
34+
name: "Amy Liu",
35+
role: "Vice President (Internals)",
36+
},
37+
{
38+
name: "Nicole Jiang",
39+
role: "Vice President (Externals)",
40+
},
41+
{
42+
name: "Matthew Lim",
43+
role: "Vice President (Technicals)",
44+
},
45+
];

Diff for: ‎frontend/public/data/portfolios.ts

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
export type PortfolioData = {
2+
name: string,
3+
description: string,
4+
members: PortfolioMember[],
5+
};
6+
7+
export type PortfolioMember = {
8+
name: string,
9+
role: PortfolioRole,
10+
imageUrl: string;
11+
}
12+
13+
export enum PortfolioRole {
14+
DIRECTOR = "Director",
15+
SUBCOM = "Subcommittee",
16+
}
17+
18+
export const PORTFOLIOS: PortfolioData[] = [
19+
{
20+
name: "Careers",
21+
description: "Facilitates industry sponsor relations, as well as creating events focused on interpersonal development and networking.",
22+
members: [
23+
{
24+
name: "Eric Kang",
25+
role: PortfolioRole.DIRECTOR,
26+
imageUrl: "/images/members/blank-pfp.png",
27+
},
28+
{
29+
name: "Jasmine Xian",
30+
role: PortfolioRole.DIRECTOR,
31+
imageUrl: "/images/members/blank-pfp.png",
32+
},
33+
{
34+
name: "Max Lee",
35+
role: PortfolioRole.DIRECTOR,
36+
imageUrl: "/images/members/blank-pfp.png",
37+
},
38+
],
39+
},
40+
{
41+
name: "Competitions",
42+
description: "Organises a variety of contests to empower students beyond coursework and allow them meet others.",
43+
members: [
44+
{
45+
name: "Aliff Azlan",
46+
role: PortfolioRole.DIRECTOR,
47+
imageUrl: "/images/members/blank-pfp.png",
48+
},
49+
{
50+
name: "Haibing Wang",
51+
role: PortfolioRole.DIRECTOR,
52+
imageUrl: "/images/members/blank-pfp.png",
53+
},
54+
{
55+
name: "Diego Untalan",
56+
role: PortfolioRole.DIRECTOR,
57+
imageUrl: "/images/members/blank-pfp.png",
58+
},
59+
],
60+
},
61+
{
62+
name: "Creative",
63+
description: "Lays the groundwork for CSESoc's aesthetic branding, providing an outlet for creative expression.",
64+
members: [
65+
{
66+
name: "Anna Wang",
67+
role: PortfolioRole.DIRECTOR,
68+
imageUrl: "/images/members/blank-pfp.png",
69+
},
70+
{
71+
name: "Jordan Djamaan",
72+
role: PortfolioRole.DIRECTOR,
73+
imageUrl: "/images/members/blank-pfp.png",
74+
},
75+
{
76+
name: "Shabinda Sarkaria",
77+
role: PortfolioRole.DIRECTOR,
78+
imageUrl: "/images/members/blank-pfp.png",
79+
},
80+
],
81+
},
82+
{
83+
name: "Education",
84+
description: "Teaches interesting technical skills to the community, whether that's through workshops, articles, or programs.",
85+
members: [
86+
{
87+
name: "Alina Jin",
88+
role: PortfolioRole.DIRECTOR,
89+
imageUrl: "/images/members/blank-pfp.png",
90+
},
91+
{
92+
name: "JJ Roberts-White",
93+
role: PortfolioRole.DIRECTOR,
94+
imageUrl: "/images/members/blank-pfp.png",
95+
},
96+
{
97+
name: "Liam Smith",
98+
role: PortfolioRole.DIRECTOR,
99+
imageUrl: "/images/members/blank-pfp.png",
100+
},
101+
],
102+
},
103+
{
104+
name: "Events",
105+
description: "Plans a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!",
106+
members: [
107+
{
108+
name: "Emma Nguyen",
109+
role: PortfolioRole.DIRECTOR,
110+
imageUrl: "/images/members/blank-pfp.png",
111+
},
112+
{
113+
name: "Jalaj Jain",
114+
role: PortfolioRole.DIRECTOR,
115+
imageUrl: "/images/members/blank-pfp.png",
116+
},
117+
{
118+
name: "Jenny Lee",
119+
role: PortfolioRole.DIRECTOR,
120+
imageUrl: "/images/members/blank-pfp.png",
121+
},
122+
],
123+
},
124+
{
125+
name: "HR",
126+
description: "Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.",
127+
members: [
128+
{
129+
name: "Aryan Chauhan",
130+
role: PortfolioRole.DIRECTOR,
131+
imageUrl: "/images/members/blank-pfp.png",
132+
},
133+
{
134+
name: "Edwin Tang",
135+
role: PortfolioRole.DIRECTOR,
136+
imageUrl: "/images/members/blank-pfp.png",
137+
},
138+
{
139+
name: "Jasmine Guan",
140+
role: PortfolioRole.DIRECTOR,
141+
imageUrl: "/images/members/blank-pfp.png",
142+
},
143+
],
144+
},
145+
{
146+
name: "IT",
147+
description: "Oversees the development of the CSESoc's internal projects and plays an active role in the technical aspects of our society.",
148+
members: [
149+
{
150+
name: "Derek Xu",
151+
role: PortfolioRole.DIRECTOR,
152+
imageUrl: "/images/members/blank-pfp.png",
153+
},
154+
{
155+
name: "Dominic Cheung",
156+
role: PortfolioRole.DIRECTOR,
157+
imageUrl: "/images/members/blank-pfp.png",
158+
},
159+
],
160+
},
161+
{
162+
name: "Marketing",
163+
description: "Promotes CSESoc on our social media as well as creating supplementary marketing material to engage our audience.",
164+
members: [
165+
{
166+
name: "Aaron Lee",
167+
role: PortfolioRole.DIRECTOR,
168+
imageUrl: "/images/members/blank-pfp.png",
169+
},
170+
{
171+
name: "Lisa Lin",
172+
role: PortfolioRole.DIRECTOR,
173+
imageUrl: "/images/members/blank-pfp.png",
174+
},
175+
{
176+
name: "Zitian Qin",
177+
role: PortfolioRole.DIRECTOR,
178+
imageUrl: "/images/members/blank-pfp.png",
179+
},
180+
],
181+
},
182+
{
183+
name: "Media",
184+
description: "Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.",
185+
members: [
186+
{
187+
name: "Dylan Hu",
188+
role: PortfolioRole.DIRECTOR,
189+
imageUrl: "/images/members/blank-pfp.png",
190+
},
191+
{
192+
name: "Gloria Xi",
193+
role: PortfolioRole.DIRECTOR,
194+
imageUrl: "/images/members/blank-pfp.png",
195+
},
196+
{
197+
name: "Leo Ng Maisnam",
198+
role: PortfolioRole.DIRECTOR,
199+
imageUrl: "/images/members/blank-pfp.png",
200+
},
201+
],
202+
},
203+
{
204+
name: "Online",
205+
description: "Expands CSESoc's vibrant community into the virtual world, running online events and managing our online spaces to make sure everyone feels welcomed in our community.",
206+
members: [
207+
{
208+
name: "Amy Tian",
209+
role: PortfolioRole.DIRECTOR,
210+
imageUrl: "/images/members/blank-pfp.png",
211+
},
212+
{
213+
name: "Brandon Tan",
214+
role: PortfolioRole.DIRECTOR,
215+
imageUrl: "/images/members/blank-pfp.png",
216+
},
217+
],
218+
},
219+
{
220+
name: "Outreach",
221+
description: "Creates inclusive and approachable events targeted towards overlooked and underrepresented students.",
222+
members: [
223+
{
224+
name: "Joyce He",
225+
role: PortfolioRole.DIRECTOR,
226+
imageUrl: "/images/members/blank-pfp.png",
227+
},
228+
{
229+
name: "Sapphire Wildie",
230+
role: PortfolioRole.DIRECTOR,
231+
imageUrl: "/images/members/blank-pfp.png",
232+
},
233+
],
234+
},
235+
{
236+
name: "Socials",
237+
description: "Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!",
238+
members: [
239+
{
240+
name: "Davis Lim",
241+
role: PortfolioRole.DIRECTOR,
242+
imageUrl: "/images/members/blank-pfp.png",
243+
},
244+
{
245+
name: "Jennifer Yu",
246+
role: PortfolioRole.DIRECTOR,
247+
imageUrl: "/images/members/blank-pfp.png",
248+
},
249+
{
250+
name: "Susie Xia",
251+
role: PortfolioRole.DIRECTOR,
252+
imageUrl: "/images/members/blank-pfp.png",
253+
},
254+
],
255+
},
256+
];

Diff for: ‎frontend/public/images/members/blank-pfp.png

29.2 KB
Loading

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// import Image from 'next/image';
2+
import { PortfolioData } from "@/../public/data/portfolios";
3+
4+
interface PortfolioCardProps {
5+
portfolio: PortfolioData,
6+
}
7+
8+
// NOTE: Profile pictures can be added in the future
9+
const PortfolioCard = ({ portfolio }: PortfolioCardProps) => {
10+
return (
11+
<div>
12+
<p className="text-lg my-6">
13+
{portfolio.description}
14+
</p>
15+
16+
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
17+
{portfolio.members.map(member => (
18+
<div>
19+
{/* <Image
20+
src={member.imageUrl}
21+
alt={`${member.name} portrait`}
22+
width={150}
23+
height={150}
24+
/> */}
25+
26+
<div>
27+
<p>{member.name}</p>
28+
<p className="text-gray-500">{member.role}</p>
29+
</div>
30+
</div>
31+
))}
32+
</div>
33+
</div>
34+
);
35+
}
36+
37+
export default PortfolioCard;

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useState } from "react";
2+
import PortfolioCard from "./PortfolioCard";
3+
import { PORTFOLIOS } from "@/../public/data/portfolios";
4+
5+
const PortfolioDisplay = () => {
6+
const [selectedPortfolio, setSelectedPortfolio] = useState("Careers");
7+
8+
const names = PORTFOLIOS.map(port => port.name);
9+
10+
return (
11+
<div>
12+
<div className="flex justify-between max-w-full h-10 my-6 snap-x snap-mandatory overflow-auto hide-scrollbar">
13+
{names.map((name) => (
14+
<button
15+
className={`grow text-center border border-white ${name === selectedPortfolio ? "bg-[#3977F9]" : ""} p-2`}
16+
key={`btn-${name}`}
17+
onClick={() => setSelectedPortfolio(name)}
18+
>
19+
{name}
20+
</button>
21+
))}
22+
</div>
23+
24+
<PortfolioCard portfolio={PORTFOLIOS.find(port => port.name === selectedPortfolio) ?? PORTFOLIOS[0]} />
25+
</div>
26+
)
27+
}
28+
29+
export default PortfolioDisplay;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { socialLinks } from '@/../public/data/socialInfos';
55
const Footer = () => {
66
return (
77
<section>
8-
<div className="sm:flex justify-between pb-10">
8+
<div className="sm:flex justify-between py-10">
99
<div className="flex flex-col gap-10">
1010
<div className="flex items-center">
1111
<Link href="/" className="flex">

0 commit comments

Comments
 (0)