add officer component

src/components/board/Officer.astro

@@ -0,0 +1,32 @@
+---
+import { FaGear } from "react-icons/fa6";
+import { MdEmail } from "react-icons/md";
+import Link from "next/link";
+---
+<div class = "text-white my-[5vw]">
+
+    <div class = "text-ieee-yellow">
+        <Link href="s1hung@ucsd.edu" className = "flex items-center ml-[3%] py-[0.5vh]">
+            <MdEmail className = "text-[1.5vw] mr-[0.5%]"/>
+            <p class = "text-[0.8vw]">
+                s1hung@ucsd.edu
+            </p>
+        </Link>
+    </div>
+
+    <div class = "w-[20vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center">
+        <img src = "/officers/shing.jpg" alt = "big face shing" class = "w-[18vw] rounded-[10%] pt-[5%] pb-[3%] relative" >
+        <div class = "bg-white w-fit rounded-full aspect-square p-[0.4vw] text-ieee-black text-[1.8vw] absolute ml-[13.5vw] mt-[3vh]">
+            <FaGear/>
+        </div>
+        <div class = "w-full flex justify-between px-[7%]">
+            <p class = "text-[2vw] font-light leading-[4.5vh] mt-[1.5vh]">
+                Shing Hung
+            </p>
+            <div class = "text-[0.8vw] w-[8vw] h-[3.2vh] border-[0.11vw] border-white/90 rounded-full flex items-center justify-center">
+                Webmaster
+            </div>
+        </div>
+    </div>
+    
+</div>

src/components/board/Officers.astro

@@ -0,0 +1,23 @@
+---
+import about from "../../../public/about.png";
+import { Image } from "astro:assets";
+import shing from "../../../public/officers/shing.jpg";
+import { LiaDotCircle } from "react-icons/lia";
+---
+<div class = "text-white flex flex-col items-center my-[10vh]">
+
+    <div class="relative w-[21vw]">
+        <Image src={about} alt="About background image"/>
+        <Image src={shing} alt="About image" class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[14vw] rounded-[2vw]" />
+    </div>
+
+    <div class = "text-[2.5vw] flex items-center mt-[5vh]">
+        <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
+        <p>
+            MEET THE BOARD 
+        </p>
+    </div>
+
+    
+</div>
+

src/data/officers.json

