Case Studies Page: Arcade Boss Fight Project Replay

The Case Studies page reframes a deep project breakdown as a boss fight replay screen. A single case study is shown at a time, walked through three dramatic phases: introducing the problem as a boss with a full HP bar, revealing the strategy and combat moves that addressed it, and finally declaring victory with a depleted HP bar and a STAGE CLEARED banner. The animated HealthBar component drives the visual tension — its width transitions from 100% down to 0% across the three phases. Case study data is sourced from the caseStudies array in data/mockData.js, and the page always displays the first item in that array.

Route

Property	Value
Path	`/case-studies`
File (compiled)	`assets/main.js` — `CaseStudiesPage` component
Data export	`caseStudies` (exported as `c` from `mockData.js`)
Theme colors	`arcade-magenta` · `arcade-lime` · `arcade-purple`
Screen title	BOSS FIGHT REPLAY

What It Displays

The page is divided into three sequential phase blocks displayed vertically. Each phase has its own heading, HP bar state, and content block.

Phase 1 — THE BOSS

Introduces the problem or legacy system being tackled. The boss name renders with a magenta neon glow and the HP bar shows 100% — the problem is at full strength.

Element	Description
Boss name	Large `VT323` heading with `arcade-magenta` glow
Problem description	Prose block describing the nature of the challenge
HP bar	`HealthBar` component at 100% width, red fill

Phase 2 — STRATEGY

Presents the approach taken to solve the problem. The HP bar drops to 45%, indicating the boss is wounded. A strategy summary paragraph is shown alongside a list of “combos” — the specific technical decisions or actions taken.

Element	Description
HP bar	`HealthBar` at 45% width
Strategy text	Prose paragraph describing the approach
Combos list	Bulleted list of key technical moves

Phase 3 — VICTORY

Declares the outcome. The HP bar reaches 0%, the boss is defeated, and a STAGE CLEARED banner appears in lime green. A bonus stat line is listed below the banner.

Element	Description
HP bar	`HealthBar` at 0% width
Victory text	Short declaration of the outcome
STAGE CLEARED banner	Large lime pixel-font banner
Bonus	Next-step or bonus outcome string

Current Case Study

The default dataset contains one case study: Project: Overhaul.

Field	Value
Title	Project: Overhaul
Boss	The Legacy Monolith
Problem	A 5-year-old jQuery application that took 12 seconds to load and was impossible to maintain.
Strategy	Strangler fig pattern. Slowly replacing jQuery widgets with React components mounted via portals.
Combos	Webpack to Vite migration · Redux Toolkit adoption · Custom design system implementation
Victory	Load time reduced to 1.2s. Developer onboarding time cut in half. Zero downtime during migration.
Bonus	Next step: migrating the remaining REST endpoints to GraphQL.

HealthBar Component

The HealthBar (internal component) animates its fill width from 0 to its target value using Framer Motion’s whileInView trigger. This means each HP bar animates in as the user scrolls down to its phase, creating a staged reveal effect.

// Approximate HealthBar usage in CaseStudiesPage
<HealthBar
  value={100}   // Phase 1
  color="red"
/>

<HealthBar
  value={45}    // Phase 2
  color="yellow"
/>

<HealthBar
  value={0}     // Phase 3
  color="green"
/>

The page always renders caseStudies[0] — the first item in the array. There is no pagination or carousel for multiple case studies. To feature a different case study, either reorder the array so your preferred entry is first, or update the component to accept an index prop.

Animations

The HealthBar width animates via Framer Motion whileInView as each phase scrolls into the viewport:

// Approximate HealthBar animation
const barVariants = {
  hidden: { width: "0%" },
  visible: {
    width: `${value}%`,
    transition: { duration: 1.2, ease: "easeOut" },
  },
};

The STAGE CLEARED banner uses a neon-flicker CSS animation identical to the Home page headline, giving it an authentic attract-screen feel.

Data Schema

Each entry in the caseStudies array must conform to the following shape:

