Tyler Granlund
How the grove was built.
The decisions behind tylergranlund.com — stack, typography, performance, accessibility, privacy, and hosting. Boring in the best way.
Framework & language
- TanStack Start
- React 19 + file-based routingSSR via Vinxi
- TypeScript
- Strict mode, no suppressions
- Tailwind CSS v4
- CSS-first config, no tailwind.config.js
- Radix UI
- Accessible primitives for interactive components
Quality gates
- Vitest
- Unit + component tests28 passing
- Playwright
- End-to-end + visual regression
- axe-core
- Accessibility audit on every e2e run30 passing
- TypeScript
- Type-checked in CI before deploy
Typography
- Fraunces
- Display / serif — variable, self-hostedNo CDN
- Inter
- Body / sans-serif — variable, self-hosted
- JetBrains Mono
- Mono / kicker labels — variable, self-hosted
Performance
- Images
- AVIF + WebP + JPEG srcset, per-breakpoint widths
- Fonts
- Self-hosted WOFF2, font-display: swap, preloaded
- No CDN JS
- Zero third-party scripts — no analytics, no trackers
- Compression
- Brotli via Cloudflare Workers
Accessibility
- WCAG 2.2 AA
- Target standard — validated by axe-core in CI
- Skip link
- Jump to main content on every page
- Focus styles
- Cedar ring, 2px offset — visible on all interactive elements
- Reduced motion
- All animations respect prefers-reduced-motion
Privacy
- No cookies
- Zero tracking cookies or persistent identifiers
- No third-party requests
- All assets self-hosted — nothing phoned home
- Contact form
- Submitted via Workers function — no data stored client-side
- Cloudflare Web Analytics
- Cookie-free edge analytics (no personal data)When enabled
Hosting & deploy
- Cloudflare Workers
- Edge SSR — global, sub-50ms TTFB
- Wrangler
- Deploy pipeline via wrangler deploy
- Security headers
- CSP, HSTS, X-Frame-Options, Referrer-Policy
- DMARC / security.txt
- Email authentication + responsible disclosure
Design
- Palette
- Nordic forest dark — near-black spruce, warm cedar, stone/mist
- Design system
- All tokens in styles.css via @theme inline
- OG image
- Playwright + Sharp — generated at build time, not at runtime
- Architecture diagrams
- Inline SVG, CSS custom properties, no external deps