Fix bug #26

Merged
chark1es merged 2 commits from shing/fixBug into main 2025-02-08 02:14:08 +00:00
9 changed files with 20 additions and 45 deletions

View file

@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
>
<p
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}
</p>

View file

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

View file

@ -1,27 +1,27 @@
import React, { useEffect, useState } from "react";
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
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}
</p>
<div
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}
{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>
</>
)}
{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>
</>
)}

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>
</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.
</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%]"/>
<p class="md:text-[2vw] text-[3vw]">
<p class="md:text-[2vw] text-[3vw] mr-[2vw]">
Skills & Requirements
</p>
<p class="w-3/5">

View file

@ -21,7 +21,7 @@ import { LiaDotCircle } from "react-icons/lia";
<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 via-white to-white/40">
<FaDiscord />
</div>
<p class="text-[1.3vw] font-semibold">Facebook</p>
<p class="text-[1.3vw] font-semibold">Discord</p>
</Link>
</div>

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>
<div class="h-screen w-full flex items-center justify-center">
<div class="flex flex-col items-center relative">
<img
src="/404.webp"
alt="404 shing"
class="mr-[11%] [mask-image:radial-gradient(circle,black_10%,transparent_100%)]"
/>
<div class="flex flex-col items-center absolute bottom-[27%]">
<p class="font-extralight text-[1.2vw]">
Oops! You're Lost in the Circuit! 🔌⚡
<div class="h-screen w-full flex justify-center relative md:mt-[10%] pt-[50vw]">
<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"/>
<div class="flex flex-col items-center absolute md:top-0 top-[50vw]">
<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>
<p class="font-extralight md:text-[1.4vw] text-[3vw]">
Oops! You're Lost in the Circuit!🔌⚡
</p>
<Link
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
</Link>
</div>
</div>
</div>
</Layout>