Skip to main content

Documentation Index

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

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

The Case Studies page goes deeper than the Projects grid — each entry here tells a before-and-after story about a significant piece of work. Three case studies are presented as parchment-coloured scrolls. Each scroll has a WaxSeal component that acts as a toggle: in its closed state only a brief summary is visible; clicking the seal breaks it open and reveals the full written account below.

​
Route

#/case-studies
Navigate to #/case-studies or click the Case Studies link in the site navigation.

​
Visual Layout

Parchment Scroll Cards

Each case study is displayed inside a card styled to resemble aged parchment — warm off-white background, slightly irregular edges, and a serif or calligraphic typeface. The visual contrast with the dark site background is deliberate and dramatic.

WaxSeal Toggle

A circular wax seal SVG sits at the top right of each scroll. In the closed state the seal is intact. Clicking it triggers a break-animation and expands the details section below the summary.

Summary Section

Always visible. A single sentence or two that communicates the outcome of the case study at a glance (e.g. “40% increase in successful transmutations”).

Details Section

Hidden until the wax seal is clicked. Contains a full paragraph describing the problem, approach, and solution. Expands with a smooth height animation.

​
Data & Configuration

Case studies are stored in the F array inside assets/main.js: 
// assets/main.js — Case Studies data (array F)
const F = [
  {
    id: 1,
    title: 'The E-Commerce Hex',
    summary:
      'A complete overhaul of a cursed checkout flow, resulting in a 40% ' +
      'increase in successful transmutations (conversions).',
    details:
      'The old system was bound by ancient, tangled scripts that caused the ' +
      'cart to vanish into the ether. By rewriting the core logic in React and ' +
      'implementing a strict state machine, we banished the bugs and smoothed ' +
      'the path for users.',
  },
  {
    id: 2,
    title: 'Summoning the Design System',
    summary:
      'Forged a unified component library from the chaotic fragments of ' +
      'three different products.',
    details:
      'Standardized the visual language into a single source of truth. Built ' +
      'with Tailwind and Radix UI, ensuring accessibility was baked into every ' +
      'component, not sprinkled on as an afterthought.',
  },
  {
    id: 3,
    title: 'Performance Exorcism',
    summary:
      'Banished blocking scripts and heavy assets to improve load times ' +
      'from 8s to 1.2s.',
    details:
      'Implemented aggressive code-splitting, optimized image delivery, and ' +
      'moved heavy computations to Web Workers. The site now loads faster ' +
      'than a blink.',
  },
];

​
Field reference

FieldTypePurpose
idnumberUnique identifier; used as the React list key and the open/closed state key
titlestringCase study heading displayed at the top of the scroll
summarystringBrief outcome statement — always visible above the seal
detailsstringFull narrative — hidden until the wax seal is clicked

​
Customisation

1

Edit an existing case study

Update the summary and details strings in the relevant F array object. The summary should be a single punchy outcome statement; the details can be multiple sentences covering problem, approach, and result.
2

Add a new case study

Append a new object to the F array with a unique id, a title, a summary, and details. A new scroll card will render automatically.
3

Add metrics or bullet points to details

The details field is rendered as a plain string inside a <p> tag. To include bullet points or formatted metrics, convert the details field to JSX within the CaseStudyScroll component and render structured markup instead of a raw string.
4

Change the parchment colour

The scroll background colour is a CSS custom property defined on the .scroll-card class (or Tailwind utility). Adjust the background and border colour values to change the parchment tone — anything from a warm cream to a darker vellum shade works within the aesthetic.
5

Replace the WaxSeal design

The WaxSeal component renders an SVG circle with decorative elements. Open the component file and swap the inner SVG artwork to match your preferred seal motif. Keep the click handler and open/closed state prop wiring intact.

​
Key Components

ComponentDescriptionDocs
CaseStudyScrollParchment-styled card wrapper; manages the open/closed state for its own details sectionInternal
WaxSealClickable SVG wax seal; accepts isOpen and onClick props/components/wax-seal

​
Interactive Behaviour

Each CaseStudyScroll maintains its own useState boolean for whether it is open. Clicking the WaxSeal toggles that boolean. When isOpen transitions from false to true, the details section animates from height: 0 to its natural height using a Framer Motion layout animation. The seal SVG plays a short “crack” animation on the first open.
Each scroll manages its own open/closed state independently — opening one scroll does not close the others. This allows visitors to compare the details of multiple case studies simultaneously. If you prefer an accordion behaviour (only one open at a time), lift the open state up to the parent page component and pass a shared setter to each scroll.
The WaxSeal animation plays once per page mount — if a visitor navigates away and returns, the seal will be in its closed (unbroken) state again and the animation will play fresh on the next click.
Case studies are most effective when the summary leads with a concrete metric or outcome (percentages, time savings, user counts). Visitors skim summaries to decide whether to open the full details — a quantified result converts that decision in your favour far more reliably than a vague description.

Build docs developers (and LLMs) love

Get started for freeTalk to us