Colophon
This site is its own case study — a production portfolio, content platform, and agent-aware design system in one codebase. Twelve case studies, a crawlable blog, a hundred programmatic SEO guides, streaming AI chat with booking, and a token system that enforces itself. Here is how it is built today.
By the numbers
Architecture
Framework
Next.js 16 App Router with React 19 and TypeScript 6. Server components by default; client components where interactivity, i18n, or animation require them. ISR revalidation on marketing and content routes.
Hosting
Vercel serverless with edge middleware for security headers. Sentry for error tracking and release health. Vercel Analytics for performance signals.
Content
Sanity CMS for structured publishing, plus local MDX articles with generated TypeScript metadata. Blog bodies are server-rendered for crawlers; RSS at /blog/feed.xml. Dual pipeline — local-first with CMS sync.
Data
MongoDB for contact submissions and GDPR-compliant retention. PostgreSQL via Neon for structured queries. Weekly automated GDPR cleanup on stored submissions.
Content & discovery
SEO & AEO
Dynamic sitemap and robots.txt, canonical URLs, CollectionPage and Article JSON-LD, author Person schema, and llms.txt for AI crawlers. Human-readable Sitemap at /sitemap using the SiteTree component.
Programmatic SEO
One hundred service × stack × audience topic pages under /pseo, generated from a typed catalog with pillar pages for services, stacks, and audiences.
Portfolio
Twelve case-study routes with shared ProjectDetailLayout, ProjectMetaSection, StoryBlock, and ProcessBlock patterns — each with bespoke CSS Modules where the story demands it.
Blog
MDX articles with server-rendered prose, related posts, author pages, reading-time metadata, and share actions. Scheduled posts stay out of the public index until their publish date.
Design system
Tokens
350+ CSS custom properties for typography, color, spacing, grid, motion, and radius. Defined in CSS and consumed by CSS Modules. Enforced by Stylelint and Rhythmguard.
Styling
CSS Modules as the primary styling layer with logical properties throughout. Tailwind v4 utilities for layout shells and editorial pages. No inline styles except dynamic backgroundImage.
Typography
Syne for headings, Satoshi for body. Fluid sizing via clamp() — no breakpoint-based font scales. Title and Text components wrap every typographic surface.
Themes
Light, dark, high-contrast black, and high-contrast white. Switched via CSS class selectors on the root element and persisted in a cookie.
Component architecture
Every component ships as a folder: functional component, CSS Module, Storybook story, Vitest test (including axe-core where applicable), contract.json, spec.md, and barrel export.
Primitives
Radix UI for accessible behavior (Accordion, Checkbox, Dialog, Select, Tabs, Tooltip). Combobox and MultiCombobox for editorial forms. Styled with CSS Modules, not the Radix theme layer.
Layout
Container, Stack, Grid, FlexBox, Spacer, Section, Center, and PageLayout with responsive page-margin tokens. SiteTree for hierarchical navigation displays.
Storybook
Storybook 10 with a11y addon, Vitest integration, and MCP addon. WIP badge until a11y, visual, and translation verification pass.
Testing
Vitest for unit tests, axe-core for accessibility, Playwright for visual regression against Storybook. CI runs typecheck, lint, and tests before every merge.
Animation
GSAP
Primary animation engine. ScrollTrigger for scroll-driven motion. useGSAP for React lifecycle safety. Named easing curves in the token system.
Framer Motion
React transitions and AnimatePresence for enter/exit animations, page transitions, and layout animations.
Lenis
Smooth scrolling with momentum. Respects prefers-reduced-motion. Integrated via SmoothScrollProvider in the layout chain.
Internationalization
English, Finnish, and Swedish — full coverage across UI strings, form labels, error messages, and cookie consent. Powered by i18next and react-i18next with browser language detection and cookie persistence. Complete translation coverage is a shipping requirement.
AI & agent integration
Donny
Studio guide chatbot for design-system intake. Streaming responses via the Vercel AI SDK with rate limiting and prompt-injection guards. Tool calling for portfolio showcase, in-app navigation, lead capture, Cal.com booking handoff, and avatar expressions.
Contact
Editorial contact form with file uploads, MongoDB persistence, and Cal.com scheduling tabs on the contact page. Donny can pre-fill the form and spotlight relevant fields.
MCP
Fourteen Model Context Protocol configurations for development and operations: Figma, GitHub, Sentry, Vercel, Sanity, Context7, TypeScript LSP, Akaunting, Docker, Next.js devtools, and more. The repo and CMS workflows are agent-native by design. The design system agent demo shows MCP tools, golden evals, and pattern recipes without changing production chrome.
Security
Strict Content Security Policy in production. HSTS with two-year max-age and preload. Input sanitized via mongo-sanitize and isomorphic-dompurify. Rate limiting on AI chat and contact endpoints. GDPR-compliant data deletion API with automated weekly cleanup. Permissions-Policy disables camera, microphone, and geolocation.
Open-source tools built here
Rhythmguard enforces design tokens at lint time. Project Spine bootstraps agent-native operating context. LLM Component Schema publishes structured component contracts for AI consumption — all three appear as portfolio case studies and ship from this codebase.