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

add animation to contact page

Browse source
This commit is contained in:
Shing Hung 2025-01-08 10:16:55 -08:00
parent 7ef756abb5
commit adbc93bcfe
6 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,10 +21,10 @@ const {name, position, picture, email} = Astro.props;
<FaGear/> <FaGear/>
</div> </div>
<div class = "w-full flex justify-between px-[7%]"> <div class = "w-full flex justify-between px-[7%]">
<p class = "text-[2vw] font-light leading-[4.5vh]"> <p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
{name} {name}
</p> </p>
<div class = "text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"> <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">
{position} {position}
</div> </div>
</div> </div>

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

@ -8,7 +8,7 @@ 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 mt-[15vh] mb-[10vh]">
<div class="relative w-[21vw]"> <div data-inview class="relative 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}

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

@ -15,7 +15,7 @@ import { LiaDotCircle } from "react-icons/lia";
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 class="flex justify-end"> <div class="flex justify-end">
<Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 text-[1.2vw]"> <Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 text-[1.2vw]">
DISCORD DISCORD
</Link> </Link>
</div> </div>

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

@ -17,8 +17,9 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
class="w-[70vw] aspect-[2.5/1] rounded-full" class="w-[70vw] aspect-[2.5/1] rounded-full"
/> />
<Link <Link
data-inview
href="/quarterly" href="/quarterly"
className="absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md" className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
> >
more details more details
<IoIosArrowDroprightCircle <IoIosArrowDroprightCircle
@ -26,7 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
/> />
</Link> </Link>
<div <div
class="w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]" data-inview class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
> >
<p class="text-[1.4vw] mb-[2%]">Quarterly Project</p> <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
<p> <p>

14
src/data/pastProjects.json
View file

@ -1,43 +1,43 @@
[ [
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/robocup.png",
"link": "/", "link": "/",
"col": "2" "col": "2"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/signal.png",
"link": "/", "link": "/",
"col": "4" "col": "4"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/robocup.png",
"link": "/", "link": "/",
"col": "3" "col": "3"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/signal.png",
"link": "/", "link": "/",
"col": "3" "col": "3"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/signal.png",
"link": "/", "link": "/",
"col": "2" "col": "2"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/robocup.png",
"link": "/", "link": "/",
"col": "2" "col": "2"
}, },
{ {
"title": "Retro Gaming Console", "title": "Retro Gaming Console",
"image": "/neko.png", "image": "/robocup.png",
"link": "/", "link": "/",
"col": "2" "col": "2"
} }

3
src/pages/quarterly.astro
View file

@ -27,9 +27,10 @@ import Timeline from "../components/qp/Timeline.astro";
<Title title="Quarterly Project" /> <Title title="Quarterly Project" />
<div class="w-full flex justify-center my-[3%]"> <div class="w-full flex justify-center my-[3%]">
<Image <Image
data-inview
src={qp} src={qp}
alt="board group photos" alt="board group photos"
class="w-2/3 rounded-full object-cover aspect-[2.5/1]" class="in-view:animate-fade w-2/3 rounded-full object-cover aspect-[2.5/1]"
/> />
</div> </div>
<About <About