The Grimoire is the case studies page of the Digital Alchemy portfolio, rendered at routeDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-alchemy/llms.txt
Use this file to discover all available pages before exploring further.
/case-studies (with an optional /:slug parameter for deep-linking). It presents two in-depth project narratives inside a rendered open book — a physical codex whose right-hand page turns with a 3D spring animation each time the visitor navigates between chapters.
What Renders on This Page
The page heading section renders with the usual Framer Motion entrance:- Heading: “The Grimoire” in large parchment serif
- Subheading: “Detailed accounts of complex incantations” in uppercase turquoise
Grimoire component renders at up to max-w-4xl wide with a 3/2 aspect ratio to maintain the proportions of an open folio. The book is rendered as a styled div with a dark wooden cover (bg-[#2A1B12], border-4 border-[#1A100A]) and a visible spine running down the vertical center.
Grimoire Component
The open-book case study viewer. Renders two facing pages side by side, with a left panel for the chapter title and navigation controls, and a right panel for the full case study narrative. Supports 3D page-turn transitions via Framer Motion’s
rotateY spring animation.Layout: Two Pages, One Book
The open book is split into two halves by a central spine element: Left page — Chapter navigation- Chapter number label (e.g. “Chapter 1”)
- Animated chapter title (slides up/down on transition)
- Previous and next chevron buttons (Lucide
ChevronLeft/ChevronRighticons) for moving between case studies
- Full narrative text rendered with
AnimatePresenceand Framer MotionrotateYspring transitions - Each page turn animates from
rotateY: ±90°(depending on direction) torotateY: 0, giving the illusion of a physical page being turned - The
transformOriginis set toleft centerso the turn pivots at the spine
The Two Case Studies
Chapter 1 — The E-Commerce Awakening
Chapter 1 — The E-Commerce Awakening
The challenge: A merchant guild approached in 2022 with a dire request: their digital storefront was cursed with slow load times and a confusing user journey. Cart abandonment was at an all-time high.The solution: A complete rewrite of the ancient monolithic architecture using Next.js Static Site Generation (SSG) to pre-render all product pages. This ensured lightning-fast delivery across every device and geography.The result: A 60% increase in conversion rate and a storefront described as feeling “as swift as a teleportation spell.”The case study opens with a decorative large drop-cap “I” in turquoise — a typographic flourish that reinforces the manuscript aesthetic of the book component.
Chapter 2 — The Real-time Scrying Glass
Chapter 2 — The Real-time Scrying Glass
The challenge: Building a dashboard for monitoring magical leylines (server infrastructure) that could handle thousands of events per second without freezing the browser.The solution: A custom WebGL renderer built with Three.js, offloading heavy visual computation to the GPU. Data was streamed via WebSockets, producing a mesmerizing real-time visualization of network traffic across the infrastructure.The result: The scrying glass remains in active use, described as “a testament to the power of optimized rendering loops.”The case study opens with a drop-cap “W” in turquoise. The Three.js + WebSocket architecture is the most technically complex project described in the portfolio.
Navigation and Transitions
TheAnimatePresence mode="wait" wrapper ensures the outgoing page fully exits before the incoming page begins its entrance — preventing two half-rotated pages from appearing on screen simultaneously.
Route Information
| Property | Value |
|---|---|
| Route path | /case-studies, /case-studies/:slug |
| React component | CaseStudies (internal name x) |
| Key components | Grimoire |
| Animation library | Framer Motion (AnimatePresence, rotateY spring) |
| Lucide icons | ChevronLeft, ChevronRight |
Both routes (
/case-studies and /case-studies/:slug) render the same CaseStudies component, meaning the slug parameter is available for future use but is not yet consumed to pre-select a specific chapter on page load.