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

Add authentication #17

Manually merged
Webmaster merged 225 commits from auth into main 2025-03-08 10:37:06 +00:00
Conversation 2 Commits 225 Files changed 77 +585 -571
21 changed files with 585 additions and 571 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 055cbb67c0 - Show all commits

8
src/components/board/Filter.astro
View file

@ -2,18 +2,18 @@
const { filters, currentFilter } = Astro.props; const { filters, currentFilter } = Astro.props;
--- ---
<div class="inline-flex border border-white/20 rounded-full p-1 relative"> <div class="inline-flex border border-white/20 rounded-full md:p-[0.2vw] p-[0.4vw] relative my-[3vw]">
<div <div
id="slider" id="slider"
class="absolute h-[calc(100%-8px)] bg-[#FFB81C] rounded-full transition-none" class="absolute h-[calc(100%-15%)] bg-[#FFB81C] rounded-full transition-none"
style="left: 4px;" style="left: 1%;"
> >
</div> </div>
{ {
filters.map((filter) => ( filters.map((filter) => (
<button <button
data-filter={filter} data-filter={filter}
class={`px-6 py-2 rounded-full transition-all relative z-10 ${ class={`md:text-[1.3vw] text-[2.5vw] md:px-[1.8vw] px-[3vw] md:py-[0.2vw] py-[0.4vw] rounded-full transition-all relative z-10 ${
currentFilter === filter currentFilter === filter
? "text-black" ? "text-black"
: "text-white hover:bg-white/10 hover:bg-opacity-50" : "text-white hover:bg-white/10 hover:bg-opacity-50"

11
src/components/board/Officer.astro
View file

@ -36,22 +36,21 @@ const { name, position, picture, email } = Astro.props;
> >
<FaGear /> <FaGear />
</div> </div>
<p <div
data-inview class="flex w-[85%] justify-between"
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
> >
<p <p
data-inview data-inview
class="in-view:animate-fade-right text-[2vw] font-light md:leading-[3vh] leading-[1.5vh]" class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
> >
{name} {name}
</p> </p>
<div <div
data-inview data-inview
class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] w-[20vw] md:w-[10vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center" class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] w-fit border-[0.11vw] border-white/90 rounded-full px-[1vw] py-[0.1vw] h-fit text-center"
> >
{position} {position}
</div> </div>
</p> </div>
</div> </div>
</div> </div>

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

@ -15,51 +15,50 @@ 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
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down" class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
> >
<Image src={about} alt="About background image" /> <Image src={about} alt="About background image" />
<Image <Image
src={neko} src={neko}
alt="About image" alt="About image"
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:ww-[14vw] rounded-[2vw]" class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
/> />
</div> </div>
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]"> <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
<p>MEET THE BOARD</p> <p>MEET THE BOARD</p>
</div> </div>
<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} />
<div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]"> <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]">
{ {
officers.map((officer) => ( officers.map((officer) => (
<div <div
data-officer data-officer
data-types={JSON.stringify(officer.type)} data-types={JSON.stringify(officer.type)}
style="opacity: 0; visibility: hidden" style="opacity: 0; visibility: hidden"
> >
<Officer <Officer
name={officer.name} name={officer.name}
position={officer.position} position={officer.position}
picture={officer.picture} picture={officer.picture}
email={officer.email} email={officer.email}
/> />
</div> </div>
)) ))
} }
</div> </div>
</div> </div>

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

@ -4,146 +4,151 @@ 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-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md: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} src={whiteLogoHorizontal}
alt="IEEE UCSD Logo" alt="IEEE UCSD Logo"
/> />
</a> <Image
class="w-[40vw] md:hidden block"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
</a>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<div class="hidden md:flex md:w-[55%] md:justify-between"> <div class="hidden md:flex md:w-[55%] md:justify-between">
{ {
pages.map((page) => ( pages.map((page) => (
<a <a
href={page.path} href={page.path}
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
${ ${
page.name === "Online Store" page.name === "Online Store"
? "bg-ieee-yellow text-black hover:opacity-70" ? "bg-ieee-yellow text-black hover:opacity-70"
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light" : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
}`} }`}
> >
{page.name} {page.name}
</a> </a>
)) ))
} }
</div>
<!-- Mobile Hamburger/Close Button -->
<button
id="menu-btn"
class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
aria-label="Toggle menu"
>
<!-- Hamburger Icon -->
<svg
class="w-6 h-6 menu-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close Icon -->
<svg
class="w-6 h-6 close-icon hidden"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Hamburger/Close Button -->
<div <button
id="mobile-menu" id="menu-btn"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full" class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
aria-label="Toggle menu"
> >
<div <!-- Hamburger Icon -->
class="flex flex-col items-center h-[70vh] justify-evenly bg-black" <svg
> class="w-6 h-6 menu-icon"
{ fill="none"
pages.map((page) => ( stroke="currentColor"
<a viewBox="0 0 24 24"
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 <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close Icon -->
<svg
class="w-6 h-6 close-icon hidden"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
>
<div
class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
>
{
pages.map((page) => (
<a
href={page.path}
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}
</a> </a>
)) ))
} }
</div>
</div> </div>
</div>
</div> </div>
<style> <style>
#mobile-menu.show { #mobile-menu.show {
@apply translate-x-0; @apply translate-x-0;
} }
</style> </style>
<script> <script>
const menuBtn = document.getElementById("menu-btn"); const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu"); const mobileMenu = document.getElementById("mobile-menu");
const menuIcon = document.querySelector(".menu-icon"); const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close-icon"); const closeIcon = document.querySelector(".close-icon");
function toggleMenu(show: boolean) { function toggleMenu(show: boolean) {
if (show) { if (show) {
mobileMenu?.classList.remove("hidden"); mobileMenu?.classList.remove("hidden");
menuIcon?.classList.add("hidden"); menuIcon?.classList.add("hidden");
closeIcon?.classList.remove("hidden"); closeIcon?.classList.remove("hidden");
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
setTimeout(() => { setTimeout(() => {
mobileMenu?.classList.add("show"); mobileMenu?.classList.add("show");
}, 10); }, 10);
} else { } else {
mobileMenu?.classList.remove("show"); mobileMenu?.classList.remove("show");
menuIcon?.classList.remove("hidden"); menuIcon?.classList.remove("hidden");
closeIcon?.classList.add("hidden"); closeIcon?.classList.add("hidden");
document.body.style.overflow = ""; document.body.style.overflow = "";
setTimeout(() => { setTimeout(() => {
mobileMenu?.classList.add("hidden"); mobileMenu?.classList.add("hidden");
}, 100); }, 100);
}
} }
}
menuBtn?.addEventListener("click", () => { menuBtn?.addEventListener("click", () => {
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true; const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
toggleMenu(isMenuHidden); toggleMenu(isMenuHidden);
}); });
// Close menu when clicking outside // Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if ( if (
!mobileMenu?.contains(e.target as Node) && !mobileMenu?.contains(e.target as Node) &&
!menuBtn?.contains(e.target as Node) && !menuBtn?.contains(e.target as Node) &&
!mobileMenu?.classList.contains("hidden") !mobileMenu?.classList.contains("hidden")
) { ) {
toggleMenu(false); toggleMenu(false);
} }
}); });
</script> </script>

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

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

