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

fix mobile for Robocup page

Browse source
This commit is contained in:
Shing Hung 2025-01-27 11:25:42 -08:00
parent af8871ad14
commit 6587a3535a
14 changed files with 127 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/core/About.astro
View file

@ -4,14 +4,14 @@ const {title, text} = Astro.props;
--- ---
<div class="flex flex-col items-center text-white my-[10%]"> <div class="flex flex-col items-center text-white my-[10%]">
<div class="flex items-center text-[2.5vw] mb-[3%]"> <div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"> <p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
{title} {title}
</p> </p>
</div> </div>
<p class="w-[70%] text-[1.4vw] font-light "> <p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light ">
{text} {text}
</p> </p>
</div> </div>

2
src/components/core/Subtitle.astro
View file

@ -3,7 +3,7 @@ const {title} = Astro.props;
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="flex items-center text-[2.5vw] mb-[5%]"> <div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
{title} {title}

17
src/components/qp/Timeline.astro
View file

@ -1,22 +1,20 @@
--- ---
import qpTimeline from "../../data/qpTimeline.json"; const {timeline} = Astro.props;
const { events } = qpTimeline;
import Subtitle from "../core/Subtitle.astro"; import Subtitle from "../core/Subtitle.astro";
--- ---
<div class="flex flex-col items-center mt-[10%] mb-[15%]"> <div class="flex flex-col items-center md:mt-[10%] mt-[25%] md:mb-[15%] mb-[35%]">
<Subtitle title="Timeline" /> <Subtitle title="Timeline" />
<div <div
class="relative flex items-center justify-between w-full max-w-[65vw] py-[10%] mt-[3%]" class="relative flex items-center justify-between w-full md:max-w-[65vw] max-w-[85vw] py-[10%] md:mt-[3%] mt-[10%]"
> >
<div <div
class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2" class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
> >
</div> </div>
{ {timeline.map((event, index) => (
events.map((event, index) => (
<div <div
class="relative flex flex-col items-center" class="relative flex flex-col items-center"
style={`flex: 1`} style={`flex: 1`}
@ -27,10 +25,10 @@ import Subtitle from "../core/Subtitle.astro";
} flex flex-col items-center`} } flex flex-col items-center`}
> >
<div class="text-center"> <div class="text-center">
<div class="font-bold text-ieee-yellow text-[1.4vw]"> <div class="font-bold text-ieee-yellow md:text-[1.4vw] text-[2vw]">
{event.week} {event.week}
</div> </div>
<div class="text-[1.1vw] text-gray-300 max-w-[10vw]"> <div class="md:text-[1.1vw] text-[1.5vw] text-gray-300 md:max-w-[10vw] max-w-[15vw]">
{event.description} {event.description}
</div> </div>
</div> </div>
@ -48,7 +46,6 @@ import Subtitle from "../core/Subtitle.astro";
<div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" /> <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
</div> </div>
</div> </div>
)) ))}
}
</div> </div>
</div> </div>

12
src/components/robocub/Contacts.astro
View file

@ -8,29 +8,29 @@ import { LiaDotCircle } from "react-icons/lia";
<div class="flex justify-center my-[10%]"> <div class="flex justify-center my-[10%]">
<div class="w-1/2 flex justify-between"> <div class="w-1/2 flex justify-between">
<div> <div>
<div class="flex items-center text-[2.5vw]"> <div class="flex items-center md:text-[2.5vw] text-[4vw]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
Contacts Contacts
</p> </p>
</div> </div>
<p class="text-[1.1vw] ml-[5%] text-nowrap"> <p class="md:text-[1.1vw] text-[1.5vw] ml-[5%] text-nowrap">
To stay up to date, join discord server To stay up to date, join discord server
</p> </p>
</div> </div>
<div class="flex"> <div class="flex">
<Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="mr-[20%] flex flex-col items-center"> <Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="mr-[20%] flex flex-col items-center">
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40"> <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
<FaDiscord /> <FaDiscord />
</div> </div>
<p class="text-[1.3vw] font-semibold">Facebook</p> <p class="md:text-[1.3vw] text-[2vw] font-semibold">Facebook</p>
</Link> </Link>
<Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center"> <Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40"> <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] ms:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
<RiInstagramFill /> <RiInstagramFill />
</div> </div>
<p class="text-[1.3vw] font-semibold">Instagram</p> <p class="md:text-[1.3vw] text-[2vw] font-semibold">Instagram</p>
</Link> </Link>
</div> </div>
</div> </div>

12
src/components/robocub/Join.astro
View file

