Initial portfolio site: Astro + Tailwind MVP

Outcome-led hero, about, grouped skills, experience summary, featured projects + /projects index, static contact, SEO/OG, dark/light theme. Dockerfile + nginx config + build script for homelab deploy.
2026-06-17 16:22:53 +10:00
commit 2d4b6ea097
38 changed files with 8232 additions and 0 deletions
@@ -0,0 +1,98 @@
+---
+import ThemeToggle from "./ThemeToggle.astro";
+import { site } from "../data/site";
+
+const links = [
+  { label: "About", href: "/#about" },
+  { label: "Skills", href: "/#skills" },
+  { label: "Projects", href: "/#projects" },
+  { label: "Contact", href: "/#contact" },
+];
+---
+
+<header class="nav">
+  <div class="container nav__inner">
+    <a class="nav__brand mono" href="/" aria-label={`${site.name} — home`}>
+      <span class="nav__prompt">~/</span><span>{site.handle}</span><span class="nav__caret" aria-hidden="true">▮</span>
+    </a>
+
+    <nav class="nav__links" aria-label="Primary">
+      {links.map((l) => <a href={l.href}>{l.label}</a>)}
+    </nav>
+
+    <div class="nav__actions">
+      <ThemeToggle />
+    </div>
+  </div>
+</header>
+
+<style>
+  .nav {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: color-mix(in srgb, var(--bg) 82%, transparent);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border);
+  }
+  .nav__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    height: 4rem;
+  }
+  .nav__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.1rem;
+    font-size: var(--step-0);
+    font-weight: 600;
+    color: var(--text);
+  }
+  .nav__brand:hover {
+    text-decoration: none;
+    color: var(--accent);
+  }
+  .nav__prompt {
+    color: var(--text-faint);
+  }
+  .nav__caret {
+    color: var(--accent);
+    animation: blink 1.1s steps(1) infinite;
+    margin-left: 0.1rem;
+  }
+  @keyframes blink {
+    50% {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nav__caret {
+      animation: none;
+    }
+  }
+  .nav__links {
+    display: none;
+    gap: var(--space-5);
+    font-family: var(--font-mono);
+    font-size: var(--step--1);
+  }
+  .nav__links a {
+    color: var(--text-dim);
+  }
+  .nav__links a:hover {
+    color: var(--text);
+    text-decoration: none;
+  }
+  .nav__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  @media (min-width: 720px) {
+    .nav__links {
+      display: flex;
+    }
+  }
+</style>