How this site is built

The site is its own small case study. No frameworks you’d need a meeting to explain.

Rendering: Vue 3 and Vite, prerendered to plain HTML at build time (vite-ssg). Search engines and slow phones get a finished page; Vue takes over afterwards.
Speed: Critical CSS is inlined, only the two fonts the first screen needs are preloaded, and every page’s code is fetched in the background once the browser is idle, or the moment you hover a link.
Images: Every heavy image ships as 480, 960 and 1600 px WebP plus a ~190-byte blurred placeholder inlined in the page. You see its shape at once; the right size for your screen fades in when it arrives.
Backdrop: A photo of me on a ridge in Nepal, traced into vector layers (about 29 KB) with drifting mist and a little parallax. Off for anyone who prefers reduced motion.
Accessibility: Checked with axe against WCAG 2.2 AA on every page, light and dark. A reading panel adds text size, high contrast, reduced motion, underlined links, wider spacing and free translation into 16 languages.
Content: Projects and posts are Markdown files. The résumé PDF, the Word file and /cv are generated from one data file, so they never disagree.
Search: Per-page titles and descriptions, structured data (Person, CreativeWork, BlogPosting, FAQ), an image sitemap, RSS, llms.txt and preview images rendered at build time.
Hosting: GitHub Pages. A workflow rebuilds the site on every change and every Monday morning, which keeps the “Updated” date in the footer honest.
Type and colour: IBM Plex Sans and Mono, in black and white. The rules come from the design language I wrote for Kaede.

Source: coderkoala/coderkoala.github.io.