Work / The Gallery
The Gallery
This site. My work as a simple list, or as a 3D book drawn in code.
You’re looking at it. The same pages come in two forms: a plain list, and a 3D book you can flip through. Nothing in the book is a 3D model: the leather, the brass, the gem and the paper grain are all drawn in code, and the only pictures are the screenshots tipped into the project chapters.
- Role
- Design and engineering
- Stack
- React 19, Vite, React Router, Three.js, Cloudflare Pages
- Status
- In progress · as of 10 Nov 2026
- Domain
- Static sites, 3D on the web and page speed.
Why it exists
I wanted a portfolio that shows work while it’s still happening, and I wanted it to feel like something. So the home page is a book you can open and leaf through. If your browser can’t draw it, you get the same pages as a plain list.
The book
The book is about 1,600 lines of JavaScript on top of Three.js. Nothing arrives as a 3D model. When it loads, it paints the cover, the paper and every page of text onto canvases, using the same content as the rest of the site.
The one exception is the screenshots. A project chapter tips its first shot in as a plate, framed and ruled like a printed one, and the page waits for it rather than showing a gap. A project with no screenshot yet simply has no plate.
Its own code comes to 30 KB gzipped, or 159 KB with Three.js. It doesn’t download until it’s needed. If you start on the list, it loads quietly in the background, so switching to 3D only has to set up the scene.
On my laptop, the book shows up about 2 seconds after the page opens. It used to take almost 4. Most of that time went into painting the cloth texture as roughly 40,000 tiny squares. Now it’s one small image, scaled up, and each page is painted at most twice on load instead of three times.
The plain site
Every page is turned into plain HTML when the site is built. It loads fast and reads fine with JavaScript turned off. The home page is under 2 KB of HTML gzipped, and the whole thing, book included, is about 400 KB. Once it reaches your browser, React takes over. If your browser can’t do WebGL, you get the list, never a broken book.
All the content lives in a few typed files, and the build checks them before anything goes live. If a field is missing, filler text was left in, or a study points at a hidden project, the build stops.
The look comes from the book: Cinzel for headings, EB Garamond for reading, warm parchment, and one deep green for links. The CSS is written by hand and runs off a single file of design tokens.
What comes next
Each project now publishes a small file of its own results, and this site reads it: the journey across the top of a project page, and the full record underneath, both come from that file rather than from anything I typed here. A project that stops publishing says so instead of showing an old number.
Next I want demos you can try on the page itself, a map of how the projects feed each other, and a way to scroll back through a project’s history rather than only seeing where it stands today.