Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-web/llms.txt

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

The Case Studies page (/case-studies) is the most design-intensive page in the portfolio. It opens with the headline CASE_STUDIES.PDF and the subtitle Deep dives into complex problems. Two case studies follow, each using a radically different visual framing. MediMetrics PRO 2000 is presented as an enterprise software product spec sheet — a gradient dark panel with a corner “100% SUCCESS” starburst badge, a three-column grid of problem/decision/result narrative panels, and a SYSTEM REQUIREMENTS sidebar listing the tech stack. Merch Manager is presented as a terminal session — a macOS-style window chrome with three coloured dots, a root@portfolio prompt, and the narrative delivered through simulated cat, ./execute_solution.sh, and grep "skills" commands.

​
Page Structure

// Case Studies page component (minified identifier: sm)
const CaseStudiesPage = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    className="max-w-5xl mx-auto pb-16"
  >
    {/* Header */}
    <div className="text-center mb-12">
      <h2 className="font-display text-4xl text-y2k-turquoise text-glow-teal mb-2">
        CASE_STUDIES.PDF
      </h2>
      <p className="font-code text-sm text-gray-400">Deep dives into complex problems.</p>
    </div>

    {/* Case Study 1: MediMetrics PRO 2000 */}
    <div className="relative bg-gradient-to-br from-gray-900 to-black border-4 border-y2k-violet p-8 shadow-[16px_16px_0px_rgba(167,139,250,0.2)] mb-16">
      {/* Starburst badge */}
      {/* 3-column grid: sidebar (title + sys reqs + gear icon) | narrative (3 panels) */}
    </div>

    {/* Case Study 2: Merch Manager — terminal window */}
    <div className="bg-black border border-gray-800 rounded-md overflow-hidden">
      {/* macOS chrome dots */}
      {/* Terminal prompt + cat/execute/grep narrative */}
    </div>
  </motion.div>
);

​
Case Study 1 — MediMetrics PRO 2000

Visual Style

A bg-gradient-to-br from-gray-900 to-black border-4 border-y2k-violet container with a dramatic shadow-[16px_16px_0px_rgba(167,139,250,0.2)]. A rotating starburst badge in the top-right corner shows 100% SUCCESS in bold black text on a yellow-to-purple gradient circle.

Tech Stack

Listed in the SYSTEM REQUIREMENTS sidebar box with teal Check icons: React 18+, TypeScript, D3.js, Tailwind CSS. A slowly spinning Settings gear icon (animate-spin-slow) below the tech stack completes the enterprise software aesthetic.

​
Narrative Panels

Three left-bordered panels make up the main content column (lg:col-span-2):
Left border: border-l-4 border-y2k-violet
Healthcare professionals were drowning in data. The existing dashboard was cluttered, slow, and lacked visual hierarchy, making it difficult to spot critical patient trends quickly during rounds.

​
MediMetrics Tech Stack Reference

// SYSTEM REQUIREMENTS sidebar — MediMetrics PRO 2000
const mediMetricsStack = [
  "React 18+",
  "TypeScript",
  "D3.js",
  "Tailwind CSS",
];

​
Case Study 2 — Merch Manager

Visual Style

A bg-black border border-gray-800 rounded-md terminal window with a macOS-style bg-gray-900 title bar containing a red, yellow, and green dot. The prompt reads root@portfolio:~/case-studies/merch-manager in muted gray.

Tech Stack

Revealed by the simulated grep "skills" results.log command: Zustand (complex state management) and dnd-kit (drag-and-drop interfaces). The full application stack applied across the case study narrative: Next.js, PostgreSQL, Prisma.

​
Terminal Narrative

The case study is told through three simulated shell commands: 
$ cat problem.txt
# Retail merchandising relies heavily on spreadsheets.
# Inventory tracking was manual, error-prone, and disconnected
# from the actual visual layout of the store.

$ ./execute_solution.sh
[>] Initializing Next.js application...
[>] Connecting to PostgreSQL via Prisma...
[>] Building drag-and-drop visualizer...
# I built a full-stack application that combined inventory data
# with a visual floor plan editor. Users could drag products onto
# shelves virtually, and the system would automatically calculate
# if the physical dimensions fit and update inventory requirements.

$ grep "skills" results.log
• Complex state management (Zustand)
• Drag and drop interfaces (dnd-kit)
• Relational database design
• API route optimization
_   ← blinking cursor (animate-pulse)

​
Adding a New Case Study

This is a pre-built static site. The repository contains only compiled output — there is no src/ directory or editable source files. The customisation steps below describe changes that must be made in the original source project before rebuilding.
1

Choose a visual format

The two existing case studies use different frames — product-spec panel for MediMetrics and terminal readout for Merch Manager. For a new case study, pick a format that fits the project’s domain. Options include: the product spec style, the terminal style, or a new retro format (e.g., a PowerPoint slide deck parody, a Geocities project page).
2

Write the narrative sections

Every case study should cover at minimum: the problem, the design/technical decisions, and the result with measurable outcomes. Use the three-panel left-border layout (violet/turquoise/lime) for the product spec style, or the cat/./execute/grep command structure for the terminal style.
3

Build the container

In the source project, for a product-spec style case study, copy the bg-gradient-to-br from-gray-900 to-black border-4 border-y2k-violet container and update the starburst badge text, the tech stack sidebar, and the three narrative panels. For a terminal style, copy the bg-black border border-gray-800 rounded-md block and update the prompt path and command output.
4

Add `mb-16` between cases

Both existing case studies are siblings in the max-w-5xl mx-auto pb-16 wrapper. The first has mb-16 to create separation. Replicate this on any new case study containers to maintain consistent vertical rhythm.
5

Update the page header subtitle

The <p className="font-code text-sm text-gray-400"> currently reads Deep dives into complex problems. — update this in the source project if you add a third case study to set appropriate context (e.g., Three case studies. Three different domains.).
The MediMetrics case study is thematically connected to the MediMetrics Dashboard project card on the Projects page (id: dashboard). The Projects page shows the tech stack as ["TypeScript", "React", "D3.js", "Tailwind"] — consistent with the React 18+, TypeScript, D3.js, Tailwind CSS listed here. If you update either page, keep them in sync to avoid contradictions.
The starburst badge on MediMetrics uses an inline transform rotate-12 and z-20 to escape the panel’s padding. If you change the panel’s overflow property, the badge will be clipped. Keep overflow unset (or overflow-visible) on the outer case study container.
The terminal case study’s blinking cursor (<p className="text-y2k-lime mt-6 animate-pulse">_</p>) is a single underscore character. This is the only instance of animate-pulse on a text element — it gives the terminal a genuinely idle feeling. If you duplicate the terminal style for a new case study, include this line at the end of the command output.

Build docs developers (and LLMs) love

Get started for freeTalk to us