Populate site with real CV data; restyle OG subtitle

Real career history (Woolworths, Virtus Health, Linde, ELGAS, Darktime),
cloud-heavy skills matrix, education, LinkedIn, Sydney location, and
projects mapped to actual work. OG subtitle now smaller italic serif.

src/components/About.astro

@@ -1,12 +1,33 @@
 ---
 import { site } from "../data/site";
-import { experience } from "../data/experience";
+import { experience, education } from "../data/experience";
 import { cvAvailable } from "../lib/assets";
+
+// M1 shows the most recent roles; the full history lives in experience.ts (and the CV).
+const recent = experience.slice(0, 3);
+const olderCount = experience.length - recent.length;
 ---
 
 <div class="about">
   <div class="about__bio" data-reveal>
     <p class="lead">{site.bio}</p>
+
+    <dl class="about__facts">
+      <div>
+        <dt class="mono">Based</dt>
+        <dd>{site.location}</dd>
+      </div>
+      <div>
+        <dt class="mono">Focus</dt>
+        <dd>Edge Kubernetes · GPU/AI · IaC & GitOps</dd>
+      </div>
+    </dl>
+
+    <h3 class="about__sub mono"># education</h3>
+    <ul class="about__education">
+      {education.map((e) => <li>{e}</li>)}
+    </ul>
+
     {cvAvailable && (
       <p class="about__cv">
         <a class="btn" href="/cv.pdf" download>Download full CV (PDF)</a>
@@ -14,27 +35,34 @@ import { cvAvailable } from "../lib/assets";
     )}
   </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>
+    <ol class="about__timeline">
+      {
+        recent.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>
+    {olderCount > 0 && (
+      <p class="about__more mono">
+        + {olderCount} earlier roles (ELGAS, Darktime){cvAvailable ? " — see the CV" : ""}.
+      </p>
+    )}
+  </div>
 </div>
 
 <style>
@@ -49,8 +77,45 @@ import { cvAvailable } from "../lib/assets";
       align-items: start;
     }
   }
+  .about__facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-6);
+    margin: var(--space-5) 0 0;
+  }
+  .about__facts dt {
+    font-size: 0.7rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+  }
+  .about__facts dd {
+    margin: 0.2rem 0 0;
+    color: var(--text);
+    font-size: var(--step--1);
+  }
+  .about__sub {
+    margin-top: var(--space-6);
+    color: var(--text-dim);
+    font-size: var(--step--1);
+    letter-spacing: 0.02em;
+  }
+  .about__sub::first-letter {
+    color: var(--accent);
+  }
+  .about__education {
+    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__education li::marker {
+    color: var(--accent);
+  }
   .about__cv {
-    margin-top: var(--space-5);
+    margin-top: var(--space-6);
   }
   .about__timeline {
     list-style: none;
@@ -110,4 +175,10 @@ import { cvAvailable } from "../lib/assets";
   .about__highlights li::marker {
     color: var(--accent);
   }
+  .about__more {
+    margin-top: var(--space-5);
+    padding-left: var(--space-5);
+    font-size: 0.72rem;
+    color: var(--text-faint);
+  }
 </style>