The Case Studies app wraps portfolio work in the familiar chrome of a PDF viewer, giving the content instant credibility without requiring an actual PDF file. The entire layout is HTML and CSS — aDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt
Use this file to discover all available pages before exploring further.
bg-gray-800 toolbar sits above a scrollable white document surface — so the copy, typography, and structure are all fully editable inside CaseStudiesApp.js. The current document presents a single case study: Redefining Data Density, a fintech dashboard redesign.
Viewer Layout
The app is split into two vertical regions: Toolbar (bg-gray-900, border-b border-gray-700) — spans the full width and contains two groups of controls:
| Left group | Right group |
|---|---|
Filename: Fintech_Dashboard_Redesign.pdf | Zoom-out icon button |
| ← page button | 100% zoom label |
1 / 12 page counter | Zoom-in icon button |
| → page button | Vertical divider + Download icon button |
lucide-react: ChevronLeft, ChevronRight, ZoomOut, ZoomIn, and Download.
Document surface (flex-1 overflow-auto p-8 flex justify-center) — centres a white card (bg-white max-w-3xl shadow-2xl min-h-[800px] p-12 font-serif) that holds the case study content.
The page back/forward buttons and the zoom in/out buttons are rendered but are not wired to any state in the current implementation. They are presentational. To make them functional, add
useState hooks for currentPage and zoomLevel and update the counter and scale transform accordingly.Document Content
The white card renders a complete editorial layout with the following sections:Header
A boldfont-ui heading (text-5xl) reading “Redefining Data Density” sits above an <h2>-style subtitle: “A case study on building a high-performance financial dashboard.” The section is separated from the body by a border-b-4 border-os-teal.
Meta Grid
A three-column grid (grid grid-cols-3 gap-8) immediately below the header lists the project vitals in font-ui text-sm:
| Role | Timeline | Stack |
|---|---|---|
| Lead Frontend Engineer | 6 Months | React, D3.js, Tailwind |
text-gray-400 label above the value.
Opening Paragraph (Drop Cap)
The body opens with a visually oversized drop capital “T” (text-6xl float-left text-os-teal font-bold) preceding the lead sentence:
The challenge was simple on paper: display 10,000 live data points without dropping below 60fps, while making it look like it belongs in 2024, not 1998.
The Problem
Blockquote
A styled pull-quote inbg-gray-100 p-8 border-l-4 border-os-teal italic text-xl text-gray-700:
“We need to see everything at once, but we don’t want it to look cluttered.” — Stakeholder feedback
The Solution
Image Placeholder
A grey rectangle (w-full h-64 bg-gray-200 border border-gray-300) acts as a stand-in for a dashboard screenshot, labelled [High-fidelity Dashboard Screenshot].
Customising the Case Study
Replace the document content — edit the JSX inside the white card<div> in CaseStudiesApp.js. All copy, headings, the meta grid values, and the blockquote are plain strings in the JSX — no data array to update separately.
Change the filename in the toolbar — find the <span> containing Fintech_Dashboard_Redesign.pdf and replace it with your own filename.
Add multiple case studies — introduce a useState variable to track which study is active and render a list/grid of thumbnails as an index view. Swap the document JSX based on the selected study.