From cb53ad26f45fa9bdcd79e13a258ca9e2bf6ef967 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Fri, 20 Jun 2025 12:24:01 +1000
Subject: [PATCH] project component

---
 src/components/projects/ProjectLeft.astro     | 123 ++++++++
 src/components/projects/ProjectRight.astro    | 121 ++++++++
 .../projects/ProjectsComponent.astro          | 291 ++++--------------
 .../sections/skills/MoreSkills.astro          | 103 -------
 4 files changed, 311 insertions(+), 327 deletions(-)
 create mode 100644 src/components/projects/ProjectLeft.astro
 create mode 100644 src/components/projects/ProjectRight.astro
 delete mode 100644 src/components/sections/skills/MoreSkills.astro

diff --git a/src/components/projects/ProjectLeft.astro b/src/components/projects/ProjectLeft.astro
new file mode 100644
index 0000000..7792143
--- /dev/null
+++ b/src/components/projects/ProjectLeft.astro
@@ -0,0 +1,123 @@
+---
+import { Image } from "astro:assets";
+
+interface Tag {
+	text: string;
+	textColor: string;
+	bgColor: string;
+}
+
+interface Props {
+	image: ImageMetadata;
+	alt: string;
+	href: string;
+	title: string;
+	description: string;
+	label?: string;
+	tags?: Tag[];
+}
+
+const {
+	image,
+	alt,
+	href,
+	title,
+	description,
+	label = "View Repository",
+	tags = [],
+} = Astro.props;
+---
+
+<div
+	class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
+>
+	<div
+		class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
+	>
+		<Image
+			src={image}
+			alt={alt}
+			class=`absolute max-w-full
+					aspect-video
+                    top-1/2 left-1/2
+                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
+                    border-2 border-solid border-white rounded-xl`
+			width="700"
+		/>
+		<Image
+			src={image}
+			alt={alt}
+			width="700"
+			class=`absolute max-w-full
+					aspect-video
+                    top-1/2 left-1/2
+                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
+                    border-2 border-solid border-white rounded-xl`
+		/>
+		<div
+			class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
+		>
+			<a
+				href={href}
+				target="_blank"
+				class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
+				>{label}</a
+			>
+		</div>
+	</div>
+	<div class="mb-10 flex items-center justify-center lg:hidden">
+		<a
+			href={href}
+			target="_blank"
+			class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
+			>{label}</a
+		>
+	</div>
+	<div
+		class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
+	>
+		<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
+			{title}
+		</h2>
+		<p
+			class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
+		>
+			{description}
+		</p>
+		<div
+			class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
+		>
+			{
+				tags.map((tag) => (
+					<div
+						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
+						style={`
+							background-color: ${tag.bgColor || "black"};
+							color: ${tag.textColor || "white"};
+						`}
+					>
+						{tag.text}
+					</div>
+				))
+			}
+		</div>
+	</div>
+</div>
+
+<style>
+	.image-container img {
+		transition: transform 0.5s ease-in-out;
+	}
+	@media (min-width: 1025px) {
+		.image-container:hover > img {
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+				translateX(-50%) translateY(-50%);
+		}
+
+		.image-container:hover > .visit-div {
+			opacity: 100%;
+			transition: opacity 0.3s ease-in-out;
+			transition-delay: 0.3s;
+		}
+	}
+</style>
diff --git a/src/components/projects/ProjectRight.astro b/src/components/projects/ProjectRight.astro
new file mode 100644
index 0000000..ee932d7
--- /dev/null
+++ b/src/components/projects/ProjectRight.astro
@@ -0,0 +1,121 @@
+---
+import { Image } from "astro:assets";
+
+interface Tag {
+	text: string;
+	textColor: string;
+	bgColor: string;
+}
+
+interface Props {
+	image: ImageMetadata;
+	alt: string;
+	href: string;
+	title: string;
+	description: string;
+	label?: string;
+	tags?: Tag[];
+}
+
+const {
+	image,
+	alt,
+	href,
+	title,
+	description,
+	label = "View Repository",
+	tags,
+} = Astro.props;
+---
+
+<div
+	class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
+>
+	<div
+		class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
+	>
+		<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
+			{title}
+		</h2>
+		<p
+			class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
+		>
+			{description}
+		</p>
+		<div
+			class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
+		>
+			{
+				tags?.map((tag) => (
+					<div
+						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
+						style={`
+							background-color: ${tag.bgColor || "black"};
+							color: ${tag.textColor || "white"};
+						`}
+					>
+						{tag.text}
+					</div>
+				))
+			}
+		</div>
+	</div>
+	<div class="mb-10 flex items-center justify-center lg:hidden">
+		<a
+			href={href}
+			target="_blank"
+			class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
+			>{label}</a
+		>
+	</div>
+	<div
+		class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
+	>
+		<Image
+			src={image}
+			alt={alt}
+			class=`absolute max-w-full
+                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
+                    border-2 border-solid border-white rounded-xl`
+			`
+			width="700"
+		/>
+		<Image
+			src={image}
+			alt={alt}
+			width="700"
+			class=`absolute max-w-full
+                    top-1/2 left-1/2
+                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
+                    border-2 border-solid border-white rounded-xl`
+		/>
+		<div
+			class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
+		>
+			<a
+				href="https://github.com/liyunze-coding/TwitchPlaysX"
+				target="_blank"
+				class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
+				>{label}</a
+			>
+		</div>
+	</div>
+</div>
+
+<style>
+	.image-container img {
+		transition: transform 0.5s ease-in-out;
+	}
+	@media (min-width: 1025px) {
+		.image-container:hover > img {
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+				translateX(-50%) translateY(-50%);
+		}
+
+		.image-container:hover > .visit-div {
+			opacity: 100%;
+			transition: opacity 0.3s ease-in-out;
+			transition-delay: 0.3s;
+		}
+	}
+</style>
diff --git a/src/components/projects/ProjectsComponent.astro b/src/components/projects/ProjectsComponent.astro
index a701f2c..0bbb9a2 100644
--- a/src/components/projects/ProjectsComponent.astro
+++ b/src/components/projects/ProjectsComponent.astro
@@ -1,9 +1,10 @@
 ---
 import TaskWidget from "./TaskWidget.svelte";
-import { Image } from "astro:assets";
 import CoworkingGuide from "../images/projects/coworking-guide.webp";
 import Wnrs from "../images/projects/wnrs.webp";
 import TwitchPlays from "../images/projects/twitchplays.webp";
+import ProjectLeft from "./ProjectLeft.astro";
+import ProjectRight from "./ProjectRight.astro";
 ---
 
 <div
@@ -11,83 +12,31 @@ import TwitchPlays from "../images/projects/twitchplays.webp";
 	class="flex h-fit flex-col items-center [perspective:1000px]"
 >
 	<div class="w-full max-w-[1440px]">
-		<div
-			class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
-		>
-			<div
-				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
-			>
-				<Image
-					src={CoworkingGuide}
-					alt="coworking guide"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
-                    border-2 border-solid border-white rounded-xl`
-					width="700"
-				/>
-				<Image
-					src={CoworkingGuide}
-					alt="coworking guide"
-					width="700"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
-                    border-2 border-solid border-white rounded-xl`
-				/>
-				<div
-					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
-				>
-					<a
-						href="https://coworking-guide.vercel.app/"
-						target="_blank"
-						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
-						>Visit site</a
-					>
-				</div>
-			</div>
-			<div class="mb-10 flex items-center justify-center lg:hidden">
-				<a
-					href="https://coworking-guide.vercel.app/"
-					target="_blank"
-					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
-					>View repository</a
-				>
-			</div>
-			<div
-				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
-			>
-				<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
-					Coworking Guide
-				</h2>
-				<p
-					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
-				>
-					A guide to coworking streams for streamers, covers wide
-					range of topics from tips on how to get started with setting
-					up stream to how to grow your audience!
-				</p>
-				<div
-					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
-				>
-					<div
-						class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
-					>
-						Astro
-					</div>
-					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
-					>
-						TypeScript
-					</div>
-					<div
-						class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
-					>
-						Markdown
-					</div>
-				</div>
-			</div>
-		</div>
+		<ProjectLeft
+			image={CoworkingGuide}
+			alt="coworking guide"
+			href="https://coworking-guide.vercel.app/"
+			title="Coworking Guide"
+			label="Visit Site"
+			description="A guide to coworking streams for streamers, covers wide range of topics from tips on how to get started with setting up stream to how to grow your audience!"
+			tags={[
+				{
+					text: "Astro",
+					bgColor: "white",
+					textColor: "black",
+				},
+				{
+					text: "TypeScript",
+					bgColor: "#3178C6",
+					textColor: "white",
+				},
+				{
+					text: "Markdown",
+					bgColor: "black",
+					textColor: "white",
+				},
+			]}
+		/>
 		<div
 			class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
 		>
@@ -136,154 +85,48 @@ import TwitchPlays from "../images/projects/twitchplays.webp";
 			<TaskWidget client:visible />
 		</div>
 
-		<div
-			class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20"
-		>
-			<div
-				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
-			>
-				<Image
-					src={Wnrs}
-					alt="Hex Guess"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
-                    border-2 border-solid border-white rounded-xl
-                    aspect-video`
-					width="700"
-				/>
-				<Image
-					src={Wnrs}
-					alt="Hex Guess"
-					width="700"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
-                    border-2 border-solid border-white rounded-xl
-                    aspect-video`
-				/>
-				<div
-					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
-				>
-					<a
-						href="https://liyunze-coding.github.io/wnrs/"
-						target="_blank"
-						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
-						>Visit site</a
-					>
-				</div>
-			</div>
-			<div class="mb-10 flex items-center justify-center lg:hidden">
-				<a
-					href="https://hex-guess.vercel.app/"
-					target="_blank"
-					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
-					>View repository</a
-				>
-			</div>
-			<div
-				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
-			>
-				<h2 class="mb-5 text-center text-3xl font-bold">
-					We're Not Really Strangers
-				</h2>
-				<p
-					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
-				>
-					Otherwise abbreviated as "WNRS", this is a digital
-					adaptation of the popular card game designed to foster
-					meaningful connections through engaging questions and
-					prompts.
-				</p>
-				<div
-					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
-				>
-					<div
-						class="bg-react my-1 mr-1 w-fit rounded-full px-3 py-1 text-black transition-colors duration-300"
-					>
-						React
-					</div>
-					<div
-						class="bg-typescript my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
-					>
-						Typescript
-					</div>
-				</div>
-			</div>
-		</div>
-		<div
-			class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
-		>
-			<div
-				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
-			>
-				<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
-					Twitch Plays X
-				</h2>
-				<p
-					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
-				>
-					Allow Twitch chatters to play games such as Pokemon!
+		<ProjectLeft
+			image={Wnrs}
+			alt="We're not really strangers"
+			href="https://liyunze-coding.github.io/wnrs/"
+			label="Visit Site"
+			title="We're not really strangers"
+			description="Otherwise abbreviated as 'WNRS', this is a digitaladaptation of the popular card game designed to foster meaningful connections through engaging questions and prompts."
+			tags={[
+				{
+					text: "React",
+					bgColor: "var(--color-react)",
+					textColor: "black",
+				},
+				{
+					text: "TypeScript",
+					bgColor: "var(--color-typescript)",
+					textColor: "white",
+				},
+			]}
+		/>
+		<ProjectRight
+			image={TwitchPlays}
+			alt="Twitch Plays X"
+			href="https://github.com/liyunze-coding/TwitchPlaysX"
+			title="Twitch Plays X"
+			description={`Allow Twitch chatters to play games such as Pokemon!
 					Chatters can enter messages such as "up up down down left
 					right B A" and the Python program will trigger the
