add officers

src/components/board/Officer.astro

@@ -2,29 +2,30 @@
 import { FaGear } from "react-icons/fa6";
 import { MdEmail } from "react-icons/md";
 import Link from "next/link";
+const {name, position, picture, email} = Astro.props;
 ---
-<div class = "text-white my-[5vw]">
+<div class = "text-white">
 
     <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
+                {email}
             </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" >
+        <img src ={picture} alt = "officer" 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]">
+            <p class = "text-[2vw] font-light leading-[4.5vh]">
-                Shing Hung
+                {name}
             </p>
-            <div class = "text-[0.8vw] w-[8vw] h-[3.2vh] border-[0.11vw] border-white/90 rounded-full flex items-center justify-center">
+            <div class = "text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
-                Webmaster
+                {position}
             </div>
         </div>
     </div>

src/components/board/Officers.astro

@@ -1,23 +1,39 @@
 ---
 import about from "../../../public/about.png";
 import { Image } from "astro:assets";
-import shing from "../../../public/officers/shing.jpg";
+import neko from "/public/neko.png";
 import { LiaDotCircle } from "react-icons/lia";
+import Officer from "../board/Officer.astro"
+import officers from "../../data/officers.json"
 ---
 <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]" />
+        <Image src={neko} 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]">
+    <div class = "text-[2.5vw] flex items-center mt-[2vh]">
         <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
         <p>
             MEET THE BOARD 
         </p>
     </div>
 
+    <p class = "text-[1.3vw] w-[56%] my-[3%] font-extralight text-center">
+        Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada. Tellus nibh vivamus tempus molestie tristique quis
+    </p>
+
+    <div class = "grid gap-[3vw] grid-cols-3 mt-[10vh]">
+        {officers.map((officer)=>(
+            <Officer
+            name = {officer.name}
+            position = {officer.position}
+            picture = {officer.picture}
+            email = {officer.email}
+            />
+        ))}
+    </div>
     
 </div>
 

src/data/officers.json

@@ -2,7 +2,7 @@
     {
         "name": "Mustahsin Zarif",
         "position": "Chair",
-        "picture": "/officers/zarif.jpg",
+        "picture": "/../public/neko.png",
         "email": "mmzarif@ucsd.edu",
         "type": ["Executives"]
     },
@@ -20,6 +20,48 @@
         "email": "cmn010@ucsd.edu",
         "type": ["Internal"]
     },
+    {
+        "name": "Shing Hung",
+        "position": "Webmaster",
+        "picture": "/officers/shing.jpg",
+        "email": "s1hung@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Andy Smithwick",
+        "position": "Webmaster",
+        "picture": "/officers/andy.jpg",
+        "email": "asmithwick@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"]
+    },
     {
         "name": "Shipra Gudekar",
         "position": "Vice Chair Events",
@@ -51,14 +93,14 @@
     {
         "name": "Sin Yin Yang",
         "position": "Events Coordinator",
-        "picture": "/officers/sinyin.jpg",
+        "picture": "/../public/neko.png",
         "email": "siy015@ucsd.edu",
         "type": ["Executives", "Events"]
     },
     {
         "name": "Rana Singh",
         "position": "Vice Chair External",
-        "picture": "/officers/rana.jpg",
+        "picture": "/../public/neko.png",
         "email": "ras010@ucsd.edu",
         "type": ["Executives"]
     },
@@ -93,7 +135,7 @@
     {
         "name": "Ritoban Roy-Chowdhury",
         "position": "Supercomputing Chair",
-        "picture": "/officers/ritoban.jpg",
+        "picture": "/../public/neko.png",
         "email": "rroychowdhury@ucsd.edu",
         "type": ["Projects"]
     },
@@ -128,7 +170,7 @@
     {
         "name": "Fahad Alkhazam",
         "position": "Technical Chair",
-        "picture": "/officers/fahad.jpg",
+        "picture": "/../public/neko.png",
         "email": "falkhazam@ucsd.edu",
         "type": ["Events"]
     },
@@ -173,48 +215,5 @@
         "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"]
     }
 ]