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/>
</div>
<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}
</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}
</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="relative w-[21vw]">
<div data-inview class="relative w-[21vw] in-view:animate-fade-down">
<Image src={about} alt="About background image" />
<Image
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!
</p>
<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
</Link>
</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"
/>
<Link
data-inview
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
<IoIosArrowDroprightCircle
@ -26,7 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
/>
</Link>
<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>

14
src/data/pastProjects.json
View file

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

3
src/pages/quarterly.astro
View file

@ -27,9 +27,10 @@ import Timeline from "../components/qp/Timeline.astro";
<Title title="Quarterly Project" />
<div class="w-full flex justify-center my-[3%]">
<Image
data-inview
src={qp}
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>
<About