Notes on how this site is built

A portfolio that loads slowly is an argument against itself, so this one ships no client JavaScript at all. Not "a small amount." None. Every page is HTML and CSS that was finished before you asked for it. The one script tag in the source is a block of structured data for search engines, which never executes.

The corners

Every panel on this site has two corners cut at forty-five degrees instead of rounded. That comes straight off the logo, which is a chamfered piece of metal, and it is the single decision that makes the rest of the design fall into place.

Getting a hairline border to follow a cut corner is more annoying than it sounds. A clip path removes the border along with everything else it clips, so the diagonal edge ends up bare. The fix here is one element painting the edge and a pseudo element inset by one pixel painting the interior. The inner cut is not the same size as the outer one: moving a forty-five degree edge inward by exactly one pixel shifts its intercept by the square root of two, so the inner corner isc − 0.586px. Get that wrong and the bevel is visibly fatter than the straight edges, which is the sort of thing you cannot unsee.

Type and color

IBM Plex, all three cuts. Condensed for headings because condensed capitals read like lettering stamped into a plate, regular for body copy, and mono for every label and readout. It was drawn for a technology company and it does not look like the default choice, which was most of the appeal.

The accent is sodium amber, the color of the light over a truck yard at night. The obvious pick for a dark technical site is cyan, and that is exactly why it is not cyan. Chrome white does the heavy lifting and the amber only shows up on status marks, the active nav item, and link underlines.

The brushed metal effect uses hard gradient stops rather than a smooth fade, so it reads as a milled surface catching light instead of a gradient headline. It appears on the wordmark and about two other places. Used more than that it stops looking like metal and starts looking like a template.

Performance

Fonts are downloaded at build time, subset to Latin, and served from the same origin, so there is no third-party request and nothing to leak. Astro generates fallback metrics for each face, which is what keeps text from jumping when the real font arrives. The two faces above the fold are preloaded and the rest are not.

Open Graph cards are rendered at build time with Satori and rasterized with Sharp, so every page gets its own card without a running server. Icons come out of the same SVG geometry as the logo, generated by a script rather than exported by hand.

The words

There is a script in this repository that reads the built HTML and fails the build if it finds any of these:

It is a blunt instrument and it catches things it should not, which is why this page is the one file it skips. But a rule that runs on every build is worth more than a rule written down in a document nobody opens, and I would rather argue with a script than reread my own copy hoping to catch myself.

The writing rule underneath it is simpler than the list: describe what happened. Every case study has a section about the part that broke, because that is the part that is actually worth reading and it is the part a page like this normally leaves out.