update to webp

src/components/board/Officer.astro

@@ -2,6 +2,7 @@
 import { FaGear } from "react-icons/fa6";
 import { MdEmail } from "react-icons/md";
 import Link from "next/link";
+import { Image } from "astro:assets";
 const { name, position, picture, email } = Astro.props;
 ---
 
@@ -23,10 +24,12 @@ const { name, position, picture, email } = Astro.props;
     <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
+        <Image
             src={picture}
             alt="officer"
             class="md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]"
+            width={334}
+            height={440}
         />
         <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]"

src/components/board/Officers.astro

@@ -1,7 +1,7 @@
 ---
-import about from "../../images/about.png";
+import about from "../../images/about.webp";
 import { Image } from "astro:assets";
-import neko from "../../images/neko.png";
+import neko from "../../images/neko.webp";
 import { LiaDotCircle } from "react-icons/lia";
 import Officer from "../board/Officer.astro";
 import Filter from "../board/Filter.astro";

src/components/core/Social.astro

@@ -1,27 +1,33 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import jellyfish from "../../images/jellyfish.png";
+import jellyfish from "../../images/jellyfish.webp";
 import { FaDiscord } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import { MdEmail } from "react-icons/md";
 import Link from "next/link";
 ---
 
-<div class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between">
+<div
+    class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between"
+>
     <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
         <p>Social Media</p>
     </div>
 
     <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%]">
-        Stay connected with us on Discord, Facebook, and Instagram! We regularly post information on upcoming events and competitions.
+        Stay connected with us on Discord, Facebook, and Instagram! We regularly
+        post information on upcoming events and competitions.
     </p>
 
     <div
         class="md:w-[85%] w-full rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative md:h-[15vw] h-[30vw] flex items-center text-white/90"
     >
-        <div data-inview class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000">
+        <div
+            data-inview
+            class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000"
+        >
             <Link
                 href="https://www.instagram.com/ieee.ucsd"
                 target="_blank"
@@ -32,7 +38,9 @@ import Link from "next/link";
                 >
                     <RiInstagramFill />
                 </div>
-                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Instagram</p>
+                <p class="text-[2vw] md:text-[1.3vw] font-semibold">
+                    Instagram
+                </p>
             </Link>
 
             <Link

src/components/events/EventTitle.astro

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

src/components/main_page/About.astro

@@ -1,11 +1,11 @@
 ---
-import about from "../../images/about.png";
+import about from "../../images/about.webp";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import about2 from "../../images/about2.png";
+import about2 from "../../images/about2.webp";
-import about3 from "../../images/about3.png";
+import about3 from "../../images/about3.webp";
-import about4 from "../../images/about4.png";
+import about4 from "../../images/about4.webp";
 ---
 
 <div
@@ -13,7 +13,11 @@ import about4 from "../../images/about4.png";
 >
     <div class="w-1/2 flex justify-center pr-[5%] relative h-full">
         <div class="relative w-[35vw]">
-            <Image src={about} alt="About background image" class="md:visible invisible" />
+            <Image
+                src={about}
+                alt="About background image"
+                class="md:visible invisible"
+            />
             <Image
                 src={about4}
                 alt="About image"

src/components/main_page/Landing.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import Link from "next/link";
-import landingimg from "../../images/landing.png";
+import landingimg from "../../images/landing.webp";
 import { FaDiscord } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import { MdEmail } from "react-icons/md";
@@ -11,18 +11,30 @@ import { MdEmail } from "react-icons/md";
     <div
         class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw]"
     >
-        <p data-inview class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down">
+        <p
+            data-inview
+            class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down"
+        >
             UC San Diego IEEE
         </p>
-        <p data-inview class="animate-ease-in-out font-bold  text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right">
+        <p
+            data-inview
+            class="animate-ease-in-out font-bold text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right"
+        >
             Join one of the largest IEEE student branch in the US!
         </p>
         <p class="text-white font-light text-[2vw] md:text-[1.3vw]">
