10 / ColophonJames Riter / Las Vegas
Engineering & architecture

How this site was built.

The framework, shared styles, and content structure behind this website.

Explore the details
Personal portfolio / Independent developmentWebsites · Photography · Connected systems
Architecture stack

Modern tools.
Minimal footprint.

The public site is built with Next.js. Shared components and content keep changes consistent across pages.

01 // Framework & Language

Next.js 16 & React 19

Built with the Next.js App Router, React, and TypeScript. Pages are prepared at build time for static hosting; interactive components handle the menu, filters, and project estimator.

  • Next.js 16 (App Router)
  • React 19 Server & Client components
  • TypeScript 5 with strict compiler flags
  • Turbopack build engine
02 // Styling & Layout System

Tailwind & shared design tokens

Shared CSS variables define the palette, spacing, corners, and motion. Styles are organized by purpose, with Grid and Flexbox adapting the layouts to different screen sizes.

  • Tailwind utilities alongside custom component styles
  • Fluid typography via CSS clamp() functions
  • High-contrast focus-visible keyboard navigation
  • Native prefers-reduced-motion accessibility fallbacks
03 // Typography & Display

Editorial Typography

Typography pairs Manrope for high-character display headlines and brand lockups with DM Sans for clean, highly readable body copy, balanced by system monospaced fonts for labels and code metadata.

  • Display: Manrope (variable weights 400–800)
  • Body: DM Sans (optimized for digital legibility)
  • Technical: System UI Monospace
  • Local SVG favicon and text-based brand mark
04 // Performance & Deployment

Static Edge Export

The build produces static HTML, CSS, and JavaScript ready for a static host. Actual loading performance depends on hosting, images, fonts, the network, and the visitor’s device; published performance scores require measurement.

  • 100% static HTML prerendering
  • Compatible with static hosting and HTTPS
  • Automated sitemap.xml & robots.txt generation
  • No application database required for the public site
05 // Privacy & Ethics

Analytics & local tools

The site uses Google Analytics 4 to understand visits and page activity. Contact and estimate details are prepared in your browser; you decide whether to send them through your email app. Fonts are requested from Google Fonts.

  • Google Analytics 4 for website measurement
  • No third-party advertising SDKs
  • Direct client-to-developer communication
  • Review the complete Privacy Notice
06 // Craftsmanship

Continuous Evolution

The site brings together my independent projects and experience within development teams. The portfolio covers website builds, custom themes, and integrations across several platforms.

A project starts with a conversation

Like the way this was put together?

Let’s apply the same thoughtful engineering and clean architecture to your next website or business tool.

Let’s talk about it