← Projects

michi.sh

ongoing

astro design three.js typescript

The site has been built around the Japanese word michi. Michi means road but can be read as more of a concept of the way you choose to live your life. It embodies elements of discipline of the heart and mind, dedication to craft, morality, integrity, self-mastery. Combining the word michi with the domain .sh which developers sometimes use to denote shell or things related to the terminal, as that’s where I spend a lot of my time… oh and it was available.

Highlights

  • Astro 7 with Markdown content collections. Writing a post is just dropping a .md file in a folder.
  • A living ink-wash mark the michi glyph painted in real time with Three.js/WebGL. A sumi wash pushed through a painterly (Kuwahara) pass, a genuine water-ripple simulation that answers the cursor, and procedural koi that drift beneath the surface and dart out of the pointer’s way. Falls back to a clean static SVG where there’s no JS or WebGL.
  • A single blossom accent sakura through red-plum that ripples across the mark and is the only colour against otherwise bare ink.
  • Animated page transitions via Astro’s view transitions (a calm cross-fade), with the WebGL hero disposed and re-initialised cleanly as you navigate.
  • Light and dark with a toggle that remembers your choice and otherwise follows the OS, applied before first paint so there’s no flash.
  • Type set in Zen Old Mincho and Zen Kaku Gothic New.
  • Deployed to GitHub Pages on a custom domain via GitHub Actions.

Why build my own

Plenty of templates would have been faster. But michi is partly about the discipline of making something deliberately, so the site being purpose-built is the point, not an accident.