Skip to main content

Documentation Index

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

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

The Case Studies page — labeled “CASE STUDIES” in the top navigation — is for detailed technical narratives that go far beyond a project card. Titled “Mission Dossier” in the UI, it presents a single scrollable case study with four structured sections, a fixed right-hand scroll-progress bar, and outcome metrics displayed as large stat tiles.

​
Route

#/case-studies
Rendered by the Case Studies page component in main.js, registered as the case-studies child route under /.

​
Static Shell

The file pages/CaseStudies.html is the standalone entry point: 
<script>window.__STATIC_PAGE_ROUTE__ = "/case-studies";</script>

​
Projects vs. Case Studies

Projects Page

What it is: A broad showcase of your portfolio. Each entry gets a name, one-sentence description, tech stack, and links. Designed for quick scanning — visitors read a project card in under 10 seconds.

Case Studies Page

What it is: A long-form narrative for one (or a few) significant projects. Covers the problem, your process, the obstacles you hit, and measurable outcomes. Visitors spend minutes here, not seconds.
Case studies are most powerful for interviews and client pitches — they show how you think, not just what you built.

​
Scroll Progress Indicator

A fixed vertical progress bar sits at right: 2rem, top: 50% (visible only at lg: breakpoints). It contains:
  • A motion.div that scales from origin-top as scrollYProgress increases (driven by useSpring with stiffness: 100, damping: 30)
  • A small white dot that tracks the current scroll position
// The spring-smoothed scroll value drives scaleY:
const { scrollYProgress } = useScroll();
const smoothProgress = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });

​
Page Structure: The Four Sections

The case study content lives inside max-w-4xl mx-auto pt-12 pb-32 with space-y-32 between sections. Each section follows the same visual pattern: a circular icon badge on the left + section heading.

​
1 — Mission Brief

Uses the Target icon in text-aurora-teal. This section answers: What was the problem? The default content describes refactoring a legacy frontend monolith — replace it with your actual problem statement. Keep it vivid and concrete: quantify the pain (e.g. “8-second load times”, “3 support tickets per day”). 
// Find the first <section> block in the Case Studies page component:
<p className="text-lg text-slate-300 leading-relaxed">
  {/* Replace with your problem description */}
</p>

​
2 — Flight Plan

Uses the Route icon in text-aurora-violet. This section answers: How did you approach it? Renders as a 3-column card grid. Each card has a step number (large ghost text), a step title, and an animated progress bar that fills on scroll into view (whileInView). The default steps are:
  1. Audit & Mapping
  2. Component Isolation
  3. Warp Drive Integration (Next.js)
The steps above are example defaults. Replace them with your actual implementation phases by editing the Flight Plan section of the Case Studies page component.
// Find this array inside the Flight Plan section:
["Audit & Mapping", "Component Isolation", "Warp Drive Integration (Next.js)"]
// Replace with your actual implementation phases

​
3 — Course Corrections

Uses the TriangleAlert icon in text-sunset-orange. This section answers: What went wrong, and how did you fix it? Two sub-sections separated by a left orange border:
LabelColorContent
ANOMALY DETECTEDtext-sunset-orangeDescribe the obstacle or bug
RESOLUTION APPLIEDtext-aurora-tealDescribe your fix or pivot
Add as many anomaly/resolution pairs as your project had significant turning points.

​
4 — Re-entry & Results

Uses the CircleCheckBig icon in text-aurora-cyan. This section answers: What were the outcomes? Four metric tiles in a 2×4 grid. Each tile has a large colored value and a small uppercase label: 
// Find this metrics array in the Case Studies page component:
[
  { label: "Load Time",   val: "-60%",  color: "text-aurora-cyan"   },
  { label: "Lighthouse",  val: "98",    color: "text-aurora-teal"   },
  { label: "Bundle Size", val: "-45%",  color: "text-aurora-violet" },
  { label: "Uptime",      val: "99.9%", color: "text-white"         },
]
// Replace with your real metrics
The metrics above are example placeholder values. Replace them with real numbers from your project’s monitoring, Lighthouse reports, or bundle analysis tools.

​
Structuring Your Own Case Study

1

Define the problem clearly

In the Mission Brief section, describe the situation before you arrived. Use numbers where you have them: response times, error rates, team frustrations. A sharp problem statement makes the resolution feel earned.
2

Document your phases

In the Flight Plan section, list the major phases of your work. Three phases is ideal for the 3-column grid, but you can add more — the grid wraps automatically with grid-cols-1 md:grid-cols-3.
3

Be honest about obstacles

In Course Corrections, describe at least one real thing that didn’t go as planned. Interviewers and clients trust engineers who acknowledge complexity more than those who claim everything went smoothly.
4

Anchor results to real metrics

In Re-entry & Results, use actual numbers from monitoring, Lighthouse, bundle analysis, or user feedback. If you don’t have numbers, use qualitative outcomes: “Eliminated the most common support request”, “Enabled the team to ship 2× faster”.

​
Multiple Case Studies

The current layout supports a single case study. To support multiple, consider one of two approaches:
Add child routes under case-studies in the React Router config, e.g. case-studies/redesign-core and case-studies/api-migration. Each renders its own case study component. Update the Case Studies index page to link to each sub-route.
Add a useState selector at the top of the Case Studies page component to switch between multiple case study data objects. The four-section structure renders the selected study’s data dynamically.

Build docs developers (and LLMs) love

Get started for freeTalk to us