feat: redesign to Design System v2 — flat, high-contrast, editorial

Replace the glassmorphism + glow aesthetic with a flat, high-contrast
editorial system per Design System Reference v2. Confidence now comes from
typography scale and whitespace; the accent is a functional signal (CTAs,
active states, key stats, links), never a background flood. No blur, no
glow, no gradient washes.

Foundation
- styles/globals.css: introduce v2 raw palette (--bg-base, --bg-surface,
  --text-primary/secondary/muted, --border-subtle, --accent #F57A28,
  --accent-hover #FF8C3F) and alias it into the existing semantic tokens so
  every component consuming Tailwind classes inherits v2 for free. Expose the
  raw palette directly (bg-surface, text-muted, accent-hover, …). Add motion
  tokens (--duration-*, --ease-default) and oversized display type steps
  (text-7xl/8xl). Fix a stale .dark block that reverted tokens to the old
  teal/blue oklch palette for OS-dark visitors.
- Remove all decoration: floating glow orbs + float keyframe, gradient-text
  fill (now a flat alias), glow-primary, and the old pill/floating-button
  glow utilities. Redefine the `glass` utility as a flat opaque surface
  (no blur), which flattens the header and footer automatically.
- lib/motion.ts: adopt the v2 ease-default cubic-bezier and 24px reveal
  offset so every scroll reveal inherits v2 timing.
- hooks/use-cursor.ts: flat light dot (mix-blend difference), grows and
  turns accent on interactive elements, no glow.

Sections
- Hero: flat rebuild — oversized mixed-weight display headline with a single
  italic accent phrase, mono terminal role line, three stat counters on
  hairline dividers, flat accent + outline CTAs; line-by-line reveal. Removes
  grid background, glow layers, blur, and gradient text.
- section-premium: flat backgrounds and hairline dividers only; headings are
  flat high-contrast with an optional italic accent word and numbered-marker
  support.
- Sequential section numbering (01–09) with italic accent titles across
  About, Journey, Skills, Experience, Projects, Certifications, TryHackMe,
  GitHub, and Contact.

New v2 component patterns
- NumberedDetailList: numbered vertical list with an active-item detail panel
  (sticky on desktop, accordion on mobile). Journey and Experience now map
  their data into it, replacing the old marker/spine timeline.
- ProjectRows: large clickable project rows with a cursor-following
  hover-reveal thumbnail (placeholder when no cover image); opens the existing
  project dialog. Replaces the project card grid.
- Certifications, TryHackMe, and GitHub now render a shared flat "credential
  wall" — a hairline grid of cells where the issuer/owner reads as a label
  and the title turns accent on hover. GitHubCard drops shadcn Card/Button.
- ScrollProgress: thin accent scroll-progress bar (spring-eased useScroll)
  fixed above the sticky nav; aria-hidden and reduced-motion aware.

Cleanup
- Remove superseded files: timeline-item, timeline-list, experience-item,
  experience-list, project-card, project-grid. No tests referenced them;
  tsc, ESLint, and a production build all pass.

Author: Hem Gabhawala

app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { Footer } from "@/components/layout/footer";
 import { SiteHeader } from "@/components/layout/site-header";
 import { PageTransition } from "@/components/shared/page-transition";
+import { ScrollProgress } from "@/components/layout/scroll-progress";
 import { MotionProvider } from "@/components/providers/motion-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { LayoutClient } from "@/components/layout/layout-client";
@@ -82,6 +83,7 @@ export default function RootLayout({
         <ThemeProvider>
           <MotionProvider>
             <LayoutClient>
+              <ScrollProgress />
               <PageTransition />
               <SiteHeader />
               {children}

components/certifications/certification-card.tsx

@@ -1,16 +1,16 @@
-import { ExternalLink } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import type { Certificate } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 /**
- * One certification or achievement card. Server Component — everything is
- * renderable without client JS.
+ * One credential cell in the logo/name grid (Design System v2 §6). Flat and
+ * editorial: the issuer reads as a small tracked-out label (the "logo"), the
+ * title is the primary type and turns accent on hover. When a verification URL
+ * exists the whole cell is a link; otherwise it's a static cell.
  *
- * Used by both Certifications and TryHackMe sections (same Card component,
- * passed in as-is without branching logic), so properties stay generic and
- * the issuer/date metadata handles both credential types identically.
+ * Server Component — renderable without client JS. Shared by both the
+ * Certifications and TryHackMe sections without branching logic.
  */
 export function CertificationCard({ cert }: { cert: Certificate }) {
   const { title, issuer, date, credentialUrl } = cert;
@@ -19,32 +19,47 @@ export function CertificationCard({ cert }: { cert: Certificate }) {
     month: "short",
   });
 
-  return (
-    <Card className="h-full py-4 sm:py-6">
-      <CardHeader className="pb-3 sm:pb-4">
-        <h3 className="text-base leading-snug font-semibold tracking-tight sm:text-lg">
+  const cls =
+    "group flex h-full flex-col justify-between gap-6 bg-bg-base p-6 transition-colors duration-200 hover:bg-bg-surface sm:p-8";
+
+  const inner = (
+    <>
+      <div className="flex items-start justify-between gap-3">
+        <span className="font-mono text-[11px] font-medium tracking-[0.12em] text-text-muted uppercase">
+          {issuer}
+        </span>
+        {credentialUrl && (
+          <ArrowUpRight
+            aria-hidden
+            className="size-4 shrink-0 text-text-muted opacity-0 transition-all duration-200 group-hover:text-accent group-hover:opacity-100"
+          />
+        )}
+      </div>
+      <div>
+        <h3
+          className={cn(
+            "text-base leading-snug font-semibold tracking-tight text-text-primary transition-colors duration-200 sm:text-lg",
+            credentialUrl && "group-hover:text-accent",
+          )}
+        >
           {title}
         </h3>
-        <p className="text-xs text-muted-foreground sm:text-sm">
-          {issuer} • {formattedDate}
-        </p>
-      </CardHeader>
+        <p className="mt-2 text-xs text-text-muted">{formattedDate}</p>
+      </div>
+    </>
+  );
 
-      {credentialUrl && (
-        <CardContent className="pt-0">
-          <Button asChild variant="ghost" size="sm">
-            <a
-              href={credentialUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`View credential for ${title} (opens in a new tab)`}
-            >
-              <ExternalLink aria-hidden className="size-3.5" />
-              View credential
-            </a>
-          </Button>
-        </CardContent>
-      )}
-    </Card>
+  return credentialUrl ? (
+    <a
+      href={credentialUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`View credential for ${title} (opens in a new tab)`}
+      className={cls}
+    >
+      {inner}
+    </a>
+  ) : (
+    <div className={cls}>{inner}</div>
   );
 }

components/certifications/certification-grid.tsx

@@ -3,33 +3,38 @@
 import { motion } from "motion/react";
 
 import { CertificationCard } from "@/components/certifications/certification-card";
-import { fadeUp, staggerChildren, subtleHover } from "@/lib/motion";
+import { fadeIn, staggerChildren } from "@/lib/motion";
 import type { Certificate } from "@/lib/types";
 
 /**
- * Responsive card grid with staggered reveal. Server component children
- * (CertificationCard) are passed through motion wrappers per
- * COMPONENT_ARCHITECTURE.md — variants only propagate through motion
- * components, so the grid parent and each card wrapper are client, while
- * the card itself stays server-renderable.
+ * Flat logo/name grid (Design System v2 §6 — the "enterprise partners" wall).
+ * Cells are separated by hairline borders (no cards, no shadow, no gap-fill
+ * blocks on partial rows): a top/left frame on the list plus right/bottom
+ * borders per cell. Opacity-only stagger so the hairline seams stay stable
+ * during the reveal.
  *
- * Used by both Certifications and TryHackMe sections so they share the
- * exact same grid layout, spacing, and reveal behavior.
+ * Shared by Certifications and TryHackMe so both render the same credential
+ * wall. Variants only propagate through motion components, hence the client
+ * boundary here while each CertificationCard stays server-renderable.
  */
 export function CertificationGrid({ certs }: { certs: Certificate[] }) {
   return (
-    <motion.div
+    <motion.ul
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true, margin: "-80px" }}
       variants={staggerChildren}
-      className="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
+      className="grid grid-cols-1 border-t border-l border-border-subtle sm:grid-cols-2 lg:grid-cols-3"
     >
       {certs.map((cert) => (
-        <motion.div key={cert.id} variants={fadeUp} whileHover={subtleHover}>
+        <motion.li
+          key={cert.id}
+          variants={fadeIn}
+          className="border-r border-b border-border-subtle"
+        >
           <CertificationCard cert={cert} />
-        </motion.div>
+        </motion.li>
       ))}
-    </motion.div>
+    </motion.ul>
   );
 }

components/certifications/certifications.tsx

@@ -12,7 +12,9 @@ export function Certifications() {
     <SectionPremium id="certifications" spacing="normal" accentLine="top">
       <SectionHeader
         eyebrow="Credentials"
-        title="Certifications & Learning"
+        index="06"
+        title="Certifications &"
+        titleAccent="learning"
         subtitle="Professional credentials and continuous education"
       />
       <CertificationGrid certs={certs} />

components/certifications/tryhackme-section.tsx

@@ -12,7 +12,9 @@ export function TryHackMeSection() {
     <SectionPremium id="tryhackme" spacing="normal" accentLine="top">
       <SectionHeader
         eyebrow="TryHackMe"
-        title="Learning Paths & Rooms"
+        index="07"
+        title="Learning paths &"
+        titleAccent="rooms"
         subtitle="Hands-on security challenges and practice"
       />
       <CertificationGrid certs={achievements} />

components/contact/contact-section.tsx

@@ -9,7 +9,9 @@ export function ContactSection() {
     <SectionPremium id="contact" spacing="spacious" accentLine="top">
       <SectionHeader
         eyebrow="Contact"
-        title="Let's work together"
+        index="09"
+        title="Let's work"
+        titleAccent="together"
         subtitle="Have a project or opportunity? Get in touch"
         maxWidth="md"
       />

components/experience/experience-item.tsx

@@ -2,20 +2,50 @@ import {
   SectionPremium,
   SectionHeader,
 } from "@/components/layout/section-premium";
-import { ExperienceList } from "@/components/experience/experience-list";
+import {
+  NumberedDetailList,
+  type DetailListItem,
+} from "@/components/shared/numbered-detail-list";
 import { getExperience } from "@/lib/data";
 
 export function ExperienceTimeline() {
   const experiences = getExperience();
 
+  const items: DetailListItem[] = experiences.map((exp) => {
+    const isOngoing = exp.endDate === null;
+    const end = isOngoing ? "Present" : formatMonthYear(exp.endDate as string);
+    return {
+      id: `${exp.company}-${exp.startDate}`,
+      title: exp.role,
+      meta: `${exp.company} · ${formatMonthYear(exp.startDate)} — ${end}`,
+      tag: isOngoing ? "Present" : exp.company,
+      tagHighlight: isOngoing,
+      bullets: exp.achievements,
+    };
+  });
+
   return (
     <SectionPremium id="experience" spacing="normal" accentLine="top">
       <SectionHeader
         eyebrow="Experience"
-        title="Practical Security Work"
+        index="04"
+        title="Practical security"
+        titleAccent="work"
         subtitle="Professional roles and hands-on security experience"
       />
-      <ExperienceList experiences={experiences} />
+      <NumberedDetailList items={items} ariaLabel="Work experience" />
     </SectionPremium>
   );
 }
+
+/** `YYYY-MM` → "May 2025" */
+function formatMonthYear(date: string): string {
+  const [year, month] = date.split("-").map(Number);
+  if (!year || !month) return date;
+  const formatted = new Date(Date.UTC(year, month - 1, 1));
+  return formatted.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    timeZone: "UTC",
+  });
+}