Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spell-index/llms.txt

Use this file to discover all available pages before exploring further.

The Case Studies page re-frames detailed project write-ups as “post-mortems” — a ritualised review of completed work. The layout is a vertical timeline: a single 1 px ink-coloured line runs down the left side of a centred max-w-3xl column, and three entries hang off that line. Each entry is anchored visually by a WaxSeal component stamped with a two-digit ID (01, 02, 03), positioned at the timeline’s left edge. Entry cards enter the viewport via a x: -20 → 0 + opacity animation as the user scrolls.

​
Route

Nav labelPlain labelPath
Post-MortemsCase Studies/case-studies

​
Page header

  • Heading (h1): Post-Mortems — Cinzel typeface, amber
  • Subheading: Detailed accounts of past rituals — teal, spaced uppercase

​
Case study entries

All three entries are defined as a static array in main.js. Each WaxSeal is rendered in teal at size="md" and positioned absolutely at the far left of its entry row, centred on the top of its card.

​
01 — Resurrecting a Legacy Codebase

Subtitle: From PHP 5 to Next.js WaxSeal initials: 01 · colour: teal The client presented a monolithic application that had grown feral over a decade. The task was not merely a refactor, but an exorcism. By systematically isolating domains and introducing a GraphQL layer, the team applied the strangler-fig pattern — incrementally replacing the PHP 5 monolith without disrupting active users.

​
02 — The 100ms Prophecy

Subtitle: Optimizing Web Vitals WaxSeal initials: 02 · colour: teal A major e-commerce platform was bleeding conversions due to sluggish load times. Through aggressive code-splitting, edge caching, and critical rendering path optimisation, the team achieved a perfect Lighthouse score and a 40% increase in sales.

​
03 — Summoning the Design System

Subtitle: Creating ‘Grimoire UI’ WaxSeal initials: 03 · colour: teal UI inconsistencies threatened to fragment the product experience across multiple surfaces. A single source of truth was forged: the Grimoire UI component library, built with React, Tailwind CSS, and Storybook. It brought order to chaos and accelerated development across three separate teams.

​
Timeline layout

The vertical timeline is implemented with a single absolute left-6 md:left-8 line (w-px bg-ink) running the full height of the entries container. Each entry is positioned with left padding (pl-20 md:pl-24) to clear the line, and its WaxSeal is placed absolute left-0 top-0 -translate-x-1/2 so it straddles the line. 
/case-studies  (Case Studies — "Post-Mortems")
├── PageTransition wrapper
│   ├── Centred header
│   │   ├── h1: "Post-Mortems"
│   │   └── p: "Detailed accounts of past rituals"
│   └── Timeline column (max-w: 3xl, relative)
│       ├── Vertical line (absolute, left-6/8, w-px, bg-ink)
│       └── Entries (space-y-24)
│           ├── Entry 01 — Resurrecting a Legacy Codebase
│           │   ├── WaxSeal (initials: "01", teal, md)
│           │   └── Card (glass bg, border teal/10 → teal/30 on hover)
│           │       ├── h2: title
│           │       ├── h3: subtitle (amber)
│           │       ├── p: content
│           │       └── "Read Full Scroll →" button
│           ├── Entry 02 — The 100ms Prophecy
│           └── Entry 03 — Summoning the Design System
└── (Global) Navigation + Footer

​
Entry card interaction

Each entry card has a hover:border-teal/30 transition on its border and displays a "Read Full Scroll →" button in the footer. In the current build, this button does not navigate to a sub-route — the full content is presented inline within the card.
The scroll-triggered animation uses Framer Motion’s whileInView with viewport={{ once: true, margin: "-100px" }}, meaning each entry animates in once and stays visible even when scrolled back up.

Build docs developers (and LLMs) love

Get started for freeTalk to us