Merge pull request #3 from liyunze-coding/fix-spacing

Update project and fix warnings

src/components/experience/ExperienceComponent.tsx

@@ -47,7 +47,7 @@ function ExperienceTabContent() {
 				dateRange: "Mar 2026 - Apr 2026",
 				country: "Australia",
 				highlights: [
-					"Successfully merged 13 pull requests to the Ruby on Rails codebase, fixing bugs and adding new features.",
+					"Successfully merged 13+ pull requests to the Ruby on Rails codebase, fixing bugs and adding new features.",
 					"Communicated clearly about obstacles, suggested probable cause and provided solutions or workarounds.",
 				],
 				className: "pb-5",
@@ -58,7 +58,8 @@ function ExperienceTabContent() {
 				country: "Australia",
 				highlights: [
 					"Led the migration from 40+ Javascript files to Typescript while preserving original functionality with minor bug fixes.",
-					"Improved navigation adhering to UX principles.",
+					"Reviewed 35+ pull requests with only 70% approval rate to maintain codebase quality.",
+					"Contributed 12+ pull requests into frontend and CI/CD to add new features and fix bugs.",
 				],
 				className: "pb-5",
 			})}
@@ -92,10 +93,11 @@ function EducationTabContent() {
 		<>
 			{Position({
 				title: "Bachelors of Computer Science",
-				dateRange: "June 2024 - Now",
+				dateRange: "June 2024 - September 2026",
 				country: "Australia",
 				summary: `Awarded 50% Vice-Chancellor Scholarship to study
-						Bachelor's in Computer Science, minoring in Full Stack Development. Active committee member in cybersecurity association and software engineering club.`,
+						Bachelor's in Computer Science, minoring in Full Stack Development.
+						Active committee member in various clubs including Cybersecurity association and Software Engineering club.`,
 				className: "pb-5",
 			})}
 			{Position({
@@ -110,27 +112,30 @@ function EducationTabContent() {
 
 function ExtracurricularTabContent() {
 	return (
-		<>
+    <>
+      {Position({
+				title: "Web Dev Lead of Software Engineering Club",
+				dateRange: "Sep 2025 - Now",
+				country: "Australia",
+				className: "pb-5",
+				highlights: [
+          "Developed Rust Discord Bot, includes club membership verification feature using Supabase.",
+					"Improve engagement of Discord server by introducing daily leetcode challenges.",
+          "Hosted a Typescript workshop using Bun and Svelte.",
+					"Featured as a panelist on Our Internship Experience, sharing tips and advice to students."
+				],
+			})}
 			{Position({
 				title: "Development Committee of Cybersecurity Association",
 				dateRange: "Nov 2025 - Now",
 				country: "Australia",
 				className: "pb-5",
 				highlights: [
-					`Leading frontend development of club's revamped website in Astro.`,
+          "Leading frontend development of club's revamped website in Astro.",
+					"Contributing to Discord bot development migration from Typescript to Python for lower barrier of entry.",
 					"Hosted study sessions to encourage productivity amongst students.",
 				],
 			})}
