Rebuilding this site
Swapping an old template for plain HTML, a little JavaScript and a lot of attention to motion.
The old version of this site was a template from years ago: jQuery, a handful of plugins and a stylesheet with more than eight thousand lines, most of which I never used.
This rebuild goes the other way. The whole site is one HTML page, one stylesheet and one small script with no dependencies.
Borrowing a feel
I wanted the site to feel alive without being noisy. The reference was stitch.me, which does a lot with very little: big condensed headlines, rounded image cards and motion that always has a reason.
A few details that made the biggest difference:
- Easing curves. Most of the motion uses a curve that starts fast and settles gently. It sounds like a small thing, but it is the difference between "animated" and "smooth".
- Staggered reveals. Items in a section rise in one after another, 90 milliseconds apart, so your eye follows them in reading order.
- A header that gets out of the way. It hides when you scroll down and comes back the moment you scroll up.
The blog
Posts are Markdown files in the repository. A small build script turns them into pages, a feed and the "Latest writing" list on the homepage. No database, no CMS, nothing to log in to.
npm run build
That's the whole publishing process.