[CW2-53] Subcom display selection

frontend/public/data/execs.ts

@@ -0,0 +1,45 @@
+// TODO: Combine with portfolios.ts
+
+export type Exec = {
+  name: string,
+  role: string,
+};
+
+export const EXECS: Exec[] = [
+  {
+    name: "Elizabeth Zhu Chan",
+    role: "Co-President",
+  },
+  {
+    name: "Lesley Lu",
+    role: "Co-President",
+  },
+  {
+    name: "Ivan Chan",
+    role: "Secretary",
+  },
+  {
+    name: "Justin Son",
+    role: "Treasurer",
+  },
+  {
+    name: "Sophie Khov",
+    role: "Arc Delegate",
+  },
+  {
+    name: "Catherine Kim",
+    role: "Grievance, Equity, Diversity and Inclusion Officer",
+  },
+  {
+    name: "Amy Liu",
+    role: "Vice President (Internals)",
+  },
+  {
+    name: "Nicole Jiang",
+    role: "Vice President (Externals)",
+  },
+  {
+    name: "Matthew Lim",
+    role: "Vice President (Technicals)",
+  },
+];

frontend/public/data/portfolios.ts

@@ -0,0 +1,256 @@
+export type PortfolioData = {
+    name: string,
+    description: string,
+    members: PortfolioMember[],
+};
+
+export type PortfolioMember = {
+    name: string,
+    role: PortfolioRole,
+    imageUrl: string;
+}
+
+export enum PortfolioRole {
+    DIRECTOR = "Director",
+    SUBCOM = "Subcommittee",
+}
+
+export const PORTFOLIOS: PortfolioData[] = [
+    {
+        name: "Careers",
+        description: "Facilitates industry sponsor relations, as well as creating events focused on interpersonal development and networking.",
+        members: [
+            {
+                name: "Eric Kang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jasmine Xian",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Max Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Competitions",
+        description: "Organises a variety of contests to empower students beyond coursework and allow them meet others.",
+        members: [
+            {
+                name: "Aliff Azlan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Haibing Wang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Diego Untalan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Creative",
+        description: "Lays the groundwork for CSESoc's aesthetic branding, providing an outlet for creative expression.",
+        members: [
+            {
+                name: "Anna Wang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jordan Djamaan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Shabinda Sarkaria",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Education",
+        description: "Teaches interesting technical skills to the community, whether that's through workshops, articles, or programs.",
+        members: [
+            {
+                name: "Alina Jin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "JJ Roberts-White",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Liam Smith",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Events",
+        description: "Plans a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!",
+        members: [
+            {
+                name: "Emma Nguyen",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jalaj Jain",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jenny Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "HR",
+        description: "Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.",
+        members: [
+            {
+                name: "Aryan Chauhan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Edwin Tang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jasmine Guan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "IT",
+        description: "Oversees the development of the CSESoc's internal projects and plays an active role in the technical aspects of our society.",
+        members: [
+            {
+                name: "Derek Xu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Dominic Cheung",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Marketing",
+        description: "Promotes CSESoc on our social media as well as creating supplementary marketing material to engage our audience.",
+        members: [
+            {
+                name: "Aaron Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Lisa Lin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Zitian Qin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Media",
+        description: "Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.",
+        members: [
+            {
+                name: "Dylan Hu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Gloria Xi",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Leo Ng Maisnam",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Online",
+        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.",
+        members: [
+            {
+                name: "Amy Tian",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Brandon Tan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Outreach",
+        description: "Creates inclusive and approachable events targeted towards overlooked and underrepresented students.",
+        members: [
+            {
+                name: "Joyce He",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Sapphire Wildie",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Socials",
+        description: "Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!",
+        members: [
+            {
+                name: "Davis Lim",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jennifer Yu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Susie Xia",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+];

frontend/src/components/About/PortfolioCard.tsx

@@ -0,0 +1,37 @@
+// import Image from 'next/image';
+import { PortfolioData } from "@/../public/data/portfolios";
+
+interface PortfolioCardProps {
+  portfolio: PortfolioData,
+}
+
+// NOTE: Profile pictures can be added in the future
+const PortfolioCard = ({ portfolio }: PortfolioCardProps) => {
+  return (
+    <div>
+      <p className="text-lg my-6">
+        {portfolio.description}
+      </p>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {portfolio.members.map(member => (
+          <div>
+            {/* <Image
+              src={member.imageUrl}
+              alt={`${member.name} portrait`}
+              width={150}
+              height={150}
+            /> */}
+
+            <div>
+              <p>{member.name}</p>
+              <p className="text-gray-500">{member.role}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PortfolioCard;

frontend/src/components/About/PortfolioDisplay.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import PortfolioCard from "./PortfolioCard";
+import { PORTFOLIOS } from "@/../public/data/portfolios";
+
+const PortfolioDisplay = () => {
+  const [selectedPortfolio, setSelectedPortfolio] = useState("Careers");
+
+  const names = PORTFOLIOS.map(port => port.name);
+
+  return (
+    <div>
+      <div className="flex justify-between max-w-full h-10 my-6 snap-x snap-mandatory overflow-auto hide-scrollbar">
+        {names.map((name) => (
+          <button 
+            className={`grow text-center border border-white ${name === selectedPortfolio ? "bg-[#3977F9]" : ""} p-2`} 
+            key={`btn-${name}`}
+            onClick={() => setSelectedPortfolio(name)}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+
+      <PortfolioCard portfolio={PORTFOLIOS.find(port => port.name === selectedPortfolio) ?? PORTFOLIOS[0]} />
+    </div>
+  )
+}
+
+export default PortfolioDisplay;

frontend/src/components/Footer.tsx

@@ -5,7 +5,7 @@ import { socialLinks } from '@/../public/data/socialInfos';
 const Footer = () => {
   return (
     <section>
-      <div className="sm:flex justify-between pb-10">
+      <div className="sm:flex justify-between py-10">
         <div className="flex flex-col gap-10">
           <div className="flex items-center">
             <Link href="/" className="flex">