Skip to main content

Documentation Index

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

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

The Case Studies page goes deeper than the Projects page’s icon grid. Where Projects gives visitors a quick overview and demo link, Case Studies explains the thinking: why certain design decisions were made, what constraints shaped the development approach, and what the outcome actually was. The tabbed layout means additional case studies can be added without the page growing unwieldy — each one lives in its own tab.

​
Route

/case-studies
Declared in the router as: 
<Route path="case-studies" element={<CaseStudiesPage />} />

​
Page Header

<h1 className="text-4xl font-display text-white mb-8">CASE_FILES.doc</h1>

​
Tab Navigation

Tabs sit on a border-b-2 border-y2k-cyan bottom border, creating a connected shelf appearance. Each tab is a <button> that updates local state with the selected case study ID. 
<div className="flex gap-2 border-b-2 border-y2k-cyan">
  {caseStudies.map(cs => (
    <button
      key={cs.id}
      onClick={() => setActiveId(cs.id)}
      className={`px-6 py-2 font-mono text-sm border-2 border-b-0 rounded-t-lg transition-colors ${
        activeId === cs.id
          ? 'bg-y2k-cyan/10 border-y2k-cyan text-y2k-cyan'
          : 'bg-y2k-black border-y2k-gray text-gray-500 hover:text-white'
      }`}
    >
      {cs.title}
    </button>
  ))}
</div>
Active tab: cyan border on three sides (top, left, right), 10% cyan background tint, cyan text.
Inactive tab: gray border, gray text that turns white on hover. The active tab’s bottom border is removed (border-b-0) so it visually connects to the content panel below.

​
Content Panel

The content area is a bg-y2k-black border-2 border-t-0 border-y2k-cyan p-6 md:p-8 shadow-retro-cyan flex-1 container — note border-t-0 removes the top border to merge seamlessly with the tab strip. Inside, a three-column grid (grid grid-cols-1 md:grid-cols-3 gap-8) divides the case study into a sidebar and a main content area.

​
Left Panel — Skills and Status (1 column)

<div className="md:col-span-1 space-y-6">

  {/* Skills Demonstrated */}
  <div className="border border-y2k-gray p-4 bg-y2k-lightgray/20">
    <h3 className="font-mono text-y2k-magenta mb-2 border-b border-y2k-gray pb-1">
      SKILLS_DEMONSTRATED
    </h3>
    <ul className="list-square list-inside space-y-1 font-mono text-xs text-gray-300">
      {activeStudy.skills.map(skill => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  </div>

  {/* Status */}
  <div className="border border-y2k-gray p-4 bg-y2k-lightgray/20">
    <h3 className="font-mono text-y2k-lime mb-2 border-b border-y2k-gray pb-1">STATUS</h3>
    <div className="font-mono text-sm text-white">COMPLETED</div>
  </div>

</div>
The SKILLS_DEMONSTRATED heading is styled text-y2k-magenta and the STATUS heading uses text-y2k-lime. Both boxes share a 20% lightgray background and border-y2k-gray borders.

​
Right Panel — Narrative Sections (2 columns)

<div className="md:col-span-2 space-y-8 font-sans text-gray-300 leading-relaxed">
The right panel contains four numbered sections rendered as <section> elements with font-display headings:
Section headingData field
1. THE_PROBLEMproblem
2. THE_GOALgoal
3. PROCESS & DECISIONSprocess + designDecisions + devDecisions
4. RESULTresult
The third section is composite — the main process text is followed by a sidebar block for design and development decisions: 
<section>
  <h3 className="font-display text-xl text-white mb-2">3. PROCESS & DECISIONS</h3>
  <p className="mb-4">{activeStudy.process}</p>
  <div className="bg-y2k-gray/50 p-4 border-l-2 border-y2k-purple space-y-4">
    <div>
      <strong className="text-y2k-purple font-mono text-sm block mb-1">Design:</strong>
      {activeStudy.designDecisions}
    </div>
    <div>
      <strong className="text-y2k-purple font-mono text-sm block mb-1">Development:</strong>
      {activeStudy.devDecisions}
    </div>
  </div>
</section>
The decisions block is set off by a 50% gray background and a 2px left border in purple.

​
Current Case Study: Project VITAL_SIGNS

This is the only case study currently in data/mockData.js. Title: Project: VITAL_SIGNS Problem: Healthcare dashboards are notoriously cluttered, slow, and use colors that induce panic rather than clarity. Goal: Design a real-time monitoring interface that is high-contrast, accessible, and prioritizes critical information without overwhelming the user. Process: Interviewed 3 former nursing colleagues, sketched wireframes on actual graph paper, built a prototype in Figma, then implemented in React. Design Decisions: Chose a dark mode default to reduce eye strain during night shifts. Used neon accents strictly for alerts — red/magenta for critical, cyan for stable. Dev Decisions: Used WebSockets for real-time data streaming instead of polling to reduce server load and ensure immediate updates. Result: A performant, accessible dashboard that looks like it belongs in a sci-fi movie but functions perfectly for clinical triage. Skills Demonstrated: React, WebSockets, UI/UX Design, Domain Knowledge (Healthcare) Status: COMPLETED

​
Data Structure

Each case study object in data/mockData.js: 
{
  id: 'case-1',
  title: 'Project: VITAL_SIGNS',
  problem: 'Healthcare dashboards are notoriously cluttered, slow, and use colors that induce panic rather than clarity.',
  goal: 'Design a real-time monitoring interface that is high-contrast, accessible, and prioritizes critical information without overwhelming the user.',
  process: 'Interviewed 3 former nursing colleagues, sketched wireframes on actual graph paper, built a prototype in Figma, then implemented in React.',
  designDecisions: 'Chose a dark mode default to reduce eye strain during night shifts. Used neon accents strictly for alerts (red/magenta for critical, cyan for stable).',
  devDecisions: 'Used WebSockets for real-time data streaming instead of polling to reduce server load and ensure immediate updates.',
  result: 'A performant, accessible dashboard that looks like it belongs in a sci-fi movie but functions perfectly for clinical triage.',
  skills: ['React', 'WebSockets', 'UI/UX Design', 'Domain Knowledge (Healthcare)'],
}

​
Adding a New Case Study

  1. Open data/mockData.js and append a new object to the caseStudies array using the shape above.
  2. Choose a unique id (e.g., 'case-2').
  3. Fill in all seven text fields: problem, goal, process, designDecisions, devDecisions, result, and the skills array.
  4. The new case study automatically appears as a tab in the navigation. The first case study in the array is selected by default on page load.
{
  id: 'case-2',
  title: 'Project: RETAIL_ESCAPE',
  problem: 'Satirical e-commerce required a checkout flow that actively worked against the user.',
  goal: 'Build a technically functional Stripe integration wrapped in deliberate UX friction.',
  process: 'Mapped the "hostile" UX flows first, then built the standard Stripe checkout underneath.',
  designDecisions: 'Prices rendered as animated counters to visually communicate the artificial scarcity mechanic.',
  devDecisions: 'Used Next.js API routes to proxy Stripe calls and prevent key exposure.',
  result: 'A fully functional satirical store that processes test payments and makes people laugh.',
  skills: ['Next.js', 'Stripe', 'API Routes', 'Satirical Product Design'],
}

Build docs developers (and LLMs) love

Get started for freeTalk to us