diff --git a/src/components/elements/Socials.svelte b/src/components/elements/Socials.svelte
index fbda608..d2e9fa0 100644
--- a/src/components/elements/Socials.svelte
+++ b/src/components/elements/Socials.svelte
@@ -1,67 +1,67 @@
 <a href="https://github.com/liyunze-coding" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
-    >
-        <img
-            src="/images/socials/github.svg"
-            alt="github"
-            class="aspect-square max-w-full"
-            width="20"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
+	>
+		<img
+			src="/images/socials/github.svg"
+			alt="github"
+			class="aspect-square max-w-full"
+			width="20"
+		/>
+	</div>
 </a>
 <a href="https://codepen.io/rythondev" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
-    >
-        <img
-            src="/images/socials/codepen.svg"
-            alt="codepen"
-            class="w-5 h-5 aspect-square"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
+	>
+		<img
+			src="/images/socials/codepen.svg"
+			alt="codepen"
+			class="w-5 h-5 aspect-square"
+		/>
+	</div>
 </a>
 <a href="https://youtube.com/@RythonDev" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#00ffff]"
-    >
-        <img
-            src="/images/socials/youtube.svg"
-            alt="youtube"
-            class="w-5 h-5 aspect-square"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#00ffff]"
+	>
+		<img
+			src="/images/socials/youtube.svg"
+			alt="youtube"
+			class="w-5 h-5 aspect-square"
+		/>
+	</div>
 </a>
 <a href="https://twitch.tv/RythonDev" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#6eb900]"
-    >
-        <img
-            src="/images/socials/twitch.svg"
-            alt="twitch"
-            class="w-4 h-4 aspect-square"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#6eb900]"
+	>
+		<img
+			src="/images/socials/twitch.svg"
+			alt="twitch"
+			class="w-4 h-4 aspect-square"
+		/>
+	</div>
 </a>
 <a href="https://instagram.com/RythonDev" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#1bbfa0]"
-    >
-        <img
-            src="/images/socials/instagram.svg"
-            alt="twitch"
-            class="w-4 h-4 aspect-square"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#1bbfa0]"
+	>
+		<img
+			src="/images/socials/instagram.svg"
+			alt="twitch"
+			class="w-4 h-4 aspect-square"
+		/>
+	</div>
 </a>
 <a href="https://ko-fi.com/rython" target="_blank">
-    <div
-        class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
-    >
-        <img
-            src="/images/socials/kofi.webp"
-            alt="twitch"
-            class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
-        />
-    </div>
+	<div
+		class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
+	>
+		<img
+			src="/images/socials/kofi.webp"
+			alt="twitch"
+			class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
+		/>
+	</div>
 </a>
