Colophon

The source code of this website is available on GitHub. You are welcome to learn from the source code and reuse code for your projects. Don’t steal it. Learn from it. Remix. Reuse. Build your own things. 🤘

Design

• I designed the website myself in Affinity Designer, using the Japanese art form of shibui (渋い) as a source of inspiration. To learn more about the process, please read the essays about the inspiration and design.
• The design uses the variable typeface Secuela by deFharo. I use a font scale that is based on the golden ratio, and the font scales automatically to the viewport size.
• I created the Bonsai image on my homepage and other cover photos with Stable Diffusion, ControlNet, and Affinity Photo. My portrait photo was generated in Stable Diffusion with a custom model trainied in DreamBooth.
• The minimalistic icons are by Remix Icon, which is Jimmy Cheung and Wendy Gao.

Technology

• The website is built with Astro, the all-in-one web framework.
• I write the code in Neovim, using GitHub Copilot, and Raycast AI (ChatGPT).
• The layouts, templates, and components are written in Astro and Preact.
• My content is written in MDX, which allows using components in the Markdown.
• I use Tailwind CSS for my styling and tailwindcss-logical to get logical properties.
• The scroll animations are created with Sal and for page transitions I use Swup.
• My site search is build with Pagefind using the Astro-Pagefind integration.
• I use YouTube Lite, provided by Astro Embed.
• Astro SEO makes it easy to add the SEO relevant information.
• I use Astro Webmanifest and Astro Service Worker to optimize the website.
• To generate charts, I use Chart.js, react-chartjs-2, and chartjs-plugin-autocolors.
• I use reading-time to add the reading time to Remark.
• To parse and format dates I use Moment.js.
• I use Plop to generate content from templates.
• The website is self-hosted with Coolify.