-            IEEE @ UCSD is a pre-professional organization aiming to empower engineers with practical experience through hands-on project opportunities, insightful workshops, and panels with industry professionals. We are a branch organization of the International IEEE organization. 
+            IEEE @ UCSD is a pre-professional organization aiming to empower
+            engineers with practical experience through hands-on project
+            opportunities, insightful workshops, and panels with industry
+            professionals. We are a branch organization of the International
+            IEEE organization.
         </p>
 
         <div class="flex justify-end w-full mt-[6%]">
-            <div class="text-white  text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between">
+            <div
+                class="text-white text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between"
+            >
                 <Link
                     href="https://www.instagram.com/ieee.ucsd"
                     target="_blank"
@@ -51,6 +63,10 @@ import { MdEmail } from "react-icons/md";
     <div
         class="md:w-[46%] w-[40%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
     >
-        <Image src={landingimg} alt="circuit" class="w-[95%] md:h-[40vw] h-[60vw] object-contain" />
+        <Image
+            src={landingimg}
+            alt="circuit"
+            class="w-[95%] md:h-[40vw] h-[60vw] object-contain"
+        />
     </div>
 </div>

src/components/projects/ProjectSection.astro

@@ -3,20 +3,23 @@ import annualProjects from "../../data/annualProjects.json";
 import { FaGear } from "react-icons/fa6";
 import { GoArrowDownRight } from "react-icons/go";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
+import { Image } from "astro:assets";
 ---
+
 <div class="flex gap-[1.5vw] h-[50vh]">
     {
-        Object.entries(annualProjects).map(
+        Object.entries(annualProjects).map(([title, project], index) => (
-            ([title, project], index) => (
             <a
                 href={project.url || "#"}
                 class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
                 data-project={index + 1}
                 target={title === "Supercomputing" ? "_blank" : "_self"}
             >
-                    <img
+                <Image
                     src={project.image}
                     alt={`${title} Project`}
+                    width={668}
+                    height={990}
                     class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110"
                 />
                 <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
@@ -41,8 +44,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
                     <FaGear />
                 </div>
             </a>
-            )
+        ))
-        )
     }
 </div>
 

src/components/projects/QP.astro

@@ -2,7 +2,7 @@
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
 import Link from "next/link";
-import qp from "../../images/qp.png";
+import qp from "../../images/qp.webp";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
 ---
 
@@ -27,7 +27,8 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         />
     </Link>
     <div
-        data-inview class="in-view:animate-fade-right 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]"
+        data-inview
+        class="in-view:animate-fade-right 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>

src/components/qp/Carousel.astro

@@ -1,7 +1,7 @@
 ---
 import Subtitle from "../core/Subtitle.astro";
 import { Image } from "astro:assets";
-import qp from "../../images/qp.png";
+import qp from "../../images/qp.webp";
 ---
 
 <div class="flex flex-col items-center pb-[5%]">

src/components/qp/Join.astro

@@ -2,8 +2,8 @@
 import { Image } from "astro:assets";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
-import mentorship from "../../images/mentorship.png";
+import mentorship from "../../images/mentorship.webp";
-import jonathan from "../../images/about3.png";
+import jonathan from "../../images/about3.webp";
 ---
 
 <div class="flex justify-center mb-[10%]">

src/components/qp/Mentorship.astro

@@ -2,8 +2,8 @@
 import { Image } from "astro:assets";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
-import mentorship from "../../images/joinbg.png";
+import mentorship from "../../images/joinbg.webp";
-import jonathan from "../../images/about3.png";
+import jonathan from "../../images/about3.webp";
 ---
 
 <div class="flex justify-center mt-[10%] mb-[3%]">

src/components/robocub/Join.astro

@@ -2,7 +2,7 @@
 import Link from "next/link";
 import { GoArrowDownRight } from "react-icons/go";
 import { Image } from "astro:assets";
-import robocup from "../../images/robocup.png";
+import robocup from "../../images/robocup.webp";
 ---
 
 <div class="flex flex-col items-center relative my-[10%]">

src/components/robocub/RoboTitle.astro

@@ -1,7 +1,7 @@
 ---
 import Title from "../core/Title.astro";
 import { Image } from "astro:assets";
-import model from "../../images/model.png";
+import model from "../../images/model.webp";
 ---
 
 <div

src/data/annualProjects.json

