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

add qp components

Browse source
This commit is contained in:
Shing Hung 2025-01-05 16:22:16 -08:00
parent 3aa7725fd4
commit 5cd9c1415d
10 changed files with 92 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/qpborder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

2
src/components/qp/About.astro
View file

@ -10,7 +10,7 @@ import { LiaDotCircle } from "react-icons/lia";
</p>
</div>
<p class="w-3/5 text-[1.2vw] font-light ">
<p class="w-[70%] text-[1.4vw] font-light ">
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

7
src/components/qp/Carousel.astro
View file

@ -0,0 +1,7 @@
---
---
<div>
</div>

36
src/components/qp/Join.astro
View file

@ -0,0 +1,36 @@
---
import { Image } from "astro:assets"
import Link from "next/link"
import { LiaDotCircle } from "react-icons/lia";
import mentorship from "../../../public/mentorship.png"
import jonathan from "../../../public/about3.png"
---
<div class="flex justify-center mb-[10%]">
<div class="flex w-[70%] items-center">
<div class="w-1/2 flex justify-center h-full relative">
<Image src={mentorship} alt="blue background" class="mr-[20%]" />
<Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0" />
</div>
<div class="w-1/2 font-light text-[1.2vw]">
<div class="flex items-center text-[2.3vw] mb-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow">
How to join
</p>
</div>
<p class="my-[10%] ">
We will create a QP Application every quarter and send it out
to prospective participants via the IEEE discord or Instagram page.
</p>
<p class="mb-[12%]">
URL to Drive Folder with every school year’s QP Application forms (3 per school year):
</p>
<div class="w-full flex justify-center">
<Link href="/" target="_blank" className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light">
JOIN
</Link>
</div>
</div>
</div>
</div>

37
src/components/qp/Mentorship.astro
View file

@ -1,14 +1,41 @@
---
import { Image } from "astro:assets"
import Link from "next/link"
import { LiaDotCircle } from "react-icons/lia";
import mentorship from "../../../public/joinbg.png"
import jonathan from "../../../public/about3.png"
---
<div>
<div>
<div>
<div class="flex justify-center mt-[10%] mb-[3%]">
<div class="flex w-[70%] items-center">
<div class="w-1/2 font-light text-[1.2vw]">
<div class="flex items-center text-[2.3vw] mb-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow">
Mentorship
</p>
</div>
<p class="my-[10%] ">
Mentors are a fundamental part of QP, providing teams
with advice and guidance through the ideation and
execution of their project. Each team is paired with
a mentor they can regularly consult for advice and insights.
Mentors are matched with teams based on their expertise
and the team’s project focus, ensuring aligned support for each group.
</p>
<p class="mb-[12%]">
If you are interested in becoming a mentor, please follow this link to signup:
</p>
<div class="w-full flex justify-center">
<Link href="/" target="_blank" className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light">
BECOME A MENTOR
</Link>
</div>
</div>
<div>
<div class="w-1/2 flex justify-center h-full items-center relative">
<Image src={mentorship} alt="blue background" />
<Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]" />
</div>
</div>
</div>

2
src/components/qp/PastProjects.astro
View file

@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
<div class="flex flex-col items-center">
<Subtitle title="Past Projects" />
<div class="w-2/3 grid grid-cols-6 gap-[1.5vw]">
<div class="w-[70%] grid grid-cols-6 gap-[1.5vw]">
{projects.map((project)=>(
<PastProject
title = {project.title}

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

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

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

@ -3,9 +3,9 @@ import Step from "./Step.astro"
import steps from "../../data/steps.json"
import Subtitle from "../core/Subtitle.astro"
---
<div class="flex flex-col items-center my-[7%]">
<div class="flex flex-col items-center mt-[7%] mb-[10%]">
<Subtitle title="How it works:" />
<div class="grid grid-cols-5 w-3/5 gap-[1.5vw]">
<div class="grid grid-cols-5 w-[70%] gap-[1.5vw]">
{steps.map((step)=>(
<Step
text = {step.text}

10
src/data/officers.json
View file

@ -2,7 +2,7 @@
{
"name": "Mustahsin Zarif",
"position": "Chair",
"picture": "/../public/neko.png",
"picture": "/neko.png",
"email": "mmzarif@ucsd.edu",
"type": ["Executives"]
},
@ -93,14 +93,14 @@
{
"name": "Sin Yin Yang",
"position": "Events Coordinator",
"picture": "/../public/neko.png",
"picture": "/neko.png",
"email": "siy015@ucsd.edu",
"type": ["Executives", "Events"]
},
{
"name": "Rana Singh",
"position": "Vice Chair External",
"picture": "/../public/neko.png",
"picture": "/neko.png",
"email": "ras010@ucsd.edu",
"type": ["Executives"]
},
@ -135,7 +135,7 @@
{
"name": "Ritoban Roy-Chowdhury",
"position": "Supercomputing Chair",
"picture": "/../public/neko.png",
"picture": "/neko.png",
"email": "rroychowdhury@ucsd.edu",
"type": ["Projects"]
},
@ -170,7 +170,7 @@
{
"name": "Fahad Alkhazam",
"position": "Technical Chair",
"picture": "/../public/neko.png",
"picture": "/neko.png",
"email": "falkhazam@ucsd.edu",
"type": ["Events"]
},

7
src/pages/quarterly.astro
View file

@ -6,9 +6,14 @@ 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 Mentorship from "../components/qp/Mentorship.astro";
import qpborder from "../../public/qpborder.png";
import Join from "../components/qp/Join.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]" />
<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]"/>
@ -16,4 +21,6 @@ import qp from "../../public/qp.png"
<About />
<Steps />
<PastProjects />
<Mentorship />
<Join />
</Layout>