Skip to main content

Documentation Index

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

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

The Case Studies section reframes a technical post-mortem as a boss-battle sequence. Under the heading BOSS_BATTLES, the page opens by “reviewing combat logs for Project: NEURO_LINK” — a terminal prompt that primes visitors for a staged narrative. Six battle stages then appear one by one, each delayed 800 ms from the previous, with a NeonCard per stage containing an icon, a color-coded title, a BOSS HP progress bar that animates down to its target value as the card enters view, and a one-paragraph narrative description of that phase of the project. The sequential reveal makes the project story unfold like a cutscene rather than a static wall of text. Route: /case-studies (hash: #/case-studies)
Color theme: Neon cyan (#22D3EE / --neon-cyan) for the page header; individual stage colors vary

​
The Six Battle Stages

1

STAGE 1: PROBLEM IDENTIFIED — 100 HP

Color: Cyan
The client needed a dashboard that could handle 10,000 concurrent WebSocket connections without melting the browser.
2

STAGE 2: STRATEGY — 80 HP

Color: Purple
Decided on React with Zustand for state management, and a custom WebGL renderer for the heavy data visualizations.
3

STAGE 3: BUILD — 60 HP

Color: Orange
Weeks of writing shaders, optimizing render cycles, and consuming dangerous amounts of energy drinks.
4

STAGE 4: BUG BOSS — 30 HP

Color: Magenta
Encountered a memory leak that only happened on Safari on Tuesdays. Spent 3 days tracking down an unclosed event listener.
5

STAGE 5: VICTORY — 10 HP

Color: Lime
Deployed to production. Zero downtime. The client cried tears of joy (or maybe it was the neon colors).
6

STAGE 6: NEW GAME+ — 0 HP

Color: Cyan
Now maintaining the codebase and adding “just one more feature” every sprint.

​
Sequential Reveal Animation

The stages use React state to drive a progressive disclosure animation. On mount, a setInterval fires every 800 ms and appends the next stage’s id to the visibleStages array. When all six stages are visible the interval clears itself: 
// Case studies page component (source)
const [visibleStages, setVisibleStages] = React.useState([]);

React.useEffect(() => {
  const interval = setInterval(() => {
    setVisibleStages(prev => {
      if (prev.length < stages.length) {
        return [...prev, stages[prev.length].id];
      }
      clearInterval(interval);
      return prev;
    });
  }, 800); // 800 ms between each stage reveal

  return () => clearInterval(interval);
}, []);
Each stage card checks whether its id is in visibleStages before rendering, creating the one-by-one cinematic reveal.

​
HP Bar Animation

The BOSS HP bar inside each stage card uses Framer Motion’s motion.div with conditional animation: 
// Animates to target HP width only after the stage has been revealed
<motion.div
  initial={{ width: "100%" }}
  animate={isVisible ? { width: `${stage.hp}%` } : { width: "100%" }}
  transition={{ duration: 1.2, ease: "easeOut" }}
  className={`h-full bg-neon-${stage.color}`}
  style={{ boxShadow: `0 0 10px var(--neon-${stage.color})` }}
/>
HP values drain from 100 down to 0 across the six stages, visualizing the project’s difficulty curve: the problem starts at full health, the bug boss nearly ends you at 30 HP, and by NEW GAME+ the boss is entirely defeated (0 HP).

​
Stage HP Reference

StageHPInterpretation
PROBLEM IDENTIFIED100Boss at full strength — threat unknown
STRATEGY80First hits land — a plan is forming
BUILD60Sustained damage — grind in progress
BUG BOSS30Critical phase — near defeat
VICTORY10Boss on its last legs
NEW GAME+0Boss defeated — maintenance mode begins

​
Data Structure

// Case study stages — ai array (source)
const ai = [
  {
    id: 1,
    title: "STAGE 1: PROBLEM IDENTIFIED",
    icon: ProblemIcon,
    color: "cyan",
    hp: 100,
    desc: "The client needed a dashboard that could handle 10,000 concurrent WebSocket connections...",
  },
  {
    id: 2,
    title: "STAGE 2: STRATEGY",
    icon: StrategyIcon,
    color: "purple",
    hp: 80,
    desc: "Decided on React with Zustand for state management...",
  },
  // ...four more stages
];

​
Customizing Case Studies

This is a pre-built static site — assets/main.js is a minified bundle and is not meant to be hand-edited. To customize case studies, fork or clone the original source repository, make changes to the source files, then run vite build to regenerate the bundle and redeploy.
Fork the original source repository. The current implementation is single-project (NEURO_LINK). To add a second project, add a project selector above the stage list in the source and conditionally render a different ai-style array depending on the selection. Each project gets its own six-stage narrative array. Rebuild with vite build after editing.
Fork the original source repository. The 800 ms interval value is set in the setInterval call within the useEffect in the case studies page component source. Reduce it (e.g., 500) for a faster reveal or increase it (e.g., 1200) for a more dramatic pace. Rebuild with vite build after editing.
Fork the original source repository. In the source, find the ai array and update the desc field on the relevant stage object. The HP value, color, and title can also be adjusted per stage. Rebuild with vite build after editing.
The project name NEURO_LINK is displayed in the terminal prompt at the top of the page: "Reviewing combat logs for Project: NEURO_LINK...". If you rename the featured project, update this string in the TerminalLine component call within the case studies page component source.

Build docs developers (and LLMs) love

Get started for freeTalk to us