2
src/components/events/Calendar.jsx
View file

@ -234,7 +234,7 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
return ( return (
<div <div
className="w-[90vw] mx-auto p-[3vw] relative" className="md:w-[90vw] w-[95vw] mx-auto p-[3vw] relative z-10"
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
> >
{/* Hovering Calendar Header */} {/* Hovering Calendar Header */}

12
src/components/events/EventList.jsx
View file

@ -1,18 +1,18 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
const UpcomingEvent = ({ name, location, date, time, delay, description }) => ( const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
<div className="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative"> <div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 pb-[5%] relative">
<p <p
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`} className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`}
> >
{name} {name}
</p> </p>
<div <div
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`} className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
> >
<p>Location: {location}</p> Location: {location}
{date && ( {date && (
<> <>
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" /> <div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
@ -28,11 +28,11 @@ const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
</div> </div>
<p <p
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200 + 200} in-view:animate-fade-left text-[1vw] text-white/60`} className={`animate-duration-500 animate-delay-${delay * 200 + 200} in-view:animate-fade-left md:text-[1vw] text-[1.8vw] text-white/60`}
> >
{description} {description}
</p> </p>
<div className="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" /> <div className="bg-ieee-yellow md:h-[1.2vw] h-[1.5vw] md:w-[1.2vw] w-[1.5vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
</div> </div>
); );

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