// data/mockData.js — case study object shape
{
  id: string,       // Unique identifier, used as React key
  title: string,    // Project title shown at the top of the replay
  boss: string,     // The "villain" — e.g. "The Legacy Monolith"
  problem: string,  // Prose description of the challenge (Phase 1)
  strategy: string, // Prose paragraph describing the approach (Phase 2)
  combos: string[], // Bulleted list of technical moves (Phase 2)
  victory: string,  // Short outcome declaration (Phase 3)
  bonus: string,    // Next-step or bonus result shown after STAGE CLEARED
}

Field Reference

Field	Type	Phase	Description
`id`	`string`	—	React key, not displayed
`title`	`string`	Header	Replay title shown above Phase 1
`boss`	`string`	Phase 1	Large glowing boss name heading
`problem`	`string`	Phase 1	Prose description of the challenge
`strategy`	`string`	Phase 2	One-paragraph strategy summary
`combos`	`string[]`	Phase 2	Bulleted list of technical actions
`victory`	`string`	Phase 3	Brief victory declaration
`bonus`	`string`	Phase 3	Bonus outcome or next-step note

Customization

Replacing the featured case study Update the first (or only) entry in data/mockData.js:

// data/mockData.js (export c)
[
  {
    id: "cs-1",
    title: "Project: Overhaul",
    boss: "The Legacy Monolith",
    problem:
      "A 5-year-old jQuery application that took 12 seconds to load and was impossible to maintain.",
    strategy:
      "Strangler fig pattern. Slowly replacing jQuery widgets with React components mounted via portals.",
    combos: [
      "Webpack to Vite migration",
      "Redux Toolkit adoption",
      "Custom design system implementation",
    ],
    victory:
      "Load time reduced to 1.2s. Developer onboarding time cut in half. Zero downtime during migration.",
    bonus: "Next step: migrating the remaining REST endpoints to GraphQL.",
  },
]

Adding multiple case studies Add additional objects to the caseStudies array. To display them, you’ll need to add navigation controls to the CaseStudiesPage component (e.g. PREV / NEXT arcade buttons) and track the active index in useState.

Keep boss short — it renders at large pixel-font size with a magenta glow. Names longer than about 25 characters may overflow on mobile viewports. Use a punchy label like "The Legacy Monolith" or "The Spaghetti API" rather than a full project name.

Sample Data

// data/mockData.js (export c)
[
  {
    id: "cs-1",
    title: "Project: Overhaul",
    boss: "The Legacy Monolith",
    problem:
      "A 5-year-old jQuery application that took 12 seconds to load and was impossible to maintain.",
    strategy:
      "Strangler fig pattern. Slowly replacing jQuery widgets with React components mounted via portals.",
    combos: [
      "Webpack to Vite migration",
      "Redux Toolkit adoption",
      "Custom design system implementation",
    ],
    victory:
      "Load time reduced to 1.2s. Developer onboarding time cut in half. Zero downtime during migration.",
    bonus: "Next step: migrating the remaining REST endpoints to GraphQL.",
  },
]

Projects

The full project gallery where this case study also appears as a cartridge card.

Writing

Long-form articles and blog posts in the instruction manual format.

Mock Data Reference

Full schema for the caseStudies export and all other mockData.js arrays.

Animations

HealthBar whileInView animation and neon-flicker CSS keyframe reference.

Arcade UI

Pages

Case Studies Page: Arcade Boss Fight Project Replay

Route

What It Displays

Phase 1 — THE BOSS

Phase 2 — STRATEGY

Phase 3 — VICTORY

Current Case Study

HealthBar Component

Animations

Data Schema

Field Reference

Customization

Sample Data

Projects

Writing

Mock Data Reference

Animations

Build docs developers (and LLMs) love

Arcade UI

Pages

Documentation Index

​Route

​What It Displays

​Phase 1 — THE BOSS

​Phase 2 — STRATEGY

​Phase 3 — VICTORY

​Current Case Study

​HealthBar Component

​Animations

​Data Schema

​Field Reference

​Customization

​Sample Data

​Related Pages

Projects

Writing

Mock Data Reference

Animations

Build docs developers (and LLMs) love

Route

What It Displays

Phase 1 — THE BOSS

Phase 2 — STRATEGY

Phase 3 — VICTORY

Current Case Study

HealthBar Component

Animations

Data Schema

Field Reference

Customization

Sample Data

Related Pages