Colophon
How This Site Was Built
Design decisions, technical choices, and the thinking behind a portfolio that practices what it preaches about craft and intentionality.
Design Philosophy
This site is designed to feel like a well-edited publication — clean enough to read at length, structured enough to navigate quickly, expressive enough to convey personality without demanding attention.
The linen background was chosen over white because digital screens already emit light. Cream reduces eye strain during extended reading sessions and creates a warmer, more inviting canvas. Every color, spacing decision, and interaction was chosen to serve readability first.
The two-panel layout — persistent sidebar plus scrollable content — borrows from editorial design: the sidebar functions like a magazine's spine, providing orientation without competing with the content. On mobile, this collapses to a bottom navigation bar, keeping the full viewport available for reading.
Typography
Headings use Familjen Grotesk — a geometric sans-serif with humanist proportions that feels modern without being cold. Its slightly condensed letterforms allow for large display sizes without overwhelming the layout.
Body text also uses Familjen Grotesk for consistency, set at sizes optimized for screen reading (15–16px) with generous line height (1.6–1.7) for comfortable long-form consumption.
Monospace text uses Fantasque Sans Mono — a proportional monospace with personality. It's used for navigation labels, metadata, and interface elements, creating a consistent secondary voice throughout the site.
The type scale follows a Perfect Fourth ratio (1.333), creating harmonious relationships between heading levels. Fluid type scaling via CSS clamp() ensures optimal sizes across every viewport width.
Technology
Built with Next.js 16 (App Router) for server-side rendering, static generation, and file-based routing. TypeScript throughout for type safety. React 19 with server and client component split.
Styled with Tailwind CSS v4 using @theme inline for design tokens — no CSS-in-JS runtime overhead. Design tokens are defined once and referenced everywhere.
Animations powered by Framer Motion 12+ with reduced-motion support throughout. Every animation respects the prefers-reduced-motion media query.
Deployed on Vercel with edge-optimized delivery. Content currently hardcoded in data.ts with Sanity CMS integration ready for dynamic content.
Color
The palette is intentionally restrained — a monochrome system with warm undertones that lets content do the work. No accent colors compete with imagery or pull attention from the writing.
The background (#F4F1EC) is technically beige, not white. This was a deliberate choice: warm backgrounds reduce perceived contrast harshness while maintaining readability. The entire palette was tested for WCAG AA compliance at all text sizes.
Interaction Design
Animations follow a consistent philosophy: entrance animations are subtle (opacity + translateY), hover states provide clear feedback without distraction, and transitions use a custom easing curve (cubic-bezier 0.25, 0.46, 0.45, 0.94) that feels natural and unhurried.
Stagger animations create a reading rhythm on page load — content appears in sequence, guiding the eye from top to bottom. The stagger delay (60–80ms) is fast enough to feel fluid, slow enough to register.
Interactive elements use magnetic hover effects on navigation items, cursor spotlight tracking, and text selection sharing — small delights that reward exploration without interrupting the primary reading experience.
Process
This site was designed and built iteratively — starting with content strategy and information architecture before any visual design. The principle: structure the content first, then find the simplest visual system that serves it.
Static HTML prototypes (preserved in design-refs/) established the visual direction. Components were built in isolation, then composed into pages. Every page was tested against the design reference before shipping.
The development process prioritized build-time correctness — TypeScript catches structural errors, pnpm build validates every route, and ESLint enforces code consistency.
Credits
Familjen Grotesk by David Brezina and the Rosetta Type Foundry. Fantasque Sans Mono by Jany Belluz. Nippo by Indian Type Foundry for the wordmark.
Inspired by the editorial design sensibility of publications like Works in Progress, Craig Mod's Roden, and the Benton Modern type system. Built with open-source tools and deployed on infrastructure that makes the web better.