Merge branch 'main' into auth
This commit is contained in:
chark1es
commit
055cbb67c0
21 changed files with 585 additions and 571 deletions
|
|
@ -2,18 +2,18 @@
|
|||
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
|
||||
id="slider"
|
||||
class="absolute h-[calc(100%-8px)] bg-[#FFB81C] rounded-full transition-none"
|
||||
style="left: 4px;"
|
||||
class="absolute h-[calc(100%-15%)] bg-[#FFB81C] rounded-full transition-none"
|
||||
style="left: 1%;"
|
||||
>
|
||||
</div>
|
||||
{
|
||||
filters.map((filter) => (
|
||||
<button
|
||||
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
|
||||
? "text-black"
|
||||
: "text-white hover:bg-white/10 hover:bg-opacity-50"
|
||||
|
|
|
|||
|
|
@ -36,22 +36,21 @@ const { name, position, picture, email } = Astro.props;
|
|||
>
|
||||
<FaGear />
|
||||
</div>
|
||||
<p
|
||||
data-inview
|
||||
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
|
||||
<div
|
||||
class="flex w-[85%] justify-between"
|
||||
>
|
||||
<p
|
||||
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}
|
||||
</p>
|
||||
<div
|
||||
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}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,51 +15,50 @@ const currentFilter = "All";
|
|||
---
|
||||
|
||||
<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
|
||||
data-inview
|
||||
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
|
||||
>
|
||||
<Image src={about} alt="About background image" />
|
||||
<Image
|
||||
src={neko}
|
||||
alt="About image"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:ww-[14vw] rounded-[2vw]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-inview
|
||||
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
|
||||
>
|
||||
<Image src={about} alt="About background image" />
|
||||
<Image
|
||||
src={neko}
|
||||
alt="About image"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
|
||||
<p>MEET THE BOARD</p>
|
||||
</div>
|
||||
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
|
||||
<p>MEET THE BOARD</p>
|
||||
</div>
|
||||
|
||||
<p
|
||||
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
|
||||
interests! Feel free to reach out for any questions about our position
|
||||
or experiences.
|
||||
</p>
|
||||
<p
|
||||
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 interests!
|
||||
Feel free to reach out for any questions about our position or experiences.
|
||||
</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]">
|
||||
{
|
||||
officers.map((officer) => (
|
||||
<div
|
||||
data-officer
|
||||
data-types={JSON.stringify(officer.type)}
|
||||
style="opacity: 0; visibility: hidden"
|
||||
>
|
||||
<Officer
|
||||
name={officer.name}
|
||||
position={officer.position}
|
||||
picture={officer.picture}
|
||||
email={officer.email}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]">
|
||||
{
|
||||
officers.map((officer) => (
|
||||
<div
|
||||
data-officer
|
||||
data-types={JSON.stringify(officer.type)}
|
||||
style="opacity: 0; visibility: hidden"
|
||||
>
|
||||
<Officer
|
||||
name={officer.name}
|
||||
position={officer.position}
|
||||
picture={officer.picture}
|
||||
email={officer.email}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,146 +4,151 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
|
|||
import pages from "../../data/pages.json";
|
||||
---
|
||||
|
||||
<div class="md:w-full w-fit fixed z-10">
|
||||
<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]"
|
||||
>
|
||||
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
|
||||
<Image
|
||||
class="w-[15vw]"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
</a>
|
||||
<div class="w-full">
|
||||
<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]"
|
||||
>
|
||||
<a href="/" class="hover:opacity-60 duration-300">
|
||||
<Image
|
||||
class="w-[15vw] md:block hidden"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
<Image
|
||||
class="w-[40vw] md:hidden block"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-[55%] md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-[55%] md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
|
||||
${
|
||||
page.name === "Online Store"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
page.name === "Online Store"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
}`}
|
||||
>
|
||||
{page.name}
|
||||
</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>
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</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"
|
||||
<!-- 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"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center h-[70vh] justify-evenly bg-black"
|
||||
>
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
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
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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"
|
||||
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
||||
: "text-white hover:text-gray-300 border-white"
|
||||
page.name === "Online Store"
|
||||
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
||||
: "text-white hover:text-gray-300 border-white border-2"
|
||||
}`}
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#mobile-menu.show {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
#mobile-menu.show {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const menuBtn = document.getElementById("menu-btn");
|
||||
const mobileMenu = document.getElementById("mobile-menu");
|
||||
const menuIcon = document.querySelector(".menu-icon");
|
||||
const closeIcon = document.querySelector(".close-icon");
|
||||
const menuBtn = document.getElementById("menu-btn");
|
||||
const mobileMenu = document.getElementById("mobile-menu");
|
||||
const menuIcon = document.querySelector(".menu-icon");
|
||||
const closeIcon = document.querySelector(".close-icon");
|
||||
|
||||
function toggleMenu(show: boolean) {
|
||||
if (show) {
|
||||
mobileMenu?.classList.remove("hidden");
|
||||
menuIcon?.classList.add("hidden");
|
||||
closeIcon?.classList.remove("hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
function toggleMenu(show: boolean) {
|
||||
if (show) {
|
||||
mobileMenu?.classList.remove("hidden");
|
||||
menuIcon?.classList.add("hidden");
|
||||
closeIcon?.classList.remove("hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("show");
|
||||
}, 10);
|
||||
} else {
|
||||
mobileMenu?.classList.remove("show");
|
||||
menuIcon?.classList.remove("hidden");
|
||||
closeIcon?.classList.add("hidden");
|
||||
document.body.style.overflow = "";
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("show");
|
||||
}, 10);
|
||||
} else {
|
||||
mobileMenu?.classList.remove("show");
|
||||
menuIcon?.classList.remove("hidden");
|
||||
closeIcon?.classList.add("hidden");
|
||||
document.body.style.overflow = "";
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("hidden");
|
||||
}, 100);
|
||||
}
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("hidden");
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
menuBtn?.addEventListener("click", () => {
|
||||
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
|
||||
toggleMenu(isMenuHidden);
|
||||
});
|
||||
menuBtn?.addEventListener("click", () => {
|
||||
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
|
||||
toggleMenu(isMenuHidden);
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (
|
||||
!mobileMenu?.contains(e.target as Node) &&
|
||||
!menuBtn?.contains(e.target as Node) &&
|
||||
!mobileMenu?.classList.contains("hidden")
|
||||
) {
|
||||
toggleMenu(false);
|
||||
}
|
||||
});
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (
|
||||
!mobileMenu?.contains(e.target as Node) &&
|
||||
!menuBtn?.contains(e.target as Node) &&
|
||||
!mobileMenu?.classList.contains("hidden")
|
||||
) {
|
||||
toggleMenu(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
---
|
||||
const {title} = Astro.props;
|
||||
const { title } = Astro.props;
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="flex items-center text-[3vw] ml-[10%] pt-[10%] text-white font-semibold">
|
||||
<LiaDotCircle className=" mr-[1vw] text-[2.7vw]"/>
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<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]" />
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="w-[90vw] mx-auto p-[3vw] relative"
|
||||
className="md:w-[90vw] w-[95vw] mx-auto p-[3vw] relative z-10"
|
||||
onMouseMove={handleMouseMove}
|
||||
>
|
||||
{/* Hovering Calendar Header */}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
|
||||
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
|
||||
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}
|
||||
</p>
|
||||
<div
|
||||
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 && (
|
||||
<>
|
||||
<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>
|
||||
<p
|
||||
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}
|
||||
</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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,37 +4,37 @@ import eventbg from "../../images/eventbg.webp";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="w-full pt-[25vh] flex justify-center 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 class="w-full md:pt-[5vw] pt-[10vw] flex justify-center relative">
|
||||
<div class="w-[45%] rounded-[2vw] aspect-[2/1] relative">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const image = document.getElementById("event-image");
|
||||
const skeleton = document.getElementById("event-skeleton");
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const image = document.getElementById("event-image");
|
||||
const skeleton = document.getElementById("event-skeleton");
|
||||
|
||||
if (image && skeleton) {
|
||||
image.onload = () => {
|
||||
skeleton.style.display = "none";
|
||||
};
|
||||
}
|
||||
});
|
||||
if (image && skeleton) {
|
||||
image.onload = () => {
|
||||
skeleton.style.display = "none";
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
---
|
||||
import UpcomingEvent from "./UpcomingEvent.astro";
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
import EventList from "./EventList.jsx";
|
||||
const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
|
||||
const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
|
||||
---
|
||||
|
||||
<div class="flex ml-[15%] my-[10%]">
|
||||
<div class="w-1/4 text-white pr-[5%] mr-[10%]">
|
||||
<div class="flex ml-[15%] md:my-[10%] my-[20%]">
|
||||
<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="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]" />
|
||||
<p>
|
||||
Upcoming <br /> Events
|
||||
</p>
|
||||
</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!
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,32 @@ import Link from "next/link";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="pt-[14vh] text-white w-full flex justify-center mb-[10vh]">
|
||||
<div class="w-3/4 h-[40vh] flex justify-between flex-col">
|
||||
<div class="flex items-center text-[3vw] pl-[5%] pt-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<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
|
||||
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="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
||||
<p>Contact Us</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,35 @@ import Link from "next/link";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="md:pt-[7vw] pt-[15vw] 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 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%]"/>
|
||||
<p>
|
||||
Join Us
|
||||
</p>
|
||||
</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 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
|
||||
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%]" />
|
||||
<p>Join Us</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
|
||||
<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">
|
||||
02
|
||||
</p>
|
||||
<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.
|
||||
<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"
|
||||
>
|
||||
02
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -7,66 +7,65 @@ import { RiInstagramFill } from "react-icons/ri";
|
|||
import { MdEmail } from "react-icons/md";
|
||||
---
|
||||
|
||||
<div class="w-full flex justify-between md:pt-[14vh] pt-[12vw]">
|
||||
<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]"
|
||||
<div class="w-full flex justify-between space-x-2">
|
||||
<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-[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
|
||||
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"
|
||||
>
|
||||
UC San Diego IEEE
|
||||
</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"
|
||||
UC San Diego IEEE
|
||||
</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"
|
||||
>
|
||||
<Image
|
||||
src={landingimg}
|
||||
alt="circuit"
|
||||
class="w-[95%] md:h-[40vw] h-[60vw] object-contain"
|
||||
/>
|
||||
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-[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>
|
||||
|
|
|
|||
|
|
@ -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="flex items-center text-[2.7vw] mb-[7%]">
|
||||
<div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
|
||||
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
Annual Projects
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light">
|
||||
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
|
||||
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
|
||||
Tellus nibh vivamus tempus molestie tristique quis
|
||||
<p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]">
|
||||
<LiaDotCircle className="text-[2vw] pt-[0.5%]"/>
|
||||
<p class="text-[2vw]">
|
||||
ridiculus nec egestas
|
||||
<div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]">
|
||||
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
|
||||
<p class="md:text-[2vw] text-[3vw]">
|
||||
Skills & Requirements
|
||||
</p>
|
||||
<p class="w-3/5">
|
||||
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
|
||||
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
|
||||
Tellus nibh vivamus tempus molestie tristique quis
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,151 +6,151 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
|
|||
import { Image } from "astro:assets";
|
||||
---
|
||||
|
||||
<div class="flex gap-[1.5vw] h-[50vh]">
|
||||
{
|
||||
Object.entries(annualProjects).map(([title, project], index) => (
|
||||
<a
|
||||
href={project.url || "#"}
|
||||
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}
|
||||
target={title === "Supercomputing" ? "_blank" : "_self"}
|
||||
>
|
||||
<div class="relative w-full h-full">
|
||||
<div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
|
||||
<Image
|
||||
src={project.image}
|
||||
alt={`${title} Project`}
|
||||
width={668}
|
||||
height={990}
|
||||
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"
|
||||
style="opacity: 0;"
|
||||
/>
|
||||
</div>
|
||||
<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">
|
||||
<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}
|
||||
</p>
|
||||
<p class="hidden [.expanded_&]:contents transition-all duration-300 overflow-hidden">
|
||||
{project.description}
|
||||
</p>
|
||||
<div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto">
|
||||
<div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]">
|
||||
more details
|
||||
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
|
||||
</div>
|
||||
<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 || "#"}
|
||||
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}
|
||||
target={title === "Supercomputing" ? "_blank" : "_self"}
|
||||
>
|
||||
<div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
|
||||
<Image
|
||||
src={project.image}
|
||||
alt={`${title} Project`}
|
||||
width={668}
|
||||
height={990}
|
||||
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 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="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%]">
|
||||
{title}
|
||||
</p>
|
||||
<p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
|
||||
{project.description}
|
||||
</p>
|
||||
<div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
|
||||
<div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
|
||||
more details
|
||||
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]">
|
||||
<FaGear />
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<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
|
||||
data-inview
|
||||
className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.project-card {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.project-card {
|
||||
background-size: cover;
|
||||
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 {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
.project-card.expanded img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.project-card.expanded {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.project-card.expanded img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project-card.expanded p {
|
||||
opacity: 1;
|
||||
}
|
||||
.project-card.expanded p {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initializeProjectCards() {
|
||||
const projectCards = document.querySelectorAll(".project-card");
|
||||
const STORAGE_KEY = "lastExpandedCardIndex";
|
||||
function initializeProjectCards() {
|
||||
const projectCards = document.querySelectorAll(".project-card");
|
||||
const STORAGE_KEY = "lastExpandedCardIndex";
|
||||
|
||||
// Function to remove expanded class from all cards
|
||||
function removeExpandedFromAll() {
|
||||
projectCards.forEach((card) => {
|
||||
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);
|
||||
});
|
||||
// Function to remove expanded class from all cards
|
||||
function removeExpandedFromAll() {
|
||||
projectCards.forEach((card) => {
|
||||
card.classList.remove("expanded");
|
||||
});
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 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());
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure images are loaded after a short delay
|
||||
setTimeout(handleImageLoading, 100);
|
||||
handleImageLoading();
|
||||
document.addEventListener("astro:page-load", handleImageLoading);
|
||||
// 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();
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,57 +6,51 @@ import qp from "../../images/qp.webp";
|
|||
import { IoIosArrowDroprightCircle } from "react-icons/io";
|
||||
---
|
||||
|
||||
<div class="text-white flex flex-col items-center my-[7%] relative">
|
||||
<div class="flex items-center text-[2.7vw] mb-[4%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
||||
<p>Quarterly Project</p>
|
||||
</div>
|
||||
<div class="w-[70vw] aspect-[2.5/1] relative">
|
||||
<div
|
||||
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 class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
|
||||
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
||||
<p>Quarterly Project</p>
|
||||
</div>
|
||||
<div class="w-[70vw] aspect-[2.5/1] relative">
|
||||
<div id="qp-skeleton" class="skeleton absolute inset-0 rounded-full z-0">
|
||||
</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>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const image = document.getElementById("qp-image");
|
||||
const skeleton = document.getElementById("qp-skeleton");
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const image = document.getElementById("qp-image");
|
||||
const skeleton = document.getElementById("qp-skeleton");
|
||||
|
||||
if (image) {
|
||||
image.onload = () => {
|
||||
skeleton.style.display = "none";
|
||||
};
|
||||
}
|
||||
});
|
||||
if (image) {
|
||||
image.onload = () => {
|
||||
skeleton.style.display = "none";
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import model from "../../images/model.webp";
|
|||
---
|
||||
|
||||
<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" />
|
||||
<Image
|
||||
src={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>
|
||||
|
|
|
|||
|
|
@ -5,34 +5,24 @@ import InView from "../components/core/InView.astro";
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
</head>
|
||||
<InView />
|
||||
<body
|
||||
class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip"
|
||||
>
|
||||
<html lang="en" class="w-full h-full m-0 bg-ieee-black">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>IEEEUCSD</title>
|
||||
</head>
|
||||
<InView />
|
||||
<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 />
|
||||
<main class="w-[95%]">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</header>
|
||||
<main class="w-[95%] mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro";
|
|||
import EventTitle from "../components/events/EventTitle.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import eventborder from "../images/eventborder.webp";
|
||||
import calendar from "../images/calendar2.webp";
|
||||
import UpcomingEvents from "../components/events/UpcomingEvents.astro";
|
||||
import Calendar from "../components/events/Calendar.jsx";
|
||||
|
||||
|
|
@ -15,12 +14,12 @@ const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
|
|||
<Image
|
||||
src={eventborder}
|
||||
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
|
||||
src={eventborder}
|
||||
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 />
|
||||
<UpcomingEvents />
|
||||
|
|
|
|||
|
|
@ -9,26 +9,25 @@ import contactbroder from "../images/contactbroder.webp";
|
|||
---
|
||||
|
||||
<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
|
||||
src={contactbroder}
|
||||
alt="JOIN US"
|
||||
class="absolute left-[1vw] w-[4vw] top-[60vh]"
|
||||
src={event}
|
||||
alt="board group photos"
|
||||
class="w-[90%] md:w-3/4 rounded-full"
|
||||
/>
|
||||
<Image
|
||||
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 />
|
||||
</div>
|
||||
</Layout>
|
||||
<Findus />
|
||||
<Social />
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import Competition from "../components/signal/Competition.astro";
|
|||
<Link
|
||||
href="/"
|
||||
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
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Reference in a new issue