Most portfolios are a hero section, a grid of cards and a contact form. I wanted mine to be a project, so it's an operating system, sort of. It's named after Lil'OS, the C++ micro OS I'm writing for embedded hardware. Think of this as Lil'OS's browser build.

TODO(William): this post is a technical starter written from the actual code. Rewrite the voice so it sounds like you.

The window manager

Every window is a plain object in a React reducer:

type WindowState = {
  id: string;        // "about", "project:lilos", "blog:hello-world"…
  app: AppId;
  x: number; y: number; w: number; h: number;
  z: number;         // stacking order
  minimized: boolean;
  maximized: boolean;
};

Opening an app either focuses its existing window or spawns a new one, cascaded from the last one. Focus is just z = ++topZ.

Dragging is where it gets interesting. Pushing every pointermove through React state means re-rendering the window's whole subtree 120 times a second. So during a drag I write transform straight to the DOM node and only commit the final position to state on pointerup. Resize works the same way, with eight handles. Drag a window to the top of the screen and it snaps to fullscreen.

The wallpaper is a shader

The background is a fragment shader running on raw WebGL with no Three.js, about 60 lines of GLSL. It's domain-warped fractal noise: you sample noise, use that to offset the coordinates you sample again, then do it once more:

vec2 q = vec2(fbm(p), fbm(p + 5.2));
vec2 r = vec2(fbm(p + 4.0*q + 1.7), fbm(p + 4.0*q + 9.2));
float f = fbm(p + 4.0*r);

That's what gives it the slow, liquid-smoke look. The cursor bends the field nearby, and the accent colour you pick in Settings is a uniform, so the wallpaper re-tints live. To keep it cheap, it renders at reduced resolution, pauses when the tab is hidden, and draws one still frame if you've asked your OS for reduced motion.

A terminal with a filesystem

Terminal.app has a small virtual filesystem generated from the same content as the rest of the site:

~/
├── about.txt
├── resume.txt
├── projects/   ← one .md per project
└── blog/       ← this post lives here

ls, cd, cat, open, tab-completion and history all work against that tree. open projects/lilos.md launches the project window, so the terminal and the GUI stay in sync.

An audio player that shows its work

I edit audio for Sink Alike, so I wanted a player that shows what editing does. Sink Alike.app routes playback through a Web Audio AnalyserNode and draws the spectrum every frame. Before/after pairs of the same clip get an A/B switch that keeps the playhead position, so you can hear the difference instantly.

It still has to work for recruiters

A desktop metaphor is fun until someone on a phone just wants your CV. So:

On small screens, windows open full-screen and the dock turns into a home-screen grid.
Every project and blog post also has a real URL (/projects/lilos, /blog/…) that renders as a normal, readable, indexable page.
/resume is a plain, print-friendly CV.
The boot screen only plays once per session, and any key skips it.

Stack

Next.js (App Router), React, TypeScript, raw WebGL, the Web Audio API, Motion for window animations, and Markdown files for content. No CMS: a new post is a new .md file.

William Gill