update in progress

Author: liyunze-coding

src/components/global/Card.astro

@@ -1,13 +1,15 @@
 ---
-interface Props {
+type Props = {
+	href?: string;
 	primaryColor: string;
 	bgColor?: string;
 	scaleOnHover?: boolean;
 	pixelHeight?: string;
 	className?: string;
-}
+};
 
 const {
+	href,
 	primaryColor,
 	bgColor = "#282828",
 	scaleOnHover = false,
@@ -16,11 +18,34 @@ const {
 } = Astro.props;
 ---
 
-<div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
-	<div class="card-content">
-		<slot />
-	</div>
-</div>
+<>
+	{
+		href && (
+			<a href={href}>
+				<div
+					class="card z-10"
+					class:list={[{ scale: scaleOnHover }, className]}
+				>
+					<div class="card-content">
+						<slot />
+					</div>
+				</div>
+			</a>
+		)
+	}
+	{
+		!href && (
+			<div
+				class="card z-10"
+				class:list={[{ scale: scaleOnHover }, className]}
+			>
+				<div class="card-content">
+					<slot />
+				</div>
+			</div>
+		)
+	}
+</>
 
 <style define:vars={{ primaryColor, bgColor, pixelHeight }}>
 	* {
@@ -62,15 +87,10 @@ const {
 		opacity: 0;
 	}
 
-	.card:after {
-		top: 65%;
-		opacity: 0;
-	}
-
-	.card:hover:after {
+	/* .card:hover:after {
 		top: 25%;
 		opacity: 1;
-	}
+	} */
 
 	.card.scale {
 		transition: transform 0.5s ease;

src/components/home/Greeting.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import Socials from "../socials/Socials.svelte";
+
+    // Roles
+    const typingInterval: number = 50;
+
+    function addCharacter(str1: string, str2: string) {
+        // str1: incomplete string, add a character after this
+        // str2: complete string, add a character from this
+
+        let str1Length = str1.length;
+        let str2Length = str2.length;
+
+        if (str1Length < str2Length) {
+            return str1 + str2[str1Length];
+        } else {
+            return str1;
+        }
+    }
+
+    function sleep(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+
+    // Greeting
+    let date = new Date();
+    let hour = date.getHours();
+
+    let greeting: string = "";
+
+    if (hour >= 0 && hour < 12) {
+        greeting = "morning";
+    } else if (hour >= 12 && hour < 18) {
+        greeting = "afternoon";
+    } else if (hour >= 18) {
+        greeting = "evening";
+    }
+
+    let greetingState: string = $state("");
+    let greetingPulse: HTMLElement;
+
+    async function animateGreeting(greeting: string) {
+        for (let i = 0; i < greeting.length; i++) {
+            greetingState = addCharacter(greetingState, greeting);
+
+            if (i === greeting.length - 1) {
+                greetingPulse.classList.remove("animate-pulse");
+                greetingPulse.classList.add("hidden");
+            }
+
+            await sleep(typingInterval);
+        }
+    }
+
+    // after window finish loading, call animateRoles()
+    onMount(async () => {
+        animateGreeting(greeting);
+    });
+</script>
+
+<span>
+    Good {greetingState}<span
+        bind:this={greetingPulse}
+        class="animate-pulse font-extralight">|</span
+    ></span
+>

src/components/home/Intro.astro

@@ -0,0 +1,77 @@
+---
+import Card from "../global/Card.astro";
+import Socials from "../socials/Socials.svelte";
+import Greeting from "./Greeting.svelte";
+---
+
+<div class="w-[90%] md:w-[600px] lg:w-1/2 xl:w-1/2">
+	<Card bgColor="#252525" primaryColor="#BEADFA" className="animate-fadeIn">
+		<div id="intro" class="flex h-fit flex-col text-white">
+			<div class="w-full px-5 pt-10 pb-2 lg:px-10">
+				<div class="flex h-20 flex-row">
+					<div class="mr-1 flex w-20 items-center justify-center">
+						<img
+							src="/images/pfp_new.webp"
+							alt="Ryan"
+							width="80"
+							height="80"
+							class="max-w-full rounded-full bg-[#505050]"
+						/>
+					</div>
+					<div class="ml-2 flex flex-col items-start justify-center">
+						<div
+							id="name"
+							class="animate-gradient text-2xl font-bold"
+						>
+							RythonDev
+						</div>
+						<div class="w-full text-xl">Full Stack Developer</div>
+					</div>
+				</div>
+				<div id="uwu" class="hidden items-center justify-center">
+					<img
+						src="/images/RythonDev-UwU-compressed.webp"
+						alt="RythonDev"
+						width="400"
+						height="131.8"
+					/>
+				</div>
+				<div class="mt-5 mb-5 text-2xl font-bold">
+					<Greeting client:load />, <br class="sm:hidden" />I'm Ryan!
+				</div>
+				<p class="text-left">
+					Born and raised in Malaysia, I'm currently pursuing a
+					Bachelor's in Computer Science in Australia.
+				</p>
+				<br />
+				<p class="text-left">
+					My work has connected me with Twitch streamers and content
+					creators, and I'm driven by interests in web development,
+					computer vision, and data science.
+				</p>
+
+				<div class="mt-8 flex flex-row items-center justify-center">
+					<Socials />
+				</div>
+			</div>
+		</div>
+	</Card>
+</div>
+
+<style>
+	#name {
+		background: linear-gradient(
+			90deg,
+			#16ff00 0%,
+			#72ffff 45%,
+			#0096ff 100%
+		);
+
+		background-size: 300%;
+
+		background-clip: text;
+		-webkit-background-clip: text;
+
+		-webkit-text-fill-color: transparent;
+	}
+</style>