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

mobile #14

Merged
shing.hung merged 3 commits from mobile into main 2025-01-23 20:59:48 +00:00
Conversation 0 Commits 3 Files changed 26 +204 -228
26 changed files with 204 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.example
View file

@ -1,2 +0,0 @@
CALENDAR_API_KEY=YOUR_API_KEY
EVENT_CALENDAR_ID=YOUR_EVENT_CALENDAR_ID

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

@ -5,26 +5,25 @@ import Link from "next/link";
const {name, position, picture, email} = Astro.props; const {name, position, picture, email} = Astro.props;
--- ---
<div class = "text-white"> <div class = "text-white">
<div class = "text-ieee-yellow"> <div class = "text-ieee-yellow">
<Link href="s1hung@ucsd.edu" className = "flex items-center ml-[3%] py-[0.5vh]"> <Link href={`mailto:${email}`} className = "flex items-center ml-[3%] py-[0.5vh] group">
<MdEmail className = "text-[1.5vw] mr-[0.5%]"/> <MdEmail className = "md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"/>
<p class = "text-[0.8vw]"> <p class = "md:text-[0.8vw] text-[2vw]">
{email} {email}
</p> </p>
</Link> </Link>
</div> </div>
<div class = "w-[20vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center"> <div class = "md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative">
<img src ={picture} alt = "officer" class = "w-[18vw] rounded-[10%] pt-[5%] pb-[3%] relative" > <img src ={picture} alt = "officer" class = "md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]" >
<div class = "bg-white w-fit rounded-full aspect-square p-[0.4vw] text-ieee-black text-[1.8vw] absolute ml-[13.5vw] mt-[3vh]"> <div class = "bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]">
<FaGear/> <FaGear/>
</div> </div>
<div class = "w-full flex justify-between px-[7%]"> <div class = "w-full flex justify-between px-[7%]">
<p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]"> <p data-inview class = " in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]">
{name} {name}
</p> </p>
<div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"> <div data-inview class = "md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] md:w-[8vw] w-[15vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
{position} {position}
</div> </div>
</div> </div>

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

@ -7,28 +7,26 @@ import Officer from "../board/Officer.astro";
import officers from "../../data/officers.json"; import officers from "../../data/officers.json";
--- ---
<div class="text-white flex flex-col items-center mt-[15vh] mb-[10vh]"> <div class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]">
<div data-inview class="relative w-[21vw] in-view:animate-fade-down"> <div data-inview class="relative w-[40vw] md:w-[21vw] in-view:animate-fade-down">
<Image src={about} alt="About background image" /> <Image src={about} alt="About background image" />
<Image <Image
src={neko} src={neko}
alt="About image" alt="About image"
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[14vw] rounded-[2vw]" class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
/> />
</div> </div>
<div class="text-[2.5vw] flex items-center mt-[2vh]"> <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
<p>MEET THE BOARD</p> <p>MEET THE BOARD</p>
</div> </div>
<p class="text-[1.3vw] w-[56%] my-[3%] font-extralight text-center"> <p class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget Our board comprises 31 students of varying majors, colleges, and interests! Feel free to reach out for any questions about our position or experiences.
faucibus fames ridiculus nec egestas convallis cubilia malesuada. Tellus
nibh vivamus tempus molestie tristique quis
</p> </p>
<div class="grid gap-[3vw] grid-cols-3 mt-[10vh]"> <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[10vh]">
{ {
officers.map((officer) => ( officers.map((officer) => (
<Officer <Officer

10
src/components/core/Footer.astro
View file

@ -5,22 +5,22 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import { IoHeart } from "react-icons/io5"; import { IoHeart } from "react-icons/io5";
--- ---
<div class="w-full py-[2%] flex justify-center"> <div class="w-full md:py-[2%] py-[3vw] flex justify-center">
<div <div
class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between" class="w-[95%] bg-black/40 md:py-[1%] py-[2vw] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between"
> >
<Link href="/" className="hover:opacity-70 duration-300"> <Link href="/" className="hover:opacity-70 duration-300">
<Image <Image
class="w-[15vw]" class="md:w-[15vw] w-[35vw]"
src={whiteLogoHorizontal} src={whiteLogoHorizontal}
alt="IEEE UCSD Logo" alt="IEEE UCSD Logo"
/> />
</Link> </Link>
<div class="flex items-center"> <div class="flex items-center">
<p class="text-white text-[1.2vw]"> <p class="text-white md:text-[1.2vw] text-[2.7vw]">
made by IEEE UCSD webmasters with made by IEEE UCSD webmasters with
</p> </p>
<IoHeart className=" text-ieee-blue-100 ml-[1vw] text-[1.5vw]" /> <IoHeart className=" text-ieee-blue-100 ml-[1vw] md:text-[1.5vw] text-[4vw]" />
</div> </div>
</div> </div>
</div> </div>

6
src/components/core/Question.astro
View file

@ -1,11 +1,11 @@
--- ---
const {question, answer} = Astro.props; const {question, answer} = Astro.props;
--- ---
<div class = "text-white w-full flex flex-col mb-[2vh]"> <div class = "text-white w-full flex flex-col mb-[2vh] animate-ease-in-out">
<p data-inview class = "in-view:animate-fade-right text-ieee-yellow text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]"> <p data-inview class = "in-view:animate-fade-right text-ieee-yellow text-[2.5vw] md:text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
{question} {question}
</p> </p>
<p data-inview class = "w-[60%] mb-[2vh] pl-[1vw] in-view:animate-fade-left"> <p data-inview class = "md:w-[70%] w-[80%] mb-[2vh] pl-[1vw] text-[2vw] md:text-[1.2vw] in-view:animate-fade-left animate-ease-in-out">
{answer} {answer}
</p> </p>
<dev> <dev>

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

@ -4,8 +4,8 @@ import { LiaDotCircle } from "react-icons/lia";
const {faq} = Astro.props; const {faq} = Astro.props;
--- ---
<div class = "text-white w-full h-[90vh] ml-[15vw] mb-[20%] mt-[10%]"> <div class = "text-white md:ml-[15vw] ml-[10vw] mb-[20%] mt-[10%]">
<div class = "text-[2.5vw] flex items-center my-[7vh]"> <div class = "text-[4.5vw] md:text-[2.5vw] flex items-center my-[7vh]">
<LiaDotCircle className = "mr-[1vw]" /> <LiaDotCircle className = "mr-[1vw]" />
<p> <p>
Frequently Asked Questions Frequently Asked Questions

78
src/components/core/Social.astro
View file

@ -1,71 +1,71 @@
--- ---
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import evan from "../../images/evan.png"; import jellyfish from "../../images/jellyfish.png";
import { FaDiscord, FaFacebook } from "react-icons/fa"; import { FaDiscord } from "react-icons/fa";
import { RiInstagramFill } from "react-icons/ri"; import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md";
import Link from "next/link"; import Link from "next/link";
--- ---
<div class="text-white flex flex-col items-center h-[65vh] justify-between"> <div class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between">
<div class="flex items-center text-[2.5vw]"> <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p>Social Media</p> <p>Social Media</p>
</div> </div>
<p class="w-1/3 text-center text-[1.2vw] pb-[5%]"> <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%]">
Lorem ipsum is placeholder text commonly used in the graphic, print, and Stay connected with us on Discord, Facebook, and Instagram! We regularly post information on upcoming events and competitions.
publishing industries f
</p> </p>
<div <div
class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90" class="md:w-[85%] w-full rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative md:h-[15vw] h-[30vw] flex items-center text-white/90"
> >
<div data-inview class="w-2/5 flex justify-evenly ml-[5%] in-view:animate-flip-up animate-duration-1000"> <div data-inview class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000">
<Link
href="https://discord.gg/XxfjqZSjca"
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 to-ieee-blue-100"
>
<FaDiscord />
</div>
<p class="text-[1.3vw] font-semibold">Discord</p>
</Link>
<Link
href="https://www.facebook.com/ieeeucsd"
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 to-ieee-blue-100"
>
<FaFacebook />
</div>
<p class="text-[1.3vw] font-semibold">Facebook</p>
</Link>
<Link <Link
href="https://www.instagram.com/ieee.ucsd" href="https://www.instagram.com/ieee.ucsd"
target="_blank" target="_blank"
className="flex flex-col items-center" className="flex flex-col items-center"
> >
<div <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 to-ieee-blue-100" class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
> >
<RiInstagramFill /> <RiInstagramFill />
</div> </div>
<p class="text-[1.3vw] font-semibold">Instagram</p> <p class="text-[2vw] md:text-[1.3vw] font-semibold">Instagram</p>
</Link>
<Link
href="https://discord.gg/XxfjqZSjca"
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-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
>
<FaDiscord />
</div>
<p class="text-[2vw] md:text-[1.3vw] font-semibold">Discord</p>
</Link>
<Link
href="mailto:ieee@ucsd.edu"
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-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
>
<MdEmail />
</div>
<p class="text-[2vw] md:text-[1.3vw] font-semibold">Email</p>
</Link> </Link>
</div> </div>
<Image <Image
data-inview data-inview
src={evan} src={jellyfish}
alt="cat placeholder" alt="cat placeholder"
class="absolute -bottom-[10vh] w-[25vw] right-0 in-view:animate-wiggle" class="absolute bottom-0 md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
/> />
</div> </div>
</div> </div>

8
src/components/join/BuildingLocation.astro
View file

@ -4,12 +4,12 @@
<div <div
data-inview data-inview
class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down" class="flex flex-col items-center md:w-[40vw] w-[100vw] h-[100vw] md:h-[40vw] my-[10%] in-view:animate-fade-down"
> >
<p class="text-ieee-yellow text-[1.2vw]">Each officer has their own OAH</p> <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw]">Each officer has their own OAH</p>
<p class="text-white text-[2.5vw] my-[2%]">Check out our calendar!</p> <p class="text-white md:text-[2.5vw] text-[4.5vw] my-[2%]">Check out our calendar!</p>
<iframe <iframe
class="object-cover aspect-[1000/400] w-[90%] rounded-[1.5vw]" class="w-[90%] rounded-[1.5vw]"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3350.627565860723!2d-117.23806952372503!3d32.881572078634505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dc06c3689b4f99%3A0xdf55f97f07f34d4f!2sIrwin%20%26%20Joan%20Jacobs%20School%20of%20Engineering!5e0!3m2!1sen!2sus!4v1736755644414!5m2!1sen!2sus" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3350.627565860723!2d-117.23806952372503!3d32.881572078634505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dc06c3689b4f99%3A0xdf55f97f07f34d4f!2sIrwin%20%26%20Joan%20Jacobs%20School%20of%20Engineering!5e0!3m2!1sen!2sus!4v1736755644414!5m2!1sen!2sus"
width="600" width="600"
height="450" height="450"

3
src/components/join/Findus.astro
View file

@ -3,8 +3,7 @@ import OAH from "./OAH.astro";
import BuildingLocation from "./BuildingLocation.astro"; import BuildingLocation from "./BuildingLocation.astro";
--- ---
<div class="w-full flex justify-evenly px-[10%]"> <div class="w-full flex flex-col md:flex-row items-center md:justify-evenly px-[10%]">
<OAH /> <OAH />
<BuildingLocation /> <BuildingLocation />
</div> </div>

16
src/components/join/Involvement.astro
View file

@ -6,16 +6,16 @@ import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri"; import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link, delay} = Astro.props; const {image, text, link, delay} = Astro.props;
--- ---
<div data-inview class={`w-[15vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}> <div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
<img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/> <img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
<Link <Link
href={link} href={link}
target={text==="H.A.R.D. HACK"? "_blank":"_self"} target={text==="H.A.R.D. HACK"? "_blank":"_self"}
className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between" className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
> >
<div class="w-full flex justify-end pr-[5%]"> <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]"> <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]">
{ {
text === "PROJECTS"? <RiRobot2Fill/>: text === "PROJECTS"? <RiRobot2Fill/>:
text === "EVENTS"? <IoMdCalendar/>: text === "EVENTS"? <IoMdCalendar/>:
@ -24,16 +24,16 @@ const {image, text, link, delay} = Astro.props;
</div> </div>
</div> </div>
<div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[30%] pb-[5%]"> <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]">
<div class="text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end"> <div class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
<p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"> <p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
{text} {text}
</p> </p>
<GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow"/> <GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
</div> </div>
{text === "H.A.R.D. HACK" && {text === "H.A.R.D. HACK" &&
<p class="text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300"> <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
UC San Diego’s largest UC San Diego’s largest
hardware focused hackathon hardware focused hackathon
hold by IEEE UCSD, HKN, and TNT hold by IEEE UCSD, HKN, and TNT

12
src/components/join/Involvements.astro
View file

@ -2,8 +2,8 @@
import Involvement from "./Involvement.astro"; import Involvement from "./Involvement.astro";
import involve from "../../data/involve.json"; import involve from "../../data/involve.json";
--- ---
<div class="pl-[10%] pr-[6%] flex items-center mb-[10%]"> <div class="pl-[10%] pr-[6%] flex md:items-center md:mb-[10%] mb-[30vw] mt-[20vw] md:mt-0 flex-col-reverse md:flex-row">
<div class="flex w-3/5 justify-between"> <div class="flex md:w-3/5 w-[95%] justify-between">
{involve.map((item)=>( {involve.map((item)=>(
<Involvement <Involvement
text = {item.text} text = {item.text}
@ -14,11 +14,11 @@ import involve from "../../data/involve.json";
))} ))}
</div> </div>
<div class="w-2/5 flex flex-col px-[5%]"> <div class="md:w-2/5 w-4/5 flex flex-col px-[5%] pb-[10vw] md:pb-0">
<p class="text-ieee-yellow text-[1.2vw] mb-[5%]"> <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw] mb-[5%]">
Get involve in international IEEE Get involve in IEEE @ UCSD
</p> </p>
<p class="text-white text-[2vw] font-bold"> <p class="text-white md:text-[2vw] text-[3vw] font-bold">
How To Keep Up With And Get Engaged With IEEE at UCSD How To Keep Up With And Get Engaged With IEEE at UCSD
</p> </p>
</div> </div>

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

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

8
src/components/join/OAH.astro
View file

@ -4,12 +4,12 @@
<div <div
data-inview data-inview
class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down" class="flex flex-col items-center md:w-[40vw] w-[100vw] h-[100vw] md:h-[40vw] my-[10%] in-view:animate-fade-down"
> >
<p class="text-ieee-yellow text-[1.2vw]">Each officer has their own OAH</p> <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw]">Each officer has their own OAH</p>
<p class="text-white text-[2.5vw] my-[2%]">Check out our calendar!</p> <p class="text-white md:text-[2.5vw] text-[4.5vw] my-[2%]">Check out our calendar!</p>
<iframe <iframe
class="object-cover aspect-[1000/400] w-[90%] rounded-[1.5vw]" class="w-[90%] rounded-[1.5vw]"
src="https://calendar.google.com/calendar/embed?src=c_62493071bab19c7c60d103460604dc7b3b569ffc1e58a42617978f626dff02ac%40group.calendar.google.com&ctz=America%2FLos_Angeles" src="https://calendar.google.com/calendar/embed?src=c_62493071bab19c7c60d103460604dc7b3b569ffc1e58a42617978f626dff02ac%40group.calendar.google.com&ctz=America%2FLos_Angeles"
style="border: 0" style="border: 0"
width="600" width="600"

12
src/components/join/Resource.jsx
View file

@ -2,19 +2,19 @@ import Link from "next/link";
const Resource = ({icon, title, text, link}) => { const Resource = ({icon, title, text, link}) => {
return ( return (
<div class="text-white flex w-[30vw] items-center"> <div class="text-white flex md:w-[30vw] w-[40vw] items-center">
<div class = "mr-[1vw] bg-gradient-radial from-ieee-blue-300 via-ieee-black to-ieee-black rounded-full text-[6.5vw] aspect-square w-[12vw] flex justify-center items-center"> <div class = "mr-[1vw] bg-gradient-radial from-ieee-blue-300 via-ieee-black to-ieee-black rounded-full text-[8vw] md:text-[6.5vw] aspect-square w-[12vw] flex justify-center items-center">
{icon} {icon}
</div> </div>
<div class="w-[24vw]"> <div class="md:w-[24vw] w-[27vw] ">
<p class = "text-[1.8vw] mb-[2vh] font-extralight"> <p class = "md:text-[1.8vw] text-[2.5vw] mb-[2vh] font-extralight">
{title} {title}
</p> </p>
<p class = "text-[1vw] mb-[1vh] font-light"> <p class = "md:text-[1vw] text-[1.8vw] mb-[1vh] font-light">
{text} {text}
</p> </p>
<div class="flex justify-end mt-[5%]"> <div class="flex justify-end mt-[5%]">
<Link href={link} target="_blank" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[11%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300"> <Link href={link} target="_blank" className=" md:text-[1.1vw] text-[2vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[11%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
VIEW VIEW
</Link> </Link>
</div> </div>

18
src/components/join/Resources.jsx
View file

@ -1,29 +1,29 @@
import Resource from "./Resource.jsx" import Resource from "./Resource.jsx"
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
import { RiSlideshowLine } from "react-icons/ri"; import { RiSlideshowLine } from "react-icons/ri";
import { BiMoviePlay } from "react-icons/bi"; import { IoMdGlobe } from "react-icons/io";
const Resources = () => { const Resources = () => {
return ( return (
<div class = "text-white w-full flex flex-col items-center h-[55vh] justify-center"> <div class = "text-white w-full flex flex-col items-center justify-center mb-[20vw] md:mb-[5vw]">
<div class = "text-[2.5vw] flex items-center"> <div class = "text-[4.5vw] md:text-[2.5vw] flex items-center">
<LiaDotCircle className = "mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
<p> <p>
Member Resources Member Resources
</p> </p>
</div> </div>
<div class = " w-[90%] flex justify-evenly mt-[9vh]"> <div class = "md:w-[90%] w-full flex justify-evenly mt-[5vw]">
<Resource <Resource
icon = <RiSlideshowLine/> icon = <RiSlideshowLine/>
title = "Workshop Slides" title = "Workshop Slides"
text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" text = "Find our database of workshop slides here."
link = "http://www.google.com" link = "http://www.google.com"
/> />
<Resource <Resource
icon = <BiMoviePlay/> icon = <IoMdGlobe/>
title = "Workshop Videos" title = "International IEEE"
text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" text = "Our parent organization provides variety of events including project sponsorship, IEEE DataPort dataset database, and renowned student contests."
link = "http://www.google.com" link = "https://www.ieee.org/"
/> />
</div> </div>
</div> </div>

26
src/components/main_page/About.astro
View file

@ -8,51 +8,49 @@ import about3 from "../../images/about3.png";
import about4 from "../../images/about4.png"; import about4 from "../../images/about4.png";
--- ---
---
<div <div
class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black" class="flex border-white/40 border-[0.1vw] rounded-[2vw] md:h-[43vw] h-[60vw] md:px-[10%] px-[6%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black"
> >
<div class="w-1/2 flex justify-center pr-[5%] relative"> <div class="w-1/2 flex justify-center pr-[5%] relative h-full">
<div class="relative w-[35vw]"> <div class="relative w-[35vw]">
<Image src={about} alt="About background image" /> <Image src={about} alt="About background image" class="md:visible invisible" />
<Image <Image
src={about4} src={about4}
alt="About image" alt="About image"
class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[33vw] md:w-[25vw] rounded-[2vw]"
/> />
</div> </div>
<Image <Image
data-inview data-inview
src={about2} src={about2}
alt="About image" alt="About image"
class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%] in-view:animate-fade-right" class="animate-ease-in-out absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] md:-left-[15%] -left-[8%] in-view:animate-fade-right"
/> />
<Image <Image
data-inview data-inview
src={about3} src={about3}
alt="About image" alt="About image"
class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up" class="animate-ease-in-out absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up"
/> />
<div <div
data-inview data-inview
class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left" class="animate-ease-in-out absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left"
> >
</div> </div>
<div <div
data-inview data-inview
class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left" class="animate-ease-in-out absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left"
> >
</div> </div>
</div> </div>
<div class="w-1/2 text-white text-[1.3vw] font-light"> <div class="w-1/2 text-white text-[1.8vw] md:text-[1.3vw] font-light">
<p <p
class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none" class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[2vw] md:text-[1.3vw] ml-[8%] mb-[6%] leading-none"
> >
we are ... we are ...
</p> </p>
<div <div
class="text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]" class="text-[5vw] md:text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]"
> >
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
<p>About Us</p> <p>About Us</p>
@ -71,7 +69,7 @@ import about4 from "../../images/about4.png";
<div class="flex justify-end mt-[2%]"> <div class="flex justify-end mt-[2%]">
<Link <Link
href="/join" href="/join"
className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300" className=" text-[2vw] md:text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
> >
LEARN MORE LEARN MORE
</Link> </Link>

10
src/components/main_page/Activities.astro
View file

@ -4,19 +4,19 @@ import activities from "../../data/activities.json"
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="flex flex-col items-center h-[100vh] justify-between text-white my-[10vw]"> <div class="flex flex-col items-center md:h-[50vw] justify-between text-white md:my-[10vw] my-[20vw]">
<div class="flex items-center text-[2.5vw]"> <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
Events & Projects Events & Projects
</p> </p>
</div> </div>
<p class="w-1/3 text-center text-[1.2vw] pb-[5%]"> <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%] my-[8vw] md:my-0">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f Your involvement in IEEE @ UCSD can be tailored to your professional goals, interests, and quarterly schedules.
</p> </p>
<div class="flex justify-evenly w-[90%]"> <div class="md:flex justify-evenly md:w-[90%] grid grid-cols-2 gap-[5vw] md:gap-0">
{activities.map((activity) => ( {activities.map((activity) => (
<Activity <Activity
title={activity.title} title={activity.title}

14
src/components/main_page/Activity.astro
View file

@ -4,20 +4,20 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
const { title, text, link, number, delay } = Astro.props; const { title, text, link, number, delay } = Astro.props;
--- ---
<div data-inview class={`relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}> <div data-inview class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}>
<div class="rounded-full aspect-square w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/> <div class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
<p class="text-[1.7vw] font-bold text-center"> <p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
{title} {title}
</p> </p>
<p class="text-[1.2vw] w-4/5 mt-[15%] mb-[25%]"> <p class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]":"md:mt-[15%] mt-[5%]"}`}>
{text} {text}
</p> </p>
<Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%] hover:text-ieee-yellow duration-300"> <Link href={link} className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300">
more details more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/> <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"/>
</Link> </Link>
<p class="text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]"> <p class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
{number} {number}
</p> </p>
</div> </div>

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

@ -1,15 +1,14 @@
<div class="flex py-[15vh] px-[7vw] items-end w-full"> <div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
<div class="w-3/5"> <div class="w-2/5">
<p data-inview class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-fade-right"> <p data-inview class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right">
02 02
</p> </p>
<p data-inview class="text-white text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"> <p data-inview class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100">
Amet Consectetur 2nd Largest in the US?
</p> </p>
</div> </div>
<p data-inview class="text-white text-[1.5vw] in-view:animate-fade-left"> <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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
</p> </p>
</div > </div >

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

@ -1,29 +1,35 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Link from "next/link"; import Link from "next/link";
import { landing } from "../../data/landing";
import landingimg from "../../images/landing.png"; import landingimg from "../../images/landing.png";
import { FaDiscord, FaFacebook } from "react-icons/fa"; import { FaDiscord } from "react-icons/fa";
import { RiInstagramFill } from "react-icons/ri"; import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md";
--- ---
<div class="w-full flex justify-between pt-[14vh]"> <div class="w-full flex justify-between md:pt-[14vh] pt-[12vw]">
<div <div
class="pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw]" class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw]"
> >
<p data-inview class="text-ieee-yellow font-bold 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 UC San Diego IEEE
</p> </p>
<p data-inview class="font-bold text-[2.8vw] text-white mb-[10%] in-view:animate-fade-right"> <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! Join one of the largest IEEE student branch in the US!
</p> </p>
<p class="text-white font-light text-[1.3vw]"> <p class="text-white font-light text-[2vw] md:text-[1.3vw]">
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 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.
commodo consequat
</p> </p>
<div class="flex justify-end w-full mt-[8vh]"> <div class="flex justify-end w-full mt-[6%]">
<div class="text-white text-[2.5vw] w-1/2 flex justify-between"> <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 <Link
href="https://discord.gg/XxfjqZSjca" href="https://discord.gg/XxfjqZSjca"
target="_blank" target="_blank"
@ -33,25 +39,18 @@ import { RiInstagramFill } from "react-icons/ri";
</Link> </Link>
<Link <Link
href="https://www.facebook.com/ieeeucsd" href="mailto:ieee@ucsd.edu"
target="_blank" target="_blank"
className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
> >
<FaFacebook /> <MdEmail />
</Link>
<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>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="w-[46%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black" class="md:w-[46%] w-[40%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
> >
<Image src={landingimg} alt="circuit" class="w-[95%]" /> <Image src={landingimg} alt="circuit" class="w-[95%] md:h-[40vw] h-[60vw] object-contain" />
</div> </div>
</div> </div>

