Case study
Why Nuclear
Overview
A straight-talking case for nuclear energy, built on real numbers, low carbon, tiny land use, round-the-clock power, and the safest record of any major source. A static site that scores 100/100 on Lighthouse.
Problem
When you try to understand why nuclear power is worth discussing, you end up wading through scattered, opinionated sources. There wasn't one calm page that just laid the numbers side by side, carbon, safety, land use, reliability, waste, cost.
Approach
I built a static Astro site that makes the case with sourced figures rather than slogans: lifecycle CO₂ from IPCC AR5, deaths per TWh from Our World in Data, land use from WNA/NEI, capacity factors from U.S. EIA, and waste volume from NRC/NEI. It includes a CSS-only stats marquee with a pause toggle, a linear/log switch on the safety chart, native <details> myth-busting FAQs, and an honest section on overruns, policy, and perception.
Architecture
Single-page Astro 7 site, static HTML + CSS with one tiny scrollspy script. Self-hosted Fraunces/Manrope fonts via Fontsource, 11 local photos through astro:assets (WebP, responsive srcsets, lazy loading), 18 Lucide icons inlined at build time via astro-icon, and a sitemap generated by @astrojs/sitemap. Dark/light themes share one token palette with a no-flash <head> theme script. The build pipeline verifies image licenses (scripts/verify-credits.mjs), regenerates the 1200×630 social card in headless Chrome (scripts/generate-og-image.mjs), and fails if any og:image is missing from dist (scripts/verify-og-images.mjs).
Challenges
Holding 100/100 on all four Lighthouse categories while shipping about 111 KiB total. A contradictory fetchpriority=high plus loading=lazy on the hero image delayed it by ~877 ms, switching to loading=eager/decoding=sync cut that to ~455 ms. Render-blocking CSS was inlined via build.inlineStylesheets: 'always'. Every figure was fact-checked on 2026-08-17 against live sources, OWID revised nuclear deaths/TWh from 0.07 to 0.03 and hydro from 0.02 to 1.3 (counting Banqiao), which rippled through the hero stat, marquee, chart values, and the safety claim (~350× became ~800× safer than coal).
Results
A fast, accessible, fully sourced explainer: 100/100 on Performance, Accessibility, Best Practices, and SEO, 1.5 s LCP on mobile, and zero axe-core violations in either theme. Eleven sections from hero to myth-busting FAQ, a machine-checked credits page generated from a single CREDITS.md, and auto-verified share cards.