-			{Position({
-				title: "Web Dev Lead of Software Engineering Club",
-				dateRange: "Sep 2025 - Now",
-				country: "Australia",
-				className: "pb-5",
-				highlights: [
-					`Developed Rust Discord Bot, includes club membership verification feature using Supabase.`,
-					`Hosted a Typescript workshop using Bun.`,
-				],
-			})}
 			{Position({
 				title: "Marketing Officer of Malaysian Association",
 				dateRange: "Mar 2025 - Oct 2025",

src/components/home/Intro.astro

@@ -46,9 +46,10 @@ import { Image } from "astro:assets";
 					<Greeting client:load />!
 				</div>
 				<p class="text-left">
-					I'm a Malaysian software developer studying in Australia on
-					a 50% excellence scholarship. I develop software for streamers
-					and content creators, while also making tech tutorials in programming.
+					I am a Malaysian computer science graduate pivoting towards
+					teaching in Australia. I develop software for streamers and
+					content creators, while also making tech tutorials in
+					programming.
 				</p>
 
 				<div class="mt-8 flex flex-row items-center justify-center">

src/components/projects/ProjectsComponent.astro

@@ -48,15 +48,15 @@ import Project from "./Project.astro";
 
 		<Project
 			position="right"
-			href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
-			title="Chat-task-tic widget"
+			href="https://github.com/liyunze-coding/rython-task-bot-v2"
+			title="Multi-Task Widget"
 			label="View Repository"
 			description={`
 				Used by 100+ Twitch streamers, allow viewers and streamers
 				to add their own tasks to the widget for accountability!
 				Easy to setup and the customization possibilities are
 				endless!`}
-			tags={["HTML", "CSS", "Javascript"]}
+			tags={["HTML", "CSS", "Javascript", "C#"]}
 		>
 			<TaskWidget
 				classList={`

src/components/projects/TaskWidget.svelte

@@ -1,116 +1,136 @@
 <script lang="ts">
-	const streamers = [
+	type Task = {
+		name: string;
+		completed: boolean;
+	};
+	type UserListItem = {
+		streamer: string;
+		tasks: Array<Task>;
+	};
+	const streamers: Array<UserListItem> = [
 		{
 			streamer: "4l1c3_0",
-			task: "mental breakdance",
+			tasks: [{ name: "mental breakdance", completed: true }],
 		},
 		{
 			streamer: "arcanexviii",
-			task: "babysit",
+			tasks: [{ name: "babysit", completed: false }],
 		},
 		{
-			streamer: "brisim_claimhte",
-			task: "rewrite history thesis",
+			streamer: "B1obaBoba",
+			tasks: [{ name: "Move to Norway", completed: false }],
 		},
 		{
 			streamer: "Bubxmicn",
-			task: "drive a truck",
+			tasks: [
+				{ name: "drive a truck", completed: false },
+				{
+					name: "get Masters in Public Health degree",
+					completed: false,
+				},
+			],
+		},
+		{
+			streamer: "bunnie_bytes",
+			tasks: [{ name: "Work as a software developer", completed: true }],
 		},
 		{
 			streamer: "charliosaurus",
-			task: "praise the lord",
+			tasks: [
+				{ name: "praise the lord", completed: true },
+				{ name: "graduate from university", completed: true },
+			],
 		},
 		{
 			streamer: "clari_miu",
-			task: "be sweaty",
+			tasks: [{ name: "be sweaty", completed: false }],
 		},
 		{
 			streamer: "cloudydayzzz",
-			task: "stay up at night",
-		},
-		{
-			streamer: "creativepepper",
-			task: "develop mobile app",
+			tasks: [{ name: "stay up at night", completed: false }],
 		},
 		{
 			streamer: "DATJI_",
-			task: "IRL KBBQ stream",
-		},
-		{
-			streamer: "EarliestTea",
-			task: "chat about MBTI",
+			tasks: [{ name: "IRL KBBQ stream", completed: true }],
 		},
 		{
 			streamer: "Ellyskey",
-			task: "sell YOUthversity merch",
+			tasks: [{ name: "sell YOUthversity merch", completed: false }],
 		},
 		{
 			streamer: "HarryIsTrying",
-			task: "be a strategy consultant",
+			tasks: [{ name: "be a strategy consultant", completed: true }],
 		},
 		{
 			streamer: "itsbrandonut",
-			task: "cowork then league",
+			tasks: [{ name: "cowork then league", completed: false }],
 		},
 		{
 			streamer: "lala_xitlali",
-			task: "design fashionable clothes",
+			tasks: [{ name: "design fashionable clothes", completed: false }],
 		},
 		{
 			streamer: "lyricalclove",
-			task: "teach English",
+			tasks: [{ name: "teach English", completed: false }],
 		},
 		{
 			streamer: "nachoburrit0",
-			task: "update spreadsheets",
+			tasks: [{ name: "update spreadsheets", completed: false }],
 		},
 		{
 			streamer: "nihn_",
-			task: "Release new Lo-fi music",
+			tasks: [{ name: "Release new Lo-fi music", completed: false }],
 		},
 		{
 			streamer: "lanezzz_",
-			task: "be a supermodel",
+			tasks: [{ name: "be a supermodel", completed: false }],
 		},
 		{
 			streamer: "PineappleEffect",
-			task: "edit video",
+			tasks: [{ name: "edit video", completed: false }],
 		},
 		{
 			streamer: "pinsaregood",
-			task: "go on another hiatus",
+			tasks: [{ name: "go on another hiatus", completed: false }],
+		},
+		{
+			streamer: "potatoing_2d",
+			tasks: [{ name: "be a potato", completed: false }],
 		},
 		{
 			streamer: "lilylikesrocks",
-			task: "learn about rocks",
+			tasks: [{ name: "learn about rocks", completed: false }],
+		},
+		{
+			streamer: "RythonDev",
+			tasks: [
+				{ name: "Graduate with Bachelors degree", completed: true },
+				{ name: "Masters in Teaching (secondary)", completed: false },
+			],
 		},
 		{
 			streamer: "snowxcone",
-			task: "do more leetcode",
+			tasks: [{ name: "do more leetcode", completed: false }],
 		},
 		{
 			streamer: "studypaws",
-			task: "be a vet",
+			tasks: [{ name: "be a vet", completed: false }],
 		},
 		{
 			streamer: "sunfflawer",
-			task: "be a sunflower",
+			tasks: [{ name: "be a sunflower", completed: false }],
 		},
 		{
 			streamer: "Supernaturalwriter",
-			task: "hit the gym",
+			tasks: [{ name: "hit the gym", completed: false }],
 		},
 		{
 			streamer: "ThePainfulPhD",
-			task: "study about pain",
-		},
-		{
-			streamer: "theyolotato",
-			task: "be a potato",
+			tasks: [{ name: "get PhD", completed: true }],
 		},
 		{
 			streamer: "xeno_hiraeth",
-			task: "anki flashcards",
+			tasks: [{ name: "finished med school", completed: true }],
 		},
 	];
 
@@ -139,22 +159,42 @@
 			class="scroll-parent relative h-[82%] overflow-hidden rounded-br-2xl rounded-bl-2xl font-['Fredoka',_sans-serif] lg:min-h-0"
 		>
 			<div class="scroll-element primary absolute w-full px-1">
-				{#each streamers as { streamer, task }}
+				{#each streamers as { streamer, tasks }}
 					<div
 						class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
                                     text-sm overflow-ellipsis whitespace-nowrap text-white lg:text-base"
 					>
-						O {streamer} : {task}
+						{streamer} :
+						<ol class="list-inside list-decimal">
+							{#each tasks as task}
+								<li
+									class={task.completed
+										? "text-gray-400 line-through"
+										: "text-white"}
+								>
+									{task.name}
+								</li>
+							{/each}
+						</ol>
 					</div>
 				{/each}
 			</div>
 			<div class="scroll-element secondary absolute w-full px-1">
-				{#each streamers as { streamer, task }}
+				{#each streamers as { streamer, tasks }}
 					<div
 						class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
                                     text-sm overflow-ellipsis whitespace-nowrap text-white lg:text-base"
 					>
-						O {streamer} : {task}
+						{streamer} :
+						<ol class="list-inside list-decimal">
+							{#each tasks as task}
+								<li
+									class={task.completed ? "line-through" : ""}
+								>
+									{task.name}
+								</li>
+							{/each}
+						</ol>
 					</div>
 				{/each}
 			</div>
@@ -202,11 +242,11 @@
 	}
 
 	.primary {
-		animation: primary 20s linear infinite;
+		animation: primary 30s linear infinite;
 	}
 
 	.secondary {
-		animation: secondary 20s linear infinite;
+		animation: secondary 30s linear infinite;
 	}
 
 	@keyframes primary {
@@ -214,13 +254,13 @@
 			transform: translateY(0);
 		}
 		to {
-			transform: translateY(-1175px);
+			transform: translateY(-1890px);
 		}
 	}
 
 	@keyframes secondary {
 		from {
-			transform: translateY(1175px);
+			transform: translateY(1890px);
 		}
 		to {
 			transform: translateY(0);

src/components/projects/VideoProject.svelte

@@ -21,7 +21,7 @@
 		tags = [],
 	}: Props = $props();
 
-	const positionLeft: boolean = $state(position == "left");
+	const positionLeft: boolean = (() => position == "left")();
 
 	onMount(() => {
 		const videos = document.querySelectorAll<HTMLVideoElement>(".playable");

src/components/skills/SkillsComponent.astro

@@ -56,7 +56,7 @@ import Card from "../global/Card.astro";
 			<div class="w-full px-5 py-5 lg:w-4/5">
 				<div class="mb-6">
 					<p class="mb-3">
-						I primarily work on websites on both the frontend and
+						I primarily work on web apps on both the frontend and
 						the backend.
 					</p>
 					<p class="mb-3">