A personal site is the only project where the client is you and the deadline is “whenever you stop enjoying it.” That is both the pleasure and the trap. There is no product manager to tell you the serif is fine. There is only the nagging feeling, at 1 a.m., that the em dash spacing is not quite right.
I rebuilt mine three times before this version. This one is the first I would show someone without apologising.
Constraints first
Every good project I have worked on started with a constraint somebody chose to respect. For the site:
- A single column of 34rem — about 544 pixels, or 62 to 68 characters per line.
- Two typefaces and one mono. No exceptions.
- No template, no theme, no page builder. Every rectangle is deliberate.
- Static html, a performance budget of roughly 100KB of JavaScript, and no images above the fold.
- One accent colour, used sparingly enough that it still means something.
A constraint is not a limitation; it is a way of making ten thousand decisions in advance so that you can spend your attention on the one that matters.
Typography does most of the work
The interface on a writing site is the text. Almost everything else is measurement.
I set the body in a serif at 1.0625rem with a line height of 1.78. The measure is 34rem because that is where a line stops feeling long without the column looking narrow on a laptop. Headings tighten the letter spacing slightly; metadata loosens it and switches to the sans, because dates and read times are labels, not sentences.
.prose {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.78;
hanging-punctuation: first last;
}The last line is doing more than it looks like. Hanging punctuation means a quotation mark or a comma at the edge of a line sits outside the measure instead of pushing the text inward, so the left edge of the paragraph reads as a clean vertical. Only some browsers support it today. The ones that do not simply render normally, which is a perfectly good definition of progressive enhancement.
I also spent an unreasonable amount of time on the divider. A hairline at ten percent ink, not eighteen, because at eighteen it competes with the text it is supposed to separate.
A performance budget is a design decision
Speed is not an engineering concern that arrives after the design is finished. It is part of the feel of the thing, and it is the first thing a visitor experiences.
The rules I set myself: no client-side framework, no third-party fonts, no analytics script that blocks the first paint, no image larger than the text it illustrates. The whole site compiles to html and a little CSS, with a few lines of JavaScript for the theme toggle and the reading-progress bar.
The reading-progress bar is two pixels of accent colour at the top of the page, scaled by scroll position. It costs one element, one property, and about a dozen lines. It is also the only motion on the page that is not optional, and the only piece of chrome I would fight to keep.
Dark mode is not an inversion of light mode. The light theme is warm paper and ink; the dark theme is evergreen and a softer off-white, because pure white text on a dark ground vibrates. The accent has to be re-chosen in each theme, not recoloured. Tokens make that possible without hunting through components for a stray value.
Why six languages
The site is in English, Chinese, Japanese, Spanish, French and German. This is not a growth strategy. It is who I want the site to be legible to: my family in Shanghai, friends in Tokyo, the clients and collaborators I have accumulated across time zones.
Writing in another language is not translation. It is a second attempt at the same idea, by a worse writer, with different instincts. I write the English first, then rewrite the piece in Chinese as if it were new, then do the same in Japanese. Some sentences get better. Some get lost. The site keeps a quiet note when a piece has not made it into a language yet, because pretending otherwise is worse than being honest.
What the site is for
Not for lead generation. Not for a personal brand. It is a garden I visit when I want to think carefully about something, and the excuse I need to keep making things by hand.
The best thing about a site you own is that it can be imperfect in public. You can change the column width on a Tuesday because it feels better. You can leave a sentence that is slightly wrong because you still believe it. Nobody is going to put it in a review.
The site will change again. That is the point of building it yourself.
The 34rem measure is a starting point, not a law. At around 62 characters per line the eye is comfortable; below 50 it feels staccato, and above 80 returning to the next line becomes a small decision. If you set one number today, make it this one.