Colophon
How this site is made
Everything here is made of one material: square blocks of ink on a dot grid. Colour only shows up as light, when something happens. These are the rules I keep, and the parts, in case you want to borrow any.
Colour
Ink and paper do the work, and swap places in the dark. The seven colours only ever arrive as light: the ring that runs out from a click, a flower in the garden, the light crossing my profile picture. Outside this page, if something is coloured and nothing happened, it's a bug.
- Paper #f0f0eb · #0c0c0c in the dark
- Ink #0e0e0e · #ebebe4 in the dark
- Red #ff453a
- Orange #ff9429
- Yellow #ffdb33
- Green #4cdb6b
- Cyan #33ccf2
- Blue #406bff
- Violet #9e52ff
Type
JP Pixel: five blocks by seven, with lowercase, descenders and a bold that is the same letter again, one pixel to the right. Capitals for headings, sentence case for reading. Set it in whole pixels, 20px for text and 40px and up for headings, and it stays sharp. It's a real font file as well now, so print, slides and email can use it.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?&@#%€ ← → ↑ ↓ ✓ ©
The mark
JP, seven blocks by five. In the nav it keeps changing its mind, and the frames are the job, more or less. At rest it's always JP: that's the favicon, and the file below.
- JP. Me.
- Prompt. Build it.
- Target. Aim at the right thing, not the newest one.
- Heart. Care how it's made.
- Smile. For people.
Motion and light
Nothing loads. When you change page, the blocks on both pages travel to their new places and the rest dissolve or arrive. Icons tumble between shapes and the pointer pushes text out of its way. Click anywhere and a ring of light runs out from it, red at the front and violet at the back. If your system asks for less motion, the blocks snap into place, the icons hold still and the light stays off.
How it's built
- One WebGL2 draw call. Every block on the page is an instance, and the GPU works out all the motion; the CPU only rewrites buffers when the page changes.
- Real HTML under the canvas, positioned over each block, so links, keyboards and screen readers work.
- Every page is also prerendered as plain HTML, set in JP Pixel, for search engines, link previews and print. Turn WebGL off and that's what you get.
- The letters are bitmaps in a JavaScript file. The same file builds the font, and the same parts draw the link previews, the LinkedIn banner and the profile pictures.
- Press G for the garden: a falling-sand simulation that steps 60 times a second and draws as one texture. A wrong address gets you a word puzzle.
- Vite and plain JavaScript, no framework. Hosted on GitHub Pages.
Downloads
- JP pixel regular TTF
- JP pixel bold TTF
- The mark SVG
- LinkedIn banner, light PNG · 1584×396
- LinkedIn banner, dark PNG · 1584×396
- Profile picture, light PNG · 1200×1200
- Profile picture, dark PNG · 1200×1200
