Smarason.is
Privacy-first portfolio, sovereign by architecture
A privacy-first portfolio built on Next.js 16, Tailwind v4, Sanity CMS, and a self-hosted Go/PocketBase backend. Bilingual, accessible, zero tracking — the architecture reflects the philosophy.
The Challenge
Building with a stack newer than the AI tools assisting the build. Next.js 16, Tailwind v4, and Sanity v4 were all ahead of model training data. Context management — feeding accurate, current documentation to AI assistants via MCP servers — became the central development challenge. The self-hosted backend added a second axis: bridging Vercel edge infrastructure with a homelab PocketBase instance via a Go service.
The Approach
Editorial design principles applied to every decision: typography, spacing, and motion serve comprehension, not decoration. Strict TypeScript (noUncheckedIndexedAccess, no any) catches errors at compile time. OKLCH color space provides perceptual uniformity across light and dark modes. ISR with 60-second revalidation balances freshness and performance. Contact form data stays sovereign — a Go bridge validates and routes submissions to a self-hosted PocketBase, keeping all user data off third-party platforms. PAI infrastructure handles content authoring, code review, and Icelandic language quality.
Outcomes
This is the site you are looking at. It exists to share work, ideas, and tools — not to sell anything. There are no analytics, no cookies, no tracking scripts. The architecture reflects a simple conviction: technology should serve the people using it, not extract from them.
Built with Next.js 16, Tailwind v4, Sanity CMS, and TypeScript in strict mode. Contact form powered by a Go bridge service routing to a self-hosted PocketBase instance. Developed primarily with Claude Code CLI and PAI — a personal AI infrastructure that handles everything from content authoring to Icelandic language review.
Architecture
- Next.js 16 — App Router with async params, Turbopack dev server, ISR with 60-second revalidation on all content pages.
- Tailwind v4 — utility-first CSS with OKLCH color tokens, semantic design variables, and @theme configuration.
- Sanity v4 — structured content with GROQ queries, per-document language filtering, and webhook-driven revalidation.
- Go bridge — lightweight service at api.fylkid.is that validates and forwards contact form submissions to PocketBase on a self-hosted homelab server.
- PocketBase — self-hosted backend running on a homelab server, storing contact messages with full data sovereignty.
- TypeScript 5.5+ — maximum strict mode with noUncheckedIndexedAccess and ESLint no-explicit-any at error level.
- Motion — Framer Motion with barrel-exported presets. All animation respects prefers-reduced-motion.
- Testing — 250+ Vitest unit tests and Playwright E2E covering contact form submission, localization, and accessibility. Tests run before every commit.
- Vercel — production deployment from main branch with preview builds on dev and test branches.
Design System
The visual language is called Quiet Jade — an editorial palette built in OKLCH color space for perceptual uniformity. Warm basalt neutrals, a jade accent in light mode, teal in dark. Every color is a semantic token; no raw values appear in components.
Typography pairs Cormorant (display) with DM Sans (body). Motion serves comprehension — fade-ins and scroll-linked transitions — never decoration. The aesthetic is deliberately quiet: no gradients, no glassmorphism, no hover-scale effects.
Internationalization
Fully bilingual in Icelandic and English. Middleware detects the visitor's country via Vercel geolocation headers — Icelandic visitors see the Icelandic site by default, everyone else sees English. Routes are localized, not just translated: /is/blogg vs /en/blog. Over 1,400 lines of UI translations cover every surface.
Performance and Privacy
- Lighthouse 90+ across Performance, Accessibility, Best Practices, and SEO.
- Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1.
- WCAG 2.1 AA with keyboard navigation, visible focus rings, and prefers-reduced-motion support.
- Images served as WebP/AVIF from Sanity CDN with responsive sizing.
- Zero analytics, zero cookies, zero third-party tracking scripts. Privacy is architectural, not a banner.
Development
Developed with Claude Code CLI, PAI (Personal AI Infrastructure), and MCP servers for current framework documentation. Icelandic text quality maintained through a dual-review pipeline.
Technology Stack
Lessons Learned
- AI-assisted development works best when the human maintains architectural authority and the AI handles volume — not the reverse
- OKLCH is worth the migration cost: perceptual uniformity makes dark mode trivial and accessibility audits predictable
- Bilingual architecture must be designed in from day one — retrofitting locale routing into an existing Next.js app is significantly harder than starting with it
Related Projects
View all projects →Beyond Fragmentation
Why AI governance fails by design — and why all harmful effects of technology are rooted in human governance.
Sumarhus Alpha
Sovereign AI infrastructure: 5 Go agents, Rust MCP server, NATS JetStream mesh, 21 models across 7 providers, 15 containers, CI/CD to production. A practical system and a prototyping laboratory, built from scratch since 2022.
Arctic Tracker
A data platform integrating 473,000+ CITES trade records, IUCN assessments, and illegal seizure data for 43 Arctic species. Co-authored preprint with Dr. Tom Barry now under review.