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

add animation for index page and join page

Browse source
This commit is contained in:
Shing Hung 2025-01-07 09:52:34 -08:00
parent 11137ed561
commit 7ef756abb5
17 changed files with 66 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,10 @@
const {question, answer} = Astro.props;
---
<div class = "text-white w-full flex flex-col mb-[2vh]">
<p class = "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-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
{question}
</p>
<p class = "w-[60%] mb-[2vh] pl-[1vw]">
<p data-inview class = "w-[60%] mb-[2vh] pl-[1vw] in-view:animate-fade-left">
{answer}
</p>
<dev>

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

@ -21,7 +21,7 @@ import Link from "next/link";
<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"
>
<div class="w-2/5 flex justify-evenly ml-[5%]">
<div data-inview class="w-2/5 flex justify-evenly ml-[5%] in-view:animate-flip-up animate-duration-1000">
<Link
href="https://discord.gg/XxfjqZSjca"
target="_blank"
@ -62,9 +62,10 @@ import Link from "next/link";
</Link>
</div>
<Image
data-inview
src={evan}
alt="cat placeholder"
class="absolute -bottom-[10vh] w-[25vw] right-0"
class="absolute -bottom-[10vh] w-[25vw] right-0 in-view:animate-wiggle"
/>
</div>
</div>

8
src/components/events/UpcomingEvent.astro
View file

@ -1,19 +1,19 @@
---
const {name, location, date, time, description} = Astro.props;
const {name, location, date, time, description, delay} = Astro.props;
---
<div class="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
<p class=" py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]">
<p data-inview class={`animate-delay-${delay} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`}>
{name}
</p>
<div class="flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]">
<div data-inview class={`animate-delay-${delay} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`}>
<p>Location: {location}</p>
<div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
<p>{date}</p>
<div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
<p>{time}</p>
</div>
<p class="text-[1vw] text-white/60">
<p data-inview class={`animate-delay-${delay} in-view:animate-fade-left text-[1vw] text-white/60`}>
{description}
</p>
<div class="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />

3
src/components/events/UpcomingEvents.astro
View file

@ -21,6 +21,7 @@ import { LiaDotCircle } from "react-icons/lia";
location="La Jolla Cove"
date="Tue 9 Jun 2024"
time="2 pm"
delay="0"
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
/>
<UpcomingEvent
@ -28,6 +29,7 @@ import { LiaDotCircle } from "react-icons/lia";
location="La Jolla Cove"
date="Tue 9 Jun 2024"
time="2 pm"
delay="300"
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
/>
<UpcomingEvent
@ -35,6 +37,7 @@ import { LiaDotCircle } from "react-icons/lia";
location="La Jolla Cove"
date="Tue 9 Jun 2024"
time="2 pm"
delay="700"
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
/>
</div>

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

