updated navbar and project

Author: liyunze-coding

src/components/projects/VideoProject.svelte

@@ -26,33 +26,16 @@
 	onMount(() => {
 		const videos = document.querySelectorAll<HTMLVideoElement>(".playable");
 
-		let userInteracted = false;
-
-		const handleUserInteraction = () => {
-			userInteracted = true;
-			document.removeEventListener("click", handleUserInteraction);
-			document.removeEventListener("keydown", handleUserInteraction);
-		};
-
-		document.addEventListener("click", handleUserInteraction);
-		document.addEventListener("keydown", handleUserInteraction);
-
 		videos.forEach((video) => {
 			// Ensure the video element supports play and pause methods
 			if (
 				typeof video.play === "function" &&
 				typeof video.pause === "function"
 			) {
 				video.addEventListener("mouseenter", () => {
-					if (userInteracted) {
-						video.volume = 0.2;
-						video.muted = false;
-						video.play();
-					} else {
-						video.volume = 0;
-						video.muted = true;
-						video.play();
-					}
+					video.volume = 0;
+					video.muted = true;
+					video.play();
 				});
 
 				video.addEventListener("mouseleave", () => {

src/components/socials/Socials.astro

@@ -1,7 +1,7 @@
-<div class="flex flex-row items-center justify-center gap-2">
+<div class="flex flex-row items-center justify-center gap-3">
 	<a href="https://github.com/liyunze-coding" target="_blank">
 		<div
-			class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
 		>
 			<img
 				src="/images/socials/github.svg"
@@ -13,7 +13,7 @@
 	</a>
 	<a href="https://codepen.io/rythondev" target="_blank">
 		<div
-			class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
 		>
 			<img
 				src="/images/socials/codepen.svg"
@@ -24,7 +24,7 @@
 	</a>
 	<a href="https://youtube.com/@RythonDev" target="_blank">
 		<div
-			class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#00ffff] hover:invert"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#00ffff] hover:invert"
 		>
 			<img
 				src="/images/socials/youtube.svg"
@@ -35,7 +35,7 @@
 	</a>
 	<a href="https://twitch.tv/RythonDev" target="_blank">
 		<div
-			class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#6eb900] hover:invert"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#6eb900] hover:invert"
 		>
 			<img
 				src="/images/socials/twitch.svg"

src/components/ui/NavigationBar.tsx

@@ -120,7 +120,7 @@ export const HoverNavigation = ({
 			</div>
 			<div
 				ref={hamburgerRef}
-				className="bg-secondary fixed right-5 bottom-10 z-50 flex rounded-full border-2 border-white px-1 py-1 md:hidden"
+				className="fixed top-10 right-5 z-50 flex rounded-full bg-gray-100 px-1 py-1 md:hidden [&>div]:rounded-full [&>div_div]:bg-black!"
 			>
 				<HamburgerCross
 					toggle={setHamburgerOpen}
@@ -137,24 +137,24 @@ export const HoverNavigation = ({
 						animate={{ opacity: 1, scale: 1 }}
 						exit={{ opacity: 0, scale: 0.95 }}
 						transition={{ duration: 0.2 }}
-						className="bg-secondary/20 border-accent fixed right-5 bottom-32 z-40 rounded-2xl border-2 py-2 backdrop-blur-md md:hidden"
+						className="fixed top-32 right-5 z-40 rounded-2xl bg-white/90 py-2 text-black backdrop-blur-sm md:hidden"
 					>
 						<nav aria-label="Mobile Navigation">
 							<ul className="flex flex-col gap-2">
 								{items.map((item, idx) => (
 									<motion.li
 										key={item?.link}
-										initial={{ opacity: 0, x: -20 }}
-										animate={{ opacity: 1, x: 0 }}
+										initial={{ opacity: 0, y: -20 }}
+										animate={{ opacity: 1, y: 0 }}
 										transition={{
-											delay: (items.length - idx) * 0.1,
+											delay: idx * 0.1,
 											duration: 0.3,
 										}}
 										className="rounded-2xl px-3"
 									>
 										<a
 											href={item?.link}
-											className="block rounded-lg px-4 py-3 text-center text-lg transition-colors hover:bg-neutral-700"
+											className="block rounded-lg px-4 py-3 text-center text-lg transition-colors"
 											onClick={() =>
 												setHamburgerOpen(false)
 											}