From 38d7f16a131777fa96da0d1537d7bf4ac4ad53e5 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sun, 5 Jan 2025 23:04:17 -0800
Subject: [PATCH] add timeline for qp

---
 src/components/qp/Timeline.astro | 54 ++++++++++++++++++++++++++++++++
 src/data/qpTimeline.json         | 32 +++++++++++++++++++
 src/pages/quarterly.astro        | 27 ++++++++++++----
 3 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 src/components/qp/Timeline.astro
 create mode 100644 src/data/qpTimeline.json

diff --git a/src/components/qp/Timeline.astro b/src/components/qp/Timeline.astro
new file mode 100644
index 0000000..fb5bfce
--- /dev/null
+++ b/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>
diff --git a/src/data/qpTimeline.json b/src/data/qpTimeline.json
new file mode 100644
index 0000000..0432116
--- /dev/null
+++ b/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!"
+    }
+  ]
+}
diff --git a/src/pages/quarterly.astro b/src/pages/quarterly.astro
index 468cb4a..47bbe03 100644
--- a/src/pages/quarterly.astro
+++ b/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 src={qpborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[70vh]" />
+    <Image
+        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 />