Personal site, 2026
A web is something woven, so I built my own site like a piece of weaving: the Jacquard loom at the top reads its punched cards and weaves the page’s heading, and the gold thread that leaves it travels the whole page, under the headings and over and under the letters that hang below the line.
Idea
In the early 1800s the Jacquard loom began weaving patterns from punched cards; each card was a row that said which threads to lift. In 1843 Ada Lovelace wrote that the Analytical Engine weaves algebraical patterns just as this loom weaves flowers and leaves.
As a developer, this was the metaphor closest to my work: I thought of the page as cloth, the content as thread and the layout as the weave. Every image on the site comes from this idea; apart from the photo of the 1839 portrait, all of them are drawn in code.
Loom
At the top, a three-dimensional loom weaves the home page’s heading. On every pick, the hooks lift the warp ends that row’s card asks for. On devices without WebGL, or with reduced motion, the loom stays as a picture drawn in code.
Woven images
The images of the work are read from their drawings on the page and woven like silk in the browser: Atlas in satin, Forma in a basket weave. Move the pointer over them and a few picks are drawn out, showing the design underneath.
Thread
When the page opens, the letters of each heading are measured one by one and the thread is drawn from those measurements: just below the baseline, over one descending letter such as g, y or p and under the next. It weaves as you scroll.
Back of the cloth
Turn the page over from the gauge at the bottom and the stitches show: the typeface and size of the headings, the line length of the text, the touch target of each button, how many kilobytes of code each drawing takes. Your browser measures all of it on the spot.
Weaving log
The opening had an image of a study and a familiar page layout.
A Jacquard loom drawn in code took the image’s place.
The loom ran first with an animation library, then without one, on the browser’s own animation engine.
Fixed a bug that hid the cloth in Safari; a pixel damask pattern was woven onto the wall behind the loom.
The thread from the loom spread through the whole page: swatch cards, weave drafts, punched cards, a fringed end and the back of the cloth.
The design was simplified: the all-caps labels and decorative rules went, and the type scale came down to eight steps.
The opening became a three-dimensional loom; the images of the work began to be woven in silk, and pages began to open with the pass of a shuttle.
Added the card chain menu, “Weave your name” and the broken thread on the 404 page.
Use
You can move through the menus with the keyboard and pause motion from the gauge at the bottom. If you have chosen reduced motion on your device, the thread is drawn complete at once and the drafts appear already woven.
Even with JavaScript off, all the text and links can be read; the loom, the thread, the gauge and the back of the cloth are layers added on top. The page sends no requests to other servers.
Your site
The loom, the woven images and the broken thread are this site’s own ornaments; I wouldn’t bring them to a psychologist’s or a lawyer’s site. What carries over to your site are the principles underneath them.
Just tell me what you do and what kind of site you need.