Case Studies: In-Depth Technical Write-Ups at /case-studies

const caseStudies = [
  {
    id: 1,
    title: "Reducing Bundle Size by 40% With Code Splitting",
    date: "2024-09-20",
    summary:
      "How I identified the largest chunks in a Vite build, applied dynamic imports, and cut initial load time nearly in half.",
    techStack: ["Vite", "React", "Rollup", "Lighthouse"],
    sections: [
      {
        heading: "The Problem",
        body: "The production bundle was shipping 800KB of JavaScript on first load...",
      },
      {
        heading: "The Solution",
        body: "Using Vite's dynamic import() at route boundaries and lazy-loading...",
      },
      {
        heading: "The Outcome",
        body: "Bundle size dropped from 800KB to 480KB. Lighthouse performance score...",
      },
    ],
  },
];

import WebringNav from "../components/WebringNav";
import CursorTrail from "../components/CursorTrail";
import Footer from "../components/Footer";

export default function CaseStudies() {
  return (
    <>
      <WebringNav />

      <main className="max-w-5xl mx-auto px-4">
        <h1 className="font-silkscreen text-y2k-lime text-4xl mt-10 mb-2">
          DEEP_DIVES.TXT
        </h1>
        <p className="font-vt323 text-y2k-silver text-xl mb-10">
          Long-form technical investigations. Grab a coffee.
        </p>

        {caseStudies.map((study) => (
          <article
            key={study.id}
            className="mb-16 border-t-2 border-y2k-cyan pt-8"
          >
            {/* Header */}
            <p className="font-vt323 text-y2k-darkSilver text-sm mb-1">
              {study.date}
            </p>
            <h2 className="font-silkscreen text-y2k-cyan text-2xl mb-3">
              {study.title}
            </h2>
            <p className="font-inter text-y2k-silver text-base leading-relaxed mb-4">
              {study.summary}
            </p>

            {/* Tech stack chips */}
            <div className="flex flex-wrap gap-2 mb-6">
              {study.techStack.map((tech) => (
                <span
                  key={tech}
                  className="font-vt323 text-xs text-y2k-lime border border-y2k-lime px-2 py-0"
                >
                  {tech}
                </span>
              ))}
            </div>

            {/* Sections */}
            {study.sections.map((section) => (
              <div key={section.heading} className="mb-6">
                <h3 className="font-silkscreen text-y2k-magenta text-lg mb-2">
                  {section.heading}
                </h3>
                <p className="font-inter text-y2k-silver text-base leading-relaxed">
                  {section.body}
                </p>
              </div>
            ))}
          </article>
        ))}
      </main>

      <CursorTrail />
      <Footer />
    </>
  );
}