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,67 @@
+---
+// Cheap, CSS-only topology motif: a faint grid + slow-drifting accent glows.
+// No canvas, no WebGL, no JS. Fully disabled under prefers-reduced-motion.
+---
+
+<div class="bg" aria-hidden="true">
+  <div class="bg__grid"></div>
+  <div class="bg__glow bg__glow--a"></div>
+  <div class="bg__glow bg__glow--b"></div>
+</div>
+
+<style>
+  .bg {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+    pointer-events: none;
+  }
+  .bg__grid {
+    position: absolute;
+    inset: -2px;
+    background-image:
+      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+    background-size: 46px 46px;
+    /* Fade the grid out toward the edges so it reads as a motif, not a table. */
+    mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
+    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
+  }
+  .bg__glow {
+    position: absolute;
+    width: 46rem;
+    height: 46rem;
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.5;
+  }
+  .bg__glow--a {
+    top: -22rem;
+    left: -10rem;
+    background: radial-gradient(circle, var(--accent-glow), transparent 62%);
+    animation: drift-a 26s var(--ease) infinite alternate;
+  }
+  .bg__glow--b {
+    top: -16rem;
+    right: -14rem;
+    background: radial-gradient(circle, var(--accent-glow), transparent 65%);
+    opacity: 0.35;
+    animation: drift-b 32s var(--ease) infinite alternate;
+  }
+  @keyframes drift-a {
+    to {
+      transform: translate(6rem, 4rem) scale(1.12);
+    }
+  }
+  @keyframes drift-b {
+    to {
+      transform: translate(-5rem, 3rem) scale(1.08);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bg__glow {
+      animation: none;
+    }
+  }
+</style>