@ -4,9 +4,9 @@ import { GoArrowDownRight } from "react-icons/go";
import { FaGear } from "react-icons/fa6";
import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link} = Astro.props;
const {image, text, link, delay} = Astro.props;
---
<div class="w-[15vw] relative group">
<div data-inview class={`w-[15vw] 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"/>
<Link

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

@ -9,7 +9,7 @@ import involve from "../../data/involve.json";
text = {item.text}
image = {item.image}
link = {item.link}
delay = {item.delay}
/>
))}
</div>

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

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

2
src/components/join/OH.astro
View file

@ -2,7 +2,7 @@
const {title, subtitle, image} = Astro.props;
---
<div class="flex flex-col items-center w-[40vw] my-[10%]">
<div data-inview class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down">
<p class="text-ieee-yellow text-[1.2vw]">
{subtitle}
</p>

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

@ -3,7 +3,6 @@ import about from "../../images/about.png";
import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
import about1 from "../../images/about1.png";
import about2 from "../../images/about2.png";
import about3 from "../../images/about3.png";
import about4 from "../../images/about4.png";
@ -24,21 +23,25 @@ import about4 from "../../images/about4.png";
/>
</div>
<Image
data-inview
src={about2}
alt="About image"
class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]"
class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%] in-view:animate-fade-right"
/>
<Image
data-inview
src={about3}
alt="About image"
class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0"
class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up"
/>
<div
class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"
data-inview
class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left"
>
</div>
<div
class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"
data-inview
class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left"
>
</div>
</div>

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

@ -23,6 +23,7 @@ import { LiaDotCircle } from "react-icons/lia";
text={activity.text}
link={activity.link}
number={activity.number}
delay={activity.delay}
/>
))}
</div>

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

@ -1,10 +1,10 @@
---
import Link from "next/link";
import { IoIosArrowDroprightCircle } from "react-icons/io";
const { title, text, link, number } = Astro.props;
const { title, text, link, number, delay } = Astro.props;
---
<div 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%]">
<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 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"/>
<p class="text-[1.7vw] font-bold text-center">
{title}

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

@ -1,19 +1,14 @@
---
import InView from "../../components/core/InView.astro"
---
<InView />
<div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
<div class="flex py-[15vh] px-[7vw] items-end w-full">
<div class="w-3/5">
<p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
<p data-inview class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-fade-right">
02
</p>
<p class="text-white text-[2.5vw] font-light">
<p data-inview class="text-white text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100">
Amet Consectetur
</p>
</div>
<p class="text-white text-[1.5vw]">
<p data-inview class="text-white text-[1.5vw] in-view:animate-fade-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
</p>

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

@ -11,10 +11,10 @@ import { RiInstagramFill } from "react-icons/ri";
<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]"
>
<p class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">
<p data-inview class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%] in-view:animate-flip-down">
UC San Diego IEEE
</p>
<p class="font-bold text-[2.8vw] text-white mb-[10%]">
<p data-inview class="font-bold text-[2.8vw] text-white mb-[10%] in-view:animate-fade-right">
Join one of the largest IEEE student branch in the US!
</p>
<p class="text-white font-light text-[1.3vw]">

12
src/data/activities.json
View file

@ -3,24 +3,28 @@
"title": "Quarterly Project",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
"link": "/quarterly",
"number": "01"
"number": "01",
"delay": "100"
},
{
"title": "Annual Project",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
"link": "/projects",
"number": "02"
"number": "02",
"delay": "300"
},
{
"title": "Social",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
"link": "/events",
"number": "03"
"number": "03",
"delay": "500"
},
{
"title": "Professional Development",
"text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
"link": "/events",
"number": "04"
"number": "04",
"delay": "700"
}
]

9
src/data/involve.json
View file

@ -2,16 +2,19 @@
{
"text": "PROJECTS",
"image": "/project.png",
"link": "/projects"
"link": "/projects",
"delay": "100"
},
{
"text": "EVENTS",
"image": "/halloween.png",
"link": "/events"
"link": "/events",
"delay": "300"
},
{
"text": "H.A.R.D. HACK",
"image": "/hardhack.png",
"link": "https://hardhack.dev/"
"link": "https://hardhack.dev/",
"delay": "500"
}
]

3
src/layouts/Layout.astro
View file

@ -1,6 +1,7 @@
---
import Navbar from "../components/core/Navbar.astro";
import Footer from "../components/core/Footer.astro";
import InView from "../components/core/InView.astro";
---
<!doctype html>
@ -12,7 +13,7 @@ import Footer from "../components/core/Footer.astro";
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
</head>
<InView />
<body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
<Navbar />
<main class="w-[95%]">

17
tailwind.config.mjs
View file

@ -1,7 +1,15 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
safelist: ["col-span-1", "col-span-2", "col-span-3", "col-span-4"],
safelist: [
"col-span-1",
"col-span-2",
"col-span-3",
"col-span-4",
"animate-delay-100",
"animate-delay-300",
"animate-delay-500",
"animate-delay-700"],
theme: {
extend: {
boxShadow: {
@ -24,5 +32,10 @@ export default {
},
},
},
plugins: [require("tailwindcss-motion"), require("tailwindcss-animated")],
plugins: [
require("tailwindcss-motion"),
require("tailwindcss-animated"),
function ({ addVariant }) {
addVariant("in-view", "&.in-view");
},],
};