Skip to main content

Documentation Index

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

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

The Case Studies page (/case-studies) presents in-depth technical write-ups under the heading “Case Studies in Sorcery”. Each study narrates a real engineering challenge through the metaphor of a magical ritual — listing the tools and technologies used as “ingredients”, describing the implementation approach as the “ritual”, and summarising the outcome as the “result”. A fixed SVG smoke effect drifts behind the content to reinforce the atmospheric aesthetic.

​
Layout

Background smoke effect. A fixed SVG element with 20% opacity sits behind the page content. It uses an feTurbulence filter (generating organic noise) piped into a feDisplacementMap to distort a base rectangle, producing the illusion of slowly drifting smoke. The SVG is positioned fixed and inert so it never intercepts pointer events. Three-column card layout. Each case study card is divided into three columns:
  • Left column — Ingredients. A vertical list of the technologies and tools used, rendered as styled badge-like items (e.g. React, Webpack Module Federation).
  • Centre/Right columns — Ritual & Result. The ritual column holds a prose description of the approach taken. Below it, the result is highlighted in a bordered box with a left-side turquoise accent bar, making the measurable outcome immediately scannable.
Scroll animations. Each card is wrapped in a Framer Motion element with a whileInView trigger. Cards start hidden and offset downward (opacity: 0, y: 50) and animate to their natural position (opacity: 1, y: 0) once they enter the viewport.

​
Case Studies Data

Both case studies are stored in the Ct array in assets/main.js. Each object contains an id, title, subtitle, ingredients array, ritual prose string, and result string. 
const Ct = [
  {
    id: 1,
    title: "The Great Migration",
    subtitle:
      "Transmuting a monolithic beast into nimble micro-frontends",
    ingredients: [
      "React",
      "Webpack Module Federation",
      "TypeScript",
      "Patience",
    ],
    ritual:
      "The existing architecture was a tangled web of dependencies that took eons to build. By drawing a new architectural summoning circle, we isolated domains into separate micro-frontends. The ritual required careful orchestration of shared state and routing, ensuring the user experience remained seamless while development velocity increased tenfold.",
    result:
      "Build times reduced from 15 minutes to 45 seconds. Five separate covens (teams) can now deploy independently without stepping on each other's robes.",
  },
  {
    id: 2,
    title: "Performance Alchemy",
    subtitle:
      "Turning leaden load times into golden Core Web Vitals",
    ingredients: [
      "Next.js",
      "Redis",
      "Lighthouse",
      "Dark Arts of Caching",
    ],
    ritual:
      "The client's e-commerce grimoire was sluggish, losing impatient souls before they could purchase. We implemented a multi-layered caching strategy, static generation for product pages, and edge-computing for personalized pricing. Heavy third-party scripts were banished to web workers.",
    result:
      "LCP dropped from 4.2s to 1.1s. Conversion rates increased by 23%, proving that speed is indeed a powerful spell.",
  },
];

​
Adding a Case Study

1

Open the Ct array in assets/main.js

Find the Ct array declaration inside the CaseStudiesPage component in assets/main.js. You will see the two existing entries for “The Great Migration” and “Performance Alchemy”.
2

Append a new case study object

Add a new object to the Ct array. Ensure you include all six keys so the three-column layout and the highlighted result box render correctly:
{
  id: 3,
  title: "Your Project Title",
  subtitle: "A one-line description of the challenge",
  ingredients: [
    "Technology One",
    "Technology Two",
    "Technology Three",
  ],
  ritual:
    "Describe the problem context and the approach you took to solve it. Write in the mystical narrative style used by the existing entries.",
  result:
    "State the measurable outcome — numbers, percentages, or qualitative improvements.",
}
The id should be unique. The new card will animate into view with the same whileInView scroll trigger as the existing entries.

Build docs developers (and LLMs) love

Get started for freeTalk to us