Give the home page a quiet health section

[injoon5]

Adds a Health section to /, between Now Listening and Photos.

What it is

The quiet, typographic beat between two image-heavy sections — four numbers and four thin orange lines, rather than a third block of imagery.

• Left column, like every other section: "Health" linking to /health, then a 44px score ring with the band word and the day — 40 · Fair · Aug 6 · 3 of 4.
• Right column: four tiles (Steps / Energy / Exercise / Distance) on the same bg-neutral-100 surface the blog and project cards use, each with a label, a large tabular number + unit, and a 30-day sparkline in /health's exact visual language (accent line, six-stop wash, end dot).
• Trailing See the full history →, same treatment as the other sections' links.

Deliberately not interactive: the section title and the trailing link are the two affordances, same count as Photos. Four tiles all linking to /health would have put six links to one destination in one section.

Performance

+2.25 kB gzip on the home page bundle (10.70 kB, up from 8.45 kB), measured before/after against main.

No layerchart, no d3 — Sparkline is two path strings in a stretched unit-square viewBox with vector-effect="non-scaling-stroke". MetricChart is the right shape for a page whose whole subject is the chart; it is the wrong one for four 36px trends on the page that has to paint first. Verified layerchart never enters the home page's module graph.

The subscription asks for { days: 30, endDate: UTC-today+1 } — byte-identical to what /health's server render already requests, so it lands on a Convex cache entry that is already warm rather than opening a second one. The home page is prerendered, so the window resolves at hydration from the visitor's clock; dateKey is UTC, so every visitor asks for the same window.

The four tile labels ship in the prerendered HTML and every box reserves its height, so the section paints its own shape before a socket is open and the numbers drop into a layout that already exists — no CLS.

Verified in a browser

Local .env has a placeholder Convex URL, so nothing loads there (Now Listening is stuck on "Loading…" too). Checked against a temporary 30-day fixture, fully reverted afterward.

• Caught and fixed: Aug 6, 2026 · 3 of 4 wrapped in the 122px label column and orphaned the final 4 onto its own line. Now Aug 6 · 3 of 4 — one line at every width, with non-breaking spaces so 3 of 4 can never split.
• Number fit at the tightest breakpoint (768px, 4-across, 156px tiles): worst realistic value 122,431 is 84px in 124px available. The grid breaks 2→4 at md, not sm, because that is where the numbers actually stop fitting.
• Dark mode: tile neutral-900 and the dot's punched ring resolve to the identical value; line and dot follow --chart-accent to orange-400.
• Partial-day path: a metric that has not synced shows —, its sparkline stops short of the right edge (96.4% vs 100%) on a shared x domain, and it drops out of the score — which is what makes the caption read 3 of 4.
• Reduced motion cancels the staggered enters outright rather than shortening them, since the global rule collapses animation-duration but not animation-delay.

svelte-check 0 errors · eslint clean · prettier clean · 408/408 tests pass · vite build prerenders id="health" into index.html with RSS intact.

Note for review

The last bullet of the commit adds .claude/skills/ to .gitignore — locally installed third-party agent skills, unrelated to the feature. Happy to drop it if you would rather keep the PR to the section alone.

🤖 Generated with Claude Code

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web	Ready	Preview	Aug 6, 2026 8:25am