complete project page

src/components/core/Title.astro

@@ -0,0 +1,11 @@
+---
+const {title} = Astro.props;
+import { LiaDotCircle } from "react-icons/lia";
+---
+
+<div class="flex items-center text-[3vw] ml-[10%] pt-[10%] text-white font-semibold">
+    <LiaDotCircle className=" mr-[1vw] text-[2.7vw]"/>
+    <p>
+        {title}
+    </p>
+</div>

src/components/join/Involvement.astro

@@ -1,7 +1,6 @@
 ---
 import Link from "next/link";
 import { GoArrowDownRight } from "react-icons/go";
-import { Image } from "astro:assets";
 import { FaGear } from "react-icons/fa6";
 import { IoMdCalendar } from "react-icons/io";
 import { RiRobot2Fill } from "react-icons/ri";
@@ -10,7 +9,11 @@ const {image, text, link} = Astro.props;
 <div class="w-[15vw] relative group">
 
     <img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
-    <Link href={link} className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
+    <Link 
+        href={link}
+        target={text==="H.A.R.D. HACK"? "_blank":"_self"} 
+        className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
+    >
         <div class="w-full flex justify-end pr-[5%]">
             <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
                 {

src/components/projects/AP.astro

@@ -0,0 +1,35 @@
+---
+import { LiaDotCircle } from "react-icons/lia";
+import ProjectSection from "./ProjectSection.astro";
+---
+
+
+<div class="text-white h-[65vh] justify-between mt-[15%] mb-[30%] mx-[10%] relative">
+    <div class="flex items-center text-[2.7vw] mb-[7%]">
+        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+        <p>
+            Annual Projects
+        </p>
+    </div>
+
+    <p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light">
+        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="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]">
+        <LiaDotCircle className="text-[2vw] pt-[0.5%]"/>
+        <p class="text-[2vw]">
+            ridiculus nec egestas
+        </p>
+        <p class="w-3/5">
+            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>
+
+    <ProjectSection />
+    
+</div>

src/components/projects/ProjectSection.astro

@@ -1,64 +1,50 @@
 ---
 import annualProjects from "../../data/annualProjects.json";
-
+import { FaGear } from "react-icons/fa6";
-interface Props {
+import { GoArrowDownRight } from "react-icons/go";
-    width?: string;
+import { IoIosArrowDroprightCircle } from "react-icons/io";
-}
-
-const { width = "100%" } = Astro.props;
 ---
+<div class="flex gap-[1.5vw] h-[50vh]">
+    {
+        Object.entries(annualProjects).map(
+            ([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
+                        src={project.image}
+                        alt={`${title} Project`}
+                        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%]">
+                        <div class="w-full">
+                            <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap text-[1.2vw] font-light mb-[5%]">
+                                {title}
+                            </p>
+                            <p class="hidden [.expanded_&]:contents transition-all duration-300 overflow-hidden">
+                                {project.description}
+                            </p>
+                            <div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto">
+                                <div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]">
+                                    more details
+                                    <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
+                                </div>
+                            </div>
+                        </div>
+                        <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]"/>
+                    </div>
 
-<section class="w-full py-12">
+                    <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]">
-    <div class={`mx-auto`} style={`width: ${width}`}>
+                        <FaGear/>
-        <div class="flex flex-col md:flex-row gap-6 md:h-[400px]">
+                    </div>
-            {
+                </a>
-                Object.entries(annualProjects).map(
+            )
-                    ([title, project], index) => (
+        )
-                        <a
+    }
-                            href={project.url || "#"}
+</div>
-                            class={`project-card group relative h-[300px] md:h-auto flex-none md:flex-1  rounded-lg overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
-                            data-project={index + 1}
-                        >
-                            <img
-                                src={project.image}
-                                alt={`${title} Project`}
-                                class="w-full h-full object-cover rounded-lg transition-transform duration-500 ease-in-out md:group-hover:scale-110"
-                            />
-                            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-lg" />
-                            <div class="absolute bottom-0 left-0 p-6 text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
-                                <h3 class="text-xl font-bold mb-2 transition-transform duration-300">
-                                    {title}
-                                </h3>
-                                <p class="md:opacity-0 md:[.expanded_&]:opacity-100 transition-all duration-300 max-h-0 md:[.expanded_&]:max-h-[200px] overflow-hidden">
-                                    {project.description}
-                                </p>
-                            </div>
-                            <div
-                                class="absolute bottom-2 right-2 bg-white rounded-full p-2 shadow 
-                                md:opacity-0 md:[.expanded_&]:opacity-100 transition-opacity duration-300"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    class="h-6 w-6 text-black"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M7 7l10 10m0-10v10h-10"
-                                    />
-                                </svg>
-                            </div>
-                        </a>
-                    )
-                )
-            }
-        </div>
-    </div>
-</section>
 
 <style>
     .project-card {

src/components/projects/QP.astro

@@ -0,0 +1,34 @@
+---
+import { LiaDotCircle } from "react-icons/lia";
+import { Image } from "astro:assets";
+import Link from "next/link";
+import qp from "../../../public/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>
+    </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">
+        more details
+        <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>
+        <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!
+        </p>
+    </div>
+    
+</div>

src/data/annualProjects.json

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

src/pages/404.astro

@@ -0,0 +1,3 @@
+<div>
+    404 ERROR
+</div>

src/pages/projects.astro

@@ -1,7 +1,16 @@
 ---
 import Layout from "../layouts/Layout.astro";
+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 join from "../../public/join.png";
 ---
 
 <Layout>
-    Projects
+    <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]" />
+    <Title title="PROJECTS" />
+    <QP />
+    <AP />
 </Layout>