centered and blended 404 page

src/components/board/Officers.astro

@@ -1,39 +1,43 @@
 ---
-import about from "../../../public/about.png";
+import about from "../../images/about.png";
 import { Image } from "astro:assets";
-import neko from "/public/neko.png";
+import neko from "../../images/neko.png";
 import { LiaDotCircle } from "react-icons/lia";
-import Officer from "../board/Officer.astro"
-import officers from "../../data/officers.json"
+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 mt-[15vh] mb-[10vh]">
     <div class="relative w-[21vw]">
-        <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]" />
+        <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]"
+        />
     </div>
 
-    <div class = "text-[2.5vw] flex items-center mt-[2vh]">
-        <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
-        <p>
-            MEET THE BOARD 
-        </p>
+    <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 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 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/components/core/Footer.astro

@@ -1,16 +1,19 @@
 ---
 import { Image } from "astro:assets";
 import Link from "next/link";
-import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg";
+import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
 import { IoHeart } from "react-icons/io5";
 ---
+
 <div class="w-full py-[2%] flex justify-center">
-    <div class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between">
+    <div
+        class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between"
+    >
         <Link href="/" className="hover:opacity-70 duration-300">
             <Image
-            class="w-[15vw]"
-            src={whiteLogoHorizontal}
-            alt="IEEE UCSD Logo"
+                class="w-[15vw]"
+                src={whiteLogoHorizontal}
+                alt="IEEE UCSD Logo"
             />
         </Link>
         <div class="flex items-center">
@@ -20,4 +23,4 @@ import { IoHeart } from "react-icons/io5";
             <IoHeart className=" text-ieee-blue-100 ml-[1vw] text-[1.5vw]" />
         </div>
     </div>
-</div>
+</div>

src/components/core/InView.astro

@@ -1,16 +1,20 @@
 <script>
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add("in-view");
-          console.log("Added 'in-view' class to:", entry.target);
-        } else {
-          entry.target.classList.remove("in-view");
-          console.log("Removed 'in-view' class from:", entry.target);
-        }
-      });
-    }, { threshold: 0.2 });
-  
-    document.querySelectorAll("[data-inview]").forEach((el) => observer.observe(el));
-  </script>
-  
+    const observer = new IntersectionObserver(
+        (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("in-view");
+                    console.log("Added 'in-view' class to:", entry.target);
+                } else {
+                    entry.target.classList.remove("in-view");
+                    console.log("Removed 'in-view' class from:", entry.target);
+                }
+            });
+        },
+        { threshold: 0.2 }
+    );
+
+    document
+        .querySelectorAll("[data-inview]")
+        .forEach((el) => observer.observe(el));
+</script>

src/components/core/Navbar.astro

@@ -1,15 +1,14 @@
 ---
 import { Image } from "astro:assets";
-import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg";
+import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
 import pages from "../../data/pages.json";
 ---
 
 <div class="md:w-full w-fit fixed z-10">
-    <div class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]">
-        <a
-        href="/"
-        class="hover:opacity-60 duration-300 hidden md:flex"
-        >
+    <div
+        class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
+    >
+        <a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
             <Image
                 class="w-[15vw]"
                 src={whiteLogoHorizontal}
@@ -76,7 +75,9 @@ import pages from "../../data/pages.json";
         id="mobile-menu"
         class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
     >