@ -4,37 +4,37 @@ import eventbg from "../../images/eventbg.webp";
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 md:pt-[5vw] pt-[10vw] flex justify-center relative">
<div class="w-[45%] rounded-[2vw] aspect-[2/1] relative"> <div class="w-[45%] rounded-[2vw] aspect-[2/1] relative">
<div
id="event-skeleton"
class="skeleton absolute inset-0 rounded-[2vw] z-0"
>
</div>
<Image
id="event-image"
src={eventbg}
alt="Event Page Background"
class="w-full h-full rounded-[2vw] object-cover absolute top-0 left-0 z-1"
/>
</div>
<div <div
class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]" id="event-skeleton"
class="skeleton absolute inset-0 rounded-[2vw] z-0"
> >
<LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
<p>EVENTS</p>
</div> </div>
<Image
id="event-image"
src={eventbg}
alt="Event Page Background"
class="w-full h-full rounded-[2vw] object-cover absolute top-0 left-0 z-1"
/>
</div>
<div
class="absolute -bottom-[6%] md:left-[20%] left-[10%] flex items-center md:text-[3vw] text-[6vw] 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>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const image = document.getElementById("event-image"); const image = document.getElementById("event-image");
const skeleton = document.getElementById("event-skeleton"); const skeleton = document.getElementById("event-skeleton");
if (image && skeleton) { if (image && skeleton) {
image.onload = () => { image.onload = () => {
skeleton.style.display = "none"; skeleton.style.display = "none";
}; };
} }
}); });
</script> </script>

9
src/components/events/UpcomingEvents.astro
View file

@ -1,21 +1,20 @@
--- ---
import UpcomingEvent from "./UpcomingEvent.astro";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
import EventList from "./EventList.jsx"; import EventList from "./EventList.jsx";
const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY; const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID; const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
--- ---
<div class="flex ml-[15%] my-[10%]"> <div class="flex ml-[15%] md:my-[10%] my-[20%]">
<div class="w-1/4 text-white pr-[5%] mr-[10%]"> <div class="md:w-1/4 w-[30%] text-white pr-[5%] mr-[10%]">
<div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"></div> <div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"></div>
<div class="flex items-center text-[2vw] font-bold my-[10%]"> <div class="flex items-center md:text-[2vw] text-[4vw] font-bold my-[10%]">
<LiaDotCircle className=" mr-[1vw] text-[2.5vw]" /> <LiaDotCircle className=" mr-[1vw] text-[2.5vw]" />
<p> <p>
Upcoming <br /> Events Upcoming <br /> Events
</p> </p>
</div> </div>
<p class="text-[1.3vw] font-light"> <p class="md:text-[1.3vw] text-[2vw] font-light">
SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE! SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE!
</p> </p>
</div> </div>

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

