Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Shing Hung 2025-01-06 10:40:23 -08:00
commit a702ee36aa
11 changed files with 211 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

18
src/components/events/EventTitle.astro
View file

@ -1,15 +1,19 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import eventbg from "../../../public/eventbg.png" import eventbg from "/eventbg.png";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="w-full pt-[25vh] flex justify-center relative"> <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}
<LiaDotCircle className=" mr-[2vw] pt-[0.5%]"/> alt="Event Page Background"
<p> class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover"
EVENTS />
</p> <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>EVENTS</p>
</div> </div>
</div> </div>

10
src/components/qp/Step.astro
View file

@ -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} {number}
</p> </p>
{text} {text}

47
src/components/qp/Steps.astro
View file

@ -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%]"> <div class="flex flex-col items-center mt-[7%] mb-[10%]">
<Subtitle title="How it works:" /> <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]">
<Step {
text = {step.text} steps
number = {step.number} .slice(0, 3)
col = {step.col} .map((step) => (
position = {step.position} <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>
</div> </div>

54
src/components/qp/Timeline.astro Normal file
View 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
View 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!"
}
]
}

62
src/data/steps.json
View file

@ -1,32 +1,34 @@
[ [
{ {
"text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.", "text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
"number": "01", "number": "01",
"col": "2", "col": "2",
"position": "bottom-0 right-[2%] " "position": "bottom-0 right-[2%] "
}, },
{ {
"text": "Participants will be put into teams of 5 based on their experience and interests", "text": "Participants will be put into teams of 5 based on their experience and interests",
"number": "02", "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.", {
"number": "03", "text": "Each team will be assigned a mentor.",
"col": "1", "number": "03",
"position": "bottom-0" "col": "1",
}, "position": "bottom-0"
{ },
"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", "text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
"col": "3", "number": "04",
"position": "bottom-0 right-[2%] " "col": "2",
}, "position": "bottom-0 right-[2%] "
{ },
"text": "Winning teams will walk away with prizes!", {
"number": "05", "text": "Winning teams will walk away with prizes!",
"col": "2", "number": "05",
"position": "top-0 right-[5%]" "col": "1",
} "position": "top-0 right-[5%]",
"width": "col-span-1"
}
] ]

10
src/pages/404.astro
View file

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

8
src/pages/find.astro
View file

@ -4,13 +4,17 @@ import Social from "../components/core/Social.astro";
import Findus from "../components/join/Findus.astro"; import Findus from "../components/join/Findus.astro";
import FindTitle from "../components/find/FindTitle.astro"; import FindTitle from "../components/find/FindTitle.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import event from "../../public/event.jpg" import event from "../../public/event.jpg";
--- ---
<Layout> <Layout>
<FindTitle /> <FindTitle />
<div class="w-full flex justify-center"> <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> </div>
<Findus /> <Findus />
<Social /> <Social />

27
src/pages/quarterly.astro
View file

@ -5,22 +5,37 @@ import About from "../components/core/About.astro";
import Steps from "../components/qp/Steps.astro"; import Steps from "../components/qp/Steps.astro";
import PastProjects from "../components/qp/PastProjects.astro"; import PastProjects from "../components/qp/PastProjects.astro";
import { Image } from "astro:assets"; 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 Mentorship from "../components/qp/Mentorship.astro";
import qpborder from "../../public/qpborder.png"; import qpborder from "../../public/qpborder.png";
import Join from "../components/qp/Join.astro"; import Join from "../components/qp/Join.astro";
import Carousel from "../components/qp/Carousel.astro"; import Carousel from "../components/qp/Carousel.astro";
import Timeline from "../components/core/Timeline.astro"; import Timeline from "../components/qp/Timeline.astro";
--- ---
<Layout> <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" /> <Title title="Quarterly Project" />
<div class="w-full flex justify-center my-[3%]"> <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> </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 /> <Steps />
<Timeline /> <Timeline />
<PastProjects /> <PastProjects />

3
tailwind.config.mjs
View file

@ -1,10 +1,11 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 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: { theme: {
extend: { extend: {
boxShadow: { 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: { colors: {
ieee: { ieee: {