-        <div class="flex flex-col items-center h-[70vh] justify-evenly bg-black">
+        <div
+            class="flex flex-col items-center h-[70vh] justify-evenly bg-black"
+        >
             {
                 pages.map((page) => (
                     <a

src/components/core/Social.astro

@@ -1,49 +1,70 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import evan from "../../../public/evan.png"
-import { FaDiscord, FaFacebook} from "react-icons/fa";
+import evan from "../../images/evan.png";
+import { FaDiscord, FaFacebook } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import Link from "next/link";
 ---
 
-
 <div class="text-white flex flex-col items-center h-[65vh] justify-between">
     <div class="flex items-center text-[2.5vw]">
-        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <p>
-            Social Media
-        </p>
+        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+        <p>Social Media</p>
     </div>
 
     <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
-        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f
+        Lorem ipsum is placeholder text commonly used in the graphic, print, and
+        publishing industries f
     </p>
-    
-    <div class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90">
+
+    <div
+        class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90"
+    >
         <div class="w-2/5 flex justify-evenly ml-[5%]">
-            <Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
+            <Link
+                href="https://discord.gg/XxfjqZSjca"
+                target="_blank"
+                className="flex flex-col items-center"
+            >
+                <div
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                >
                     <FaDiscord />
                 </div>
                 <p class="text-[1.3vw] font-semibold">Discord</p>
             </Link>
 
-            <Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
+            <Link
+                href="https://www.facebook.com/ieeeucsd"
+                target="_blank"
+                className="flex flex-col items-center"
+            >
+                <div
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                >
                     <FaFacebook />
                 </div>
                 <p class="text-[1.3vw] font-semibold">Facebook</p>
             </Link>
 
-            <Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
+            <Link
+                href="https://www.instagram.com/ieee.ucsd"
+                target="_blank"
+                className="flex flex-col items-center"
+            >
+                <div
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                >
                     <RiInstagramFill />
                 </div>
                 <p class="text-[1.3vw] font-semibold">Instagram</p>
             </Link>
         </div>
-        <Image src={evan} alt="cat placeholder" class="absolute -bottom-[10vh] w-[25vw] right-0"/>
+        <Image
+            src={evan}
+            alt="cat placeholder"
+            class="absolute -bottom-[10vh] w-[25vw] right-0"
+        />
     </div>
-    
-</div>
+</div>

src/components/events/EventTitle.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import eventbg from "../../../public/eventbg.png";
+import eventbg from "../../images/eventbg.png";
 import { LiaDotCircle } from "react-icons/lia";
 ---
 

src/components/main_page/About.astro

@@ -1,52 +1,77 @@
 ---
-import about from "../../../public/about.png";
+import about from "../../images/about.png";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import about1 from "../../../public/about1.png";
-import about2 from "../../../public/about2.png";
-import about3 from "../../../public/about3.png";
-import about4 from "../../../public/about4.png";
----
+import about1 from "../../images/about1.png";
+import about2 from "../../images/about2.png";
+import about3 from "../../images/about3.png";
+import about4 from "../../images/about4.png";
 ---
 
-<div class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black">
+---
+
+<div
+    class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black"
+>
     <div class="w-1/2 flex justify-center pr-[5%] relative">
         <div class="relative w-[35vw]">
             <Image src={about} alt="About background image" />
-            <Image src={about4} alt="About image" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" />
+            <Image
+                src={about4}
+                alt="About image"
+                class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]"
+            />
+        </div>
+        <Image
+            src={about2}
+            alt="About image"
+            class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]"
+        />
+        <Image
+            src={about3}
+            alt="About image"
+            class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0"
+        />
+        <div
+            class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"
+        >
+        </div>
+        <div
+            class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"
+        >
         </div>
-        <Image src={about2} alt="About image" class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]" />
-        <Image src={about3} alt="About image" class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0" />
-        <div class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"/>
-        <div class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"/>
-        
     </div>
     <div class="w-1/2 text-white text-[1.3vw] font-light">
-        <p class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none">
+        <p
+            class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none"
+        >
             we are ...
         </p>
-        <div class = "text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]">
-            <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
-            <p>
-                About Us
-            </p>
+        <div
+            class="text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]"
+        >
+            <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
+            <p>About Us</p>
         </div>
         <p class="pl-[8%] mb-[3%]">
-            A diverse engineering community seeking to empower students
-             through hands-on projects, networking opportunities, and 
-             social events. Bonus points on having an open-access project studio!
+            A diverse engineering community seeking to empower students through
+            hands-on projects, networking opportunities, and social events.
+            Bonus points on having an open-access project studio!
         </p>
         <p class="pl-[8%] border-l-[0.1vw] border-white/40 pb-[10%]">
-            The Institute of Electrical and Electronics Engineers (IEEE) 
-            UC San Diego student branch is the second largest student chapter
-             in the world's largest professional organization. On the student 
-             level, we provide members with a plethora of ways to get involved!
+            The Institute of Electrical and Electronics Engineers (IEEE) UC San
+            Diego student branch is the second largest student chapter in the
+            world's largest professional organization. On the student level, we
+            provide members with a plethora of ways to get involved!
         </p>
         <div class="flex justify-end mt-[2%]">
-            <Link href="/join" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+            <Link
+                href="/join"
+                className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
+            >
                 LEARN MORE
             </Link>
         </div>
     </div>
-</div>
+</div>

src/components/main_page/Divider.astro

@@ -1,20 +1,22 @@
 ---
-import InView from "../../components/core/InView.astro"
+import InView from "../../components/core/InView.astro";
 ---
-<InView />
 
+<InView />
+<!-- This is the parent div -->
 <div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
-    <div class="w-3/5">
-        <p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
+    <!-- Notice that the data-inview can play as long as the in-view class is present -->
+    <div data-inview class="w-3/5 in-view:animate-flip-down">
+        <p
+            class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down"
+        >
             02
         </p>
-        <p class="text-white text-[2.5vw] font-light">
-            Amet Consectetur
-        </p>
-
+        <p class="text-white text-[2.5vw] font-light">Amet Consectetur</p>
     </div>
-    <p class="text-white text-[1.5vw]">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    <!-- Even if the data-inview is in the parent div, this animation will not play -->
+    <p class="text-white text-[1.5vw] in-view:animate-flip-down`">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim
     </p>
-</div >
+</div>

src/components/main_page/Landing.astro

@@ -2,34 +2,56 @@
 import { Image } from "astro:assets";
 import Link from "next/link";
 import { landing } from "../../data/landing";
-import landingimg from "../../../public/landing.png"
-import { FaDiscord, FaFacebook} from "react-icons/fa";
+import landingimg from "../../images/landing.png";
+import { FaDiscord, FaFacebook } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 ---
 
 <div class="w-full flex justify-between pt-[14vh]">
-    <div class=" pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw]">
-        <p class=" text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">UC San Diego IEEE</p>
-        <p class="font-bold text-[2.8vw] text-white mb-[10%]">Join one of the largest IEEE student branch in the US!</p>
-        <p class="text-white font-light text-[1.3vw]">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
+    <div
+        class="pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw]"
+    >
+        <p class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">
+            UC San Diego IEEE
+        </p>
+        <p class="font-bold text-[2.8vw] text-white mb-[10%]">
+            Join one of the largest IEEE student branch in the US!
+        </p>
+        <p class="text-white font-light text-[1.3vw]">
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat
+        </p>
 
         <div class="flex justify-end w-full mt-[8vh]">
             <div class="text-white text-[2.5vw] w-1/2 flex justify-between">
-                <Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
+                <Link
+                    href="https://discord.gg/XxfjqZSjca"
+                    target="_blank"
+                    className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
+                >
                     <FaDiscord />
                 </Link>
 
-                <Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
+                <Link
+                    href="https://www.facebook.com/ieeeucsd"
+                    target="_blank"
+                    className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
+                >
                     <FaFacebook />
                 </Link>
-                <Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
+                <Link
+                    href="https://www.instagram.com/ieee.ucsd"
+                    target="_blank"
+                    className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
+                >
                     <RiInstagramFill />
                 </Link>
             </div>
         </div>
-
     </div>
-    <div class="w-[46%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black">
-        <Image src={landingimg} alt="circuit" class="w-[95%]"/>
+    <div
+        class="w-[46%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
+    >
+        <Image src={landingimg} alt="circuit" class="w-[95%]" />
     </div>
 </div>

src/components/projects/QP.astro

@@ -2,33 +2,38 @@
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
 import Link from "next/link";
-import qp from "../../../public/qp.png"
+import qp from "../../images/qp.png";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
 ---
 
-
 <div class="text-white flex flex-col items-center my-[7%] relative">
     <div class="flex items-center text-[2.7vw] mb-[4%]">
-        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <p>
-            Quarterly Project
-        </p>
+        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+        <p>Quarterly Project</p>
     </div>
-    <Image src={qp} alt="qp showcase photo" class="w-[70vw] aspect-[2.5/1] rounded-full"/>
-    <Link href="/quarterly" className="absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md">
+    <Image
+        src={qp}
+        alt="qp showcase photo"
+        class="w-[70vw] aspect-[2.5/1] rounded-full"
+    />
+    <Link
+        href="/quarterly"
+        className="absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
+    >
         more details
-        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]"/>
+        <IoIosArrowDroprightCircle
+            className="ml-[0.5vw] text-[1.7vw] mt-[1%]"
+        />
     </Link>
