feat: revamp

public/js/scroll.js

@@ -0,0 +1,10 @@
+function onScroll() {
+  const header = document.getElementById("header");
+  if (window.scrollY > 0) {
+    header.classList.add("scrolled");
+  } else {
+    header.classList.remove("scrolled");
+  }
+}
+
+document.addEventListener("scroll", onScroll);

src/components/BaseHead.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  image?: string;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const { title, description } = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Favicon -->
+<link rel="icon" type="image/x-icon" href="/favicon.png" />
+
+<!-- Fonts -->
+<link
+  rel="preload"
+  href="/fonts/Inter-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="/fonts/Inter-Bold.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Global Scripts -->
+<script is:inline src="/js/scroll.js"></script>
+
+<!-- <ViewTransitions  /> -->
+<script>
+  import type { TransitionBeforeSwapEvent } from "astro:transitions/client";
+  document.addEventListener("astro:before-swap", (e) =>
+    [
+      ...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
+        'link[as="font"]'
+      ),
+    ].forEach((link) => link.remove())
+  );
+</script>

src/components/Button.astro

@@ -4,7 +4,7 @@ const { link, text } = Astro.props;
 
 <a
   href={link}
-  class="inline-flex w-full items-center justify-center rounded-full border border-black bg-neutral-200 px-4 py-2 text-sm font-semibold text-black backdrop-blur-xl transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-black hover:text-neutral-200 md:w-auto md:justify-start"
+  class="inline-flex w-full items-center justify-center rounded-full border border-black bg-neutral-200 px-4 py-2 text-sm font-semibold text-black transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-black hover:text-neutral-200 md:w-auto md:justify-start"
 >
   {text}
 </a>

src/components/Container.astro

@@ -0,0 +1,22 @@
+---
+import { cn } from "@/lib/utils";
+
+type Props = {
+  size: "sm" | "md" | "lg" | "xl" | "2xl";
+};
+
+const { size } = Astro.props;
+---
+
+<div
+  class={cn(
+    "w-full h-full mx-auto px-5",
+    size === "sm" && "max-w-screen-sm",
+    size === "md" && "max-w-screen-md",
+    size === "lg" && "max-w-screen-lg",
+    size === "xl" && "max-w-screen-xl",
+    size === "2xl" && "max-w-screen-2xl"
+  )}
+>
+  <slot />
+</div>

src/components/Drawer.astro

@@ -0,0 +1,38 @@
+---
+import { LINKS } from "@/consts";
+import { cn } from "@/lib/utils";
+const { pathname } = Astro.url;
+const subpath = pathname.match(/[^/]+/g);
+---
+
+<div
+  id="drawer"
+  class="fixed inset-0 z-40 flex h-0 flex-col items-center justify-center overflow-hidden bg-black/50 backdrop-blur-md transition-[height] duration-300 ease-in-out md:hidden"
+>
+  <nav class="flex flex-col items-center space-y-2">
+    {
+      LINKS.map((LINK) => (
+        <a
+          href={LINK.HREF}
+          class={cn(
+            "flex items-center justify-center rounded-full px-3 py-1",
+            "text-current hover:text-white",
+            "hover:bg-white/20",
+            "transition-colors duration-300 ease-in-out",
+            pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
+              ? "pointer-events-none bg-white text-black"
+              : ""
+          )}
+        >
+          {LINK.TEXT}
+        </a>
+      ))
+    }
+  </nav>
+</div>
+
+<style>
+  #drawer.open {
+    @apply h-full;
+  }
+</style>

src/components/Header.astro

@@ -1,47 +1,125 @@
 ---
-import path from "./path.json";
-import { basics } from "@cv";
-import MobileMenu from "./MobileMenu";
-const { nickname } = basics;
+import { SITE, LINKS } from "@/consts";
+import { cn } from "@/lib/utils";
+const { pathname } = Astro.url;
+const subpath = pathname.match(/[^/]+/g);
+import Container from "@/components/Container.astro";
 ---
 
