facelift: the scroll story - bento capabilities, dossier cards, series badges, GitOps receipt

02 Capabilities becomes a 4-col bento (Edge AI 2x2 flagship w/ magenta corner radial, Platform
wide, magenta-flavoured security tile, Observability row-completer) driven by span/flavor fields
in skills.ts. 03 Selected Work becomes dossier cards: house-style SVG thumbnails (per-project
motif via DossierThumb), DOSSIER/00N corner tags, 'the argument' line from the outcome field,
chip tags, mono meta footer. 04 Writing cards gain the security-series badge (data/series.ts)
and sit three across. Section numbers glow cyan; a circuit divider (gradient hairlines + two
diamonds) closes the hero. Footer opens with the GitOps receipt - git sha + build date baked at
build time via lib/build-info.ts, zero runtime calls.

src/data/series.ts

@@ -0,0 +1,7 @@
+// Post series — numbered badges on blog cards. Keyed by post slug.
+// The security series threads the zero-trust arc across posts as they publish.
+export const series: Record<string, { name: string; number: number }> = {
+  "secret-zero": { name: "SECURITY SERIES", number: 1 },
+  "workload-least-privilege": { name: "SECURITY SERIES", number: 3 },
+  // broker-pattern → 02 when it publishes (currently a draft in the workshop)
+};

src/data/skills.ts

@@ -6,24 +6,33 @@ export type SkillGroup = {
   // Short framing line for the group.
   blurb: string;
   items: string[];
+  /** Bento tile size — "hero" = 2×2 flagship · "wide" = 2×1 · "full" = whole row · default 1×1. */
+  span?: "hero" | "wide" | "full";
+  /** Accent flavour — "magenta" marks security-flavoured tiles. */
+  flavor?: "magenta";
+  /** Eyebrow label rendered on the hero tile. */
+  flag?: string;
 };
 
 export const skills: SkillGroup[] = [
   {
-    title: "Cloud & Identity",
-    blurb: "Hybrid estates across the major clouds, with identity done properly.",
+    title: "Edge AI & GPU",
+    span: "hero",
+    flag: "FLAGSHIP",
+    blurb: "Serving vision and language models on real hardware at the edge.",
     items: [
-      "Azure",
-      "Entra ID",
-      "Intune",
-      "AWS",
-      "GCP",
-      "Microsoft 365",
-      "Azure Blob / S3",
+      "NVIDIA GPU Operator",
+      "GPU passthrough (ESXi, as code)",
+      "GPU readiness probing & watchdogs",
+      "Pod lifecycle management",
+      "YOLO / computer-vision inference",
+      "Local LLM serving (llama.cpp)",
+      "Edge Kubernetes",
     ],
   },
   {
     title: "Platform & Virtualization",
+    span: "wide",
     blurb: "Kubernetes platforms designed to be reasoned about and recovered.",
     items: [
       "Kubernetes",
@@ -51,6 +60,7 @@ export const skills: SkillGroup[] = [
   },
   {
     title: "Networking & Security",
+    flavor: "magenta",
     blurb: "Default-deny, segmentation, and a small attack surface.",
     items: [
       "SD-WAN",
@@ -62,8 +72,22 @@ export const skills: SkillGroup[] = [
       "RBAC · 2FA / SSO",
     ],
   },
+  {
+    title: "Cloud & Identity",
+    blurb: "Hybrid estates across the major clouds, with identity done properly.",
+    items: [
+      "Azure",
+      "Entra ID",
+      "Intune",
+      "AWS",
+      "GCP",
+      "Microsoft 365",
+      "Azure Blob / S3",
+    ],
+  },
   {
     title: "Observability & Ops",
+    span: "full",
     blurb: "Knowing the system is healthy — and the GPUs with it.",
     items: [
       "Prometheus",
@@ -75,17 +99,4 @@ export const skills: SkillGroup[] = [
       "ITIL processes",
     ],
   },
-  {
-    title: "Edge AI & GPU",
-    blurb: "Serving vision and language models on real hardware at the edge.",
-    items: [
-      "NVIDIA GPU Operator",
-      "GPU passthrough (ESXi, as code)",
-      "GPU readiness probing & watchdogs",
-      "Pod lifecycle management",
-      "YOLO / computer-vision inference",
-      "Local LLM serving (llama.cpp)",
-      "Edge Kubernetes",
-    ],
-  },
 ];