@ -9,20 +9,20 @@ import robocup from "../../images/robocup.webp";
<Image <Image
src={robocup} src={robocup}
alt="robocub competition image" alt="robocub competition image"
class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40" class="md:w-3/5 w-[90%] rounded-[2vw] object-cover aspect-[8/5] opacity-40"
/> />
<Link <Link
href="/" href="/"
target="_blank" target="_blank"
className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]" className="absolute aspect-[8/5] md:w-3/5 w-[90%] p-[5%] group -bottom-[3%]"
> >
<div class="w-full flex justify-end items-center h-4/5"> <div class="w-full flex justify-end items-center h-4/5">
<p class="text-[4.5vw] font-bold w-fit"> <p class="md:text-[4.5vw] text-[7vw] font-bold w-fit">
We Are<br /> We Are<br />
Hiring Hiring
</p> </p>
</div> </div>
<div class="text-[1vw] pt-[3%]"> <div class="md:text-[1vw] text-[1.5vw] md:pt-[3%]">
<p> <p>
Join a community of beginner to experienced engineers from Join a community of beginner to experienced engineers from
different disciplines and backgrounds different disciplines and backgrounds
@ -33,10 +33,10 @@ import robocup from "../../images/robocup.webp";
</p> </p>
</div> </div>
<div <div
class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300" class="flex w-full justify-end items-end md:text-[3.5vw] text-[6vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
> >
<p <p
class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light" class="mr-[2%] w-fit py-[1%] px-[2%] md:text-[1.2vw] text-[2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
> >
Application form Application form
</p> </p>

16
src/components/robocub/Subteam.astro
View file

@ -1,16 +0,0 @@
---
import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
import { LuBrainCircuit } from "react-icons/lu";
const { title, list } = Astro.props;
---
<div
class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]"
>
<p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
{title}
</p>
<ul class="text-[1vw] font-light">
{list.map((item: string) => <li>&#8226; {item}</li>)}
</ul>
</div>

16
src/components/robocub/Subteams.astro
View file

@ -1,6 +1,5 @@
--- ---
import Subtitle from "../core/Subtitle.astro"; import Subtitle from "../core/Subtitle.astro";
import Subteam from "./Subteam.astro";
import subteams from "../../data/subteams.json"; import subteams from "../../data/subteams.json";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6"; import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
@ -11,9 +10,9 @@ const duplicatedSubteams = [...subteams, ...subteams, ...subteams];
const centerIndex = Math.floor(subteams.length); // center in the middle const centerIndex = Math.floor(subteams.length); // center in the middle
--- ---
<div class="flex flex-col items-center my-[10%] relative"> <div class="flex flex-col items-center md:my-[10%] my-[20%] relative overflow-x-clip">
<Subtitle title="Subteams" /> <Subtitle title="Subteams" />
<div class="relative w-[75vw] h-[50vh] mt-[3%]"> <div class="relative md:w-[75vw] w-[85vw] h-[25vw] mt-[8%] md:mt-[5%]">
<div id="carousel" class="absolute w-full h-full flex justify-center"> <div id="carousel" class="absolute w-full h-full flex justify-center">
{ {
duplicatedSubteams.map((subteam, index) => { duplicatedSubteams.map((subteam, index) => {
@ -27,7 +26,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
return ( return (
<div <div
class="carousel-item absolute transition-all duration-500" class="carousel-item absolute transition-all duration-500 md:w-[20vw] w-[25vw]"
style={{ style={{
transform: `translateX(${distance * 12}vw) scale(${ transform: `translateX(${distance * 12}vw) scale(${
Math.abs(distance) === 0 Math.abs(distance) === 0
@ -43,17 +42,16 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
: Math.abs(distance) === 1 : Math.abs(distance) === 1
? 20 ? 20
: 10, : 10,
width: "20vw",
}} }}
data-index={index} data-index={index}
> >
<div class="relative"> <div class="relative">
<div class="relative w-full h-full backdrop-blur-md overflow-hidden rounded-[2vw]"> <div class="relative w-full h-full backdrop-blur-md overflow-hidden rounded-[2vw]">
<div class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]"> <div class="px-[10%] flex flex-col justify-center items-center md:w-[20vw] w-[25vw] md:h-[22vw] h-[28vw] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
<p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]"> <p class="md:text-[1.5vw] text-[2vw] mb-[10%] font-semibold pt-[10%]">
{subteam.title} {subteam.title}
</p> </p>
<ul class="text-[1vw] font-light"> <ul class="md:text-[1vw] text-[1.5vw] font-light">
{subteam.list.map( {subteam.list.map(
(item: string) => ( (item: string) => (
<li>&#8226; {item}</li> <li>&#8226; {item}</li>
@ -62,7 +60,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
</ul> </ul>
</div> </div>
</div> </div>
<div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 text-[3.2vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute"> <div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 md:text-[3.2vw] text-[4.5vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
{subteam.title === "Mechanical" && ( {subteam.title === "Mechanical" && (
<FaGear /> <FaGear />
)} )}

15
src/components/signal/Competition.astro
View file

@ -5,25 +5,24 @@ const {picture, name, description, link} = Astro.props;
--- ---
<div class = "text-white relative my-[3%]" > <div class = "text-white relative my-[3%]" >
<img src = {picture} alt = "signal" class = "w-full object-cover aspect-[1512/526] opacity-25"> <img src = {picture} alt = "signal" class = "w-full object-cover md:aspect-[1300/526] aspect-[2/1] opacity-25">
<div class = "w-full flex justify-evenly absolute bottom-[28%] ml-[5%]"> <div class = "w-full flex justify-evenly absolute bottom-[20%] left-[4%]">
<div class = "flex items-center md:text-[2.5vw] text-[4vw]">
<div class = "flex items-center text-[2.5vw] font-extralight"> <LiaDotCircle className=" mr-[1vw] md:text-[2.6vw]"/>
<LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
<p> <p>
Competition Competition
</p> </p>
</div> </div>
<div class = "text-[1.5vw] font-extralight tracking-wider"> <div class = "md:text-[1.6vw] text-[2.2vw] tracking-wider">
<p class = "w-[35vw] mb-[3%] mt-[40vh]"> <p class = "w-[35vw] md:mt-[25vw] mt-[35vw]">
{name} {name}
</p> </p>
<p class = "mb-[5%]"> <p class = "mb-[5%]">
{description} {description}
</p> </p>
<Link href = {link} target="_blank" className="text-[1vw] border-white/70 border-[0.1vw] py-[3%] px-[15%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"> <Link href = {link} target="_blank" className="md:text-[1.2vw] text-[2vw] font-light border-white/70 border-[0.1vw] py-[1.5%] px-[9%] rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
Link Link
</Link> </Link>
</div> </div>

16
src/data/landing.js
View file

@ -1,16 +0,0 @@
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
export const landing = [
{
"icon": <FaDiscord />,
"link": "https://discord.gg/XxfjqZSjca"
},
{
"icon": <FaFacebook />,
"link": "https://www.facebook.com/ieeeucsd"
},
{
"icon": <FaInstagram />,
"link": "https://www.instagram.com/ieee.ucsd"
}
];

4
src/data/qpTimeline.json
View file

@ -1,5 +1,4 @@
{ [
"events": [
{ {
"week": "Week 1", "week": "Week 1",
"description": "Submit Applications" "description": "Submit Applications"
@ -29,4 +28,3 @@
"description": "Final submission, QP Showcase!" "description": "Final submission, QP Showcase!"
} }
] ]
}

30
src/data/roboTimeline.json Normal file
View file

@ -0,0 +1,30 @@
[
{
"week": "Fall W1 - W3",
"description": "Submit Applications"
},
{
"week": "Fall W4 - W9",
"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!"
}
]

2
src/layouts/Layout.astro
View file

@ -14,7 +14,7 @@ import InView from "../components/core/InView.astro";
<title>Astro Basics</title> <title>Astro Basics</title>
</head> </head>
<InView /> <InView />
<body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip"> <body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip w-screen">
<Navbar /> <Navbar />
<main class="w-[95%]"> <main class="w-[95%]">
<slot /> <slot />

3
src/pages/quarterly.astro
View file

@ -11,6 +11,7 @@ import qpborder from "../images/qpborder.webp";
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/qp/Timeline.astro"; import Timeline from "../components/qp/Timeline.astro";
import qpTimeline from "../data/qpTimeline.json"
--- ---
<Layout> <Layout>
@ -38,7 +39,7 @@ import Timeline from "../components/qp/Timeline.astro";
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!" 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 timeline={qpTimeline} />
<PastProjects /> <PastProjects />
<Mentorship /> <Mentorship />
<Join /> <Join />

7
src/pages/robocup.astro
View file

@ -12,6 +12,7 @@ import Contacts from "../components/robocub/Contacts.astro";
import Subteams from "../components/robocub/Subteams.astro"; import Subteams from "../components/robocub/Subteams.astro";
import Timeline from "../components/qp/Timeline.astro"; import Timeline from "../components/qp/Timeline.astro";
import Competition from "../components/signal/Competition.astro"; import Competition from "../components/signal/Competition.astro";
import roboTimeline from "../data/roboTimeline.json"
--- ---
<Layout> <Layout>
@ -34,19 +35,19 @@ import Competition from "../components/signal/Competition.astro";
<Link <Link
href="/" href="/"
target="_blank" target="_blank"
className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light" className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] md:text-[1.2vw] text-[2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
> >
Past Team Description Paper Past Team Description Paper
</Link> </Link>
</div> </div>
<Competition <Competition
picture="../public/robocup.webp" picture="/robocup.webp"
name="Preparing for Salvador 2025" name="Preparing for Salvador 2025"
description="Recently the team went to our first ever competition in Germany!" description="Recently the team went to our first ever competition in Germany!"
link="https://www.google.com/" link="https://www.google.com/"
/> />
<Subteams /> <Subteams />
<Timeline /> <Timeline timeline={roboTimeline}/>
<Join /> <Join />
<Questions faq={faq} /> <Questions faq={faq} />
<Contacts /> <Contacts />