Skip to content

Commit 5619dca

Browse files
PenTest-duckPenTest-duck
committed
mvp - subcom display selection
1 parent 53d0d93 commit 5619dca

File tree

6 files changed

+376
-196
lines changed

6 files changed

+376
-196
lines changed

‎frontend/public/data/portfolios.ts

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
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: "Plan 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 infrastructure. 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+
name: "Chris Yoo",
161+
role: PortfolioRole.SUBCOM,
162+
imageUrl: "/images/members/2024/chris-yoo.png",
163+
},
164+
{
165+
name: "John Doe",
166+
role: PortfolioRole.SUBCOM,
167+
imageUrl: "/images/members/blank-pfp.png",
168+
},
169+
{
170+
name: "John Doe",
171+
role: PortfolioRole.SUBCOM,
172+
imageUrl: "/images/members/blank-pfp.png",
173+
},
174+
{
175+
name: "John Doe",
176+
role: PortfolioRole.SUBCOM,
177+
imageUrl: "/images/members/blank-pfp.png",
178+
},
179+
{
180+
name: "John Doe",
181+
role: PortfolioRole.SUBCOM,
182+
imageUrl: "/images/members/blank-pfp.png",
183+
},
184+
{
185+
name: "John Doe",
186+
role: PortfolioRole.SUBCOM,
187+
imageUrl: "/images/members/blank-pfp.png",
188+
},
189+
{
190+
name: "John Doe",
191+
role: PortfolioRole.SUBCOM,
192+
imageUrl: "/images/members/blank-pfp.png",
193+
},
194+
{
195+
name: "John Doe",
196+
role: PortfolioRole.SUBCOM,
197+
imageUrl: "/images/members/blank-pfp.png",
198+
},
199+
],
200+
},
201+
{
202+
name: "Marketing",
203+
description: "Promotes CSESoc on our social media as well as create supplementary marketing material to engage our audience.",
204+
members: [
205+
{
206+
name: "Aaron Lee",
207+
role: PortfolioRole.DIRECTOR,
208+
imageUrl: "/images/members/blank-pfp.png",
209+
},
210+
{
211+
name: "Lisa Lin",
212+
role: PortfolioRole.DIRECTOR,
213+
imageUrl: "/images/members/blank-pfp.png",
214+
},
215+
{
216+
name: "Zitian Qin",
217+
role: PortfolioRole.DIRECTOR,
218+
imageUrl: "/images/members/blank-pfp.png",
219+
},
220+
],
221+
},
222+
{
223+
name: "Media",
224+
description: "Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.",
225+
members: [
226+
{
227+
name: "Dylan Hu",
228+
role: PortfolioRole.DIRECTOR,
229+
imageUrl: "/images/members/blank-pfp.png",
230+
},
231+
{
232+
name: "Gloria Xi",
233+
role: PortfolioRole.DIRECTOR,
234+
imageUrl: "/images/members/blank-pfp.png",
235+
},
236+
{
237+
name: "Leo Ng Maisnam",
238+
role: PortfolioRole.DIRECTOR,
239+
imageUrl: "/images/members/blank-pfp.png",
240+
},
241+
],
242+
},
243+
{
244+
name: "Online",
245+
description: "Expands CSESoc's vibrant community into the virtual world. Includes running events online and managing our online spaces to make sure everyone feels welcomed in our community.",
246+
members: [
247+
{
248+
name: "Amy Tian",
249+
role: PortfolioRole.DIRECTOR,
250+
imageUrl: "/images/members/blank-pfp.png",
251+
},
252+
{
253+
name: "Brandon Tan",
254+
role: PortfolioRole.DIRECTOR,
255+
imageUrl: "/images/members/blank-pfp.png",
256+
},
257+
],
258+
},
259+
{
260+
name: "Outreach",
261+
description: "Creates inclusive and approachable events targeted towards overlooked and underrepresented students.",
262+
members: [
263+
{
264+
name: "Joyce He",
265+
role: PortfolioRole.DIRECTOR,
266+
imageUrl: "/images/members/blank-pfp.png",
267+
},
268+
{
269+
name: "Sapphire Wildie",
270+
role: PortfolioRole.DIRECTOR,
271+
imageUrl: "/images/members/blank-pfp.png",
272+
},
273+
],
274+
},
275+
{
276+
name: "Socials",
277+
description: "Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!",
278+
members: [
279+
{
280+
name: "Davis Lim",
281+
role: PortfolioRole.DIRECTOR,
282+
imageUrl: "/images/members/blank-pfp.png",
283+
},
284+
{
285+
name: "Jennifer Yu",
286+
role: PortfolioRole.DIRECTOR,
287+
imageUrl: "/images/members/blank-pfp.png",
288+
},
289+
{
290+
name: "Susie Xia",
291+
role: PortfolioRole.DIRECTOR,
292+
imageUrl: "/images/members/blank-pfp.png",
293+
},
294+
],
295+
},
296+
];

‎frontend/public/images/members/2024/chris-yoo.png

831 KB
Loading

‎frontend/public/images/members/blank-pfp.png

29.2 KB
Loading

‎frontend/src/components/About/PortfolioCard.tsx

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

‎frontend/src/components/About/PortfolioDisplay.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from "react";
2+
import PortfolioCard from "./PortfolioCard";
3+
import { PortfolioRole, 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+
const portfolioMember = (name: string, role: PortfolioRole) => {
11+
return (
12+
<div>
13+
<p>{name}</p>
14+
<p>{role}</p>
15+
</div>
16+
);
17+
};
18+
19+
return (
20+
<div>
21+
<div className="flex justify-between max-w-full h-10 my-6 snap-x snap-mandatory overflow-scroll hide-scrollbar">
22+
{names.map((name) => (
23+
<button
24+
className="grow text-center border border-white bg-blue-700 p-2"
25+
key={`btn-${name}`}
26+
onClick={() => setSelectedPortfolio(name)}
27+
>
28+
{name}
29+
</button>
30+
))}
31+
</div>
32+
33+
<PortfolioCard portfolio={PORTFOLIOS.find(port => port.name === selectedPortfolio) ?? PORTFOLIOS[0]} />
34+
</div>
35+
)
36+
}
37+
38+
export default PortfolioDisplay;

0 commit comments

Comments
 (0)