@ -3,22 +3,32 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="pt-[14vh] text-white w-full flex justify-center mb-[10vh]"> <div
<div class="w-3/4 h-[40vh] flex justify-between flex-col"> class="md:pt-[5vw] pt-[10vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"
<div class="flex items-center text-[3vw] pl-[5%] pt-[5%]"> >
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
<p> <div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
Contact Us <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
</p> <p>Contact Us</p>
</div>
<p class="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!
</p>
<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 text-[1.2vw]">
DISCORD
</Link>
</div>
</div> </div>
<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!
</p>
<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]"
>
DISCORD
</Link>
</div>
</div>
</div> </div>

47
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
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> data-inview
<p> class="animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"
Join Us >
</p> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
</div> <p>Join Us</p>
<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!
</p>
<div 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
</Link>
</div>
</div> </div>
<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!
</p>
<div
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
</Link>
</div>
</div>
</div> </div>

34
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
02 data-inview
</p> 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="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"> >
2nd Largest in the US? 02
</p>
</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">
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 > <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?
</p>
</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"
>
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>
</div>

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

@ -7,66 +7,65 @@ 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
data-inview
class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down"
> >
<p UC San Diego IEEE
data-inview </p>
class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down" <p
> data-inview
UC San Diego IEEE class="animate-ease-in-out font-bold text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right"
</p>
<p
data-inview
class="animate-ease-in-out font-bold text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right"
>
Join one of the largest IEEE student branch in the US!
</p>
<p class="text-white font-light text-[2vw] md:text-[1.3vw]">
IEEE @ UCSD is a pre-professional organization aiming to empower
engineers with practical experience through hands-on project
opportunities, insightful workshops, and panels with industry
professionals. We are a branch organization of the International
IEEE organization.
</p>
<div class="flex justify-end w-full mt-[6%]">
<div
class="text-white text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between"
>
<Link
href="https://www.instagram.com/ieee.ucsd"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<RiInstagramFill />
</Link>
<Link
href="https://discord.gg/XxfjqZSjca"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<FaDiscord />
</Link>
<Link
href="mailto:ieee@ucsd.edu"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<MdEmail />
</Link>
</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"
> >
<Image Join one of the largest IEEE student branch in the US!
src={landingimg} </p>
alt="circuit" <p class="text-white font-light text-[2vw] md:text-[1.3vw]">
class="w-[95%] md:h-[40vw] h-[60vw] object-contain" IEEE @ UCSD is a pre-professional organization aiming to empower engineers
/> with practical experience through hands-on project opportunities,
insightful workshops, and panels with industry professionals. We are a
branch organization of the International IEEE organization.
</p>
<div class="flex justify-end w-full mt-[6%]">
<div
class="text-white text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between"
>
<Link
href="https://www.instagram.com/ieee.ucsd"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<RiInstagramFill />
</Link>
<Link
href="https://discord.gg/XxfjqZSjca"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<FaDiscord />
</Link>
<Link
href="mailto:ieee@ucsd.edu"
target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
>
<MdEmail />
</Link>
</div>
</div> </div>
</div>
<div
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
src={landingimg}
alt="circuit"
class="w-[95%] md:h-[40vw] h-[60vw] object-contain"
/>
</div>
</div> </div>

22
src/components/projects/AP.astro
View file

@ -4,29 +4,25 @@ import ProjectSection from "./ProjectSection.astro";
--- ---
<div class="text-white h-[65vh] justify-between mt-[15%] mb-[30%] mx-[10%] relative"> <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
<div class="flex items-center text-[2.7vw] mb-[7%]"> <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
Annual Projects Annual Projects
</p> </p>
</div> </div>
<p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light"> <p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p> </p>
<div class="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]"> <div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]">
<LiaDotCircle className="text-[2vw] pt-[0.5%]"/> <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
<p class="text-[2vw]"> <p class="md:text-[2vw] text-[3vw]">
ridiculus nec egestas Skills & Requirements
</p> </p>
<p class="w-3/5"> <p class="w-3/5">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. IEEE @ UCSD’s annual projects are intended for students with intermediate experience with hardware or software. Participation on teams assemble an array of skills and talents of soft and hard skills.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p> </p>
</div> </div>

