add mobile view to board page

src/components/board/Officer.astro

@@ -5,26 +5,25 @@ import Link from "next/link";
 const {name, position, picture, email} = Astro.props;
 ---
 <div class = "text-white">
-
     <div class = "text-ieee-yellow">
-        <Link href="s1hung@ucsd.edu" className = "flex items-center ml-[3%] py-[0.5vh]">
+        <Link href={`mailto:${email}`} className = "flex items-center ml-[3%] py-[0.5vh] group">
-            <MdEmail className = "text-[1.5vw] mr-[0.5%]"/>
+            <MdEmail className = "md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"/>
-            <p class = "text-[0.8vw]">
+            <p class = "md:text-[0.8vw] text-[2vw]">
                 {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">
+    <div class = "md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative">
-        <img src ={picture} alt = "officer" class = "w-[18vw] rounded-[10%] pt-[5%] pb-[3%] relative" >
+        <img src ={picture} alt = "officer" class = "md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]" >
-        <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]">
+        <div class = "bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]">
             <FaGear/>
         </div>
         <div class = "w-full flex justify-between px-[7%]">
-            <p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
+            <p data-inview class = " in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]">
                 {name}
             </p>
-            <div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
+            <div data-inview class = "md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] md:w-[8vw] w-[15vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
                 {position}
             </div>
         </div>

src/components/board/Officers.astro

@@ -7,28 +7,26 @@ import Officer from "../board/Officer.astro";
 import officers from "../../data/officers.json";
 ---
 
-<div class="text-white flex flex-col items-center mt-[15vh] mb-[10vh]">
+<div class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]">
-    <div data-inview class="relative w-[21vw] in-view:animate-fade-down">
+    <div data-inview class="relative w-[40vw] md:w-[21vw] in-view:animate-fade-down">
         <Image src={about} alt="About background image" />
         <Image
             src={neko}
             alt="About image"
-            class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[14vw] rounded-[2vw]"
+            class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
         />
     </div>
 
-    <div class="text-[2.5vw] flex items-center mt-[2vh]">
+    <div class="text-[5vw] md: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">
+    <p class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center">
-        Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget
+        Our board comprises 31 students of varying majors, colleges, and interests! Feel free to reach out for any questions about our position or experiences.
-        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]">
+    <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[10vh]">
         {
             officers.map((officer) => (
                 <Officer

src/data/officers.json

@@ -13,6 +13,34 @@
     "email": "sxxu@ucsd.edu",
     "type": ["Executives", "Internal"]
   },
+  {
+    "name": "Rana Singh",
+    "position": "Vice Chair External",
+    "picture": "https://placehold.co/800x800?text=RANA%20SINGH",
+    "email": "ras010@ucsd.edu",
+    "type": ["Executives"]
+  },
+  {
+    "name": "Rohil Kadekar",
+    "position": "Vice Chair Projects",
+    "picture": "/officers/rohil.jpg",
+    "email": "rkadekar@ucsd.edu",
+    "type": ["Executives", "Projects"]
+  },
+  {
+    "name": "Shipra Gudekar",
+    "position": "Vice Chair Events",
+    "picture": "/officers/shipra.jpg",
+    "email": "sgudekar@ucsd.edu",
+    "type": ["Executives", "Events"]
+  },
+  {
+    "name": "Lisa Liu",
+    "position": "Vice Chair Finance",
+    "picture": "/officers/lisa.jpg",
+    "email": "lil043@ucsd.edu",
+    "type": ["Executives"]
+  },
   {
     "name": "Charles Nguyen",
     "position": "Webmaster",
@@ -62,27 +90,6 @@
     "email": "c1uy@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",
@@ -97,13 +104,6 @@
     "email": "siy015@ucsd.edu",
     "type": ["Executives", "Events"]
   },
-  {
-    "name": "Rana Singh",
-    "position": "Vice Chair External",
-    "picture": "https://placehold.co/800x800?text=RANA%20SINGH",
-    "email": "ras010@ucsd.edu",
-    "type": ["Executives"]
-  },
   {
     "name": "Rafaella Gomes",
     "position": "Project Space Chair",
@@ -132,13 +132,6 @@
     "email": "ppincencia@ucsd.edu",
     "type": ["Projects"]
   },
-  {
-    "name": "Ritoban Roy-Chowdhury",
-    "position": "Supercomputing Chair",
-    "picture": "https://placehold.co/800x800?text=Ritoban%20Roy-Chowdhury",
-    "email": "rroychowdhury@ucsd.edu",
-    "type": ["Projects"]
-  },
   {
     "name": "Akhil Ram Shankar",
     "position": "Quarterly Projects Chair",
@@ -188,13 +181,6 @@
     "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",

src/pages/board.astro

@@ -8,12 +8,12 @@ import board from "../images/board.png";
 <Layout>
     <Image
         src={board}
-        alt="JOIN US"
+        alt="BOARD"
         class="absolute left-[1vw] w-[4vw] top-[15vh]"
     />
     <Image
         src={board}
-        alt="JOIN US"
+        alt="BOARD"
         class="absolute right-[1vw] w-[4vw] top-[15vh]"
     />
     <Officers />