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

merge main

Browse source
This commit is contained in:
Shing Hung 2025-01-27 11:26:43 -08:00
commit e358f08864
9 changed files with 346 additions and 312 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/board/Officers.astro
View file

@ -15,7 +15,7 @@ const currentFilter = "All";
--- ---
<div <div
class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]" class="text-white flex flex-col items-center md:mt-[5vw] mt-[10vw] mb-[10vh]"
> >
<div <div
data-inview data-inview
@ -37,9 +37,8 @@ const currentFilter = "All";
<p <p
class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center" class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center"
> >
Our board comprises 31 students of varying majors, colleges, and Our board comprises 31 students of varying majors, colleges, and interests!
interests! Feel free to reach out for any questions about our position Feel free to reach out for any questions about our position or experiences.
or experiences.
</p> </p>
<Filter filters={types} currentFilter={currentFilter} /> <Filter filters={types} currentFilter={currentFilter} />

19
src/components/core/Navbar.astro
View file

@ -4,13 +4,18 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import pages from "../../data/pages.json"; import pages from "../../data/pages.json";
--- ---
<div class="md:w-full w-fit fixed z-10"> <div class="w-full">
<div <div
class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]" class="flex justify-between items-center bg-ieee-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] rounded-full md:border-[0.1vw]"
> >
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex"> <a href="/" class="hover:opacity-60 duration-300">
<Image <Image
class="w-[15vw]" class="w-[15vw] md:block hidden"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
<Image
class="w-[40vw] md:hidden block"
src={whiteLogoHorizontal} src={whiteLogoHorizontal}
alt="IEEE UCSD Logo" alt="IEEE UCSD Logo"
/> />
@ -76,17 +81,17 @@ import pages from "../../data/pages.json";
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full" class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
> >
<div <div
class="flex flex-col items-center h-[70vh] justify-evenly bg-black" class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
> >
{ {
pages.map((page) => ( pages.map((page) => (
<a <a
href={page.path} href={page.path}
class={`block py-2 px-8 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-xl class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
${ ${
page.name === "Online Store" page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]" ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white hover:text-gray-300 border-white" : "text-white hover:text-gray-300 border-white border-2"
}`} }`}
> >
{page.name} {page.name}

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

@ -3,7 +3,9 @@ const {title} = Astro.props;
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[10%] pt-[15%] text-white font-semibold"> <div
class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[5%] pt-[10%] text-white font-semibold"
>
<LiaDotCircle className=" mr-[1vw] text-[2.7vw]" /> <LiaDotCircle className=" mr-[1vw] text-[2.7vw]" />
<p> <p>
{title} {title}

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

@ -4,7 +4,7 @@ import eventbg from "../../images/eventbg.webp";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="w-full md:pt-[13vw] pt-[16vw] flex justify-center relative"> <div class="w-full md:pt-[5vw] pt-[10vw] flex justify-center relative">
<Image <Image
src={eventbg} src={eventbg}
alt="Event Page Background" alt="Event Page Background"

23
src/components/find/FindTitle.astro
View file

@ -3,19 +3,30 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="md:pt-[10vw] pt-[15vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"> <div
class="md:pt-[5vw] pt-[10vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"
>
<div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col"> <div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
<div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]"> <div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p> <p>Contact Us</p>
Contact Us
</p>
</div> </div>
<p class="md:text-[1.25vw] text-[2vw]"> <p class="md:text-[1.25vw] text-[2vw]">
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts! The <a
class="text-ieee-yellow underline"
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank">IEEE Project Space</a
> is an open-access, collaborative space located at EBU1-4710. Students can
do homework or get access to basic electronic tools such as soldering stations,
breadboard components, and Arduino and Raspberry PI parts!
</p> </p>
<div class="flex justify-end"> <div class="flex justify-end">
<Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 md:text-[1.2vw] text-[2vw]"> <Link
data-inview
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank"
className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 md:text-[1.2vw] text-[2vw]"
>
DISCORD DISCORD
</Link> </Link>
</div> </div>

31
src/components/join/JoinTitle.astro
View file

@ -3,22 +3,35 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="md:pt-[7vw] pt-[15vw] text-white w-full flex justify-center mb-[10vw]"> <div class="text-white w-full flex justify-center mb-[10vw]">
<div class="w-3/4 md:h-[20vw] h-[40vw] flex justify-between flex-col"> <div class="w-3/4 md:h-[20vw] h-[40vw] flex justify-between flex-col">
<div data-inview class=" animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"> <div
data-inview
class="animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"
>
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p> <p>Join Us</p>
Join Us
</p>
</div> </div>
<p class="text-[2.2vw] md:text-[1.25vw]"> <p class="text-[2.2vw] md:text-[1.25vw]">
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts! The <a
class="text-ieee-yellow underline"
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank">IEEE Project Space</a
> is an open-access, collaborative space located at EBU1-4710. Students can
do homework or get access to basic electronic tools such as soldering stations,
breadboard components, and Arduino and Raspberry PI parts!
</p> </p>
<div data-inview class="animate-ease-in-out flex justify-end in-view:animate-fade-up"> <div
<Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="text-[2.5vw] md:text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"> data-inview
class="animate-ease-in-out flex justify-end in-view:animate-fade-up"
>
<Link
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank"
className="text-[2.5vw] md:text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
>
JOIN JOIN
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>

20
src/components/main_page/Divider.astro
View file

@ -1,14 +1,24 @@
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full"> <div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
<div class="w-2/5"> <div class="w-2/5">
<p data-inview class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"> <p
data-inview
class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"
>
02 02
</p> </p>
<p data-inview class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"> <p
data-inview
class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"
>
2nd Largest in the US? 2nd Largest in the US?
</p> </p>
</div> </div>
<p data-inview class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light"> <p
The community of engineers at IEEE @ UCSD has consistently been one of the largest in the country. In 2021 and 2022, we won the 2nd Largest Student Branch Award in the US and we strive to win it again in the coming year. data-inview
class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light"
>
The community of engineers at IEEE @ UCSD has consistently been one of the
largest in the country. In 2021 and 2022, we won the 2nd Largest Student
Branch Award in the US and we strive to win it again in the coming year.
</p> </p>
</div> </div>

15
src/components/main_page/Landing.astro
View file

@ -7,9 +7,9 @@ import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md"; import { MdEmail } from "react-icons/md";
--- ---
<div class="w-full flex justify-between md:pt-[14vh] pt-[12vw]"> <div class="w-full flex justify-between space-x-2">
<div <div
class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw]" class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
> >
<p <p
data-inview data-inview
@ -24,11 +24,10 @@ import { MdEmail } from "react-icons/md";
Join one of the largest IEEE student branch in the US! Join one of the largest IEEE student branch in the US!
</p> </p>
<p class="text-white font-light text-[2vw] md:text-[1.3vw]"> <p class="text-white font-light text-[2vw] md:text-[1.3vw]">
IEEE @ UCSD is a pre-professional organization aiming to empower IEEE @ UCSD is a pre-professional organization aiming to empower engineers
engineers with practical experience through hands-on project with practical experience through hands-on project opportunities,
opportunities, insightful workshops, and panels with industry insightful workshops, and panels with industry professionals. We are a
professionals. We are a branch organization of the International branch organization of the International IEEE organization.
IEEE organization.
</p> </p>
<div class="flex justify-end w-full mt-[6%]"> <div class="flex justify-end w-full mt-[6%]">
@ -61,7 +60,7 @@ import { MdEmail } from "react-icons/md";
</div> </div>
</div> </div>
<div <div
class="md:w-[46%] w-[40%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black" class="md:w-[46%] w-[40%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
> >
<Image <Image
src={landingimg} src={landingimg}

19
src/layouts/Layout.astro
View file

@ -5,7 +5,7 @@ import InView from "../components/core/InView.astro";
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="w-full h-full m-0 bg-ieee-black">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
@ -14,20 +14,15 @@ 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 w-screen"> <body class="w-full h-full m-0 bg-ieee-black">
<div class="text-white min-h-screen">
<header class="sticky top-0 w-full z-[999]">
<Navbar /> <Navbar />
<main class="w-[95%]"> </header>
<main class="w-[95%] mx-auto">
<slot /> <slot />
</main> </main>
<Footer /> <Footer />
</div>
</body> </body>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</html> </html>