Colophon
How this site is built — for the curious, and as receipts that I practise what I preach.
One-line summary
Static HTML, vanilla CSS, vanilla JS. No framework. No build step. Hand-edited in Codetta. Hosted on plain Apache.
Principles
- No build step. View Source still works. Edit, save, deploy — that's it.
- No framework. No React, no Vue, no Next. The site doesn't need them.
- One stylesheet, one script.
/style.cssand/script.js— shared across every page. Nav state set by JS based on URL pathname. - Shared shell. Every top-level page repeats the same sidebar, mobile header, and footer block. Repetition over indirection.
- Fast first paint. Critical CSS inlined nowhere — the stylesheet is small enough that it doesn't matter.
- Semantic HTML. Real
<main>,<nav>,<article>,<footer>. JSON-LD on the home and About pages. - Boring on purpose. Everything I'd want a junior to be able to read and modify.
Stack
- HTML5 — doctype, semantic elements, no templating.
- CSS3 — vanilla, with CSS variables for theming. Dark mode via
data-themeon<body>. - Vanilla JS — one small
script.jsfor nav highlighting, theme toggle, and the contact-form recaptcha bridge. - Fonts — Poppins via Google Fonts (
preconnect+display=swap). - Icons — Font Awesome 6.5.1 via CDN.
- Hosting — Apache on shared hosting;
.htaccessfor trailing-slash + canonical hygiene. - Form backend — tiny PHP endpoint at
/send-email.phpwith reCAPTCHA + honeypot. - Analytics — Google Analytics 4 (loaded async, no other tracking).
Why this way
Most personal sites I admire are static HTML. They load instantly, last forever, and don't break when the framework version changes. Codetta exists in the same lineage — lightweight, opinionated, native — so this site is also a working sample of the philosophy I sell.
Source & credits
- Original layout and design — Bishal Shrestha.
- Iterative refinements made with the help of the Codetta AI panel and Claude.
- Credits also at /humans.txt.