-					corresponding keypresses.
-				</p>
-				<div
-					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
-				>
-					<div
-						class="bg-python my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
-					>
-						Python
-					</div>
-					<div
-						class="bg-win32api my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
-					>
-						win32API
-					</div>
-				</div>
-			</div>
-			<div class="mb-10 flex items-center justify-center lg:hidden">
-				<a
-					href="https://github.com/liyunze-coding/TwitchPlaysX"
-					target="_blank"
-					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
-					>View repository</a
-				>
-			</div>
-			<div
-				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
-			>
-				<Image
-					src={TwitchPlays}
-					alt="Twitch Plays X"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
-                    border-2 border-solid border-white rounded-xl`
-					`
-					width="700"
-				/>
-				<Image
-					src={TwitchPlays}
-					alt="Twitch Plays X"
-					width="700"
-					class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
-                    border-2 border-solid border-white rounded-xl`
-				/>
-				<div
-					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
-				>
-					<a
-						href="https://github.com/liyunze-coding/TwitchPlaysX"
-						target="_blank"
-						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
-						>View repository</a
-					>
-				</div>
-			</div>
-		</div>
+					corresponding keypresses.`}
+			tags={[
+				{
+					text: "win32API",
+					bgColor: "var(--color-win32api)",
+					textColor: "white",
+				},
+				{
+					text: "Python",
+					bgColor: "var(--color-python)",
+					textColor: "white",
+				},
+			]}
+		/>
 	</div>
 </div>
 
