Skip to main content

Documentation Index

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

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

The Case Studies page presents portfolio case studies through the metaphor of Windows Explorer — the file manager built into Windows 98. Rather than a standard card grid or accordion, the three case studies appear as .doc file entries in an Explorer-style list view, complete with a toolbar, column headers, hover row highlighting in classic Windows selection blue, and a status bar at the bottom displaying object count and total size. Clicking a row navigates to the individual case study detail page, which renders as a WordPad document.

​
Explorer Window

The page renders a single Window component that simulates a Windows Explorer window: 
<div className="max-w-4xl mx-auto">
  <Window
    title="C:\\My Documents\\Case Studies"
    icon={<FolderOpen size={14} />}
    defaultSize={{ width: "100%", height: 500 }}
    className="!static"
  >
    {/* Explorer chrome */}
  </Window>
</div>
Visual appearance: The window title bar reads C:\My Documents\Case Studies with a folder icon (FolderOpen from Lucide). The !static class keeps the window in document flow. The window has a fixed height of 500px and fills the max-width container. The inner area is divided into a toolbar at the top, a scrollable file list in the centre, and a status bar pinned to the bottom.

​
Toolbar

A thin toolbar sits below the title bar, separated by a grey border: 
<div className="bg-win-gray p-1 flex gap-1 border-b border-gray-400 shadow-sm">
  {/* Back button (disabled) */}
  <div className="px-2 py-1 text-sm font-comic flex items-center gap-1 opacity-50">
    <FolderOpen size={16} /> Back
  </div>

  {/* Separator */}
  <div className="w-px h-6 bg-gray-400 shadow-[1px_0_0_#fff] mx-1" />

  {/* Views button */}
  <div className="px-2 py-1 text-sm font-comic flex items-center gap-1">
    <FileText size={16} /> Views
  </div>
</div>
Visual appearance: The Back button is rendered at 50% opacity (opacity-50), indicating it is disabled — there is no navigation history since the Explorer window opens directly. The Views button is fully opaque but non-functional; it is present purely for visual authenticity. Both buttons are plain div elements in font-comic text-sm rather than interactive elements.

​
Hardcoded File List Data

Three case study entries are defined in a top-level constant array (S in the compiled source): 
const caseStudies = [
  {
    slug: "rebranding-techcorp",
    title: "Rebranding TechCorp",
    date: "10/24/2024",
    size: "1.2MB",
  },
  {
    slug: "scaling-databases",
    title: "Scaling DBs to 1M Users",
    date: "08/15/2024",
    size: "4.5MB",
  },
  {
    slug: "accessibility-overhaul",
    title: "A11y Overhaul 2024",
    date: "03/02/2024",
    size: "890KB",
  },
];
The total file size across all three entries is 6.59 MB, which is reflected exactly in the status bar.

​
File List Table

The case studies are rendered inside an HTML <table> with text-left font-comic text-sm: 
<table className="w-full text-left font-comic text-sm">
  <thead>
    <tr className="border-b border-gray-300">
      <th className="font-normal p-1 w-1/2">Name</th>
      <th className="font-normal p-1">Size</th>
      <th className="font-normal p-1">Modified</th>
    </tr>
  </thead>
  <tbody>
    {caseStudies.map((cs) => (
      <tr
        key={cs.slug}
        className="hover:bg-blue-600 hover:text-white cursor-pointer group"
      >
        <td className="p-1 flex items-center gap-2">
          <FileText size={16} className="text-blue-500 group-hover:text-white" />
          <Link to={`/case-studies/${cs.slug}`} className="hover:underline">
            {cs.title}.doc
          </Link>
        </td>
        <td className="p-1">{cs.size}</td>
        <td className="p-1">{cs.date}</td>
      </tr>
    ))}
  </tbody>
</table>
Visual appearance: Column headers use font-normal weight (not bold) — matching Explorer’s non-bold header style. Each row displays a blue FileText icon followed by the filename with .doc appended. On hover, the entire row flips to bg-blue-600 text-white (classic Windows selection blue), and the file icon also turns white via group-hover:text-white. The Name column is half the table width (w-1/2); Size and Modified share the remainder.

​
File Entries

FilenameSizeModified
Rebranding TechCorp.doc1.2MB10/24/2024
Scaling DBs to 1M Users.doc4.5MB08/15/2024
A11y Overhaul 2024.doc890KB03/02/2024
Each .doc suffix and the file sizes are decorative metadata — there are no actual Word documents. The figures were chosen to look plausible in an Explorer view.

​
Status Bar

A thin status bar is pinned to the bottom of the window interior: 
<div className="bg-win-gray border-t border-gray-400 shadow-win-in p-1 text-xs font-comic flex justify-between">
  <span>{caseStudies.length} object(s)</span>
  <span>6.59 MB</span>
</div>
Visual appearance: The status bar uses shadow-win-in for the inset bevel that Windows Explorer uses for its status area. Left-aligned: “3 object(s)”. Right-aligned: “6.59 MB”. Font is text-xs font-comic — small enough to feel like a true OS chrome element rather than page content.

​
Case Study Detail Route

Clicking any row navigates to /case-studies/:slug. The detail page (ve component) renders a WordPad-style window (${slug}.doc - WordPad) containing:
  • A retro-purple centred heading with the slug de-hyphenated and title-cased
  • A yellow-tinted block quote: “A deep dive into how I solved a problem that probably didn’t need solving, but I did it anyway.”
  • Lorem ipsum body paragraphs with Win98 <hr> dividers
  • A hacking GIF from Giphy
  • A “Challenge” and “Solution” section
  • A back-to-top button with an ArrowUp icon
<Window
  title={`${slug}.doc - WordPad`}
  icon={<FileText size={14} />}
  defaultSize={{ width: "100%", height: "auto" }}
  className="!static"
>

​
Component Dependencies

ComponentSourceUsage
Window (p)components/Window.jsExplorer and WordPad frames
LinkReact RouterRow navigation to detail pages
useParams (T)React RouterDetail page slug extraction
folder-open (Lucide)lucide-reactWindow icon, Back button
file-text (Lucide)lucide-reactFile list icons, Views button
arrow-up (Lucide)lucide-reactBack-to-top button (detail page)

Build docs developers (and LLMs) love

Get started for freeTalk to us