Colophon
How this site is built.
For founders, engineers and curious readers who like to peek behind the curtain. The stack, the typography, the palette, and the way performance and accessibility were treated.
- Stack
- React 18 with Next.js 14 (App Router) · TypeScript end to end.
- Tailwind CSS with a custom token layer for the editorial palette.
- MDX via
next-mdx-remotefor every case study and essay. - Framer Motion for the few animations that survived editing.
cmdkis queued for the command palette; Resend for the newsletter when the writing cadence justifies it.- Hosted on Vercel Fluid Compute with analytics on, preview deploys per branch, and a custom domain on
happynessmallya.com.
- Typography
- Fraunces variable (optical sizes 9 – 144) — display. DM Mono — every label, metadata row and UI affordance. Lora — body prose. All three loaded via
next/fontwithfont-display: swap. - Colours
- Light surface
#F7F5F0· dark surface#0C0C0D· brass accent#8C6A2B(light) /#C4913E(dark) · muted ink#6B6860. - Performance targets
- LCP under 1.5 s · INP under 100 ms · CLS under 0.02 · AVIF + WEBP images via
next/image· PWA with offline shell. - Accessibility
- WCAG 2.2 AA throughout — AAA where typography permits.
prefers-reduced-motionis honoured globally. Brass focus rings at 2 px solid with a 2 px offset. All body text exceeds a 4.5:1 contrast ratio. Semantic landmarks (header,main,footer,article,aside) used everywhere they earn their keep. - SEO & schema
- Person + Organization + WebSite schema sitewide. Article + Breadcrumb schema for each essay and case study. A plain-text
/llms.txt,/humans.txt, and a build-time sitemap. (These ship in a follow-up commit.) - AI crawlers
robots.txtexplicitly welcomes GPTBot, ClaudeBot, PerplexityBot, Google-Extended, and CCBot. The work is published to be read — by humans first, by models second, both gladly.
Designed, written and built by Happyness C. Mallya in Dar es Salaam.
Est. 2025