Fix bug #26
9 changed files with 20 additions and 45 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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>
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
<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 />
|
<FaDiscord />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-[1.3vw] font-semibold">Facebook</p>
|
<p class="text-[1.3vw] font-semibold">Discord</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
BIN
src/images/jellyfish.png
Normal file
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 |
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue