Overview
Thorganby is a promotional website for an original tabletop board game about settlement building, resource production chains, and shared infrastructure negotiation. The project serves dual purposes: a visually rich landing page introducing the game’s theme and mechanics, and a fully interactive digital rulebook for players.
The game itself features hex-based settlement building where players expand villages, develop multi-step production chains (Forest → Logging Shed → Logs → Sawmill → Planks), and negotiate over shared infrastructure. The web presence needed to communicate this tactile, strategic experience while maintaining the warmth and accessibility of indie game design.
Technical architecture
Built with Next.js 16 App Router using TypeScript strict mode, React 19, and Tailwind CSS 4. The architecture combines server and client rendering strategies to optimize for both SEO and interactivity:
Landing page — Client component with scroll-driven animations, auto-advancing carousel, and interactive section reveals using Framer Motion 12
Rules page — Server-rendered component delivering fully formed HTML for fast initial paint, featuring a sticky table of contents, structured sections with anchor navigation, and semantic heading hierarchy
Font strategy — Four typefaces (Spectral for body, Playfair Display for headings, Geist for UI) loaded via next/font/google with CSS variable injection to eliminate layout shift
Visual design system
The design language draws from the game’s pastoral theme with a warm, earthy palette:
- Parchment backgrounds (
#f5efe4) paired with dark ink text (#2f2418) - Amber accents (
#7b5a2e) and forest greens (#476047) - Serif typography combining display and body fonts for a rustic, tactile feel
Animated hex background
A custom HexBackground component renders floating hex tile images with infinite rotation keyframes, layered at low opacity behind content. The tiles drift slowly across the viewport, echoing the game’s hex-based board without overwhelming the reading experience.
Component carousel
The landing page features an auto-advancing, swipeable carousel showcasing physical game components:
- Terrain tiles (forest, pasture, hills, mountains, water)
- Building tiles (logging shed, sawmill, bakery, brewery, mine)
- Resource tokens (logs, planks, grain, bread, ore)
- Worker meeples and player screens
Each slide pairs a product photo with title and description, cycling on a timed interval while allowing manual navigation.
Interactive rulebook
The digital rulebook transforms 8,000+ words of game rules into a navigable web experience:
Table of contents — Sticky sidebar navigation with jump links to major sections (Setup, Core Concepts, Turn Structure, Production Chains, End Game)
Production chain visualization — Inline structured data rendered as styled cards showing the economic flow from terrain through buildings to refined goods
Callout boxes — Highlighted rule clarifications and examples using custom styled components
Responsive tables — Game data (building costs, point values, resource conversion) formatted for mobile readability
The page structure uses semantic HTML with proper heading hierarchy, making the content accessible to screen readers and crawlable for search engines.
Development approach
This project demonstrates several technical priorities:
Responsive layout — Mobile-first design with breakpoint-aware visibility (decorative elements hidden on small screens, carousel cards stacked vertically)
Image optimization — All assets use next/image for automatic WebP conversion, lazy loading, and responsive sizing control
Performance — Server rendering the rules page eliminates client-side hydration cost for static content, while isolating interactive components to the landing page keeps bundle size lean
Type safety — TypeScript strict mode throughout with explicit typing on props, state, and utility functions
Context & purpose
Thorganby is currently in playtesting (version 0.1 ruleset). The website serves as the game’s public-facing presence during development, providing:
- A professional landing page for sharing with publishers and playtesters
- A linkable rulebook that’s easier to digest than PDF documents
- A showcase of the game’s visual identity and component design
- Infrastructure to evolve alongside the game (rules updates, component changes, media additions)
The project demonstrates my approach to product marketing sites: translating physical design assets into cohesive web experiences, structuring long-form content for both usability and SEO, and balancing brand personality with technical performance.
Technical details
Framework: Next.js 16 (App Router)
Language: TypeScript (strict mode)
UI: React 19, Tailwind CSS 4
Animation: Framer Motion 12
Typography: Google Fonts (Spectral, Playfair Display, Geist)
Deployment: Vercel
The rulebook content is maintained in parallel as both Markdown source and rendered web page, allowing the game designer to edit in a familiar format while users benefit from the designed, navigable interface.