@@ -1,17 +1,17 @@
 {
   "Robocup": {
     "description": "Participate in the Robocup competition.",
-    "image": "/robocup.png",
+    "image": "/robocup.webp",
     "url": "/robocup"
   },
   "Signal Processing": {
     "description": "Explore the field of signal processing.",
-    "image": "/signal.png",
+    "image": "/signal.webp",
     "url": "/signal"
   },
   "Supercomputing": {
     "description": "Explore the field of supercomputing.",
-    "image": "/supercomp.png",
+    "image": "/supercomp.webp",
     "url": "https://supercomputing-club.sdsc.edu/"
   }
 }

src/data/involve.json

@@ -1,19 +1,19 @@
 [
   {
     "text": "PROJECTS",
-        "image": "/project.png",
+    "image": "/project.webp",
     "link": "/projects",
     "delay": "100"
   },
   {
     "text": "EVENTS",
-        "image": "/halloween.png",
+    "image": "/halloween.webp",
     "link": "/events",
     "delay": "300"
   },
   {
     "text": "H.A.R.D. HACK",
-        "image": "/hardhack.png",
+    "image": "/hardhack.webp",
     "link": "https://hardhack.dev/",
     "delay": "500"
   }

src/data/officers.json

@@ -2,14 +2,14 @@
   {
     "name": "Mustahsin Zarif",
     "position": "Chair",
-    "picture": "/officers/zarif.png",
+    "picture": "/officers/zarif.webp",
     "email": "mmzarif@ucsd.edu",
     "type": ["Executives"]
   },
   {
     "name": "Stephanie Xu",
     "position": "Vice Chair Internal",
-    "picture": "/officers/steph.jpg",
+    "picture": "/officers/steph.webp",
     "email": "sxxu@ucsd.edu",
     "type": ["Executives", "Internal"]
   },
@@ -23,77 +23,77 @@
   {
     "name": "Rohil Kadekar",
     "position": "Vice Chair Projects",
-    "picture": "/officers/rohil.jpg",
+    "picture": "/officers/rohil.webp",
     "email": "rkadekar@ucsd.edu",
     "type": ["Executives", "Projects"]
   },
   {
     "name": "Shipra Gudekar",
     "position": "Vice Chair Events",
-    "picture": "/officers/shipra.jpg",
+    "picture": "/officers/shipra.webp",
     "email": "sgudekar@ucsd.edu",
     "type": ["Executives", "Events"]
   },
   {
     "name": "Lisa Liu",
     "position": "Vice Chair Finance",
-    "picture": "/officers/lisa.jpg",
+    "picture": "/officers/lisa.webp",
     "email": "lil043@ucsd.edu",
     "type": ["Executives"]
   },
   {
     "name": "Charles Nguyen",
     "position": "Webmaster",
-    "picture": "/officers/charles.jpg",
+    "picture": "/officers/charles.webp",
     "email": "cmn010@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Shing Hung",
     "position": "Webmaster",
-    "picture": "/officers/shing.jpg",
+    "picture": "/officers/shing.webp",
     "email": "s1hung@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Andy Smithwick",
     "position": "Webmaster",
-    "picture": "/officers/andy.jpg",
+    "picture": "/officers/andy.webp",
     "email": "asmithwick@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Stella Ji",
     "position": "Marketing Chair",
-    "picture": "/officers/stella.jpg",
+    "picture": "/officers/stella.webp",
     "email": "seji@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Lauren Vo",
     "position": "Marketing Chair",
-    "picture": "/officers/lauren.jpg",
+    "picture": "/officers/lauren.webp",
     "email": "lavo@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Emma Leung",
     "position": "Design Chair",
-    "picture": "/officers/emma.jpg",
+    "picture": "/officers/emma.webp",
     "email": "waleung@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Christine Uy",
     "position": "Design Chair",
-    "picture": "/officers/christine.jpg",
+    "picture": "/officers/christine.webp",
     "email": "c1uy@ucsd.edu",
     "type": ["Internal"]
   },
   {
     "name": "Erik Duarte",
     "position": "Events Coordinator",
-    "picture": "/officers/erik.jpg",
+    "picture": "/officers/erik.webp",
     "email": "Erduarte@ucsd.edu",
     "type": ["Executives", "Events"]
   },
@@ -107,56 +107,56 @@
   {
     "name": "Rafaella Gomes",
     "position": "Project Space Chair",
-    "picture": "/officers/rafaella.jpg",
+    "picture": "/officers/rafaella.webp",
     "email": "ragomes@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Terri Tai",
     "position": "Robocup Soccer Chair",
-    "picture": "/officers/terri.jpg",
+    "picture": "/officers/terri.webp",
     "email": "y2tai@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Raymond Rada",
     "position": "Robocup Soccer Chair",
-    "picture": "/officers/raymond.jpg",
+    "picture": "/officers/raymond.webp",
     "email": "rrada@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Philip Pincencia",
     "position": "Signal Processing Chair",
-    "picture": "/officers/philip.jpg",
+    "picture": "/officers/philip.webp",
     "email": "ppincencia@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Akhil Ram Shankar",
     "position": "Quarterly Projects Chair",
-    "picture": "/officers/akhil.jpg",
+    "picture": "/officers/akhil.webp",
     "email": "aramshankar@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Jonathan Zhou",
     "position": "Quarterly Projects Chair",
-    "picture": "/officers/jonathan.jpg",
+    "picture": "/officers/jonathan.webp",
     "email": "jtzhou@ucsd.edu",
     "type": ["Projects"]
   },
   {
     "name": "Ashlee Young",
     "position": "Professional Chair",
-    "picture": "/officers/ashlee.jpg",
+    "picture": "/officers/ashlee.webp",
     "email": "asy001@ucsd.edu",
     "type": ["Events"]
   },
   {
     "name": "Allie Dinh",
     "position": "Professional Chair",
-    "picture": "/officers/allie.jpg",
+    "picture": "/officers/allie.webp",
     "email": "ald012@ucsd.edu",
     "type": ["Events"]
   },
@@ -170,35 +170,35 @@
   {
     "name": "Pranav Mehta",
     "position": "Technical Chair",
-    "picture": "/officers/pranav.jpg",
+    "picture": "/officers/pranav.webp",
     "email": "p3mehta@ucsd.edu",
     "type": ["Events"]
   },
   {
     "name": "Ridhi Srikanth",
     "position": "Technical Chair",
-    "picture": "/officers/ridhi.jpg",
+    "picture": "/officers/ridhi.webp",
     "email": "rsrikanth@ucsd.edu",
     "type": ["Events"]
   },
   {
     "name": "Anika Agarwal",
     "position": "Outreach Chair",
-    "picture": "/officers/anika.jpg",
+    "picture": "/officers/anika.webp",
     "email": "ana012@ucsd.edu",
     "type": ["Events"]
   },
   {
     "name": "Anupama Nambiar",
     "position": "Social Chair",
-    "picture": "/officers/anu.jpg",
+    "picture": "/officers/anu.webp",
     "email": "annambiar@ucsd.edu",
     "type": ["Events"]
   },
   {
     "name": "Dhruv Roy Choudhary",
     "position": "Social Chair",
-    "picture": "/officers/dhruv.jpg",
+    "picture": "/officers/dhruv.webp",
     "email": "dchoudhary@ucsd.edu",
     "type": ["Events"]
   }

src/data/pastProjects.json

@@ -1,43 +1,43 @@
 [
   {
     "title": "Retro Gaming Console",
-        "image": "/robocup.png",
+    "image": "/robocup.webp",
     "link": "/",
     "col": "2"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/signal.png",
+    "image": "/signal.webp",
     "link": "/",
     "col": "4"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/robocup.png",
+    "image": "/robocup.webp",
     "link": "/",
     "col": "3"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/signal.png",
+    "image": "/signal.webp",
     "link": "/",
     "col": "3"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/signal.png",
+    "image": "/signal.webp",
     "link": "/",
     "col": "2"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/robocup.png",
+    "image": "/robocup.webp",
     "link": "/",
     "col": "2"
   },
   {
     "title": "Retro Gaming Console",
-        "image": "/robocup.png",
+    "image": "/robocup.webp",
     "link": "/",
     "col": "2"
   }