This site: paper on top, colour beneath, and one WebGL canvas that draws every image in the place the page gives it.
This is the site you are reading. Its idea is one sentence: I design the surface and engineer what runs beneath it. So it has two layers. On top is paper, with every image printed in two inks. Beneath is a dark ground with glowing seams and the same images in full colour.
The pointer leaves a trail of fluid that opens one onto the other, and the control in the corner takes the whole page across. I designed and built all of it: the stage, the pages in English and Spanish, the CV and the monogram.
- 32pages, in two languages
- 1canvas behind every page
- 5colours a component may use
- 2sheets of A4 for the CV
The stage
Text that is always the inverse
The page is drawn in white and blended by difference against the canvas, so every letter is the inverse of what is behind it, including along an edge that is moving. It is why a component may only use five neutral colours: a saturated one would change hue with whatever passes behind it.
Pictures follow the page
An image is an ordinary img in a box, for layout, alt text and focus. With the stage on it goes transparent and the canvas draws the picture into that same box, read every frame. The canvas never positions anything.
One function draws the edge
A single shader function decides, pixel by pixel, which layer shows. The pictures, their halos and the final composite all call it, so the edge cannot come out a pixel apart between them.
The index
A column that becomes a wheel
On the surface the covers run in a straight column. Beneath, the same covers hang on a wheel seen from its rim, each a twelfth of a turn further round, smaller and deeper in the mist. The boxes in the page do not move: the pose is the shader's.
One case study runs into the next
A case study ends with the head of the next one. Push on at the end and the address changes with nothing moving on screen: the new page finds the same head in the same place and carries on with what was left of the push.
Nothing heavy on the way in
The shaders are compiled as soon as a picture exists and each texture goes to the graphics card in the frame it is decoded, so the entrance does not drop a frame.
Two languages
Written, not translated
The Spanish is its own copy with the same facts, laid over the English structure block by block. A block, a figure or a caption present in one language and not the other stops the build and says where.
No proxy, no detection
A visitor gets the language of the address they opened. Each page names its twin, and the Spanish addresses are in Spanish.
Type that takes both
Large type is pulled out by the measured ink of the letter each line begins with, so it stands exactly on the margin, and every mask leaves room for an accented capital.
The CV
A CV for people and for parsers
It follows the Oxford careers format, in one column and in reading order, with no table, picture or icon, and prints on two sheets in each language.
Read back before it ships
The script that prints the PDF reads it back as text and stops if the name is not the first line, a heading is missing or out of order, or it runs to a third sheet.
Plain type on paper
On paper the type is set without tracking or kerning: with them a browser writes each letter on its own, and a parser reads P R O F I L E.
Identity
O and A as one line
The monogram is a ring and an A whose left leg leaves the ring along a tangent, so the O's stroke carries on as the A's.
Drawn, not generated
One script holds the five numbers the mark is made from and writes every file from the one outline: the mark in the bar, the browser icons and the brand files.
The same outline in steel
The metal version is that outline extruded and bevelled in three.js and lit by a studio written as numbers. No image model and no environment map.
Details
Complete without the canvas
With no WebGL, or for a visitor who prefers less motion, the stage never loads and the site is a plain page that says everything.
Share cards that change address
Each share card's file name carries a hash of its picture, because a feed keeps a card by its address and does not look again.
Descriptions that fit
Every page has a description written to fit a search result, and the build refuses one that runs over.
