github link

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import NavLink from "./NavLink.astro";
+import { Icon } from "astro-icon/components";
 
 const { currentPage } = Astro.props;
 
@@ -23,18 +24,30 @@ const pages = [
     .cancel-button:hover .text {
         color: var(--ayu-red-500);
     }
+
+    .github-icon-link {
+        color: var(--ayu-accent);
+        transition: color 0.2s ease;
+    }
+
+    .github-icon-link:hover {
+        color: var(--ayu-red-500);
+    }
 </style>
 
 <header>
     <div
-        class="w-full flex items-center gap-3 px-4 py-2 border-b-1 border-ayu-gutter"
+        class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter"
     >
+        <div class="flex items-center gap-3">
             <img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" />
             <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1>
         </div>
+    </div>
     <div
-        class="w-full flex gap-4 px-4 py-2 border-b-1 border-ayu-gutter items-center"
+        class="w-full flex justify-between items-center p-2 border-b-1 border-ayu-gutter"
     >
+    <div class="flex gap-4 px-2">
         {
             pages.map((page) => (
                 <NavLink
@@ -63,4 +76,15 @@ const pages = [
             )
         }
         </div>
+        <a
+            href="https://github.com/hex248"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="github-icon-link flex items-center gap-2"
+            title="GitHub Profile"
+        >
+            <Icon name="mdi:github" class="w-6 h-6" />
+        hex248
+        </a>
+    </div>
 </header>