From 576973d78ef2b440189a9f91e4c7acce49172634 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sun, 10 Aug 2025 16:59:50 +1000
Subject: [PATCH] fixed socials and navbar

---
 src/components/home/Greeting.svelte   |  1 -
 src/components/home/Intro.astro       |  2 +-
 src/components/socials/Socials.astro  | 47 +++++++++++++++++++++++++++
 src/components/socials/Socials.svelte | 45 -------------------------
 src/components/ui/NavigationBar.tsx   |  5 +--
 src/layouts/Layout.astro              |  1 -
 6 files changed, 51 insertions(+), 50 deletions(-)
 create mode 100644 src/components/socials/Socials.astro
 delete mode 100644 src/components/socials/Socials.svelte

diff --git a/src/components/home/Greeting.svelte b/src/components/home/Greeting.svelte
index 579632c..d97c31e 100644
--- a/src/components/home/Greeting.svelte
+++ b/src/components/home/Greeting.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import Socials from "../socials/Socials.svelte";
 
 	// Roles
 	const typingInterval: number = 50;
diff --git a/src/components/home/Intro.astro b/src/components/home/Intro.astro
index 5799f53..c9e8bba 100644
--- a/src/components/home/Intro.astro
+++ b/src/components/home/Intro.astro
@@ -1,6 +1,6 @@
 ---
 import Card from "../global/Card.astro";
-import Socials from "../socials/Socials.svelte";
+import Socials from "../socials/Socials.astro";
 import Greeting from "./Greeting.svelte";
 ---
 
diff --git a/src/components/socials/Socials.astro b/src/components/socials/Socials.astro
new file mode 100644
index 0000000..e7fdbe8
--- /dev/null
+++ b/src/components/socials/Socials.astro
@@ -0,0 +1,47 @@
+<div class="flex flex-row items-center justify-center gap-2">
+	<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"
+		>
+			<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="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
+		>
+			<img
+				src="/images/socials/codepen.svg"
+				alt="codepen"
+				class="aspect-square h-5 w-5"
+			/>
+		</div>
+	</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"
+		>
+			<img
+				src="/images/socials/youtube.svg"
+				alt="youtube"
+				class="aspect-square h-5 w-5"
+			/>
+		</div>
+	</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"
+		>
+			<img
+				src="/images/socials/twitch.svg"
+				alt="twitch"
+				class="aspect-square h-4 w-4"
+			/>
+		</div>
+	</a>
+</div>
diff --git a/src/components/socials/Socials.svelte b/src/components/socials/Socials.svelte
deleted file mode 100644
index cb29e89..0000000
--- a/src/components/socials/Socials.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<a href="https://github.com/liyunze-coding" target="_blank">
-    <div
-        class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
-    >
-        <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="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
-    >
-        <img
-            src="/images/socials/codepen.svg"
-            alt="codepen"
-            class="aspect-square h-5 w-5"
-        />
-    </div>
-</a>
-<a href="https://youtube.com/@RythonDev" target="_blank">
-    <div
-        class="mr-3 flex h-7 w-7 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"
-            alt="youtube"
-            class="aspect-square h-5 w-5"
-        />
-    </div>
-</a>
-<a href="https://twitch.tv/RythonDev" target="_blank">
-    <div
-        class="mr-3 flex h-7 w-7 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"
-            alt="twitch"
-            class="aspect-square h-4 w-4"
-        />
-    </div>
-</a>
diff --git a/src/components/ui/NavigationBar.tsx b/src/components/ui/NavigationBar.tsx
index 2406e19..ab9b327 100644
--- a/src/components/ui/NavigationBar.tsx
+++ b/src/components/ui/NavigationBar.tsx
@@ -109,7 +109,7 @@ export const HoverNavigation = ({
 							className="mr-3 rounded-full"
 						/>
 					</a>
-					<div className="mx-5 flex flex-col items-center justify-center">
+					<div className="flex flex-col items-center justify-center">
 						<motion.div
 							animate={{
 								width: availableVisible ? "auto" : "0px",
@@ -118,12 +118,13 @@ export const HoverNavigation = ({
 							className="flex w-auto flex-row items-center justify-center pr-2 whitespace-nowrap opacity-100 lg:w-0 lg:opacity-0"
 						>
 							<a
+								tabIndex={1}
 								href="/contact"
 								className="overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500"
 							>
 								Available for work
 							</a>
-							<div className={`relative z-50 ml-3`}>
+							<div className="relative z-50 ml-5">
 								<div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
 								<div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
 							</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 027ee0d..bcaf6f0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -27,7 +27,6 @@ import { ClientRouter } from "astro:transitions";
 			thumbnail && (
 				<>
 					<meta name="twitter:image" content={thumbnail} />
-					<meta name="og:image" content={thumbnail} />
 				</>
 			)
 		}