index 01/03
A site with no menu, no hamburger, and nothing to click through. You move with four keys.
Everything here lives on a grid. Categories run down. The pages inside a category run across. That is the whole map, and you already know how to walk it.
Placeholder copy — swap it for the real thing in index.html.
Why four keys
index 02/03
Nav bars ask you to read before you move. A grid asks you to move before you read, and lets the shape of the thing teach you where you are. Two axes, four keys, no memorisation.
On a phone the same four keys sit at the bottom of the screen as buttons. Same grid, same gestures, no compromise version.
How to read this
index 03/03
You are at the far right of the first row. There is nothing more to the right, so l has gone quiet — the button dims when a direction is a dead end.
Press j to drop into the next category. You will land back at its first page, at the left edge, ready to read across again.
Every position has its own URL, so any page can be linked to and the browser's back button still works.
work 01/03
A short standfirst for the category — what this collection of pages is, in one or two lines.
The first page of a category earns the reader's l. Say the interesting thing here, and let the detail live further right.
Placeholder copy.
Selected projects
work 02/03
Process
work 03/03
Long-form pages scroll normally. The grid only moves when you press a key, so a tall page and a wide grid never fight each other.
Placeholder copy.
notes 01/02
Shorter pieces, newest first. l walks backwards through them.
A note is one idea at one width. If it needs a second idea, it needs a second page.
Older
notes 02/02
Placeholder copy. Add a new note by copying an <article class="page"> to the front of this section.
contact 01/01
Bottom of the grid. j is a dead end from here.
Replace with the real address before this goes anywhere public.