feat: terminal-noir redesign — widget system + design token overhaul

Replace cyan-green modern theme with terminal-noir aesthetic aligned to
style-guide.md. Hard edges, monospace-first, linear transitions, no gradients.

Introduce Widget component as the single repeatable section primitive:
title bar with horizontal rule, optional badge/meta — all pages and
sections now use this pattern (Glance-inspired data-driven layout).

Design system changes (globals.css):
- Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red
- Drop Montserrat; Source Code Pro primary, system sans for prose only
- Transitions: linear 120ms; no eased animations, no border-radius

Component changes:
- Nav: flat, border-bottom only, lowercase links
- Hero: 56px square photo, status dot, @ email glyph
- ProjectCard: flat bordered card, 2-col grid, no gradient tile
- Skills: key-value rows with dot-separated values
- Footer: minimal text links

Pages: all sections wrapped in Widget; homelab uses gap-px grid for
at-a-glance, services, and ADRs sections. Archive uses flat list layout.

Data: remove gradient field from Project type; add optional year field

src/components/Skills.tsx

@@ -1,11 +1,13 @@
+import Widget from "@/components/Widget";
+
 const skillGroups = [
   {
     label: "Languages",
     skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
   },
   {
-    label: "Frontend & Mobile",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js", "Responsive Design"],
+    label: "Frontend",
+    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
   },
   {
     label: "Desktop & Tools",
@@ -21,34 +23,28 @@ const skillGroups = [
   },
 ];
 
+const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
+
 export default function Skills() {
   return (
-    <section className="mb-20" aria-labelledby="skills-heading">
-      <h2
-        id="skills-heading"
-        className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-8"
-      >
-        Skills
-      </h2>
-      <div className="flex flex-col gap-5">
-        {skillGroups.map(({ label, skills }) => (
-          <div key={label} className="flex flex-col xs:flex-row gap-2 xs:items-start">
-            <span className="font-mono text-xs text-[var(--color-grey-2)] w-36 shrink-0 pt-0.5">
+    <Widget title="skills" badge={totalCount} as="section">
+      <div className="flex flex-col">
+        {skillGroups.map(({ label, skills }, i) => (
+          <div
+            key={label}
+            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${
+              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
+            }`}
+          >
+            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
               {label}
             </span>
-            <div className="flex flex-wrap gap-2">
-              {skills.map((skill) => (
-                <span
-                  key={skill}
-                  className="text-xs font-mono px-3 py-1 border border-[var(--color-grey-1)] text-[var(--color-grey-3)] rounded hover:border-[var(--color-green-darker)] hover:text-[var(--color-grey-4)] transition-colors"
-                >
-                  {skill}
-                </span>
-              ))}
-            </div>
+            <span className="font-mono text-xs text-[var(--color-text)]">
+              {skills.join(" · ")}
+            </span>
           </div>
         ))}
       </div>
-    </section>
+    </Widget>
   );
 }