feat(portfolio): add status bar and floating nav

2026-07-06 20:31:47 -05:00
parent 7199eb458a
commit f4264886f9
3 changed files with 194 additions and 0 deletions
--- a/components/portfolio/PortfolioNav.tsx
+++ b/components/portfolio/PortfolioNav.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navLinks = [
+  { label: "WORK", href: "#work" },
+  { label: "CAPABILITIES", href: "#capabilities" },
+  { label: "FIELD NOTES", href: "/blog/" },
+  { label: "CONTACT", href: "#contact" },
+];
+
+function openCommandPalette() {
+  window.dispatchEvent(new CustomEvent("blacksite:palette"));
+}
+
+export function PortfolioNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      aria-label="Portfolio navigation"
+      className="sticky top-3 z-50 mx-auto mt-3 w-[calc(100%-2rem)] max-w-5xl rounded-xl border border-blacksite-line bg-blacksite-surface/82 px-3 py-2 text-blacksite-muted shadow-[0_18px_70px_rgba(0,0,0,0.38)] backdrop-blur-md sm:px-4"
+    >
+      <div className="flex items-center justify-between gap-3">
+        <Link
+          href="/"
+          aria-current={pathname === "/" ? "page" : undefined}
+          className="section-label whitespace-nowrap !text-blacksite-text transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan"
+        >
+          KRISHNA / SIGNAL
+        </Link>
+
+        <div className="flex min-w-0 flex-1 items-center justify-end gap-1 sm:gap-2">
+          <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
+            {navLinks.map((link) => {
+              const isBlogActive =
+                link.href === "/blog/" &&
+                (pathname === "/blog" || pathname.startsWith("/blog/"));
+
+              if (link.href.startsWith("/")) {
+                return (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    aria-current={isBlogActive ? "page" : undefined}
+                    className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan sm:px-3"
+                  >
+                    {link.label}
+                  </Link>
+                );
+              }
+
+              return (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan sm:px-3"
+                >
+                  {link.label}
+                </a>
+              );
+            })}
+          </div>
+
+          <button
+            type="button"
+            onClick={openCommandPalette}
+            className="section-label rounded-lg border border-blacksite-line bg-blacksite-surface2 px-3 py-2 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan"
+            aria-label="Open command palette"
+          >
+            ⌘K
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}