replaced "HexGuess" with WNRS

src/components/sections/ProjectsComponent.astro

@@ -2,7 +2,7 @@
 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 Wnrs from "./images/projects/wnrs.webp";
 import TwitchPlays from "./images/projects/twitchplays.webp";
 ---
 
@@ -143,28 +143,30 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
 				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2"
 			>
 				<Image
-                    src={HexGuess}
+					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`
+                    border-2 border-solid border-white rounded-xl
+                    aspect-video`
 					width="700"
 				/>
 				<Image
-                    src={HexGuess}
+					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-1
-                    border-2 border-solid border-white rounded-xl`
+                    border-2 border-solid border-white rounded-xl
+                    aspect-video`
 				/>
 				<div
 					class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]"
 				>
 					<a
-                        href="https://hex-guess.vercel.app/"
+						href="https://liyunze-coding.github.io/wnrs/"
 						target="_blank"
 						class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block"
 						>Visit site</a
@@ -182,32 +184,30 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
 			<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">HexGuess</h2>
+				<h2 class="mb-5 text-center text-3xl font-bold">
+					We're Not Really Strangers
+				</h2>
 				<p
 					class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
 				>
-                    Decode colours in 5 attempts. Guess the hexadecimal code and
-                    receive instant feedback! Built with Next.JS, TailwindCSS
-                    and TypeScript.
+					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="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
+						class="my-1 mr-1 w-fit rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300"
 					>
-                        NextJS
+						React
 					</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-[#07B6D4] px-3 py-1 text-black transition-colors duration-300"
-                    >
-                        TailwindCSS
-                    </div>
 				</div>
 			</div>
 		</div>