This commit is contained in:
Shing Hung 2025-02-07 11:33:42 -08:00
parent 196d61190d
commit cf2dc1a91d
8 changed files with 19 additions and 44 deletions

View file

@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
> >
<p <p
data-inview data-inview
class="opacity-0 in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]" class="opacity-0 in-view:animate-fade-right md:text-[1.8vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] md:w-[10vw]"
> >
{name} {name}
</p> </p>

View file

@ -1,7 +1,7 @@
--- ---
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import jellyfish from "../../images/jellyfish.webp"; import jellyfish from "../../images/jellyfish.png";
import { FaDiscord } 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 { MdEmail } from "react-icons/md";
@ -72,8 +72,8 @@ import Link from "next/link";
<Image <Image
data-inview data-inview
src={jellyfish} src={jellyfish}
alt="cat placeholder" alt="Jellyfish mascot"
class="absolute bottom-0 md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite" class="absolute bottom-[2vw] md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
/> />
</div> </div>
</div> </div>

View file

@ -1,27 +1,27 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
const UpcomingEvent = ({ name, location, date, time, delay, description }) => ( const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
<div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 pb-[5%] relative"> <div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 md:pb-[5%] pb-[10%] relative">
<p <p
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`} className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] pl-[8%] md:pl-[2%] md:pr-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`}
> >
{name} {name}
</p> </p>
<div <div
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`} className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left md:flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
> >
Location: {location} Location: {location}
{date && ( {date && (
<> <>
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" /> <div className="md:visible invisible bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
<p>{date}</p> <p>{date}</p>
</> </>
)} )}
{time && ( {time && (
<> <>
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" /> <div className="md:visible invisible bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
<p>{time}</p> <p>{time}</p>
</> </>
)} )}

View file

@ -1,20 +0,0 @@
---
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 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 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 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%]" />
</div>

View file

@ -12,13 +12,13 @@ import ProjectSection from "./ProjectSection.astro";
</p> </p>
</div> </div>
<p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light"> <p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] font-light">
Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software. Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software.
</p> </p>
<div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]"> <div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]">
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/> <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
<p class="md:text-[2vw] text-[3vw]"> <p class="md:text-[2vw] text-[3vw] mr-[2vw]">
Skills & Requirements Skills & Requirements
</p> </p>
<p class="w-3/5"> <p class="w-3/5">

BIN
src/images/jellyfish.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View file

@ -4,24 +4,19 @@ import Link from "next/link";
--- ---
<Layout> <Layout>
<div class="h-screen w-full flex items-center justify-center"> <div class="h-screen w-full flex justify-center relative md:mt-[10%] pt-[50vw]">
<div class="flex flex-col items-center relative"> <div class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full"/>
<img <div class="flex flex-col items-center absolute md:top-0 top-[50vw]">
src="/404.webp" <p class="md:text-[15vw] text-[35vw] leading-tight font-bold tracking-wider text-slate-800/90" style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}>404</p>
alt="404 shing" <p class="font-extralight md:text-[1.4vw] text-[3vw]">
class="mr-[11%] [mask-image:radial-gradient(circle,black_10%,transparent_100%)]" Oops! You're Lost in the Circuit!🔌⚡
/>
<div class="flex flex-col items-center absolute bottom-[27%]">
<p class="font-extralight text-[1.2vw]">
Oops! You're Lost in the Circuit! 🔌⚡
</p> </p>
<Link <Link
href="/" href="/"
className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[8.5vw] py-[3%] font-extralight text-[1.2vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300" className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[7vw] py-[2%] font-extralight md:text-[1.2vw] text-[2.5vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
> >
Go Back Home Go Back Home
</Link> </Link>
</div> </div>
</div> </div>
</div>
</Layout> </Layout>