diff --git a/src/components/sections/ProjectsComponent.astro b/src/components/sections/ProjectsComponent.astro
new file mode 100644
index 0000000..67203c4
--- /dev/null
+++ b/src/components/sections/ProjectsComponent.astro
@@ -0,0 +1,370 @@
+---
+import TaskWidget from "./TaskWidget.svelte";
+import { Image } from "astro:assets";
+import CoworkingGuide from "./images/projects/coworking-guide.webp";
+import HexGuess from "./images/projects/hexguess.webp";
+import TwitchPlays from "./images/projects/twitchplays.webp";
+---
+
+<div
+	id="projects"
+	class="h-fit [perspective:1000px] flex flex-col items-center"
+>
+	<div class="w-full max-w-[1440px]">
+		<div
+			class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
+		>
+			<div
+				class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+			>
+				<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-1
+                    border-2 border-solid border-white rounded-xl`
+				/>
+				<div
+					class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
+                    aspect-video
+                    rounded-xl
+                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                    border-2 border-solid border-white
+                    max-w-full"
+				>
+					<a
+						href="https://coworking-guide.vercel.app/"
+						target="_blank"
+						class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        transition-colors duration-300
+                        hidden lg:block
+                        hover:bg-white hover:text-blue-500"
+						>Visit site</a
+					>
+				</div>
+			</div>
+			<div class="lg:hidden flex justify-center items-center mb-10">
+				<a
+					href="https://coworking-guide.vercel.app/"
+					target="_blank"
+					class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+					>View repository</a
+				>
+			</div>
+			<div
+				class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
+			>
+				<h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
+					Coworking Guide
+				</h2>
+				<p
+					class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
+				>
+					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="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
+				>
+					<div
+						class="w-fit bg-white text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						Astro
+					</div>
+					<div
+						class="w-fit bg-[#3178C6] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						TypeScript
+					</div>
+					<div
+						class="w-fit bg-black text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						Markdown
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
+		>
+			<div
+				class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
+			>
+				<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
+					Chat-Task-Tic Widget
+				</h2>
+				<p
+					class="text-xl lg:text-right text-center lg:max-w-none max-w-lg text-balance"
+				>
+					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!
+				</p>
+				<div
+					class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
+				>
+					<div
+						class="w-fit bg-[#E34F26] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						HTML
+					</div>
+					<div
+						class="w-fit bg-blue-700 text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						CSS
+					</div>
+					<div
+						class="w-fit bg-yellow-400 text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						Javascript
+					</div>
+				</div>
+			</div>
+			<div class="lg:hidden flex justify-center items-center mb-10">
+				<a
+					href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
+					target="_blank"
+					class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+					>View repository</a
+				>
+			</div>
+			<TaskWidget client:load />
+		</div>
+
+		<div
+			class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
+		>
+			<div
+				class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+			>
+				<Image
+					src={HexGuess}
+					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`
+					width="700"
+				/>
+				<Image
+					src={HexGuess}
+					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-1
+                    border-2 border-solid border-white rounded-xl`
+				/>
+				<div
+					class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
+                    aspect-video
+                    rounded-xl
+                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                    border-2 border-solid border-white
+                    max-w-full"
+				>
+					<a
+						href="https://hex-guess.vercel.app/"
+						target="_blank"
+						class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        hidden lg:block
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+						>Visit site</a
+					>
+				</div>
+			</div>
+			<div class="lg:hidden flex justify-center items-center mb-10">
+				<a
+					href="https://hex-guess.vercel.app/"
+					target="_blank"
+					class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+					>View repository</a
+				>
+			</div>
+			<div
+				class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
+			>
+				<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
+				<p
+					class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
+				>
+					Decode colours in 5 attempts. Guess the hexadecimal code and
+					receive instant feedback! Built with Next.JS, TailwindCSS
+					and TypeScript.
+				</p>
+				<div
+					class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
+				>
+					<div
+						class="w-fit bg-black text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						NextJS
+					</div>
+					<div
+						class="w-fit bg-[#3178C6] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						Typescript
+					</div>
+					<div
+						class="w-fit bg-[#07B6D4] text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						TailwindCSS
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
+		>
+			<div
+				class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
+			>
+				<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
+					Twitch Plays X
+				</h2>
+				<p
+					class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
+				>
+					Allow Twitch chatters 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="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
+				>
+					<div
+						class="w-fit bg-[#3776AB] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						Python
+					</div>
+					<div
+						class="w-fit bg-[#0078D4] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+					>
+						win32API
+					</div>
+				</div>
+			</div>
+			<div class="lg:hidden flex justify-center items-center mb-10">
+				<a
+					href="https://github.com/liyunze-coding/TwitchPlaysX"
+					target="_blank"
+					class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+					>View repository</a
+				>
+			</div>
+			<div
+				class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+			>
+				<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-1
+                    border-2 border-solid border-white rounded-xl`
+				/>
+				<div
+					class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
+                    aspect-video
+                    rounded-xl
+                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                    border-2 border-solid border-white
+                    max-w-full"
+				>
+					<a
+						href="https://github.com/liyunze-coding/TwitchPlaysX"
+						target="_blank"
+						class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        hidden lg:block
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500"
+						>View repository</a
+					>
+				</div>
+			</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/sections/ProjectsComponent.svelte b/src/components/sections/ProjectsComponent.svelte
deleted file mode 100644
index bf73b84..0000000
--- a/src/components/sections/ProjectsComponent.svelte
+++ /dev/null
@@ -1,727 +0,0 @@
-<script lang="ts">
-    const streamers = [
-        {
-            streamer: "4l1c3_0",
-            task: "mental breakdance",
-        },
-        {
-            streamer: "Acrone",
-            task: "play Valorant with twin brother",
-        },
-        {
-            streamer: "Ama_xinita",
-            task: "estudiar leyes",
-        },
-        {
-            streamer: "andolivconc",
-            task: "estudar Direito",
-        },
-        {
-            streamer: "arcanexviii",
-            task: "babysit",
-        },
-        {
-            streamer: "AuspexOneGaming",
-            task: "teach computer science",
-        },
-        {
-            streamer: "BintonDev",
-            task: "rubber duck debugging",
-        },
-        {
-            streamer: "brisim_claimhte",
-            task: "rewrite history thesis",
-        },
-        {
-            streamer: "brunixwho",
-            task: "Ensinar ingl\u00eas",
-        },
-        {
-            streamer: "Bubxmicn",
-            task: "drive a truck",
-        },
-        {
-            streamer: "charliosaurus",
-            task: "release another song on YouTube",
-        },
-        {
-            streamer: "cheshirepope",
-            task: "write 1000 words",
-        },
-        {
-            streamer: "chocomi_tv",
-            task: "improve English",
-        },
-        {
-            streamer: "Clarishy",
-            task: "be sweaty",
-        },
-        {
-            streamer: "cloudydayzzz",
-            task: "interpret ASL",
-        },
-        {
-            streamer: "creativepepper",
-            task: "develop mobile app",
-        },
-        {
-            streamer: "DarthTorLin",
-            task: "watch Star Wars",
-        },
-        {
-            streamer: "DATJI_",
-            task: "IRL KBBQ stream",
-        },
-        {
-            streamer: "EarliestTea",
-            task: "chat about MBTI",
-        },
-        {
-            streamer: "Ellyskey",
-            task: "sell YOUthversity merch",
-        },
-        {
-            streamer: "Emerald_Glowo",
-            task: "drawing stream",
-        },
-        {
-            streamer: "emzkx",
-            task: "study public health, psychology and exercise science",
-        },
-        {
-            streamer: "eri__berry",
-            task: "play Palia",
-        },
-        {
-            streamer: "HarryIsTrying",
-            task: "be a strategy consultant",
-        },
-        {
-            streamer: "Hawokai",
-            task: "be a shark",
-        },
-        {
-            streamer: "itsbrandonut",
-            task: "stream music then play valorant",
-        },
-        {
-            streamer: "j3dg",
-            task: "spin class",
-        },
-        {
-            streamer: "jerrrs",
-            task: "play Animal Crossing",
-        },
-        {
-            streamer: "lala_xitlali",
-            task: "design fashionable clothes",
-        },
-        {
-            streamer: "long1nteger",
-            task: "AI project",
-        },
-        {
-            streamer: "lyricalclove",
-            task: "teach English",
-        },
-        {
-            streamer: "msmushh",
-            task: "vibe on stream",
-        },
-        {
-            streamer: "nachoburrit0",
-            task: "update spreadsheets",
-        },
-        {
-            streamer: "nick_kendall",
-            task: "Instagram post",
-        },
-        {
-            streamer: "nihn_jnesyo",
-            task: "Release new Lo-fi music",
-        },
-        {
-            streamer: "novellaHT",
-            task: "play Don't Starve Together",
-        },
-        {
-            streamer: "pcc_lanezzz",
-            task: "be a supermodel",
-        },
-        {
-            streamer: "PineappleEffect",
-            task: "edit video",
-        },
-        {
-            streamer: "pinsaregood",
-            task: "go on another hiatus",
-        },
-        {
-            streamer: "procrastilate",
-            task: "chaos",
-        },
-        {
-            streamer: "samkitkat",
-            task: "learn React",
-        },
-        {
-            streamer: "studypaws",
-            task: "be a vet",
-        },
-        {
-            streamer: "sunfflawer",
-            task: "be a sunflower",
-        },
-        {
-            streamer: "Supernaturalwriter",
-            task: "hit the gym",
-        },
-        {
-            streamer: "TheCake404",
-            task: "wear a demon costume",
-        },
-        {
-            streamer: "ThePainfulPhD",
-            task: "study about pain",
-        },
-        {
-            streamer: "theyolotato",
-            task: "be a potato",
-        },
-        {
-            streamer: "valecey",
-            task: "graduate from university",
-        },
-        {
-            streamer: "wafflesdot025",
-            task: "perform in another musical",
-        },
-        {
-            streamer: "wasmishtaken_",
-            task: "simp for levi ackerman",
-        },
-        {
-            streamer: "xeno_hiraeth",
-            task: "anki flashcards",
-        },
-    ];
-
-    // let primaryDivHeight: string;
-
-    // onMount(() => {
-    //     const animatedElement = document.querySelector(".primary");
-    //     if (animatedElement) {
-    //         primaryDivHeight = `${animatedElement.clientHeight}px`;
-    //     }
-    //     console.log(streamers.length);
-    //     console.log(primaryDivHeight);
-    // });
-</script>
-
-<div
-    id="projects"
-    class="h-fit [perspective:1000px] flex flex-col items-center"
->
-    <div class="w-full max-w-[1440px]">
-        <div
-            class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
-        >
-            <div
-                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
-            >
-                <img
-                    src="/images/projects/coworking-guide.webp"
-                    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"
-                />
-                <img
-                    src="/images/projects/coworking-guide.webp"
-                    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-1
-                    border-2 border-solid border-white rounded-xl"
-                />
-                <div
-                    class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
-                    aspect-video
-                    rounded-xl
-                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                    border-2 border-solid border-white
-                    max-w-full"
-                >
-                    <a
-                        href="https://coworking-guide.vercel.app/"
-                        target="_blank"
-                        class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        transition-colors duration-300
-                        hidden lg:block
-                        hover:bg-white hover:text-blue-500
-                        ">Visit site</a
-                    >
-                </div>
-            </div>
-            <div class="lg:hidden flex justify-center items-center mb-10">
-                <a
-                    href="https://coworking-guide.vercel.app/"
-                    target="_blank"
-                    class="
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                >
-            </div>
-            <div
-                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
-            >
-                <h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
-                    Coworking Guide
-                </h2>
-                <p
-                    class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
-                >
-                    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="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
-                >
-                    <div
-                        class="w-fit bg-white text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        Astro
-                    </div>
-                    <div
-                        class="w-fit bg-[#3178C6] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        TypeScript
-                    </div>
-                    <div
-                        class="w-fit bg-black text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        Markdown
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div
-            class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
-        >
-            <div
-                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
-            >
-                <h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
-                    Chat-Task-Tic Widget
-                </h2>
-                <p
-                    class="text-xl lg:text-right text-center lg:max-w-none max-w-lg text-balance"
-                >
-                    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!
-                </p>
-                <div
-                    class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
-                >
-                    <div
-                        class="w-fit bg-[#E34F26] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        HTML
-                    </div>
-                    <div
-                        class="w-fit bg-blue-700 text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        CSS
-                    </div>
-                    <div
-                        class="w-fit bg-yellow-400 text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        Javascript
-                    </div>
-                </div>
-            </div>
-            <div class="lg:hidden flex justify-center items-center mb-10">
-                <a
-                    href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
-                    target="_blank"
-                    class="
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                >
-            </div>
-            <div
-                class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
-            >
-                <!-- task bot -->
-                <div
-                    class="task-widget absolute flex flex-col opacity-30
-                            w-full h-[99%]
-                            top-1/2 left-1/2 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
-                >
-                    <div
-                        class="w-full bg-black border-solid border-2 border-white
-                            rounded-lg
-                            px-5 py-2
-                            text-xl text-white
-                            flex flex-row justify-between items-center
-                            font-['Fredoka',_sans-serif]"
-                    >
-                        <span>Hover here!</span>
-                        <span>0/100+</span>
-                    </div>
-                    <div
-                        class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
-                    >
-                        <div
-                            class="scroll-element primary px-1 absolute w-full"
-                        >
-                            {#each streamers as { streamer, task }}
-                                <div
-                                    class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
-                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
-                                >
-                                    O {streamer} : {task}
-                                </div>
-                            {/each}
-                        </div>
-                        <div
-                            class="scroll-element secondary px-1 absolute w-full"
-                        >
-                            {#each streamers as { streamer, task }}
-                                <div
-                                    class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
-                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
-                                >
-                                    O {streamer} : {task}
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="task-widget absolute flex flex-col
-                            w-full h-[99%]
-                            top-1/2 left-1/2 [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
-                >
-                    <div
-                        class="w-full bg-black border-solid border-2 border-white
-                            rounded-lg
-                            px-5 py-2
-                            text-xl text-white
-                            flex flex-row justify-between items-center
-                            font-['Fredoka',_sans-serif]"
-                    >
-                        <span>Hover here!</span>
-                        <span>0/100+</span>
-                    </div>
-                    <div
-                        class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
-                    >
-                        <div
-                            class="scroll-element primary px-1 absolute w-full"
-                        >
-                            {#each streamers as { streamer, task }}
-                                <div
-                                    class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
-                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
-                                >
-                                    O {streamer} : {task}
-                                </div>
-                            {/each}
-                        </div>
-                        <div
-                            class="scroll-element secondary px-1 absolute w-full"
-                        >
-                            {#each streamers as { streamer, task }}
-                                <div
-                                    class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
-                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
-                                >
-                                    O {streamer} : {task}
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-
-                <div
-                    class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
-                    rounded-md
-                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                    border-2 border-solid border-white
-                    overflow-hidden"
-                >
-                    <a
-                        href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
-                        target="_blank"
-                        class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        hidden lg:block
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                    >
-                </div>
-            </div>
-        </div>
-
-        <div
-            class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
-        >
-            <div
-                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
-            >
-                <img
-                    src="/images/projects/hexguess.webp"
-                    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"
-                    width="700"
-                />
-                <img
-                    src="/images/projects/hexguess.webp"
-                    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-1
-                    border-2 border-solid border-white rounded-xl"
-                />
-                <div
-                    class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
-                    aspect-video
-                    rounded-xl
-                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                    border-2 border-solid border-white
-                    max-w-full"
-                >
-                    <a
-                        href="https://hex-guess.vercel.app/"
-                        target="_blank"
-                        class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        hidden lg:block
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">Visit site</a
-                    >
-                </div>
-            </div>
-            <div class="lg:hidden flex justify-center items-center mb-10">
-                <a
-                    href="https://hex-guess.vercel.app/"
-                    target="_blank"
-                    class="
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                >
-            </div>
-            <div
-                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
-            >
-                <h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
-                <p
-                    class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
-                >
-                    Decode colours in 5 attempts. Guess the hexadecimal code and
-                    receive instant feedback! Built with Next.JS, TailwindCSS
-                    and TypeScript.
-                </p>
-                <div
-                    class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
-                >
-                    <div
-                        class="w-fit bg-black text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        NextJS
-                    </div>
-                    <div
-                        class="w-fit bg-[#3178C6] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        Typescript
-                    </div>
-                    <div
-                        class="w-fit bg-[#07B6D4] text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        TailwindCSS
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div
-            class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
-        >
-            <div
-                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
-            >
-                <h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
-                    Twitch Plays X
-                </h2>
-                <p
-                    class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
-                >
-                    Allow Twitch chatters 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="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
-                >
-                    <div
-                        class="w-fit bg-[#3776AB] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        Python
-                    </div>
-                    <div
-                        class="w-fit bg-[#0078D4] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-                    >
-                        win32API
-                    </div>
-                </div>
-            </div>
-            <div class="lg:hidden flex justify-center items-center mb-10">
-                <a
-                    href="https://github.com/liyunze-coding/TwitchPlaysX"
-                    target="_blank"
-                    class="
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                >
-            </div>
-            <div
-                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
-            >
-                <img
-                    src="/images/projects/twitchplays.webp"
-                    alt="Hex Guess"
-                    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"
-                />
-                <img
-                    src="/images/projects/twitchplays.webp"
-                    alt="Hex Guess"
-                    width="700"
-                    class="absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
-                    border-2 border-solid border-white rounded-xl"
-                />
-                <div
-                    class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
-                    aspect-video
-                    rounded-xl
-                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                    border-2 border-solid border-white
-                    max-w-full"
-                >
-                    <a
-                        href="https://github.com/liyunze-coding/TwitchPlaysX"
-                        target="_blank"
-                        class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
-                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold
-                        hidden lg:block
-                        transition-colors duration-300
-                        hover:bg-white hover:text-blue-500
-                        ">View repository</a
-                    >
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<style>
-    .image-container img,
-    .image-container .task-widget {
-        transition: transform 0.5s ease-in-out;
-    }
-    @media (min-width: 1025px) {
-        .image-container:hover > img,
-        .image-container:hover > .task-widget {
-            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;
-        }
-    }
-
-    .primary {
-        animation: primary 30s linear infinite;
-    }
-
-    .secondary {
-        animation: secondary 30s linear infinite;
-    }
-
-    @keyframes primary {
-        from {
-            transform: translateY(0);
-        }
-        to {
-            transform: translateY(-2175px);
-        }
-    }
-
-    @keyframes secondary {
-        from {
-            transform: translateY(2175px);
-        }
-        to {
-            transform: translateY(0);
-        }
-    }
-</style>
diff --git a/src/components/sections/TaskWidget.svelte b/src/components/sections/TaskWidget.svelte
new file mode 100644
index 0000000..6fcc39c
--- /dev/null
+++ b/src/components/sections/TaskWidget.svelte
@@ -0,0 +1,266 @@
+<script lang="ts">
+    const streamers = [
+        {
+            streamer: "4l1c3_0",
+            task: "mental breakdance",
+        },
+        {
+            streamer: "arcanexviii",
+            task: "babysit",
+        },
+        {
+            streamer: "brisim_claimhte",
+            task: "rewrite history thesis",
+        },
+        {
+            streamer: "Bubxmicn",
+            task: "drive a truck",
+        },
+        {
+            streamer: "charliosaurus",
+            task: "praise the lord",
+        },
+        {
+            streamer: "clari_miu",
+            task: "be sweaty",
+        },
+        {
+            streamer: "cloudydayzzz",
+            task: "stay up at night",
+        },
+        {
+            streamer: "creativepepper",
+            task: "develop mobile app",
+        },
+        {
+            streamer: "DATJI_",
+            task: "IRL KBBQ stream",
+        },
+        {
+            streamer: "EarliestTea",
+            task: "chat about MBTI",
+        },
+        {
+            streamer: "Ellyskey",
+            task: "sell YOUthversity merch",
+        },
+        {
+            streamer: "HarryIsTrying",
+            task: "be a strategy consultant",
+        },
+        {
+            streamer: "itsbrandonut",
+            task: "cowork then league",
+        },
+        {
+            streamer: "lala_xitlali",
+            task: "design fashionable clothes",
+        },
+        {
+            streamer: "lyricalclove",
+            task: "teach English",
+        },
+        {
+            streamer: "nachoburrit0",
+            task: "update spreadsheets",
+        },
+        {
+            streamer: "nihn_",
+            task: "Release new Lo-fi music",
+        },
+        {
+            streamer: "pcc_lanezzz",
+            task: "be a supermodel",
+        },
+        {
+            streamer: "PineappleEffect",
+            task: "edit video",
+        },
+        {
+            streamer: "pinsaregood",
+            task: "go on another hiatus",
+        },
+        {
+            streamer: "lilylikesrocks",
+            task: "learn about rocks",
+        },
+        {
+            streamer: "studypaws",
+            task: "be a vet",
+        },
+        {
+            streamer: "sunfflawer",
+            task: "be a sunflower",
+        },
+        {
+            streamer: "Supernaturalwriter",
+            task: "hit the gym",
+        },
+        {
+            streamer: "ThePainfulPhD",
+            task: "study about pain",
+        },
+        {
+            streamer: "theyolotato",
+            task: "be a potato",
+        },
+        {
+            streamer: "valecey",
+            task: "graduate from university",
+        },
+        {
+            streamer: "xeno_hiraeth",
+            task: "anki flashcards",
+        },
+    ];
+</script>
+
+<div
+    class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
+>
+    <!-- task bot -->
+    <div
+        class="task-widget absolute flex flex-col opacity-30
+                            w-full h-[99%]
+                            top-1/2 left-1/2 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
+    >
+        <div
+            class="w-full bg-black border-solid border-2 border-white
+                            rounded-lg
+                            px-5 py-2
+                            text-xl text-white
+                            flex flex-row justify-between items-center
+                            font-['Fredoka',_sans-serif]"
+        >
+            <span>Hover here!</span>
+            <span>0/100+</span>
+        </div>
+        <div
+            class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
+        >
+            <div class="scroll-element primary px-1 absolute w-full">
+                {#each streamers as { streamer, task }}
+                    <div
+                        class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
+                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
+                    >
+                        O {streamer} : {task}
+                    </div>
+                {/each}
+            </div>
+            <div class="scroll-element secondary px-1 absolute w-full">
+                {#each streamers as { streamer, task }}
+                    <div
+                        class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
+                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
+                    >
+                        O {streamer} : {task}
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+    <div
+        class="task-widget absolute flex flex-col
+                            w-full h-[99%]
+                            top-1/2 left-1/2 [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
+    >
+        <div
+            class="w-full bg-black border-solid border-2 border-white
+                            rounded-lg
+                            px-5 py-2
+                            text-xl text-white
+                            flex flex-row justify-between items-center
+                            font-['Fredoka',_sans-serif]"
+        >
+            <span>Hover here!</span>
+            <span>0/100+</span>
+        </div>
+        <div
+            class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
+        >
+            <div class="scroll-element primary px-1 absolute w-full">
+                {#each streamers as { streamer, task }}
+                    <div
+                        class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
+                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
+                    >
+                        O {streamer} : {task}
+                    </div>
+                {/each}
+            </div>
+            <div class="scroll-element secondary px-1 absolute w-full">
+                {#each streamers as { streamer, task }}
+                    <div
+                        class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
+                                    whitespace-nowrap overflow-hidden overflow-ellipsis"
+                    >
+                        O {streamer} : {task}
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+    <div
+        class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
+                    rounded-md
+                    [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                    border-2 border-solid border-white
+                    overflow-hidden"
+    >
+        <a
+            href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
+            target="_blank"
+            class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
+                        px-5 py-3 bg-blue-500 rounded-xl opacity-1
+                        font-bold
+                        hidden lg:block
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500">View repository</a
+        >
+    </div>
+</div>
+
+<style>
+    .image-container .task-widget {
+        transition: transform 0.5s ease-in-out;
+    }
+    @media (min-width: 1025px) {
+        .image-container:hover > .task-widget {
+            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;
+        }
+    }
+
+    .primary {
+        animation: primary 20s linear infinite;
+    }
+
+    .secondary {
+        animation: secondary 20s linear infinite;
+    }
+
+    @keyframes primary {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(-1175px);
+        }
+    }
+
+    @keyframes secondary {
+        from {
+            transform: translateY(1175px);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+</style>
diff --git a/public/images/projects/ProductiVue.webp b/src/components/sections/images/projects/ProductiVue.webp
similarity index 100%
rename from public/images/projects/ProductiVue.webp
rename to src/components/sections/images/projects/ProductiVue.webp
diff --git a/public/images/projects/coworking-guide.webp b/src/components/sections/images/projects/coworking-guide.webp
similarity index 100%
rename from public/images/projects/coworking-guide.webp
rename to src/components/sections/images/projects/coworking-guide.webp
diff --git a/public/images/projects/hexguess.webp b/src/components/sections/images/projects/hexguess.webp
similarity index 100%
rename from public/images/projects/hexguess.webp
rename to src/components/sections/images/projects/hexguess.webp
diff --git a/public/images/projects/twitchplays.webp b/src/components/sections/images/projects/twitchplays.webp
similarity index 100%
rename from public/images/projects/twitchplays.webp
rename to src/components/sections/images/projects/twitchplays.webp
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0d03bc3..5f7607b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,7 @@ import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/elements/NetworkLine.astro";
 import WhatIDo from "../components/sections/WhatIDoComponent.astro";
 import Intro from "../components/sections/IntroComponent.svelte";
-import Projects from "../components/sections/ProjectsComponent.svelte";
+import Projects from "../components/sections/ProjectsComponent.astro";
 import Education from "../components/sections/ExperienceComponent.astro";
 import Skills from "../components/sections/SkillsComponent.astro";
 import Contact from "../components/sections/ContactComponent.svelte";
@@ -32,7 +32,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 	<div id="projects">
 		<div class="pt-20">
 			<h1 class="text-5xl text-center mb-10">Projects</h1>
-			<Projects client:visible />
+			<Projects />
 		</div>
 	</div>
 	<div id="skills">
@@ -42,7 +42,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 		<Education />
 	</div>
 	<div id="contact">
-		<Contact client:only />
+		<Contact />
 	</div>
 	<Footer />
 </Layout>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index f16ac6b..1889389 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,7 +1,7 @@
 ---
 import NavBar from "../components/sections/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
-import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
+import ProjectsComponent from "../components/sections/ProjectsComponent.astro";
 import MoreProjects from "../components/sections/MoreProjects.svelte";
 import Footer from "../components/sections/FooterComponent.astro";
 ---
@@ -14,7 +14,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 		<MoreProjects client:load />
 	</div>
 	<div class="pb-20">
-		<ProjectsComponent client:load />
+		<ProjectsComponent />
 	</div>
 	<Footer />
 </Layout>