8
src/data/activities.json
View file

@ -1,28 +1,28 @@
[ [
{ {
"title": "Quarterly Project", "title": "Quarterly Project",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi", "text": "QP is a quarter-long project competition. Students collaborate in teams of up to 6 to build a product aligned with a quarterly theme.",
"link": "/quarterly", "link": "/quarterly",
"number": "01", "number": "01",
"delay": "100" "delay": "100"
}, },
{ {
"title": "Annual Project", "title": "Annual Project",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi", "text": "IEEE @ UCSD hosts the university Robocup, Signal Processing, Supercomputing, and Micromouse teams that each compete in annual competitions.",
"link": "/projects", "link": "/projects",
"number": "02", "number": "02",
"delay": "300" "delay": "300"
}, },
{ {
"title": "Social", "title": "Social",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi", "text": "Get involved in our diverse student society! We host regular social events ranging from IEEEat meals-out to karaoke sessions.",
"link": "/events", "link": "/events",
"number": "03", "number": "03",
"delay": "500" "delay": "500"
}, },
{ {
"title": "Professional Development", "title": "Professional Development",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi", "text": "IEEE @ UCSD offers a diversity of technical and professional workshops each quarter. Previous examples include soldering, esp32s and an intern panel. ",
"link": "/events", "link": "/events",
"number": "04", "number": "04",
"delay": "700" "delay": "700"

16
src/data/faq.json
View file

@ -1,21 +1,21 @@
[ [
{ {
"question": "What skills will you gain?", "question": "Can I join IEEE @ UCSD if I am not an engineering major?",
"answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat" "answer": "Yes! IEEE @ UCSD is open to students of all majors, colleges, and programs with an interest in engineering. "
}, },
{ {
"question": "What skills will you gain?", "question": "How should I get involved if I am... ",
"answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat" "answer": "a transfer? We encourage transfer students to participate as early as possible through our project teams, workshops, and socials! Consider applying to become an officer if you feel up to the task and we will do our best to help you succeed both in IEEE and at UCSD. a beginner at engineering? IEEE @ UCSD’s technical workshops are a strong introduction to the basics of hands-on engineering skills. For a ‘forge by fire’ approach, Quarterly Project teams are open to students of all skill levels and supported by a seasoned mentorship base. Attending these opportunities with questions for the board officers and a readiness to learn will be your greatest weapons!"
}, },
{ {
"question": "What skills will you gain?", "question": "Is there a membership fee to join?",
"answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat" "answer": "No, there is no necessary membership fee for IEEE @ UCSD. However, buying an International IEEE membership is vastly beneficial for the mentorship and resource opportunities."
}, },
{ {
"question": "What skills will you gain?", "question": "How can I contact board officers?",
"answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat" "answer": "Our board officers are accessible both online and in-person. To reach us online, shoot us an email (which can be found on the Board page of the website) or DM on Discord! To reach us in person, each officer hosts Open Access Hours in our club project space, EBU1-4710; the calendar can be found below."
} }
] ]

70
src/data/officers.json
View file

@ -13,6 +13,34 @@
"email": "sxxu@ucsd.edu", "email": "sxxu@ucsd.edu",
"type": ["Executives", "Internal"] "type": ["Executives", "Internal"]
}, },
{
"name": "Rana Singh",
"position": "Vice Chair External",
"picture": "https://placehold.co/800x800?text=RANA%20SINGH",
"email": "ras010@ucsd.edu",
"type": ["Executives"]
},
{
"name": "Rohil Kadekar",
"position": "Vice Chair Projects",
"picture": "/officers/rohil.jpg",
"email": "rkadekar@ucsd.edu",
"type": ["Executives", "Projects"]
},
{
"name": "Shipra Gudekar",
"position": "Vice Chair Events",
"picture": "/officers/shipra.jpg",
"email": "sgudekar@ucsd.edu",
"type": ["Executives", "Events"]
},
{
"name": "Lisa Liu",
"position": "Vice Chair Finance",
"picture": "/officers/lisa.jpg",
"email": "lil043@ucsd.edu",
"type": ["Executives"]
},
{ {
"name": "Charles Nguyen", "name": "Charles Nguyen",
"position": "Webmaster", "position": "Webmaster",
@ -62,27 +90,6 @@
"email": "c1uy@ucsd.edu", "email": "c1uy@ucsd.edu",
"type": ["Internal"] "type": ["Internal"]
}, },
{
"name": "Shipra Gudekar",
"position": "Vice Chair Events",
"picture": "/officers/shipra.jpg",
"email": "sgudekar@ucsd.edu",
"type": ["Executives", "Events"]
},
{
"name": "Rohil Kadekar",
"position": "Vice Chair Projects",
"picture": "/officers/rohil.jpg",
"email": "rkadekar@ucsd.edu",
"type": ["Executives", "Projects"]
},
{
"name": "Lisa Liu",
"position": "Vice Chair Finance",
"picture": "/officers/lisa.jpg",
"email": "lil043@ucsd.edu",
"type": ["Executives"]
},
{ {
"name": "Erik Duarte", "name": "Erik Duarte",
"position": "Events Coordinator", "position": "Events Coordinator",
@ -97,13 +104,6 @@
"email": "siy015@ucsd.edu", "email": "siy015@ucsd.edu",
"type": ["Executives", "Events"] "type": ["Executives", "Events"]
}, },
{
"name": "Rana Singh",
"position": "Vice Chair External",
"picture": "https://placehold.co/800x800?text=RANA%20SINGH",
"email": "ras010@ucsd.edu",
"type": ["Executives"]
},
{ {
"name": "Rafaella Gomes", "name": "Rafaella Gomes",
"position": "Project Space Chair", "position": "Project Space Chair",
@ -132,13 +132,6 @@
"email": "ppincencia@ucsd.edu", "email": "ppincencia@ucsd.edu",
"type": ["Projects"] "type": ["Projects"]
}, },
{
"name": "Ritoban Roy-Chowdhury",
"position": "Supercomputing Chair",
"picture": "https://placehold.co/800x800?text=Ritoban%20Roy-Chowdhury",
"email": "rroychowdhury@ucsd.edu",
"type": ["Projects"]
},
{ {
"name": "Akhil Ram Shankar", "name": "Akhil Ram Shankar",
"position": "Quarterly Projects Chair", "position": "Quarterly Projects Chair",
@ -188,13 +181,6 @@
"email": "rsrikanth@ucsd.edu", "email": "rsrikanth@ucsd.edu",
"type": ["Events"] "type": ["Events"]
}, },
{
"name": "Dihan Lin",
"position": "Outreach Chair",
"picture": "/officers/dihan.jpg",
"email": "dil009@ucsd.edu",
"type": ["Events"]
},
{ {
"name": "Anika Agarwal", "name": "Anika Agarwal",
"position": "Outreach Chair", "position": "Outreach Chair",

BIN
src/images/jellyfish.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

4
src/pages/board.astro
View file

@ -8,12 +8,12 @@ import board from "../images/board.png";
<Layout> <Layout>
<Image <Image
src={board} src={board}
alt="JOIN US" alt="BOARD"
class="absolute left-[1vw] w-[4vw] top-[15vh]" class="absolute left-[1vw] w-[4vw] top-[15vh]"
/> />
<Image <Image
src={board} src={board}
alt="JOIN US" alt="BOARD"
class="absolute right-[1vw] w-[4vw] top-[15vh]" class="absolute right-[1vw] w-[4vw] top-[15vh]"
/> />
<Officers /> <Officers />

4
src/pages/join.astro
View file

@ -15,12 +15,12 @@ import faq from "../data/faq.json";
<Image <Image
src={join} src={join}
alt="JOIN US" alt="JOIN US"
class="absolute left-[1vw] w-[4vw] top-[60vh]" class="absolute left-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw]"
/> />
<Image <Image
src={join} src={join}
alt="JOIN US" alt="JOIN US"
class="absolute right-[1vw] w-[4vw] top-[60vh]" class="absolute right-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw]"
/> />
<JoinTitle /> <JoinTitle />
<Involvements /> <Involvements />