-    <div class="w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]">
-        <p class="text-[1.4vw] mb-[2%]">
-            Quarterly Project
-        </p>
+    <div
+        class="w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
+    >
+        <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
         <p>
-            Getting started on hardware development or want to make your own project? 
-            Need something to put on your resume? 
-            IEEE's Quarterly Projects aims to provide students with project experience in a span of 10 weeks.
-            Check out QP page for more detail!
+            Getting started on hardware development or want to make your own
+            project? Need something to put on your resume? IEEE's Quarterly
+            Projects aims to provide students with project experience in a span
+            of 10 weeks. Check out QP page for more detail!
         </p>
     </div>
-    
-</div>
+</div>

src/components/qp/Carousel.astro

@@ -1,15 +1,20 @@
 ---
 import Subtitle from "../core/Subtitle.astro";
 import { Image } from "astro:assets";
-import qp from "../../../public/qp.png";
+import qp from "../../images/qp.png";
 ---
 
 <div class="flex flex-col items-center pb-[5%]">
     <Subtitle title="We Are Excited To See You Here!" />
 
     <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
-        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f
+        Lorem ipsum is placeholder text commonly used in the graphic, print, and
+        publishing industries f
     </p>
 
-    <Image src={qp} alt="board group photos" class=" w-1/2 rounded-[2vw] object-cover aspect-[2/1]"/>
-</div>
+    <Image
+        src={qp}
+        alt="board group photos"
+        class="w-1/2 rounded-[2vw] object-cover aspect-[2/1]"
+    />
+</div>

src/components/qp/Join.astro

@@ -1,36 +1,47 @@
 ---
-import { Image } from "astro:assets"
-import Link from "next/link"
+import { Image } from "astro:assets";
+import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
-import mentorship from "../../../public/mentorship.png"
-import jonathan from "../../../public/about3.png"
+import mentorship from "../../images/mentorship.png";
+import jonathan from "../../images/about3.png";
 ---
 
 <div class="flex justify-center mb-[10%]">
     <div class="flex w-[70%] items-center">
         <div class="w-1/2 flex justify-center h-full relative">
             <Image src={mentorship} alt="blue background" class="mr-[20%]" />
-            <Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0" />
+            <Image
+                src={jonathan}
+                alt="blue background"
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0"
+            />
         </div>
         <div class="w-1/2 font-light text-[1.2vw]">
             <div class="flex items-center text-[2.3vw] mb-[5%]">
-                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-                <p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow">
+                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+                <p
+                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow"
+                >
                     How to join
                 </p>
             </div>
-            <p class="my-[10%] ">
-                We will create a QP Application every quarter and send it out 
-                to prospective participants via the IEEE discord or Instagram page. 
+            <p class="my-[10%]">
+                We will create a QP Application every quarter and send it out to
+                prospective participants via the IEEE discord or Instagram page.
             </p>
             <p class="mb-[12%]">
-                URL to Drive Folder with every school year’s QP Application forms (3 per school year): 
+                URL to Drive Folder with every school year’s QP Application
+                forms (3 per school year):
             </p>
             <div class="w-full flex justify-center">
-                <Link href="/" target="_blank" className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"> 
+                <Link
+                    href="/"
+                    target="_blank"
+                    className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                >
                     JOIN
                 </Link>
             </div>
         </div>
     </div>
-</div>
+</div>

src/components/qp/Mentorship.astro

@@ -1,33 +1,40 @@
 ---
-import { Image } from "astro:assets"
-import Link from "next/link"
+import { Image } from "astro:assets";
+import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
-import mentorship from "../../../public/joinbg.png"
-import jonathan from "../../../public/about3.png"
+import mentorship from "../../images/joinbg.png";
+import jonathan from "../../images/about3.png";
 ---
 
 <div class="flex justify-center mt-[10%] mb-[3%]">
     <div class="flex w-[70%] items-center">
         <div class="w-1/2 font-light text-[1.2vw]">
             <div class="flex items-center text-[2.3vw] mb-[5%]">
-                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-                <p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow">
+                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+                <p
+                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
+                >
                     Mentorship
                 </p>
             </div>
