this site

the site you're on. there's no framework, no build step and nothing to install. every page is an html file i typed, the css is one stylesheet, and the three scripts are plain js that import nothing. reading the whole site costs about 1.2 mb, and 1.1 mb of that is photos. the html, css and js together come to 88 kb. the music and the two clips are another 48 mb that nobody downloads unless they press play.

it looks like this on purpose. browser-default serif, black on white, one column down the middle. no webfont, so there's nothing to download before the text shows up, and nothing to hydrate before you can read it.

the fish

22 is my favorite number. clicking numbers on the home page flips the banner over and a load of 22s drift out of it. each one hangs there as a 22 for a moment, then the second 2 turns around, slides into the first, and the pair pops out as a fish, because 2 + 2 = fish. after that they just swim around until you click numbers again.

i took the idea from elchun.github.io, which has fish wandering over the front page. the fish are text and not sprites, same as his. the whole thing is one canvas pinned over the viewport with pointer events turned off, so they swim across the links without eating the clicks, and the flip is one css transform on the image.

the banner is the a ship with 22 on it

the footer judges the page

every page grades its own load the way a competitive programming judge grades a submission. it pulls the real load time out of the navigation timing api and adds up what every file on the page actually cost to fetch, then prints accepted under a one second limit and time limit exceeded over it. the numbers aren't decoration, they're whatever your browser measured. a page of just text comes back around 4 kb. the home page is nearer 150 because of the banner. the music and the clips preload nothing, so they only count if you press play.

the parts nobody sees

every page passes axe with zero violations, which mostly meant writing real alt text, keeping one h1 per page, and hiding the fish from a screen reader, since a canvas full of punctuation is nothing anyone needs read out. they hold still if you've asked your machine for less motion. nothing overflows at 375 px wide. i check both with headless edge before i push.

every photo on the site goes through a script that strips exif on the way out, so nothing i drop in can leak gps. screenshots come from another script that renders code to an image with pygments instead of grabbing my editor, because a real screenshot of my editor shows my file paths and my username.

it deploys from a github repo to github pages, with a cname file pointing at andrewc.kim.

download this site (1.8 mb zip)