Case Studies: Deep-Dive Retro Portfolio Narratives
The Case Studies page presents project retrospectives with a sticky sidebar TOC, problem/goal/process/result sections, and mixed visual styles including IRC chat logs.
Use this file to discover all available pages before exploring further.
The Case Studies page (/case-studies) presents detailed project retrospectives in a long-form narrative format. Each case study uses four distinct visual styles for its sections — a Win98 error dialog for the problem statement, a Wikipedia-style infobox for the goals, an IRC chat log for the process, and metric cards for results. A sticky sidebar table of contents anchors the reader as they scroll through the narrative.
The page uses a two-column layout on large screens (md:flex-row): a sticky sidebar on the left (md:w-64) and the main content area filling the remaining space (flex-1). On mobile, the columns stack with the sidebar rendered above the content.
┌────────────────────┬──────────────────────────────────┐│ Sticky TOC │ Case study narrative ││ ─────────────────│ ─────────────────────────────── ││ 01. Problem │ 01. Problem (Win98 error) ││ 02. Goal │ 02. Goal (Wikipedia infobox) ││ 03. Process │ 03. Process (IRC chat log) ││ 04. Result │ 04. Result (metric cards) │└────────────────────┴──────────────────────────────────┘
The sidebar is a <div className="sticky top-24 bevel-window p-4 bg-[#0c0814]"> panel titled "INDEX.HTML". It renders an ordered list of section anchors that correspond to the four case study sections. The active section is highlighted in text-[#22d3ee] with a blinking dot indicator; inactive items are in text-[#94a3b8].
The problem section is rendered as a <Win98Window> titled "01_The_Problem.txt". The section body describes the legacy codebase state, pain points, or business problem in a narrative paragraph, preceded by a red-tinted error headline.Visual characteristics:
// Problem section pattern (from assets/main.js)<Win98Window title="01_The_Problem.txt"> <div className="font-sans space-y-4"> <p className="text-lg font-bold text-red-400"> CRITICAL ERROR: Legacy Codebase Detected </p> <p> The client's existing platform was built on a 10-year-old monolithic architecture. Page load times were exceeding 8 seconds, and the development team was terrified to deploy changes because everything was tightly coupled. </p> <div className="bg-black p-4 font-mono text-sm text-red-500 border border-red-900"> Fatal Exception 0E has occurred at 0028:C0011E36 in VxD VMM(01). The current application will be terminated. </div> </div></Win98Window>
The goal section adopts a Wikipedia-style layout: narrative text on the left and a “Quick Facts” infobox on the right. The infobox is rendered as a w-48 panel with a bg-[#475569] header row, mimicking the classic Wikipedia article sidebar.Visual characteristics:
Two-column layout: prose left, infobox right (flex flex-col md:flex-row gap-6)
The process section renders the development timeline as a simulated IRC chat log, with timestamps, usernames, and message lines. It uses a left border accent in border-[#22d3ee] and a dark bg-[#0c0814] background.Visual characteristics:
The result section displays key project outcomes as a grid of metric cards inside a bevel-window wrapper. Each card shows a large headline number and a short label.Visual characteristics:
The page currently renders a single hardcoded case study. To add another, duplicate the narrative section blocks in assets/main.js and add a corresponding entry to the sidebar TOC list.
// In assets/main.js — case study dataconst caseStudy = { title: "PROJECT_PHOENIX", subtitle: "Deep Dive Log #001", problem: "The client's existing platform was built on a 10-year-old monolithic architecture...", goal: { body: "We needed to incrementally migrate the frontend...", facts: [ { label: "Timeline", value: "6 Months" }, { label: "Role", value: "Lead FE" }, ], }, processLog: [ { time: "10:00", user: "Alex", text: "Starting the strangler fig pattern implementation today." }, { time: "10:05", user: "Client", text: "Sounds good. Will the old URLs still work?" }, { time: "14:30", user: "System", text: "Build successful. Deploying to staging.", accent: "#ff2bd6" }, ], results: [ { value: "1.2s", label: "Avg Load Time", color: "#22d3ee" }, { value: "100", label: "Lighthouse Score", color: "#ff2bd6" }, { value: "0", label: "Downtime", color: "#a3ff12" }, ],};
Only one case study is shown at a time in the current implementation. If you add multiple entries, add a navigation UI (e.g., a list of .bevel-button links at the top of the page) to let visitors switch between them.
Add IRC log entries: Append objects to the processLog array. Each entry needs time, user, and text. For system messages use an accent color like #a3ff12 to render them in italic lime text.Change result metric colors: Update the color field on each result entry. The value is applied directly as the text color on the large metric number.Expand the infobox: Add more { label, value } objects to the facts array to extend the Wikipedia-style quick-facts box.Add a fifth section: Create a new section block and add a corresponding anchor item to the sidebar TOC following the 01–04 naming pattern.