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.

src/components/About.astro

@@ -0,0 +1,113 @@
+---
+import { site } from "../data/site";
+import { experience } from "../data/experience";
+import { cvAvailable } from "../lib/assets";
+---
+
+<div class="about">
+  <div class="about__bio" data-reveal>
+    <p class="lead">{site.bio}</p>
+    {cvAvailable && (
+      <p class="about__cv">
+        <a class="btn" href="/cv.pdf" download>Download full CV (PDF)</a>
+      </p>
+    )}
+  </div>
+
+  <ol class="about__timeline">
+    {
+      experience.map((role) => (
+        <li class="about__role" data-reveal>
+          <div class="about__role-head">
+            <h3 class="about__role-title">{role.title}</h3>
+            <span class="mono about__role-period">{role.period}</span>
+          </div>
+          <p class="mono about__role-org">{role.org}</p>
+          <p class="about__role-summary">{role.summary}</p>
+          {role.highlights.length > 0 && (
+            <ul class="about__highlights">
+              {role.highlights.map((h) => (
+                <li>{h}</li>
+              ))}
+            </ul>
+          )}
+        </li>
+      ))
+    }
+  </ol>
+</div>
+
+<style>
+  .about {
+    display: grid;
+    gap: var(--space-7);
+  }
+  @media (min-width: 880px) {
+    .about {
+      grid-template-columns: 1fr 1.1fr;
+      gap: var(--space-8);
+      align-items: start;
+    }
+  }
+  .about__cv {
+    margin-top: var(--space-5);
+  }
+  .about__timeline {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--space-5);
+  }
+  .about__role {
+    position: relative;
+    padding-left: var(--space-5);
+    border-left: 1px solid var(--border-strong);
+  }
+  .about__role::before {
+    content: "";
+    position: absolute;
+    left: -5px;
+    top: 0.4rem;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-dim);
+  }
+  .about__role-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+  .about__role-title {
+    font-size: var(--step-1);
+  }
+  .about__role-period {
+    font-size: 0.72rem;
+    color: var(--text-faint);
+  }
+  .about__role-org {
+    color: var(--accent);
+    font-size: var(--step--1);
+    margin-top: 0.15rem;
+  }
+  .about__role-summary {
+    color: var(--text-dim);
+    margin-top: var(--space-2);
+    font-size: var(--step-0);
+  }
+  .about__highlights {
+    margin: var(--space-3) 0 0;
+    padding-left: 1.1rem;
+    color: var(--text-dim);
+    font-size: var(--step--1);
+    display: grid;
+    gap: 0.3rem;
+  }
+  .about__highlights li::marker {
+    color: var(--accent);
+  }
+</style>