BR95

Every developer portfolio looks the same, and the usual fix is a heavy visual gimmick that destroys crawlability and accessibility · exactly the things a portfolio exists for. The challenge: build something a visitor screenshots and remembers, that is simultaneously a fast, fully server-rendered, parity-gated website a search engine reads as plain HTML.

Make the gimmick the shell and the content the OS. The desktop mounts once; every meaningful surface is a real URL rendered into a window frame; all long-form text lives in server HTML, visible, indexed by a CONTENTS rail. Guard the whole thing with scripts: a byte-level SEO parity gate, tsc, and a Playwright E2E pass on every release. Built solo, first through sprints D1 to D6 and then in versioned releases, with Claude Code doing the implementation and the diffs reviewed by hand.

BR95 is the website this page is part of: Bruno Jaamaa's portfolio, built as a Windows 95 style desktop. The desktop went live in July 2026, replacing an earlier design of the same site, and has been extended since.

The brief he set himself was that every portfolio looks the same, and that the usual fix, a heavy visual gimmick, destroys the two things a portfolio needs most: crawlability and accessibility. So instead of putting a gimmick on top of the content, he made the gimmick the shell and the content the operating system's real file system.

The site boots like a machine, runs a desktop with draggable windows, a taskbar, a Start menu, a terminal, three small games, and a resident cat named BUBBA. But underneath, it is a boring-on-purpose Next.js site: the desktop shell mounts once and never remounts, and the App Router renders each route's fully server-rendered content into a window frame. Opening a project window IS navigating to its URL. Closing it navigates back. View source on any project page and the entire case study is sitting there in the HTML.

Since late September 2026 there is an act on either side of the desktop. A first visit on a desktop browser opens on a 3D room at night with baked lighting: a lamp and a ceiling light that switch, black curtains that draw, a light bar that changes colour, a record player, a keyboard whose keys go down as you type, and a CRT you click to boot, at which point the camera dollies in until the desktop sits inside the monitor with the room still around it. Going the other way, a headset on the desk (or HEADSET.EXE on the desktop) closes two lenses over the view and opens on a black space where every project is a cube on a timeline and BUBBA is rebuilt out of voxels. The home window changed too: it is now BRpedia, a Wikipedia-style article about its author in Wikipedia's night palette. None of the three gates the content: reduced motion and deep links skip the desk, phones never load it, and every route still renders on the server.

The whole thing was built solo with Claude Code as the primary dev environment, against an implementation-grade sprint plan (D1 through D6) that ran to well over a thousand lines before the first line of code. It replaced an earlier amber-on-black "SIGNAL" design in a single pivot · the plan for that one is still in the repo too.

The shell reads the route. DesktopShell mounts once in the root layout and holds the wallpaper, taskbar, Start menu, and desktop icons; a registry maps every pathname to window metadata, and the App Router's children render inside the matched window. Routed windows (real URLs) and client-only app windows (terminal, games, dialogs) share one zustand window manager · selector-based re-renders for components, getState() for the imperative modules that run outline-drag and the wireframe minimize/restore animations, no provider.

Boot is a canvas-rendered BIOS POST drawn onto the screen of a 3D CRT monitor (react-three-fiber), which then hands off to the live desktop DOM projected into the screen rect. On a first desktop visit that CRT sits in a 3D room modelled and baked in Blender: one Draco-compressed GLB of about 460 KB, five pairs of lightmaps baked with the lamp on and off, a half-size light layer for the ceiling light, unlit materials that mix the bakes in the shader, and a fallback to the 2D boot if the assets are late. Nothing in the room is lit at runtime; what switches or changes colour (the light bar, the phone, the city outside) is a handful of unlit quads. The space outside the box is a second scene: under the headset's two-lens veil the room's canvas is unmounted before the other mounts, so there is only ever one live WebGL context, and the desktop underneath stays laid out exactly where it was. The older way out is still in the code for the screensaver: the desktop shrinks into the tube and is sampled as a 1-bit grid of roughly 96 by 60 cells. The home route renders BRpedia, an article styled with Wikipedia's own night-mode colour tokens and layout, server-rendered inside the same window frame as every other route. The terminal is a pure-logic command registry over a virtual file system built from the same grouping module that drives the desktop folders, so C:\PROJECTS always mirrors what the folder windows show.

Every visual asset in the shell is generated by repo scripts on a 1-bit budget: icon glyphs rasterized on an integer pixel grid and serialized to rect-only SVGs, window thumbnails run through an ordered Bayer 4×4 dither (chosen over Floyd-Steinberg to match the wallpaper's dither signature), custom cursors, and BUBBA's sprite sheet. The Windows-style chimes are original WebAudio synths; key presses, mouse clicks and the room's tone, CRT, lamp and disk-drive sounds are recorded CC0 samples; the smaller room sounds are synthesised by a script. A phone mode swaps the window manager for a full-screen sheet UI under 768px.

Nothing here was improvised. The repo carries a masterplan with sprint sections that specify the work down to file-level tasks · window store interfaces, drag algorithms, boot state machines · plus "final locked amendments" from hardening rounds that override anything they conflict with. The BR95 desktop replaced a completed amber-on-black design ("SIGNAL") in one planned pivot; both plans are still in the tree.

Each sprint ends the same way: tsc clean, next build clean, and the SEO parity gate green before the sprint is marked done.

Every task runs the same five steps: scope it in the ticket system with acceptance criteria; hand it to Claude Code to architect and implement in the terminal; manually review the diff · read the logic, check the edge cases; test on a real device or browser against the spec; commit with a clean message and move on.

The manual review step is the contract. AI writes most of the code here; a human who understands the system reviews it before it is committed.

Claude Code is the primary dev environment for implementation. Claude handles reasoning and design review before code exists · the sprint plans themselves are drafted, argued with, and hardened in conversation. Perplexity covers research. The division of labor is deliberate: the machine does volume, the human does judgment, and the gates catch what both miss.

Four gates run before anything ships: TypeScript strict compilation, a production build, a byte-level SEO parity script that diffs every route against committed baselines, and a Playwright end-to-end pass over the desktop's critical flows. Content has its own law: never invent facts · anything unverified ships as an explicit placeholder or not at all.