added projects

src/components/sections/ProjectsComponent.svelte

@@ -222,11 +222,9 @@
 
 <div
     id="projects"
-    class="h-fit pt-20 [perspective:1000px] flex flex-col items-center"
+    class="h-fit [perspective:1000px] flex flex-col items-center"
 >
-    <h1 class="text-5xl text-center">Projects</h1>
+    <div class="w-full max-w-[1440px]">
-
-    <div class="mt-10 w-full max-w-[1440px]">
         <div
             class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
         >

src/pages/contact.astro

@@ -10,7 +10,7 @@ import Card from "../components/elements/Card.astro";
 	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
 >
 	<NavBar />
-	<div id="what-i-do" class="mt-10 pt-20">
+	<div id="contact-component" class="mt-10 pt-20">
 		<h1 class="text-center text-5xl">Contact</h1>
 		<div class="mt-10 flex justify-center items-center">
 			<div class="w-[90%] md:w-[600px]">

src/pages/index.astro

@@ -29,7 +29,10 @@ import Card from "../components/elements/Card.astro";
 		<WhatIDo />
 	</div>
 	<div id="projects">
-		<Projects client:visible />
+		<div class="pt-20">
+			<h1 class="text-5xl text-center mb-10">Projects</h1>
+			<Projects client:visible />
+		</div>
 	</div>
 	<div id="skills">
 		<Skills />

src/pages/projects.astro

@@ -6,7 +6,202 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
 
 <Layout title="Projects" description="View what projects RythonDev has made">
 	<NavBar />
-	<div id="what-i-do" class="mt-10 pb-20">
+	<div id="projects" class="pt-20">
-		<ProjectsComponent />
+		<h1 class="text-5xl text-center mt-10">Projects</h1>
+		<!-- other projects -->
+		<div
+			class="h-fit pt-20 [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"
+					>
+						<video
+							src="/videos/chess_opencv_demo.mov"
+							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"></video>
+						<video
+							src="/videos/chess_opencv_demo.mov"
+							width="700"
+							class="playable 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"
+						></video>
+					</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"
+						>
+							Computer Vision Chess bot
+						</h2>
+						<p
+							class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
+						>
+							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.
+						</p>
+						<div class="w-full flex flex-row flex-wrap 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-[#3178C6] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+							>
+								OpenCV
+							</div>
+							<div
+								class="w-fit bg-black text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+							>
+								PyAutoGUI
+							</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"
+						>
+							Computer Vision AimLab Bot
+						</h2>
+						<p
+							class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
+						>
+							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.
+						</p>
+						<div
+							class="w-full flex flex-row flex-wrap 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="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"
+					>
+						<video
+							src="/videos/aim_lab_demo.mov"
+							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"></video>
+						<video
+							src="/videos/aim_lab_demo.mov"
+							width="700"
+							class="playable 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"
+						></video>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
+
+	<ProjectsComponent />
 </Layout>
+
+<style>
+	.image-container img,
+	.image-container video,
+	.image-container .task-widget {
+		transition: transform 0.5s ease-in-out;
+	}
+	@media (min-width: 1025px) {
+		.image-container:hover > img,
+		.image-container:hover > video,
+		.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>
+
+<script is:inline>
+	document.addEventListener("DOMContentLoaded", () => {
+		const videos = document.querySelectorAll(".playable");
+
+		videos.forEach((video) => {
+			video.addEventListener("mouseenter", () => {
+				video.play();
+			});
+
+			video.addEventListener("mouseleave", () => {
+				video.pause();
+				video.currentTime = 0;
+			});
+		});
+	});
+</script>