Add mobile view and correct information for index page and join page
This commit is contained in:
Shing Hung
parent
142c843195
commit
47b4575b50
22 changed files with 159 additions and 166 deletions
|
|
@ -1,2 +0,0 @@
|
||||||
CALENDAR_API_KEY=YOUR_API_KEY
|
|
||||||
EVENT_CALENDAR_ID=YOUR_EVENT_CALENDAR_ID
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 >
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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."
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
BIN
src/images/jellyfish.png
Normal file
BIN
src/images/jellyfish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
|
|
@ -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 />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue