add: socials row

Author: jumpyjacko

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import MainBird from "./lib/components/MainBird.svelte";
     import Clock from "./lib/components/Clock.svelte";
+    import SocialsRow from "./lib/components/SocialsRow.svelte";
 
     import { theme } from "./lib/state/theme.svelte";
     import { onMount } from "svelte";
@@ -15,7 +16,7 @@
 
     function removeScrollIndicator() {
         scrollIndicator.classList.remove("animate-bounce");
-        scrollIndicator.classList.add("slide-down")
+        scrollIndicator.classList.add("slide-down");
         window.removeEventListener("scroll", removeScrollIndicator);
     }
 
@@ -24,13 +25,15 @@
     });
 </script>
 
-<header class="fixed flex flex-row bg-transparent"></header>
 <main class="flex flex-col justify-center items-center">
     <Clock />
     <MainBird />
     <h1 class="text-2xl md:text-4xl text-center mt-5">
         hi, i'm jackson,<br />a software developer
     </h1>
+
+    <div class="h-8"></div>
+    <SocialsRow />
 </main>
 <div class="fixed bottom-0 w-full flex justify-center pb-1">
     <svg

src/lib/components/SocialsRow.svelte

@@ -0,0 +1,34 @@
+<div class="flex flex-row gap-8">
+    <a
+        href="https://youtube.com/@jumpyjacko"
+        target="_blank"
+        aria-label="Youtube link to jumpyjacko's channel"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            ><path
+                fill="currentColor"
+                d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"
+            /></svg
+        >
+    </a>
+    <a
+        href="https://github.com/jumpyjacko"
+        target="_blank"
+        aria-label="Github link to jumpyjacko's profile"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            ><path
+                fill="currentColor"
+                d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+            /></svg
+        >
+    </a>
+</div>