RitualReport: Multi-Section Case Study Page Renderer

// data/caseStudies.js
{
  id: string,        // URL-safe identifier
  title: string,     // Full display title including "RITUAL REPORT:" prefix
  sigilId: string,   // Sigil ID used for the header icon and background watermark
  sections: [
    {
      heading: string,  // Section heading, rendered uppercase
      content: string,  // Body paragraph text
    }
  ]
}

// data/caseStudies.js
const caseStudies = [
  {
    id: "nexus-rebuild",
    title: "RITUAL REPORT: NEXUS DASHBOARD REBUILD",
    sigilId: "case-studies",
    sections: [
      {
        heading: "Problem",
        content:
          "The legacy dashboard was suffering from severe performance degradation when rendering more than 500 data points. The DOM was bloated, and React was struggling to reconcile the massive component tree during real-time updates.",
      },
      {
        heading: "Goal",
        content:
          "Refactor the visualization layer to handle 10,000+ data points at 60fps without sacrificing the interactive tooltips and glowing neon aesthetics required by the design spec.",
      },
      {
        heading: "Process",
        content:
          "I initiated a profiling ritual using Chrome DevTools to identify the exact bottlenecks. The primary issue was the overhead of React managing thousands of SVG nodes. I decided to pivot the rendering strategy.",
      },
      {
        heading: "Design Decisions",
        content:
          "Maintained the visual language but shifted the heavy lifting from SVG to Canvas for the data points, while keeping SVG for the axes and interactive overlays to preserve accessibility and ease of styling.",
      },
      {
        heading: "Dev Decisions",
        content:
          "Implemented a hybrid approach: D3.js calculates the math and scales, React manages the state and SVG overlays, and a custom Canvas renderer draws the actual data points. Used requestAnimationFrame to batch updates.",
      },
      {
        heading: "Testing & Debugging",
        content:
          "Encountered a bug where the Canvas resolution looked blurry on Retina displays. Banished it by scaling the canvas internal resolution by window.devicePixelRatio and scaling it back down with CSS.",
      },
      {
        heading: "Result",
        content:
          "Achieved a stable 60fps rendering 15,000 data points. The payload size decreased by 40%, and the time-to-interactive improved by 2.5 seconds.",
      },
      {
        heading: "Skills Demonstrated",
        content:
          "Performance Profiling, Canvas API, D3.js, React Optimization, Problem Solving.",
      },
    ],
  },
  {
    id: "accessible-alchemy",
    title: "RITUAL REPORT: ACCESSIBLE ALCHEMY UI",
    sigilId: "projects",
    sections: [
      {
        heading: "Problem",
        content:
          "The initial version of the Alchemy UI library looked magical but was completely unusable for keyboard navigators and screen reader users. The custom interactive elements lacked semantic meaning.",
      },
      {
        heading: "Goal",
        content:
          "Retrofit the entire component library to meet WCAG 2.1 AA standards without compromising the complex animations and visual flair.",
      },
      {
        heading: "Process",
        content:
          "Audited every component using VoiceOver and axe DevTools. Mapped out the missing ARIA attributes and focus management requirements.",
      },
      {
        heading: "Dev Decisions",
        content:
          "Integrated Radix UI primitives as the base layer for complex components like Modals and Dropdowns to handle the intricate accessibility logic (focus trapping, escape key handling), then layered the custom Framer Motion animations on top.",
      },
      {
        heading: "Result",
        content:
          "100% accessibility score in Lighthouse. The library is now fully navigable via keyboard, and screen readers correctly announce state changes.",
      },
    ],
  },
];

import { RitualReport } from "@/components/case/RitualReport";
import { caseStudies } from "@/data/caseStudies";

export default function CaseStudiesPage() {
  return (
    <main>
      {caseStudies.map((study) => (
        <RitualReport key={study.id} caseStudy={study} />
      ))}
    </main>
  );
}