-            <p class="my-[10%] ">
-                Mentors are a fundamental part of QP, providing teams
-                 with advice and guidance through the ideation and 
-                 execution of their project. Each team is paired with
-                  a mentor they can regularly consult for advice and insights.
-                 Mentors are matched with teams based on their expertise 
-                 and the team’s project focus, ensuring aligned support for each group.
+            <p class="my-[10%]">
+                Mentors are a fundamental part of QP, providing teams with
+                advice and guidance through the ideation and execution of their
+                project. Each team is paired with a mentor they can regularly
+                consult for advice and insights. Mentors are matched with teams
+                based on their expertise and the team’s project focus, ensuring
+                aligned support for each group.
             </p>
             <p class="mb-[12%]">
-                If you are interested in becoming a mentor, please follow this link to signup: 
+                If you are interested in becoming a mentor, please follow this
+                link to signup:
             </p>
             <div class="w-full flex justify-center">
-                <Link href="/" target="_blank" className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"> 
+                <Link
+                    href="/"
+                    target="_blank"
+                    className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                >
                     BECOME A MENTOR
                 </Link>
             </div>
@@ -35,7 +42,11 @@ import jonathan from "../../../public/about3.png"
 
         <div class="w-1/2 flex justify-center h-full items-center relative">
             <Image src={mentorship} alt="blue background" />
-            <Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]" />
+            <Image
+                src={jonathan}
+                alt="blue background"
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]"
+            />
         </div>
     </div>
-</div>
+</div>

src/components/robocub/Join.astro

@@ -2,25 +2,45 @@
 import Link from "next/link";
 import { GoArrowDownRight } from "react-icons/go";
 import { Image } from "astro:assets";
-import robocup from "../../../public/robocup.png";
+import robocup from "../../images/robocup.png";
 ---
 
 <div class="flex flex-col items-center relative my-[10%]">
-    <Image src={robocup} alt="robocub competition image" class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"/>
-    <Link href="/" target="_blank" className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]">
+    <Image
+        src={robocup}
+        alt="robocub competition image"
+        class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"
+    />
+    <Link
+        href="/"
+        target="_blank"
+        className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]"
+    >
         <div class="w-full flex justify-end items-center h-4/5">
-            <p class=" text-[4.5vw] font-bold w-fit">
-                We Are<br/>
+            <p class="text-[4.5vw] font-bold w-fit">
+                We Are<br />
                 Hiring
             </p>
         </div>
         <div class="text-[1vw] pt-[3%]">
-            <p>Join a community of beginner to experienced engineers from different disciplines and backgrounds</p>
-            <p>Fill out this application form (due week 2 of each quarter if space permits) </p>
+            <p>
+                Join a community of beginner to experienced engineers from
+                different disciplines and backgrounds
+            </p>
+            <p>
+                Fill out this application form (due week 2 of each quarter if
+                space permits)
+            </p>
         </div>
-        <div class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300">
-            <p class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light">Application form</p>
+        <div
+            class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
+        >
+            <p
+                class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
+            >
+                Application form
+            </p>
             <GoArrowDownRight />
         </div>
     </Link>
-</div>
+</div>

src/components/robocub/RoboTitle.astro

@@ -1,10 +1,16 @@
 ---
 import Title from "../core/Title.astro";
 import { Image } from "astro:assets";
-import model from "../../../public/model.png"
+import model from "../../images/model.png";
 ---
 
-<div class="flex items-center h-[60vh] relative w-full pl-[10%] mt-[3%] mb-[15%]">
+<div
+    class="flex items-center h-[60vh] relative w-full pl-[10%] mt-[3%] mb-[15%]"
+>
     <Title title="Robocup" />
-    <Image src={model} alt="Robocup robot model" class="absolute w-[50%] right-[10%] top-[5%]" />
-</div>
+    <Image
+        src={model}
+        alt="Robocup robot model"
+        class="absolute w-[50%] right-[10%] top-[5%]"
+    />
+</div>

src/data/officers.json

