From e0440aa4ca179a1bb3b41457b2c29caa2069ece4 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Wed, 13 Aug 2025 18:50:19 +1000
Subject: [PATCH] updated projects

---
 src/components/projects/MoreProjects.astro    | 64 ++++++++++++
 src/components/projects/MoreProjects.svelte   | 65 ------------
 .../projects/ProjectsComponent.astro          | 99 ++++++++++---------
 src/pages/projects.astro                      |  4 +-
 4 files changed, 119 insertions(+), 113 deletions(-)
 create mode 100644 src/components/projects/MoreProjects.astro
 delete mode 100644 src/components/projects/MoreProjects.svelte

diff --git a/src/components/projects/MoreProjects.astro b/src/components/projects/MoreProjects.astro
new file mode 100644
index 0000000..7f9b6c7
--- /dev/null
+++ b/src/components/projects/MoreProjects.astro
@@ -0,0 +1,64 @@
+---
+import VideoProject from "./VideoProject.svelte";
+import Project from "./Project.astro";
+import TwitchPlays from "../images/projects/twitchplays.webp";
+---
+
+<div class="flex h-fit flex-col items-center pt-20 [perspective:1000px]">
+	<div class="w-full max-w-[1440px]">
+		<VideoProject
+			image_src="/images/projects/chess-opencv.webp"
+			image_alt="computer vision chess bot"
+			position="left"
+			video_src="/videos/chess_opencv_demo.webm"
+			title="Computer Vision Chess Bot"
+			description={`
+                A script that plays against opponents on lichess. Uses
+                OpenCV to detect the board and pieces, and the Stockfish
+                chess engine to determine the best moves. Then uses
+                PyAutoGUI to play the moves on the browser.
+            `}
+			tags={[
+				{
+					text: "Python",
+					textColor: "white",
+					bgColor: "var(--color-python)",
+				},
+				{
+					text: "OpenCV",
+					textColor: "white",
+					bgColor: "var(--color-opencv)",
+				},
+				{
+					text: "PyAutoGUI",
+					textColor: "white",
+					bgColor: "black",
+				},
+			]}
+			client:visible
+		/>
+		<Project
+			position="right"
+			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.`}
+			tags={[
+				{
+					text: "win32API",
+					bgColor: "var(--color-win32api)",
+					textColor: "white",
+				},
+				{
+					text: "Python",
+					bgColor: "var(--color-python)",
+					textColor: "white",
+				},
+			]}
+		/>
+	</div>
+</div>
diff --git a/src/components/projects/MoreProjects.svelte b/src/components/projects/MoreProjects.svelte
deleted file mode 100644
index 9722a78..0000000
--- a/src/components/projects/MoreProjects.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-    import VideoProject from "./VideoProject.svelte";
-</script>
-
-<div class="flex h-fit flex-col items-center pt-20 [perspective:1000px]">
-    <div class="w-full max-w-[1440px]">
-        <VideoProject
-            image_src="/images/projects/chess-opencv.webp"
-            image_alt="computer vision chess bot"
-            position="left"
-            video_src="/videos/chess_opencv_demo.webm"
-            title="Computer Vision Chess Bot"
-            description={`
-                A script that plays against opponents on lichess. Uses
-                OpenCV to detect the board and pieces, and the Stockfish
-                chess engine to determine the best moves. Then uses
-                PyAutoGUI to play the moves on the browser.
-            `}
-            tags={[
-                {
-                    text: "Python",
-                    textColor: "white",
-                    bgColor: "var(--color-python)",
-                },
-                {
-                    text: "OpenCV",
-                    textColor: "white",
-                    bgColor: "var(--color-opencv)",
-                },
-                {
-                    text: "PyAutoGUI",
-                    textColor: "white",
-                    bgColor: "black",
-                },
-            ]}
-        ></VideoProject>
-        <VideoProject
-            image_src="/images/projects/aim-lab.webp"
-            image_alt="Computer Vision AimLab Bot"
-            position="right"
-            video_src="/videos/aim_lab_demo.webm"
-            title="Computer Vision AimLab Bot"
-            description={`
-                A script that plays AimLab, a game that helps improve your aim in FPS games. Uses OpenCV to detect the targets and win32API to move the mouse and click.
-            `}
-            tags={[
-                {
-                    text: "Python",
-                    textColor: "white",
-                    bgColor: "var(--color-python)",
-                },
-                {
-                    text: "OpenCV",
-                    textColor: "white",
-                    bgColor: "var(--color-opencv)",
-                },
-                {
-                    text: "win32API",
-                    textColor: "white",
-                    bgColor: "var(--color-win32api)",
-                },
-            ]}
-        ></VideoProject>
-    </div>
-</div>
diff --git a/src/components/projects/ProjectsComponent.astro b/src/components/projects/ProjectsComponent.astro
index 7031bff..f04e8f0 100644
--- a/src/components/projects/ProjectsComponent.astro
+++ b/src/components/projects/ProjectsComponent.astro
@@ -2,7 +2,7 @@
 import TaskWidget from "./TaskWidget.svelte";
 import CoworkingGuide from "../images/projects/coworking-guide.webp";
 import Wnrs from "../images/projects/wnrs.webp";
-import TwitchPlays from "../images/projects/twitchplays.webp";
+import VideoProject from "./VideoProject.svelte";
 import Project from "./Project.astro";
 ---
 
@@ -37,6 +37,58 @@ import Project from "./Project.astro";
 				},
 			]}
 		/>
+
+		<VideoProject
+			client:visible
+			image_src="/images/projects/aim-lab.webp"
+			image_alt="Computer Vision AimLab Bot"
+			position="right"
+			video_src="/videos/aim_lab_demo.webm"
+			title="Computer Vision AimLab Bot"
+			description={`
+                A script that plays AimLab, a game that helps improve your aim in FPS games. Uses OpenCV to detect the targets and win32API to move the mouse and click.
+            `}
+			tags={[
+				{
+					text: "Python",
+					textColor: "white",
+					bgColor: "var(--color-python)",
+				},
+				{
+					text: "OpenCV",
+					textColor: "white",
+					bgColor: "var(--color-opencv)",
+				},
+				{
+					text: "win32API",
+					textColor: "white",
+					bgColor: "var(--color-win32api)",
+				},
+			]}
+		/>
+
+		<Project
+			position="left"
+			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="This is a digital adaptation of the popular card game designed to foster meaningful connections through engaging questions and prompts. Made into a PWA for offline usage on mobile!"
+			tags={[
+				{
+					text: "React",
+					bgColor: "var(--color-react)",
+					textColor: "black",
+				},
+				{
+					text: "TypeScript",
+					bgColor: "var(--color-typescript)",
+					textColor: "white",
+				},
+			]}
+		/>
+
 		<Project
 			position="right"
 			href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
@@ -86,51 +138,6 @@ import Project from "./Project.astro";
 				client:visible
 			/>
 		</Project>
-
-		<Project
-			position="left"
-			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="This is a digital adaptation of the popular card game designed to foster meaningful connections through engaging questions and prompts. Made into a PWA for offline usage on mobile!"
-			tags={[
-				{
-					text: "React",
-					bgColor: "var(--color-react)",
-					textColor: "black",
-				},
-				{
-					text: "TypeScript",
-					bgColor: "var(--color-typescript)",
-					textColor: "white",
-				},
-			]}
-		/>
-		<Project
-			position="right"
-			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.`}
-			tags={[
-				{
-					text: "win32API",
-					bgColor: "var(--color-win32api)",
-					textColor: "white",
-				},
-				{
-					text: "Python",
-					bgColor: "var(--color-python)",
-					textColor: "white",
-				},
-			]}
-		/>
 	</div>
 </div>
 
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 4187f42..d0a74cc 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,7 +1,7 @@
 ---
 import PageLayout from "@/layouts/PageLayout.astro";
 import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
-import MoreProjects from "../components/projects/MoreProjects.svelte";
+import MoreProjects from "../components/projects/MoreProjects.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---
 
@@ -13,7 +13,7 @@ import Footer from "../components/global/FooterComponent.astro";
 	<div id="projects" class="pt-20">
 		<h1 class="mt-10 text-center text-5xl">Projects</h1>
 		<!-- other projects -->
-		<MoreProjects client:load />
+		<MoreProjects />
 	</div>
 	<div class="pb-20">
 		<ProjectsComponent />