
I Built a 42KB Website with Canvas Particles, Live API Status, and an Interactive Terminal
Last night I rewrote my entire website from scratch. No React. No Tailwind CDN. No build step. Just one self-contained HTML file. Live : yedanyagami.cc The Stack 1 HTML file (42KB) 0 dependencies Cloudflare Pages (free tier) System fonts only Canvas Particle System The hero has ~120 particles with mouse repulsion. 80 lines of vanilla JS: var dx = p . x - mx , dy = p . y - my ; var d = Math . sqrt ( dx * dx + dy * dy ); if ( d < 100 && d > 0 ) { p . x += dx / d * 1.5 ; p . y += dy / d * 1.5 ; } Live Fleet Status The site fetches real health data from a production API: fetch ( ' https://yedan-graph-rag.yagami8095.workers.dev/health ' ) . then ( r => r . json ()) . then ( d => { /* update service cards */ }); CORS enabled ( Access-Control-Allow-Origin: * ), so it works from the browser. Interactive Terminal Users type real commands: help , status , services , benchmark , kg . Auto-demo starts after 5s idle, any keypress switches to interactive. Scroll Reveals (20 lines) .rv { opacity : 0
Continue reading on Dev.to Webdev
Opens in a new tab

