add timeline for qp
This commit is contained in:
chark1es
parent
832aa69257
commit
38d7f16a13
3 changed files with 107 additions and 6 deletions
54
src/components/qp/Timeline.astro
Normal file
54
src/components/qp/Timeline.astro
Normal file
|
|
@ -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>
|
||||
32
src/data/qpTimeline.json
Normal file
32
src/data/qpTimeline.json
Normal file
|
|
@ -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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue