Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

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

The Case Studies page presents three deep-dive project retrospectives inside a faithfully recreated VS Code interface. File tabs at the top, an Explorer sidebar on the left, and a syntax-highlighted code editor panel in the center combine to create a developer-native reading experience. A status bar at the bottom anchors the illusion. Each case study is organized into three “sections” — Problem, Process, and Result — navigable via the Explorer sidebar.

​
What’s on this page

​
File Tabs

Three file tabs run along the top of the IDE panel. The active tab has a bg-[#1e1e1e] (VS Code editor background) fill and a border-t-2 border-t-y2k-cyan accent — mimicking the active tab indicator in real VS Code. Inactive tabs use bg-[#2d2d2d] with text-gray-400. Each tab displays a language-colored {} icon beside the filename + extension:
TabExtensionIcon Color
E-Commerce_Migration.tsxtext-yellow-400
Analytics_Dashboard.vuetext-yellow-400
Legacy_API_Wrapper.tstext-blue-400
{caseStudies.map((study) => (
  <button
    key={study.id}
    onClick={() => setActiveTab(study.id)}
    className={`px-4 py-2 font-mono text-xs flex items-center gap-2 border-r border-[#333] ${
      activeTab === study.id
        ? "bg-[#1e1e1e] text-white border-t-2 border-t-y2k-cyan"
        : "bg-[#2d2d2d] text-gray-400 hover:bg-[#252525]"
    }`}
  >
    <span className={study.ext === ".ts" ? "text-blue-400" : "text-yellow-400"}>{"{}"}</span>
    {study.name}{study.ext}
  </button>
))}

​
Explorer Sidebar

The left sidebar (w-48 md:w-64 bg-[#252526]) mirrors VS Code’s file explorer. The top label reads EXPLORER in 10px uppercase monospace with letter-spacing. Below it, three section items are listed — Problem, Process, Result — each prefixed with a # symbol in y2k-magenta. Active section: bg-[#37373d] text-white. Inactive: text-gray-400 hover:bg-[#2a2d2e]. 
{["problem", "process", "result"].map((section) => (
  <button
    key={section}
    onClick={() => setActiveSection(section)}
    className={`w-full text-left px-4 py-1 font-mono text-sm flex items-center gap-2 ${
      activeSection === section
        ? "bg-[#37373d] text-white"
        : "text-gray-400 hover:bg-[#2a2d2e]"
    }`}
  >
    <span className="text-y2k-magenta">#</span>
    {section.charAt(0).toUpperCase() + section.slice(1)}
  </button>
))}

​
Editor Panel — E-Commerce Migration Case Study

The center panel (bg-[#1e1e1e] p-4 font-mono text-sm) renders the active section’s content as syntax-highlighted pseudocode. Each section uses different VS Code–style token colors.

Problem

Rendered as green comment syntax (text-[#6a9955]). Describes the client’s deprecated Magento platform, 4.5s average page load times, and 60% mobile bounce rate. Goal: migrate to headless Shopify + Next.js.

Process

Rendered as mixed syntax — const declaration in blue (text-[#569cd6]), variable name in teal (text-[#4fc1ff]), string values in orange (text-[#ce9178]). Shows a planMigration() function with three comment steps.

Result

Rendered as an orange string block (text-[#ce9178]). A Markdown-formatted results summary with bullet points and a client quote.

​
Problem Section Source

// PROBLEM STATEMENT
// The client's existing platform was built on a deprecated version of Magento.
// Page load times averaged 4.5s, leading to a 60% bounce rate on mobile.
// The goal was to migrate to a headless Shopify setup using Next.js.

​
Process Section Source

/* PROCESS & ARCHITECTURE */
const architecture = {
  frontend: 'Next.js (App Router)',
  backend:  'Shopify Storefront API',
  styling:  'Tailwind CSS'
};

function planMigration() {
  // 1. Audit existing data structures
  // 2. Map legacy routes to new dynamic routes
  // 3. Build component library in isolation
}

​
Result Section Source

# RESULTS
- Page load time reduced to 0.8s (82% improvement)
- Mobile conversion rate increased by 35%
- Lighthouse performance score: 98/100

> "The new site feels instantly responsive." - Client Feedback
The syntax highlighting is implemented with hardcoded text-[#hex] Tailwind classes matching VS Code’s default Dark+ theme token colors — not a real syntax highlighter library. This keeps the bundle lightweight while maintaining visual fidelity.
Each section is prefaced by a JSDoc-style block comment generated from the active tab and section: 
/**
 * Case Study: E-Commerce_Migration
 * Section: PROBLEM
 */

​
Status Bar

A blue status bar (bg-[#007acc]) runs along the very bottom of the IDE panel, split into left and right groups in 10px monospace white text:
Left sideRight side
master* (branch name)Ln 1, Col 1
Active filenameUTF-8
TypeScript React
<div className="bg-[#007acc] text-white px-2 py-1 flex justify-between font-mono text-[10px]">
  <div className="flex gap-4">
    <span>master*</span>
    <span>{activeStudy?.name}</span>
  </div>
  <div className="flex gap-4">
    <span>Ln 1, Col 1</span>
    <span>UTF-8</span>
    <span>TypeScript React</span>
  </div>
</div>

​
Analytics Dashboard & Legacy API Wrapper

The remaining two case studies (Analytics_Dashboard.vue and Legacy_API_Wrapper.ts) share the same IDE structure and Problem/Process/Result navigation, but their content panels are not fully detailed in the current source. Switching to these tabs updates the JSDoc header comment in the editor panel accordingly.
The .vue extension on Analytics_Dashboard and the .ts extension on Legacy_API_Wrapper are stylistic choices that hint at the technologies involved in each case study without requiring a full content implementation.

​
Layout Structure

  • Outer: h-full flex flex-col max-w-6xl mx-auto border-2 border-y2k-panelDark bg-y2k-panelDark
  • Tab bar: flex bg-[#1e1e1e] border-b border-[#333] overflow-x-auto
  • Body split: flex flex-1 min-h-0
    • Explorer sidebar: w-48 md:w-64 bg-[#252526] border-r border-[#333]
    • Editor panel: flex-1 bg-[#1e1e1e] p-4 overflow-y-auto
  • Status bar: bg-[#007acc] text-white px-2 py-1

Build docs developers (and LLMs) love

Get started for freeTalk to us