Merge branch 'main' of https://git.ieeeucsd.org/Webmaster/dev-ieeeucsd-org

src/components/events/EventTitle.astro

@@ -1,15 +1,19 @@
 ---
 import { Image } from "astro:assets";
-import eventbg from "../../../public/eventbg.png"
+import eventbg from "/eventbg.png";
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
 <div class="w-full pt-[25vh] flex justify-center relative">
-    <Image src={eventbg} alt="Event Page Background" class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover" />
+    <Image
-    <div class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]">
+        src={eventbg}
+        alt="Event Page Background"
+        class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover"
+    />
+    <div
+        class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"
+    >
         <LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
-        <p>
+        <p>EVENTS</p>
-            EVENTS
-        </p>
     </div>
 </div>

src/components/qp/Step.astro

@@ -1,9 +1,13 @@
 ---
-const {text, number, col, position} = Astro.props;
+const { text, number, col, position, width } = Astro.props;
 ---
 
-<div class={`relative col-span-${col} border-[0.1vw] border-white/30 h-[23vh] text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw]`}>
+<div
-    <p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
+    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
+>
+    <p
+        class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight `}
+    >
         {number}
     </p>
     {text}

src/components/qp/Steps.astro

@@ -1,18 +1,41 @@
 ---
-import Step from "./Step.astro"
+import Step from "./Step.astro";
-import steps from "../../data/steps.json"
+import steps from "../../data/steps.json";
-import Subtitle from "../core/Subtitle.astro"
+import Subtitle from "../core/Subtitle.astro";
 ---
+
 <div class="flex flex-col items-center mt-[7%] mb-[10%]">
     <Subtitle title="How it works:" />
-    <div class="grid grid-cols-5 w-[70%] gap-[1.5vw]">
+    <div class="grid grid-rows-2 w-[70%] gap-[2vw]">
-        {steps.map((step)=>(
+        <div class="grid grid-cols-4 gap-[1.5vw]">
+            {
+                steps
+                    .slice(0, 3)
+                    .map((step) => (
                         <Step
                             text={step.text}
                             number={step.number}
                             col={step.col}
                             position={step.position}
+                            width={step.width}
                         />
-         ))}
+                    ))
+            }
+        </div>
+        <div class="grid grid-cols-3 gap-[1.5vw]">
+            {
+                steps
+                    .slice(3, 5)
+                    .map((step) => (
+                        <Step
+                            text={step.text}
+                            number={step.number}
+                            col={step.col}
+                            position={step.position}
+                            width={step.width}
+                        />
+                    ))
+            }
+        </div>
     </div>
 </div>

src/components/qp/Timeline.astro

@@ -0,0 +1,54 @@
+---
+import qpTimeline from "../../data/qpTimeline.json";
+const { events } = qpTimeline;
+import Subtitle from "../core/Subtitle.astro";
+---
+
+<div class="flex flex-col items-center my-[5%]">
+    <Subtitle title="Timeline" />
+
+    <div
+        class="relative flex items-center justify-between w-full max-w-4xl py-[10%]"
+    >
+        <div
+            class="absolute top-1/2 w-full h-0.5 bg-gray-200 transform -translate-y-1/2"
+        >
+        </div>
+
+        {
+            events.map((event, index) => (
+                <div
+                    class="relative flex flex-col items-center"
+                    style={`flex: 1`}
+                >
+                    <div
+                        class={`absolute ${
+                            index % 2 === 0 ? "bottom-0 mb-20" : "top-0 mt-20"
+                        } flex flex-col items-center`}
+                    >
+                        <div class="text-center">
+                            <div class="font-bold text-ieee-yellow">
+                                {event.week}
+                            </div>
+                            <div class="text-sm text-gray-300 max-w-[120px]">
+                                {event.description}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class={`absolute ${
+                            index % 2 === 1
+                                ? "h-[75px] top-1/2"
+                                : "h-[75px] bottom-1/2"
+                        } w-0.5 bg-white    `}
+                    />
+
+                    <div class="absolute top-1/2 transform -translate-y-1/2">
+                        <div class="w-4 h-4 bg-white border-2 rounded-full" />
+                    </div>
+                </div>
+            ))
+        }
+    </div>
+</div>

src/data/qpTimeline.json

@@ -0,0 +1,32 @@
+{
+  "events": [
+    {
+      "week": "Week 1",
+      "description": "Submit Applications"
+    },
+    {
+      "week": "Week 2",
+      "description": "QP groups are formed, QP Kickoff"
+    },
+    {
+      "week": "Week 3",
+      "description": "Mentor Assignments"
+    },
+    {
+      "week": "Week 4",
+      "description": "Workathon #1"
+    },
+    {
+      "week": "Week 6",
+      "description": "Workathon #2, Milestone #1"
+    },
+    {
+      "week": "Week 8",
+      "description": "Workathon #3, Milestone #2"
+    },
+    {
+      "week": "Week 9/10",
+      "description": "Final submission, QP Showcase!"
+    }
+  ]
+}

src/data/steps.json

@@ -8,8 +8,9 @@
   {
     "text": "Participants will be put into teams of 5 based on their experience and interests",
     "number": "02",
-        "col": "2",
+    "col": "1",
-        "position": " top-0 left-[2%] "
+    "position": " top-0 left-[2%] ",
+    "width": "col-span-1"
   },
   {
     "text": "Each team will be assigned a mentor.",
@@ -20,13 +21,14 @@
   {
     "text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
     "number": "04",
-        "col": "3",
+    "col": "2",
     "position": "bottom-0 right-[2%] "
   },
   {
     "text": "Winning teams will walk away with prizes!",
     "number": "05",
-        "col": "2",
+    "col": "1",
-        "position": "top-0 right-[5%]"
+    "position": "top-0 right-[5%]",
+    "width": "col-span-1"
   }
 ]

src/pages/404.astro

@@ -1,3 +1,7 @@
-<div>
+---
-    404 ERROR
+import Layout from "../layouts/Layout.astro";
-</div>
+---
+
+<Layout>
+    <div>404 ERROR</div>
+</Layout>

src/pages/find.astro

@@ -4,13 +4,17 @@ 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 event from "../../public/event.jpg";
 ---
 
 <Layout>
     <FindTitle />
     <div class="w-full flex justify-center">
-        <Image src={event} alt="board group photos" class=" w-3/4 rounded-full"/>
+        <Image
+            src={event}
+            alt="board group photos"
+            class="w-3/4 rounded-full"
+        />
     </div>
     <Findus />
     <Social />

src/pages/quarterly.astro

@@ -5,22 +5,37 @@ 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 "../../public/qp.png";
 import Mentorship from "../components/qp/Mentorship.astro";
 import qpborder from "../../public/qpborder.png";
 import Join from "../components/qp/Join.astro";
 import Carousel from "../components/qp/Carousel.astro";
-import Timeline from "../components/core/Timeline.astro";
+import Timeline from "../components/qp/Timeline.astro";
 ---
 
 <Layout>
-    <Image src={qpborder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[70vh]" />
+    <Image
-    <Image src={qpborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[70vh]" />
+        src={qpborder}
+        alt="JOIN US"
+        class="absolute left-[1vw] w-[4vw] top-[70vh]"
+    />
+    <Image
+        src={qpborder}
+        alt="JOIN US"
+        class="absolute right-[1vw] w-[4vw] top-[70vh]"
+    />
     <Title title="Quarterly Project" />
     <div class="w-full flex justify-center my-[3%]">
-        <Image src={qp} alt="board group photos" class=" w-2/3 rounded-full object-cover aspect-[2.5/1]"/>
+        <Image
+            src={qp}
+            alt="board group photos"
+            class="w-2/3 rounded-full object-cover aspect-[2.5/1]"
+        />
     </div>
-    <About title="What is Quarterly Project?" text="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. During QP, students will acquire skills used in the industry such as C++ and the prototyping process with the assistance of our mentors. At the end of the quarter, students will demonstrate their projects at QP Showcase in front of other students, professors, and industry professionals!" />
+    <About
+        title="What is Quarterly Project?"
+        text="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. During QP, students will acquire skills used in the industry such as C++ and the prototyping process with the assistance of our mentors. At the end of the quarter, students will demonstrate their projects at QP Showcase in front of other students, professors, and industry professionals!"
+    />
     <Steps />
     <Timeline />
     <PastProjects />

tailwind.config.mjs

@@ -1,10 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  safelist: ["col-span-1", "col-span-2", "col-span-3", "col-span-4"],
   theme: {
     extend: {
       boxShadow: {
-        'glow': '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
+        glow: "0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)",
       },
       colors: {
         ieee: {