@@ -0,0 +1,220 @@
+[
+    {
+        "name": "Mustahsin Zarif",
+        "position": "Chair",
+        "picture": "/officers/zarif.jpg",
+        "email": "mmzarif@ucsd.edu",
+        "type": ["Executives"]
+    },
+    {
+        "name": "Stephanie Xu",
+        "position": "Vice Chair Internal",
+        "picture": "/officers/steph.jpg",
+        "email": "sxxu@ucsd.edu",
+        "type": ["Executives", "Internal"]
+    },
+    {
+        "name": "Charles Nguyen",
+        "position": "Webmaster",
+        "picture": "/officers/charles.jpg",
+        "email": "cmn010@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Shipra Gudekar",
+        "position": "Vice Chair Events",
+        "picture": "/officers/shipra.jpg",
+        "email": "sgudekar@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Rohil Kadekar",
+        "position": "Vice Chair Projects",
+        "picture": "/officers/rohil.jpg",
+        "email": "rkadekar@ucsd.edu",
+        "type": ["Executives", "Projects"]
+    },
+    {
+        "name": "Lisa Liu",
+        "position": "Vice Chair Finance",
+        "picture": "/officers/lisa.jpg",
+        "email": "lil043@ucsd.edu",
+        "type": ["Executives"]
+    },
+    {
+        "name": "Erik Duarte",
+        "position": "Events Coordinator",
+        "picture": "/officers/erik.jpg",
+        "email": "Erduarte@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Sin Yin Yang",
+        "position": "Events Coordinator",
+        "picture": "/officers/sinyin.jpg",
+        "email": "siy015@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Rana Singh",
+        "position": "Vice Chair External",
+        "picture": "/officers/rana.jpg",
+        "email": "ras010@ucsd.edu",
+        "type": ["Executives"]
+    },
+    {
+        "name": "Rafaella Gomes",
+        "position": "Project Space Chair",
+        "picture": "/officers/rafaella.jpg",
+        "email": "ragomes@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Terri Tai",
+        "position": "Robocup Soccer Chair",
+        "picture": "/officers/terri.jpg",
+        "email": "y2tai@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Raymond Rada",
+        "position": "Robocup Soccer Chair",
+        "picture": "/officers/raymond.jpg",
+        "email": "rrada@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Philip Pincencia",
+        "position": "Signal Processing Chair",
+        "picture": "/officers/philip.jpg",
+        "email": "ppincencia@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Ritoban Roy-Chowdhury",
+        "position": "Supercomputing Chair",
+        "picture": "/officers/ritoban.jpg",
+        "email": "rroychowdhury@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Akhil Ram Shankar",
+        "position": "Quarterly Projects Chair",
+        "picture": "/officers/akhil.jpg",
+        "email": "aramshankar@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Jonathan Zhou",
+        "position": "Quarterly Projects Chair",
+        "picture": "/officers/jonathan.jpg",
+        "email": "jtzhou@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Ashlee Young",
+        "position": "Professional Chair",
+        "picture": "/officers/ashlee.jpg",
+        "email": "asy001@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Allie Dinh",
+        "position": "Professional Chair",
+        "picture": "/officers/allie.jpg",
+        "email": "ald012@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Fahad Alkhazam",
+        "position": "Technical Chair",
+        "picture": "/officers/fahad.jpg",
+        "email": "falkhazam@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Pranav Mehta",
+        "position": "Technical Chair",
+        "picture": "/officers/pranav.jpg",
+        "email": "p3mehta@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Ridhi Srikanth",
+        "position": "Technical Chair",
+        "picture": "/officers/ridhi.jpg",
+        "email": "rsrikanth@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Dihan Lin",
+        "position": "Outreach Chair",
+        "picture": "/officers/dihan.jpg",
+        "email": "dil009@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Anika Agarwal",
+        "position": "Outreach Chair",
+        "picture": "/officers/anika.jpg",
+        "email": "ana012@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Anupama Nambiar",
+        "position": "Social Chair",
+        "picture": "/officers/anu.jpg",
+        "email": "annambiar@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Dhruv Roy Choudhary",
+        "position": "Social Chair",
+        "picture": "/officers/dhruv.jpg",
+        "email": "dchoudhary@ucsd.edu",
+        "type": ["Events"]
+    },
+
+    {
+        "name": "Andy Smithwick",
+        "position": "Webmaster",
+        "picture": "/officers/andy.jpg",
+        "email": "asmithwick@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Shing Hung",
+        "position": "Webmaster",
+        "picture": "/officers/shing.jpg",
+        "email": "s1hung@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Stella Ji",
+        "position": "Marketing Chair",
+        "picture": "/officers/stella.jpg",
+        "email": "seji@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Lauren Vo",
+        "position": "Marketing Chair",
+        "picture": "/officers/lauren.jpg",
+        "email": "lavo@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Wan-Rong (Emma) Leung",
+        "position": "Design Chair",
+        "picture": "/officers/emma.jpg",
+        "email": "waleung@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Christine Uy",
+        "position": "Design Chair",
+        "picture": "/officers/christine.jpg",
+        "email": "c1uy@ucsd.edu",
+        "type": ["Internal"]
+    }
+]

src/pages/board.astro

@@ -1,8 +1,8 @@
 ---
-import ProjectSection from "../components/projects/ProjectSection.astro";
 import Layout from "../layouts/Layout.astro";
+import Officers from "../components/board/Officers.astro";
 ---
 
 <Layout>
-    <ProjectSection />
+    <Officers/>
 </Layout>