Merge branch 'main' of https://git.ieeeucsd.org/Webmaster/dev-ieeeucsd-org
This commit is contained in:
Chiayi Wu
commit
08bcf09f9c
22 changed files with 472 additions and 446 deletions
|
|
@ -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:w-[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-[1vw]">
|
||||
<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,14 +4,14 @@ const {title, text} = Astro.props;
|
|||
---
|
||||
|
||||
<div class="flex flex-col items-center text-white my-[10%]">
|
||||
<div class="flex items-center text-[2.5vw] mb-[3%]">
|
||||
<div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="w-[70%] text-[1.4vw] font-light ">
|
||||
<p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light ">
|
||||
{text}
|
||||
</p>
|
||||
</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-ieee-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] rounded-full md:border-[0.1vw]"
|
||||
>
|
||||
<a href="/" class="hover:opacity-60 duration-300">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const {title} = Astro.props;
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="flex items-center text-[2.5vw] mb-[5%]">
|
||||
<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
---
|
||||
const {title} = Astro.props;
|
||||
const { title } = Astro.props;
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[10%] pt-[15%] text-white font-semibold">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ import eventbg from "../../images/eventbg.webp";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="w-full md:pt-[13vw] pt-[16vw] flex justify-center relative">
|
||||
<Image
|
||||
src={eventbg}
|
||||
alt="Event Page Background"
|
||||
class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
|
||||
/>
|
||||
<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 class="w-full md:pt-[5vw] pt-[10vw] flex justify-center relative">
|
||||
<Image
|
||||
src={eventbg}
|
||||
alt="Event Page Background"
|
||||
class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
|
||||
/>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,32 @@ import Link from "next/link";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="md:pt-[10vw] pt-[15vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]">
|
||||
<div class="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>
|
||||
<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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,51 @@
|
|||
---
|
||||
import qpTimeline from "../../data/qpTimeline.json";
|
||||
const { events } = qpTimeline;
|
||||
const {timeline} = Astro.props;
|
||||
import Subtitle from "../core/Subtitle.astro";
|
||||
---
|
||||
|
||||
<div class="flex flex-col items-center mt-[10%] mb-[15%]">
|
||||
<div class="flex flex-col items-center md:mt-[10%] mt-[25%] md:mb-[15%] mb-[35%]">
|
||||
<Subtitle title="Timeline" />
|
||||
|
||||
<div
|
||||
class="relative flex items-center justify-between w-full max-w-[65vw] py-[10%] mt-[3%]"
|
||||
class="relative flex items-center justify-between w-full md:max-w-[65vw] max-w-[85vw] py-[10%] md:mt-[3%] mt-[10%]"
|
||||
>
|
||||
<div
|
||||
class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
|
||||
>
|
||||
</div>
|
||||
|
||||
{
|
||||
events.map((event, index) => (
|
||||
{timeline.map((event, index) => (
|
||||
<div
|
||||
class="relative flex flex-col items-center"
|
||||
style={`flex: 1`}
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-col items-center"
|
||||
style={`flex: 1`}
|
||||
class={`absolute ${
|
||||
index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
|
||||
} flex flex-col items-center`}
|
||||
>
|
||||
<div
|
||||
class={`absolute ${
|
||||
index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
|
||||
} flex flex-col items-center`}
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-ieee-yellow text-[1.4vw]">
|
||||
{event.week}
|
||||
</div>
|
||||
<div class="text-[1.1vw] text-gray-300 max-w-[10vw]">
|
||||
{event.description}
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-ieee-yellow md:text-[1.4vw] text-[2vw]">
|
||||
{event.week}
|
||||
</div>
|
||||
<div class="md:text-[1.1vw] text-[1.5vw] text-gray-300 md:max-w-[10vw] max-w-[15vw]">
|
||||
{event.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={`absolute ${
|
||||
index % 2 === 1
|
||||
? "h-[5vw] top-1/2"
|
||||
: "h-[5vw] bottom-1/2"
|
||||
} w-[0.1vw] bg-white`}
|
||||
/>
|
||||
|
||||
<div class="absolute top-1/2 transform -translate-y-1/2">
|
||||
<div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
<div
|
||||
class={`absolute ${
|
||||
index % 2 === 1
|
||||
? "h-[5vw] top-1/2"
|
||||
: "h-[5vw] bottom-1/2"
|
||||
} w-[0.1vw] bg-white`}
|
||||
/>
|
||||
|
||||
<div class="absolute top-1/2 transform -translate-y-1/2">
|
||||
<div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,29 @@ import { LiaDotCircle } from "react-icons/lia";
|
|||
<div class="flex justify-center my-[10%]">
|
||||
<div class="w-1/2 flex justify-between">
|
||||
<div>
|
||||
<div class="flex items-center text-[2.5vw]">
|
||||
<div class="flex items-center md:text-[2.5vw] text-[4vw]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
Contacts
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-[1.1vw] ml-[5%] text-nowrap">
|
||||
<p class="md:text-[1.1vw] text-[1.5vw] ml-[5%] text-nowrap">
|
||||
To stay up to date, join discord server
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="mr-[20%] flex flex-col items-center">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
|
||||
<FaDiscord />
|
||||
</div>
|
||||
<p class="text-[1.3vw] font-semibold">Facebook</p>
|
||||
<p class="md:text-[1.3vw] text-[2vw] font-semibold">Facebook</p>
|
||||
</Link>
|
||||
|
||||
<Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
|
||||
<RiInstagramFill />
|
||||
</div>
|
||||
<p class="text-[1.3vw] font-semibold">Instagram</p>
|
||||
<p class="md:text-[1.3vw] text-[2vw] font-semibold">Instagram</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ import robocup from "../../images/robocup.webp";
|
|||
<Image
|
||||
src={robocup}
|
||||
alt="robocub competition image"
|
||||
class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"
|
||||
class="md:w-3/5 w-[90%] rounded-[2vw] object-cover aspect-[8/5] opacity-40"
|
||||
/>
|
||||
<Link
|
||||
href="/"
|
||||
target="_blank"
|
||||
className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]"
|
||||
className="absolute aspect-[8/5] md:w-3/5 w-[90%] p-[5%] group -bottom-[3%]"
|
||||
>
|
||||
<div class="w-full flex justify-end items-center h-4/5">
|
||||
<p class="text-[4.5vw] font-bold w-fit">
|
||||
<p class="md:text-[4.5vw] text-[7vw] font-bold w-fit">
|
||||
We Are<br />
|
||||
Hiring
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-[1vw] pt-[3%]">
|
||||
<div class="md:text-[1vw] text-[1.5vw] md:pt-[3%]">
|
||||
<p>
|
||||
Join a community of beginner to experienced engineers from
|
||||
different disciplines and backgrounds
|
||||
|
|
@ -33,10 +33,10 @@ import robocup from "../../images/robocup.webp";
|
|||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
|
||||
class="flex w-full justify-end items-end md:text-[3.5vw] text-[6vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
|
||||
>
|
||||
<p
|
||||
class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
|
||||
class="mr-[2%] w-fit py-[1%] px-[2%] md:text-[1.2vw] text-[2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
|
||||
>
|
||||
Application form
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
|
||||
import { LuBrainCircuit } from "react-icons/lu";
|
||||
const { title, list } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]"
|
||||
>
|
||||
<p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
|
||||
{title}
|
||||
</p>
|
||||
<ul class="text-[1vw] font-light">
|
||||
{list.map((item: string) => <li>• {item}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
import Subtitle from "../core/Subtitle.astro";
|
||||
import Subteam from "./Subteam.astro";
|
||||
import subteams from "../../data/subteams.json";
|
||||
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
|
||||
import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
|
||||
|
|
@ -11,9 +10,9 @@ const duplicatedSubteams = [...subteams, ...subteams, ...subteams];
|
|||
const centerIndex = Math.floor(subteams.length); // center in the middle
|
||||
---
|
||||
|
||||
<div class="flex flex-col items-center my-[10%] relative">
|
||||
<div class="flex flex-col items-center md:my-[10%] my-[20%] relative overflow-x-clip">
|
||||
<Subtitle title="Subteams" />
|
||||
<div class="relative w-[75vw] h-[50vh] mt-[3%]">
|
||||
<div class="relative md:w-[75vw] w-[85vw] h-[25vw] mt-[8%] md:mt-[5%]">
|
||||
<div id="carousel" class="absolute w-full h-full flex justify-center">
|
||||
{
|
||||
duplicatedSubteams.map((subteam, index) => {
|
||||
|
|
@ -27,7 +26,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
|
|||
|
||||
return (
|
||||
<div
|
||||
class="carousel-item absolute transition-all duration-500"
|
||||
class="carousel-item absolute transition-all duration-500 md:w-[20vw] w-[25vw]"
|
||||
style={{
|
||||
transform: `translateX(${distance * 12}vw) scale(${
|
||||
Math.abs(distance) === 0
|
||||
|
|
@ -43,17 +42,16 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
|
|||
: Math.abs(distance) === 1
|
||||
? 20
|
||||
: 10,
|
||||
width: "20vw",
|
||||
}}
|
||||
data-index={index}
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="relative w-full h-full backdrop-blur-md overflow-hidden rounded-[2vw]">
|
||||
<div class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
|
||||
<p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
|
||||
<div class="px-[10%] flex flex-col justify-center items-center md:w-[20vw] w-[25vw] md:h-[22vw] h-[28vw] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
|
||||
<p class="md:text-[1.5vw] text-[2vw] mb-[10%] font-semibold pt-[10%]">
|
||||
{subteam.title}
|
||||
</p>
|
||||
<ul class="text-[1vw] font-light">
|
||||
<ul class="md:text-[1vw] text-[1.5vw] font-light">
|
||||
{subteam.list.map(
|
||||
(item: string) => (
|
||||
<li>• {item}</li>
|
||||
|
|
@ -62,7 +60,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 text-[3.2vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
|
||||
<div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 md:text-[3.2vw] text-[4.5vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
|
||||
{subteam.title === "Mechanical" && (
|
||||
<FaGear />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@ const {picture, name, description, link} = Astro.props;
|
|||
---
|
||||
<div class = "text-white relative my-[3%]" >
|
||||
|
||||
<img src = {picture} alt = "signal" class = "w-full object-cover aspect-[1512/526] opacity-25">
|
||||
<img src = {picture} alt = "signal" class = "w-full object-cover md:aspect-[1300/526] aspect-[2/1] opacity-25">
|
||||
|
||||
<div class = "w-full flex justify-evenly absolute bottom-[28%] ml-[5%]">
|
||||
|
||||
<div class = "flex items-center text-[2.5vw] font-extralight">
|
||||
<LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
|
||||
<div class = "w-full flex justify-evenly absolute bottom-[20%] left-[4%]">
|
||||
<div class = "flex items-center md:text-[2.5vw] text-[4vw]">
|
||||
<LiaDotCircle className=" mr-[1vw] md:text-[2.6vw]"/>
|
||||
<p>
|
||||
Competition
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class = "text-[1.5vw] font-extralight tracking-wider">
|
||||
<p class = "w-[35vw] mb-[3%] mt-[40vh]">
|
||||
<div class = "md:text-[1.6vw] text-[2.2vw] tracking-wider">
|
||||
<p class = "w-[35vw] md:mt-[25vw] mt-[35vw]">
|
||||
{name}
|
||||
</p>
|
||||
<p class = "mb-[5%]">
|
||||
{description}
|
||||
</p>
|
||||
<Link href = {link} target="_blank" className="text-[1vw] border-white/70 border-[0.1vw] py-[3%] px-[15%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
|
||||
<Link href = {link} target="_blank" className="md:text-[1.2vw] text-[2vw] font-light border-white/70 border-[0.1vw] py-[1.5%] px-[9%] rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
|
||||
Link
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
|
||||
|
||||
export const landing = [
|
||||
{
|
||||
"icon": <FaDiscord />,
|
||||
"link": "https://discord.gg/XxfjqZSjca"
|
||||
},
|
||||
{
|
||||
"icon": <FaFacebook />,
|
||||
"link": "https://www.facebook.com/ieeeucsd"
|
||||
},
|
||||
{
|
||||
"icon": <FaInstagram />,
|
||||
"link": "https://www.instagram.com/ieee.ucsd"
|
||||
}
|
||||
];
|
||||
|
|
@ -1,32 +1,30 @@
|
|||
{
|
||||
"events": [
|
||||
{
|
||||
"week": "Week 1",
|
||||
"description": "Submit Applications"
|
||||
},
|
||||
{
|
||||
"week": "Week 2",
|
||||
"description": "QP groups are formed, QP Kickoff"
|
||||
},
|
||||
{
|
||||
"week": "Week 3",
|
||||
"description": "Mentor Assignments"
|
||||
},
|
||||
{
|
||||
"week": "Week 4",
|
||||
"description": "Workathon #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 6",
|
||||
"description": "Workathon #2, Milestone #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 8",
|
||||
"description": "Workathon #3, Milestone #2"
|
||||
},
|
||||
{
|
||||
"week": "Week 9/10",
|
||||
"description": "Final submission, QP Showcase!"
|
||||
}
|
||||
]
|
||||
}
|
||||
[
|
||||
{
|
||||
"week": "Week 1",
|
||||
"description": "Submit Applications"
|
||||
},
|
||||
{
|
||||
"week": "Week 2",
|
||||
"description": "QP groups are formed, QP Kickoff"
|
||||
},
|
||||
{
|
||||
"week": "Week 3",
|
||||
"description": "Mentor Assignments"
|
||||
},
|
||||
{
|
||||
"week": "Week 4",
|
||||
"description": "Workathon #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 6",
|
||||
"description": "Workathon #2, Milestone #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 8",
|
||||
"description": "Workathon #3, Milestone #2"
|
||||
},
|
||||
{
|
||||
"week": "Week 9/10",
|
||||
"description": "Final submission, QP Showcase!"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
30
src/data/roboTimeline.json
Normal file
30
src/data/roboTimeline.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
[
|
||||
{
|
||||
"week": "Fall W1 - W3",
|
||||
"description": "Submit Applications"
|
||||
},
|
||||
{
|
||||
"week": "Fall W4 - W9",
|
||||
"description": "QP groups are formed, QP Kickoff"
|
||||
},
|
||||
{
|
||||
"week": "Week 3",
|
||||
"description": "Mentor Assignments"
|
||||
},
|
||||
{
|
||||
"week": "Week 4",
|
||||
"description": "Workathon #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 6",
|
||||
"description": "Workathon #2, Milestone #1"
|
||||
},
|
||||
{
|
||||
"week": "Week 8",
|
||||
"description": "Workathon #3, Milestone #2"
|
||||
},
|
||||
{
|
||||
"week": "Week 9/10",
|
||||
"description": "Final submission, QP Showcase!"
|
||||
}
|
||||
]
|
||||
|
|
@ -5,29 +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>Astro Basics</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>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</header>
|
||||
<main class="w-[95%] mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import qpborder from "../images/qpborder.webp";
|
|||
import Join from "../components/qp/Join.astro";
|
||||
import Carousel from "../components/qp/Carousel.astro";
|
||||
import Timeline from "../components/qp/Timeline.astro";
|
||||
import qpTimeline from "../data/qpTimeline.json"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
|
@ -38,7 +39,7 @@ import Timeline from "../components/qp/Timeline.astro";
|
|||
text="Getting started on hardware development or want to make your own project? Need something to put on your resume? IEEE's Quarterly Projects aims to provide students with project experience in a span of 10 weeks. During QP, students will acquire skills used in the industry such as C++ and the prototyping process with the assistance of our mentors. At the end of the quarter, students will demonstrate their projects at QP Showcase in front of other students, professors, and industry professionals!"
|
||||
/>
|
||||
<Steps />
|
||||
<Timeline />
|
||||
<Timeline timeline={qpTimeline} />
|
||||
<PastProjects />
|
||||
<Mentorship />
|
||||
<Join />
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import Contacts from "../components/robocub/Contacts.astro";
|
|||
import Subteams from "../components/robocub/Subteams.astro";
|
||||
import Timeline from "../components/qp/Timeline.astro";
|
||||
import Competition from "../components/signal/Competition.astro";
|
||||
import roboTimeline from "../data/roboTimeline.json"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
|
@ -34,19 +35,19 @@ import Competition from "../components/signal/Competition.astro";
|
|||
<Link
|
||||
href="/"
|
||||
target="_blank"
|
||||
className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
|
||||
className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] md:text-[1.2vw] text-[2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
|
||||
>
|
||||
Past Team Description Paper
|
||||
</Link>
|
||||
</div>
|
||||
<Competition
|
||||
picture="../public/robocup.webp"
|
||||
picture="/robocup.webp"
|
||||
name="Preparing for Salvador 2025"
|
||||
description="Recently the team went to our first ever competition in Germany!"
|
||||
link="https://www.google.com/"
|
||||
/>
|
||||
<Subteams />
|
||||
<Timeline />
|
||||
<Timeline timeline={roboTimeline}/>
|
||||
<Join />
|
||||
<Questions faq={faq} />
|
||||
<Contacts />
|
||||
|
|
|
|||
Loading…
Reference in a new issue