Skip to main content

Documentation Index

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

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

The Case Studies page (/case-studies) turns project post-mortems into boss-fight narratives. The headline reads BOSS LEVELS in GlitchText, with the subtitle DEEP DIVES INTO MAJOR PROJECTS. As the visitor scrolls through the article, a fixed vertical progress bar on the right side of the screen labelled BOSS HP drains from full to empty, rendered in neon-magenta. The single case study shipped in the source — THE LEGACY MONOLITH — is structured as a boss encounter card, an objective panel, a strategy step list, a terminal battle log, and a two-column victory and loot outcome block.

​
BOSS HP Scroll Indicator

The scroll progress bar is driven by Framer Motion’s useScroll and useSpring hooks: 
const containerRef = useRef(null);
const { scrollYProgress } = useScroll({ target: containerRef });
const scaleY = useSpring(scrollYProgress, {
  stiffness: 100,
  damping: 30,
  restDelta: 0.001,
});

// Fixed right-side bar
<motion.div
  className="w-full bg-neon-magenta origin-top"
  style={{ scaleY, height: "100%" }}
/>
<div className="absolute font-hud text-neon-magenta rotate-[-90deg] tracking-widest">
  BOSS HP
</div>
useSpring adds physical spring damping to the raw scroll progress so the bar follows scroll position with a slight lag, mimicking the momentum of a health-bar drain. The bar is hidden on mobile.

​
Article Container

The case study content lives inside a single <article> element. Each logical section of the case study is a <section> inside this article. The sections scroll vertically and use whileInView animations for progressive reveal.

​
Boss Card Section

The first section introduces the boss as a character card — a horizontal flex row of the boss portrait and the boss stats:
FieldValue
NameBOSS: THE LEGACY MONOLITH
HP999,999
TypeSPAGHETTI CODE
DescriptionA 10-year-old enterprise application built on jQuery and prayers. It was slow, unmaintainable, and actively hostile to new features.
// Boss portrait: pixel-border box with pulsing icon and diagonal stripe pattern
<div className="w-48 h-48 bg-arcade-black pixel-border border-neon-magenta
                flex items-center justify-center relative overflow-hidden shrink-0">
  <BossIcon size={64} className="text-neon-magenta animate-pulse" />
</div>

​
Objective Section

<section>
  <h3>OBJECTIVE</h3>
  <div>
    Migrate the entire frontend to React without breaking existing functionality
    for 50,000 daily active users. Zero downtime allowed.
  </div>
</section>

​
Strategy Section

Four strategy steps are rendered as a staggered list of motion.div elements, each animating from x: -20, opacity: 0 to x: 0, opacity: 1 with a delay per index:
1

STEP 1 — Strangler Fig Pattern

Wrap the legacy app in a React shell. New features are built in React while the old jQuery app continues to run inside.
2

STEP 2 — Micro-frontends

Replace one route at a time. Each page is migrated independently, reducing risk per deployment.
3

STEP 3 — Shared State

Sync Redux with legacy window objects so both the React shell and jQuery internals read from the same data source during the transition period.
4

STEP 4 — Final Blow

Delete jQuery. Once all routes are migrated, remove the dependency entirely.
const strategy = [
  "Strangler Fig Pattern: Wrap legacy app in a React shell.",
  "Micro-frontends: Replace one route at a time.",
  "Shared State: Sync Redux with legacy window objects.",
  "Final Blow: Delete jQuery.",
];

​
BUG BOSS BATTLE (Terminal Log)

A scrollable terminal box renders a turn-by-turn RPG-style migration log. Player moves are highlighted in neon-green and critical hits from the boss appear in neon-magenta: 
> Player uses 'npm install react'
> Legacy Monolith counters with 'Dependency Conflict'!
> Critical hit! Build fails.
> Player uses 'Webpack Config Override'
> It's super effective!
> Legacy Monolith uses 'Memory Leak'
> Player uses 'useEffect cleanup'
> Memory Leak was neutralized.

​
Victory and Loot Sections

The final section is a two-column grid:

VICTORY

An unordered list of three outcome metrics:
  • Page load time reduced by 60%
  • Developer onboarding cut from 2 weeks to 2 days
  • Zero downtime during migration

LOOT DROPPED

Three badge-style tags in neon-yellow:
  • Webpack Mastery +10
  • Patience +99
  • Legacy Whisperer Title

​
Adding a New Case Study

1

Duplicate the article element

The current case study lives in a single <article> element. To add a second boss level, append another <article> below the first inside the same container. The scroll progress bar tracks the entire page.
2

Update the boss card details

Change the boss title, HP, TYPE, and description. Each boss should have a unique accent colour to differentiate it visually.
3

Rewrite the objective panel

Edit the text inside the objective section.
4

Replace the strategy array

Update the strategy array with the new case study’s steps. The list length is dynamic — add or remove strings freely.
5

Update the battle log

Replace the entries inside the terminal box with your own migration or incident log lines.
6

Update victory metrics and loot

Edit the victory list items and the loot badge tags to match your actual project outcomes.
The BOSS HP bar is a single useSpring value tied to the entire page’s scrollYProgress. If you add multiple very long case study articles, the bar will appear to drain too quickly at the top and plateau at the bottom. Consider switching to a per-section useScroll instance for each article if the page grows beyond two case studies.

Build docs developers (and LLMs) love

Get started for freeTalk to us