diff --git a/src/components/sections/skills/MoreSkills.astro b/src/components/sections/skills/MoreSkills.astro
deleted file mode 100644
index 773bda2..0000000
--- a/src/components/sections/skills/MoreSkills.astro
+++ /dev/null
@@ -1,103 +0,0 @@
----
-import Card from "../global/Card.astro";
-import Line from "../global/NetworkLine.astro";
----
-
-<div id="Experience" class="h-fit">
-	<div class="flex flex-col items-center">
-		<div class="w-[90%] md:w-[600px]">
-			<Line height="50px" />
-			<div class="mx-auto w-[90%] md:w-[600px]">
-				<Card primaryColor="#9D76C1">
-					<div class="px-8 py-8">
-						<div class="justify-left flex w-full flex-col">
-							<h2 class="text-2xl font-bold">Content Creation</h2>
-						</div>
-						<hr class="my-3 w-full" />
-						<p class="text-left">
-							Since I was little, I loved watching YouTube videos
-							and the idea of bringing joy and laughter to a wider
-							audience. Thus, I began my journey in content
-							creation through YouTube videos and Twitch
-							streaming. I typically do coworking & study streams
-							to keep myself accountable and encourage
-							productivity amongst viewers. I also do software and
-							game development streams where I showcase my
-							workflow.
-						</p>
-						<div
-							class="flex w-full flex-row flex-wrap justify-start"
-						>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
-							>
-								OBS
-							</div>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
-							>
-								DaVinci Resolve
-							</div>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
-							>
-								Twitch
-							</div>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
-							>
-								YouTube
-							</div>
-						</div>
-					</div>
-				</Card>
-			</div>
-			<Line height="50px" />
-			<div class="mx-auto w-[90%] md:w-[600px]">
-				<Card primaryColor="#9D76C1">
-					<div class="px-8 py-8">
-						<div class="justify-left flex w-full flex-col">
-							<h2 class="text-2xl font-bold">
-								Mobile Development
-							</h2>
-						</div>
-						<hr class="my-3 w-full" />
-						<p class="text-left">
-							In my Mobile App Development unit in University, I
-							am tasked to develop Android apps using Android
-							Studio. The final app project I had developed was a
-							LLM-powered quiz app with features such as choosing
-							your own topics, viewing your question attempt
-							history afterwards, and upgrading your tier with
-							Google Pay.
-						</p>
-						<p class="text-left">
-							The marking tutor was impressed with my work, and
-							offered me to join a research lab because I had good
-							potential.
-						</p>
-						<div
-							class="mt-5 flex w-full flex-row flex-wrap justify-start"
-						>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
-							>
-								Android
-							</div>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
-							>
-								Java
-							</div>
-							<div
-								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
-							>
-								Kotlin
-							</div>
-						</div>
-					</div>
-				</Card>
-			</div>
-		</div>
-	</div>
-</div>