@@ -1,219 +1,219 @@
 [
-    {
-        "name": "Mustahsin Zarif",
-        "position": "Chair",
-        "picture": "/neko.png",
-        "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": "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",
-        "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": "/neko.png",
-        "email": "siy015@ucsd.edu",
-        "type": ["Executives", "Events"]
-    },
-    {
-        "name": "Rana Singh",
-        "position": "Vice Chair External",
-        "picture": "/neko.png",
-        "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": "/neko.png",
-        "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": "/neko.png",
-        "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": "Mustahsin Zarif",
+    "position": "Chair",
+    "picture": "/officers/zarif.png",
+    "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": "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",
+    "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": "https://placehold.co/800x800?text=SIN%20YIN%20YANG",
+    "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",
+    "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": "https://placehold.co/800x800?text=Ritoban%20Roy-Chowdhury",
+    "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": "https://placehold.co/800x800?text=FAHAD%20ALKHAZAM",
+    "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"]
+  }
 ]

src/pages/404.astro

@@ -4,19 +4,24 @@ import Link from "next/link";
 ---
 
 <Layout>
-
-    <div class = "w-fit h-screen flex flex-col items-center relative">
-
-        <img src = "/404.png" alt = "404 shing" class = "mr-[11%]">
-        <div class = "flex flex-col items-center absolute bottom-[27%]">
-            <p class = "font-extralight text-[1.2vw]">
-                Oops! You're Lost in the Circuit! 🔌⚡
-            </p>
-            <Link href = "/" className = "border-white/80 border-[0.12vw] rounded-[0.7vw] px-[8.5vw] py-[3%] font-extralight text-[1.2vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
-                Go Back Home
-            </Link>
+    <div class="h-screen w-full flex items-center justify-center">
+        <div class="flex flex-col items-center relative">
+            <img
+                src="/404.png"
+                alt="404 shing"
+                class="mr-[11%] [mask-image:radial-gradient(circle,black_10%,transparent_100%)]"
+            />
+            <div class="flex flex-col items-center absolute bottom-[27%]">
+                <p class="font-extralight text-[1.2vw]">
+                    Oops! You're Lost in the Circuit! 🔌⚡
+                </p>
+                <Link
+                    href="/"
+                    className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[8.5vw] py-[3%] font-extralight text-[1.2vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
+                >
+                    Go Back Home
+                </Link>
+            </div>
         </div>
-        
     </div>
-
 </Layout>

src/pages/board.astro

@@ -2,11 +2,19 @@
 import Layout from "../layouts/Layout.astro";
 import Officers from "../components/board/Officers.astro";
 import { Image } from "astro:assets";
-import board from "../../public/board.png";
+import board from "../images/board.png";
 ---
 
 <Layout>
-    <Image src={board} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[15vh]" />
-    <Image src={board} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[15vh]" />
-    <Officers/>
+    <Image
+        src={board}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[15vh]"
+    />
+    <Image
+        src={board}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[15vh]"
+    />
+    <Officers />
 </Layout>

src/pages/events.astro

@@ -2,14 +2,22 @@
 import Layout from "../layouts/Layout.astro";
 import EventTitle from "../components/events/EventTitle.astro";
 import { Image } from "astro:assets";
-import eventborder from "../../public/eventborder.png";
-import calendar from "../../public/calendar2.png";
+import eventborder from "../images/eventborder.png";
+import calendar from "../images/calendar2.png";
 import UpcomingEvents from "../components/events/UpcomingEvents.astro";
 ---
 
 <Layout>
-    <Image src={eventborder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
-    <Image src={eventborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
+    <Image
+        src={eventborder}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+    />
+    <Image
+        src={eventborder}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+    />
     <EventTitle />
     <UpcomingEvents />
     <div class="flex justify-center pb-[10%]">

src/pages/find.astro

@@ -4,13 +4,21 @@ import Social from "../components/core/Social.astro";
 import Findus from "../components/join/Findus.astro";
 import FindTitle from "../components/find/FindTitle.astro";
 import { Image } from "astro:assets";
-import event from "../../public/event.jpg";
-import contactbroder from "../../public/contactbroder.png"
+import event from "../images/event.jpg";
+import contactbroder from "../images/contactbroder.png";
 ---
 
 <Layout>
-    <Image src={contactbroder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
-    <Image src={contactbroder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
+    <Image
+        src={contactbroder}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+    />
+    <Image
+        src={contactbroder}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+    />
     <FindTitle />
     <div class="w-full flex justify-center">
         <Image

src/pages/join.astro

@@ -7,17 +7,25 @@ import Questions from "../components/core/Questions.astro";
 import Involvements from "../components/join/Involvements.astro";
 import Findus from "../components/join/Findus.astro";
 import { Image } from "astro:assets";
-import join from "../../public/join.png";
+import join from "../images/join.png";
 import faq from "../data/faq.json";
 ---
 
 <Layout>
-    <Image src={join} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
-    <Image src={join} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
-    <JoinTitle/>
-    <Involvements/>
-    <Social/>
-    <Questions faq={faq}/>
-    <Resources/>
-    <Findus/>
+    <Image
+        src={join}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+    />
+    <Image
+        src={join}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+    />
+    <JoinTitle />
+    <Involvements />
+    <Social />
+    <Questions faq={faq} />
+    <Resources />
+    <Findus />
 </Layout>

src/pages/projects.astro

@@ -4,12 +4,20 @@ import Title from "../components/core/Title.astro";
 import QP from "../components/projects/QP.astro";
 import AP from "../components/projects/AP.astro";
 import { Image } from "astro:assets";
-import projectsborder from "../../public/projectsborder.png";
+import projectsborder from "../images/projectsborder.png";
 ---
 
 <Layout>
-    <Image src={projectsborder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
-    <Image src={projectsborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
+    <Image
+        src={projectsborder}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+    />
+    <Image
+        src={projectsborder}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+    />
     <Title title="PROJECTS" />
     <QP />
     <AP />

src/pages/quarterly.astro

@@ -5,9 +5,9 @@ import About from "../components/core/About.astro";
 import Steps from "../components/qp/Steps.astro";
 import PastProjects from "../components/qp/PastProjects.astro";
 import { Image } from "astro:assets";
-import qp from "../../public/qp.png";
+import qp from "../images/qp.png";
 import Mentorship from "../components/qp/Mentorship.astro";
-import qpborder from "../../public/qpborder.png";
+import qpborder from "../images/qpborder.png";
 import Join from "../components/qp/Join.astro";
 import Carousel from "../components/qp/Carousel.astro";
 import Timeline from "../components/qp/Timeline.astro";

src/pages/robocup.astro

@@ -4,9 +4,9 @@ import Questions from "../components/core/Questions.astro";
 import faq from "../data/faq.json";
 import About from "../components/core/About.astro";
 import RoboTitle from "../components/robocub/RoboTitle.astro";
-import Link from "next/link"
+import Link from "next/link";
 import { Image } from "astro:assets";
-import roboborder from "../../public/roboborder.png";
+import roboborder from "../images/roboborder.png";
 import Join from "../components/robocub/Join.astro";
 import Contacts from "../components/robocub/Contacts.astro";
 import Subteams from "../components/robocub/Subteams.astro";
@@ -14,18 +14,33 @@ import Timeline from "../components/qp/Timeline.astro";
 ---
 
 <Layout>
-    <Image src={roboborder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
-    <Image src={roboborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
+    <Image
+        src={roboborder}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+    />
+    <Image
+        src={roboborder}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+    />
     <RoboTitle />
-    <About title="What is RoboCup?" text="UC San Diego’s RoboCup team is one of IEEE’s largest projects. Different subteams come together to build 6 autonomous soccer-playing robots to compete in the international RoboCup Small Sized League Competition every year. Learn more link to our website, picture of entire robot" />
+    <About
+        title="What is RoboCup?"
+        text="UC San Diego’s RoboCup team is one of IEEE’s largest projects. Different subteams come together to build 6 autonomous soccer-playing robots to compete in the international RoboCup Small Sized League Competition every year. Learn more link to our website, picture of entire robot"
+    />
     <div class="w-full flex justify-center">
-        <Link href="/" target="_blank" className="px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"> 
+        <Link
+            href="/"
+            target="_blank"
+            className="px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+        >
             Past Team Description Paper
         </Link>
     </div>
     <Subteams />
     <Timeline />
-    <Join/>
-    <Questions faq={faq}/>
-    <Contacts/>
+    <Join />
+    <Questions faq={faq} />
+    <Contacts />
 </Layout>

tailwind.config.mjs

@@ -24,5 +24,11 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-motion"), require("tailwindcss-animated")],
+  plugins: [
+    require("tailwindcss-motion"),
+    require("tailwindcss-animated"),
+    function ({ addVariant }) {
+      addVariant("in-view", "&.in-view");
+    },
+  ],
 };