260
src/components/projects/ProjectSection.astro
View file

@ -6,151 +6,151 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
--- ---
<div class="flex gap-[1.5vw] h-[50vh]"> <div
{ class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0"
Object.entries(annualProjects).map(([title, project], index) => ( >
<a {
href={project.url || "#"} Object.entries(annualProjects).map(([title, project], index) => (
class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`} <a
data-project={index + 1} href={project.url || "#"}
target={title === "Supercomputing" ? "_blank" : "_self"} class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
> data-project={index + 1}
<div class="relative w-full h-full"> target={title === "Supercomputing" ? "_blank" : "_self"}
<div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" /> >
<Image <div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
src={project.image} <Image
alt={`${title} Project`} src={project.image}
width={668} alt={`${title} Project`}
height={990} width={668}
class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 z-10" height={990}
style="opacity: 0;" class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
/> />
</div> <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
<div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]"> <div class="w-full">
<div class="w-full"> <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
<p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap text-[1.2vw] font-light mb-[5%]"> {title}
{title} </p>
</p> <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
<p class="hidden [.expanded_&]:contents transition-all duration-300 overflow-hidden"> {project.description}
{project.description} </p>
</p> <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
<div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto"> <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
<div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]"> more details
more details <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" /> </div>
</div> </div>
</div> </div>
</div> <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" /> </div>
</div>
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]"> <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
<FaGear /> <FaGear
</div> data-inview
</a> className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
)) />
} </div>
</a>
))
}
</div> </div>
<style> <style>
.project-card { .project-card {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
}
.project-card img {
transition: transform 0.3s ease-in-out;
}
@media (min-width: 768px) {
.project-card.expanded {
flex: 2;
} }
.project-card img { .project-card.expanded img {
transition: transform 0.3s ease-in-out; transform: scale(1.1);
} }
@media (min-width: 768px) { .project-card.expanded p {
.project-card.expanded { opacity: 1;
flex: 2;
}
.project-card.expanded img {
transform: scale(1.1);
}
.project-card.expanded p {
opacity: 1;
}
} }
}
</style> </style>
<script> <script>
function initializeProjectCards() { function initializeProjectCards() {
const projectCards = document.querySelectorAll(".project-card"); const projectCards = document.querySelectorAll(".project-card");
const STORAGE_KEY = "lastExpandedCardIndex"; const STORAGE_KEY = "lastExpandedCardIndex";
// Function to remove expanded class from all cards // Function to remove expanded class from all cards
function removeExpandedFromAll() { function removeExpandedFromAll() {
projectCards.forEach((card) => { projectCards.forEach((card) => {
card.classList.remove("expanded"); card.classList.remove("expanded");
}); });
}
// Function to expand a card by index
function expandCard(index: number) {
if (window.innerWidth >= 768) {
removeExpandedFromAll();
projectCards[index]?.classList.add("expanded");
localStorage.setItem(STORAGE_KEY, index.toString());
}
}
// Get the last expanded card index from localStorage
// Prevents bug where the expanded card breaks upon page reload
const lastExpandedIndex = parseInt(
localStorage.getItem(STORAGE_KEY) || "0"
);
expandCard(lastExpandedIndex);
// Add hover listeners to each card
projectCards.forEach((card, index) => {
card.addEventListener("mouseenter", () => {
expandCard(index);
});
});
// Handle window resize
window.addEventListener("resize", () => {
const currentIndex = parseInt(
localStorage.getItem(STORAGE_KEY) || "0"
);
expandCard(currentIndex);
});
} }
initializeProjectCards(); // Function to expand a card by index
function expandCard(index: number) {
document.addEventListener("astro:page-load", initializeProjectCards); if (window.innerWidth >= 768) {
removeExpandedFromAll();
// Image loading handler projectCards[index]?.classList.add("expanded");
function handleImageLoading() { localStorage.setItem(STORAGE_KEY, index.toString());
const projectImages = document.querySelectorAll(".project-card img"); }
projectImages.forEach((image, index) => {
// Ensure the image is fully loaded, even if it's already in cache
if (image.complete) {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}
} else {
image.addEventListener("load", () => {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}
});
}
});
} }
// Ensure images are loaded after a short delay // Get the last expanded card index from localStorage
setTimeout(handleImageLoading, 100); // Prevents bug where the expanded card breaks upon page reload
handleImageLoading(); const lastExpandedIndex = parseInt(
document.addEventListener("astro:page-load", handleImageLoading); localStorage.getItem(STORAGE_KEY) || "0",
);
expandCard(lastExpandedIndex);
// Add hover listeners to each card
projectCards.forEach((card, index) => {
card.addEventListener("mouseenter", () => {
expandCard(index);
});
});
// Handle window resize
window.addEventListener("resize", () => {
const currentIndex = parseInt(localStorage.getItem(STORAGE_KEY) || "0");
expandCard(currentIndex);
});
}
initializeProjectCards();
document.addEventListener("astro:page-load", initializeProjectCards);
// Image loading handler
function handleImageLoading() {
const projectImages = document.querySelectorAll(".project-card img");
projectImages.forEach((image, index) => {
// Ensure the image is fully loaded, even if it's already in cache
if (image.complete) {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}
} else {
image.addEventListener("load", () => {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}
});
}
});
}
// Ensure images are loaded after a short delay
setTimeout(handleImageLoading, 100);
handleImageLoading();
document.addEventListener("astro:page-load", handleImageLoading);
</script> </script>

90
src/components/projects/QP.astro
View file

@ -6,57 +6,51 @@ import qp from "../../images/qp.webp";
import { IoIosArrowDroprightCircle } from "react-icons/io"; import { IoIosArrowDroprightCircle } from "react-icons/io";
--- ---
<div class="text-white flex flex-col items-center my-[7%] relative"> <div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
<div class="flex items-center text-[2.7vw] mb-[4%]"> <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p>Quarterly Project</p> <p>Quarterly Project</p>
</div> </div>
<div class="w-[70vw] aspect-[2.5/1] relative"> <div class="w-[70vw] aspect-[2.5/1] relative">
<div <div id="qp-skeleton" class="skeleton absolute inset-0 rounded-full z-0">
id="qp-skeleton"
class="skeleton absolute inset-0 rounded-full z-0"
>
</div>
<Image
id="qp-image"
src={qp}
alt="qp showcase photo"
class="w-[70vw] aspect-[2.5/1] rounded-full absolute top-0 left-0 z-1"
/>
</div>
<Link
data-inview
href="/quarterly"
className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
>
more details
<IoIosArrowDroprightCircle
className="ml-[0.5vw] text-[1.7vw] mt-[1%]"
/>
</Link>
<div
data-inview
class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
>
<p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
<p>
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. Check out QP page for more detail!
</p>
</div> </div>
<Image
src={qp}
alt="qp showcase photo"
class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full"
/>
</div>
<Link
data-inview
href="/quarterly"
className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
>
more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]" />
</Link>
<div
data-inview
class="in-view:animate-fade-right md:w-[45%] w-[70%] text-[1.8vw] md:text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute md:-bottom-[6%] -bottom-[15%] md:left-[15%] left-[5%] px-[1.5%] py-[1%] rounded-[1.5vw]"
>
<p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p>
<p>
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. Check out
QP page for more detail!
</p>
</div>
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const image = document.getElementById("qp-image"); const image = document.getElementById("qp-image");
const skeleton = document.getElementById("qp-skeleton"); const skeleton = document.getElementById("qp-skeleton");
if (image) { if (image) {
image.onload = () => { image.onload = () => {
skeleton.style.display = "none"; skeleton.style.display = "none";
}; };
} }
}); });
</script> </script>

4
src/components/robocub/RoboTitle.astro
View file

@ -5,12 +5,12 @@ import model from "../../images/model.webp";
--- ---
<div <div
class="flex items-center h-[60vh] relative w-full pl-[10%] mt-[3%] mb-[15%]" class="flex items-center md:h-[35vw] h-[45vw] relative w-full pl-[10%] md:mt-[3%] mt-[20%] mb-[15%]"
> >
<Title title="Robocup" /> <Title title="Robocup" />
<Image <Image
src={model} src={model}
alt="Robocup robot model" alt="Robocup robot model"
class="absolute w-[50%] right-[10%] top-[5%]" class="absolute md:w-[50%] w-[60%] md:right-[10%] right-0 md:top-[5%]"
/> />
</div> </div>

48
src/layouts/Layout.astro
View file

@ -5,34 +5,24 @@ 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" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro Basics</title> <title>IEEEUCSD</title>
</head> </head>
<InView /> <InView />
<body <body class="w-full h-full m-0 bg-ieee-black">
class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip" <div class="text-white min-h-screen">
> <header class="sticky top-0 w-full z-[999]">
<Navbar /> <Navbar />
<main class="w-[95%]"> </header>
<slot /> <main class="w-[95%] mx-auto">
</main> <slot />
<Footer /> </main>
</body> <Footer />
</div>
<style> </body>
:root {
background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</html> </html>

5
src/pages/events.astro
View file

@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro";
import EventTitle from "../components/events/EventTitle.astro"; import EventTitle from "../components/events/EventTitle.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import eventborder from "../images/eventborder.webp"; import eventborder from "../images/eventborder.webp";
import calendar from "../images/calendar2.webp";
import UpcomingEvents from "../components/events/UpcomingEvents.astro"; import UpcomingEvents from "../components/events/UpcomingEvents.astro";
import Calendar from "../components/events/Calendar.jsx"; import Calendar from "../components/events/Calendar.jsx";
@ -15,12 +14,12 @@ const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
<Image <Image
src={eventborder} src={eventborder}
alt="JOIN US" alt="JOIN US"
class="absolute left-[1vw] w-[4vw] top-[60vh]" class="absolute left-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<Image <Image
src={eventborder} src={eventborder}
alt="JOIN US" alt="JOIN US"
class="absolute right-[1vw] w-[4vw] top-[60vh]" class="absolute right-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<EventTitle /> <EventTitle />
<UpcomingEvents /> <UpcomingEvents />

39
src/pages/find.astro
View file

@ -9,26 +9,25 @@ import contactbroder from "../images/contactbroder.webp";
--- ---
<Layout> <Layout>
<Image
src={contactbroder}
alt="JOIN US"
class="absolute left-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/>
<Image
src={contactbroder}
alt="JOIN US"
class="absolute right-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/>
<FindTitle />
<div class="w-full flex justify-center">
<div class="skeleton w-3/4 rounded-full"></div>
<Image <Image
src={contactbroder} src={event}
alt="JOIN US" alt="board group photos"
class="absolute left-[1vw] w-[4vw] top-[60vh]" class="w-[90%] md:w-3/4 rounded-full"
/> />
<Image </div>
src={contactbroder}
alt="JOIN US"
class="absolute right-[1vw] w-[4vw] top-[60vh]"
/>
<FindTitle />
<div class="w-full flex justify-center">
<div class="skeleton w-3/4 rounded-full">
<Image
src={event}
alt="board group photos"
class="w-full rounded-full"
/>
</div>
</div>
<Findus />
<Social />
</Layout> </Layout>
<Findus />
<Social />

2
src/pages/robocup.astro
View file

@ -34,7 +34,7 @@ import Competition from "../components/signal/Competition.astro";
<Link <Link
href="/" href="/"
target="_blank" target="_blank"
className="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%] text-[1.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>