fixed socials and navbar

Author: liyunze-coding

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;

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";
 ---
 

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>

src/components/socials/Socials.svelte

@@ -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>

src/components/ui/NavigationBar.tsx

@@ -27,7 +27,6 @@ import { ClientRouter } from "astro:transitions";
 			thumbnail && (
 				<>
 					<meta name="twitter:image" content={thumbnail} />
-					<meta name="og:image" content={thumbnail} />
 				</>
 			)
 		}