socials

public/icons/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>

public/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

public/icons/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>

public/icons/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>

public/icons/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>

src/components/widgets/Navbar.astro

@@ -0,0 +1,29 @@
+---
+const navItems = [
+    {
+        name: "Docs",
+        link: "/docs",
+    },
+];
+---
+
+<header>
+    <nav
+        class="text-white font-light text-2xl flex items-center justify-center"
+    >
+        <ul class="flex w-96 justify-evenly py-3">
+            {
+                navItems.map((item) => (
+                    <li>
+                        <a
+                            href={item.link}
+                            class="hover:text-[#fbc119] hover:underline"
+                        >
+                            {item.name}
+                        </a>
+                    </li>
+                ))
+            }
+        </ul>
+    </nav>
+</header>

src/components/widgets/Socials.astro

@@ -0,0 +1,37 @@
+---
+const socials = [
+    {
+        name: "GitHub",
+        link: "https://www.google.com/",
+        icon: "github",
+    },
+    {
+        name: "GitHub",
+        link: "https://www.google.com/",
+        icon: "github",
+    },
+    {
+        name: "GitHub",
+        link: "https://www.google.com/",
+        icon: "github",
+    },
+];
+---
+
+<section>
+    <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
+    <ul class="flex text-white my-6">
+        {
+            socials.map((social) => (
+                <li class="mr-2 flex">
+                    <a href={social.link} title={social.name}>
+                        <img
+                            src={`../public/icons/${social.icon}.svg`}
+                            alt={`${social.name} icon`}
+                        />
+                    </a>
+                </li>
+            ))
+        }
+    </ul>
+</section>

src/pages/index.astro

@@ -1,37 +1,20 @@
 ---
 import Layout from "../layouts/Layout.astro";
+
+import Socials from "../components/widgets/Socials.astro";
+import Navbar from "../components/widgets/Navbar.astro";
 import { Image, Picture } from "@astrojs/image/components";
 ---
 
 <Layout title="Welcome to Astro.">
-    <header>
+    <Navbar />
-        <nav
+    <main class="mt-64 flex justify-center items-center">
-            class="text-white font-light text-2xl flex items-center justify-center"
-        >
-            <ul class="flex w-96 justify-evenly py-3">
-                <li>
-                    <a href="/" class="hover:text-[#fbc119] hover:underline"
-                        >Projects</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="/about"
-                        class="hover:text-[#fbc119] hover:underline">Docs</a
-                    >
-                </li>
-            </ul>
-        </nav>
-    </header>
-    <main
-        class="mt-64 flex justify-center items-center flex-col pointer-events-none cursor-none"
-    >
         <Image
             src={import("../public/logo.png")}
             width={200}
             height={200}
             alt="descriptive text"
         />
-        <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
+        <Socials />
     </main>
 </Layout>