Skip to main content

Documentation Index

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

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

The Case Studies page lives at /case-studies and presents a single in-depth technical article formatted as an old web page from the Netscape Navigator era. The interior uses a black terminal background, a yellow pixel-font headline with a red drop-shadow, a drop-cap opening paragraph, a styled blockquote, a bullet list, and a terminal code block. The featured case study details how over-importing caused a 2 MB JavaScript bundle and how tree-shaking, swapping moment.js for date-fns, and image optimization cut 500 ms of load time. A back-navigation link at the bottom of the article calls navigate('/') to return to the desktop.

​
Win98 Window configuration

PropertyValue
Window titleDeep Dives - Netscape Navigator
Title bar iconfile-text (Lucide), navy (filled)
Width850 px
Height650 px
Interior backgroundBlack (#000000), white text, font-mono

​
Article structure

The case study is laid out as a long-form retro web article with distinct typographic zones: 
Win98Window (850 × 650, black bg)
└── article  (scrollable, max-w-3xl, mx-auto, p-8, space-y-6)
    ├── div.border-double  (header box, bg-gray-900, border-retro-turquoise)
    │   ├── h1  ("CASE STUDY: THE REWRITE", yellow pixel font, red drop-shadow)
    │   └── p   ("How I saved 500ms of load time", text-retro-cyan)
    ├── p.drop-cap  (opening paragraph with float-left magenta "I")
    ├── div.divider  (gradient line)
    ├── h2  ("The Problem", text-retro-turquoise, pixel font)
    ├── p   (library over-importing explanation)
    ├── blockquote  (retro — border-l-4, bg-gray-900, italic, text-retro-cyan)
    ├── h2  ("The Solution", text-retro-turquoise, pixel font)
    ├── ul  (tree-shaking, moment.js swap, image optimization)
    ├── div.terminal-block  (npm run build output)
    └── a   ("<< Back to Home", calls navigate('/'))

​
Terminal code block

The terminal block displays a mock build output showing the result of the optimizations: 
$ npm run build
Building for production...
Bundle size: 142kb (Gzipped)
SUCCESS!
The block uses font-vt323, a dark inset border (win98-in), green text (text-green-400) on a black background, and a shadow-[8px_8px_0_#00cfd1] turquoise drop-shadow to mimic a retro terminal pane.

​
The case study content

The article covers one specific performance win. The key facts are:
The original build shipped a 2 MB JavaScript bundle caused by importing entire libraries when only a handful of utilities were needed. The primary offender was the classic "import * from 'everything'" mistake — whole libraries loaded just to use a single function.
Three targeted changes brought the bundle down to 142 kb gzipped:
  1. Tree-shaking — switched to named imports so the bundler could eliminate unused exports.
  2. moment.js swap — replaced the heavy moment.js library with the lighter date-fns.
  3. Image optimization — optimized all images (saved for web).
The Vite production build output confirmed: Bundle size: 142kb (Gzipped). End-to-end load time dropped by approximately 500 ms.

​
Back navigation

At the bottom of the article a styled anchor calls the React Router navigate function to return the user to the root desktop: 
// In main.js — CaseStudies component
<a
  href="#"
  onClick={(e) => { e.preventDefault(); navigate('/'); }}
  className="text-retro-magenta hover:text-white underline font-pixel text-xl"
>
  &lt;&lt; Back to Home
</a>
Note this uses onClick with navigate('/') rather than a plain href, so the SPA router handles the transition without a full page reload.

​
Customizing the case study

The entire article content is written as inline JSX inside the CaseStudies component in main.js. There is no external markdown or data file — edit the JSX nodes directly to change the headline, body text, blockquote, terminal output, or any other content. 
// In main.js — CaseStudies component
// Change the headline:
<h1 className="font-pixel text-5xl text-yellow-400 mb-2 drop-shadow-[2px_2px_0_red]">
  CASE STUDY: THE REWRITE
</h1>

// Change the subtitle:
<p className="text-retro-cyan text-xl">
  How I saved 500ms of load time
</p>
To add a second case study, create a new route (e.g., /case-studies/2) and duplicate the CaseStudies component. Then add the new route to the router config and add a DesktopIcon or a navigation link pointing to it. See the Adding Pages guide for the full walkthrough.

Projects

The Projects page — where case studies link back to from the file view.

Win98Window

Window wrapper props for this page’s Netscape Navigator title bar.

Adding Pages

How to add a second case study or additional deep-dive articles.

Architecture & Routing

How hash-based routing connects the navigate(’/’) call to the desktop.

Build docs developers (and LLMs) love

Get started for freeTalk to us