-<header id="header" class="absolute top-0 z-50 w-full print:hidden">
-  <div
-    class="mx-auto flex h-12 max-w-5xl select-none items-center justify-between border-b border-transparent bg-transparent px-6 py-6 transition-all duration-300 lg:rounded-b-xl lg:border-l lg:border-r"
-  >
-    <a
-      href="/"
-      class="group relative z-30 flex items-center space-x-1.5 text-base uppercase text-white"
-    >
-      {nickname}
-    </a>
-    <nav
-      class="relative z-30 flex w-full flex-row-reverse justify-start text-sm text-neutral-600 sm:flex-row sm:justify-end"
-    >
-      <MobileMenu client:load>
-        {
-          path.map((link) => (
-            <a
-              href={link.url}
-              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
-            >
-              {link.name}
-            </a>
-          ))
-        }
-      </MobileMenu>
-      <div class="hidden sm:flex">
-        {
-          path.map((link) => (
-            <a
-              href={link.url}
-              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
-            >
-              {link.name}
-            </a>
-          ))
-        }
+<header id="header" class="fixed top-0 z-50 h-16 w-full">
+  <Container size="md">
+    <div class="relative h-full w-full">
+      <div
+        class="absolute left-0 top-1/2 flex -translate-y-1/2 gap-1 font-semibold"
+      >
+        <a
+          href="/"
+          class="flex gap-1 text-current transition-colors duration-300 ease-in-out hover:text-white"
+        >
+          <div class="font-bold uppercase">
+            {SITE.TITLE}
+          </div>
+        </a>
       </div>
-    </nav>
-  </div>
+
+      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <nav class="hidden items-center justify-center gap-1 text-sm md:flex">
+          {
+            LINKS.map((LINK) => (
+              <a
+                href={LINK.HREF}
+                class={cn(
+                  "h-8 rounded-full px-3 text-current",
+                  "flex items-center justify-center",
+                  "transition-colors duration-300 ease-in-out",
+                  pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
+                    ? "bg-white text-black"
+                    : "hover:bg-white/20 hover:text-white"
+                )}
+              >
+                {LINK.TEXT}
+              </a>
+            ))
+          }
+        </nav>
+      </div>
+      <div class="buttons absolute right-0 top-1/2 flex -translate-y-1/2 gap-1">
+        <button
+          id="header-drawer-button"
+          aria-label={`Toggle drawer open and closed`}
+          class={cn(
+            "flex md:hidden",
+            "size-9 rounded-full p-2 items-center justify-center",
+            "bg-transparent hover:bg-white/20",
+            "stroke-current  hover:stroke-white",
+            "border border-white/25",
+            "transition-colors duration-300 ease-in-out"
+          )}
+        >
+          <svg
+            id="drawer-open"
+            class="size-full"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          >
+            <path d="M3 12h18"></path>
+            <path d="M3 6h18"></path>
+            <path d="M3 18h18"></path>
+          </svg>
+          <svg
+            id="drawer-close"
+            class="size-full"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          >
+            <path d="M18 6L6 18"></path>
+            <path d="M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </Container>
 </header>
+
+<style>
+  #header-drawer-button > #drawer-open {
+    @apply block;
+  }
+
+  #header-drawer-button > #drawer-close {
+    @apply hidden;
+  }
+
+  #header-drawer-button.open > #drawer-open {
+    @apply hidden;
+  }
+
+  #header-drawer-button.open > #drawer-close {
+    @apply block;
+  }
+</style>
+
+<script is:inline>
+  function toggleDrawer() {
+    const drawer = document.getElementById("drawer");
+    const drawerButton = document.getElementById("header-drawer-button");
+    drawer?.classList.toggle("open");
+    drawerButton?.classList.toggle("open");
+  }
+
+  function initializeDrawerButton() {
+    const drawerButton = document.getElementById("header-drawer-button");
+    drawerButton?.addEventListener("click", toggleDrawer);
+  }
+
+  document.addEventListener("astro:after-swap", initializeDrawerButton);
+  initializeDrawerButton();
+</script>