Skip to main content
Headshot of Richie Farman

Richie Farman

@rlfarman

About This Website

This website is built with modern web technologies, emphasizing performance, accessibility, and user experience. Here's how it was created.

Technology Stack

Framework & Runtime

Next.js 16 • React 19 • TypeScript • Node.js 24+

Built on Next.js 16 with React 19, leveraging static site generation (SSG) for optimal performance. TypeScript ensures type safety and better developer experience.

App Router Architecture

This site uses the Next.js App Router (the app/ directory).

Routing & Layout

  • Routes are defined by folders under app/ with a page.tsx file (e.g. app/about-site/page.tsx, app/contact/page.tsx).
  • Shared UI and metadata live in app/layout.tsx.
  • Per-route metadata is exported via export const metadata in each route module.

Server vs Client Components

  • Components are server components by default, which keeps the JavaScript sent to the browser small.
  • Interactive components opt into the client runtime via 'use client' (for example, components that rely on hooks or DOM APIs).
  • Markdown content is rendered on the server and then enhanced on the client only where needed (e.g. icon placeholders and external link behavior).

Styling & UI

Tailwind CSS 4 • shadcn/ui • Radix UI • Lucide Icons

Styled with Tailwind CSS 4 for utility-first styling. UI components are built with shadcn/ui and Radix UI primitives, ensuring accessible components out of the box. Icons from Lucide React provide crisp, consistent visuals.

Performance & Build Tools

Turbopack • SWC • Bundle Analyzer

Utilizes Turbopack for lightning-fast builds and hot module replacement during development. Production builds are optimized with bundle analysis to minimize JavaScript payload.

Performance Optimizations

Core Web Vitals

This site is optimized for Google's Core Web Vitals metrics:

  • Largest Contentful Paint (LCP): Images use priority and fetchPriority="high" to load critical content faster. Modern image formats (AVIF, WebP) reduce file sizes by up to 50%.
  • First Contentful Paint (FCP): Font loading uses display: optional strategy to prevent render blocking. System font fallbacks ensure instant text rendering.
  • Cumulative Layout Shift (CLS): All images have explicit dimensions. Font fallback metrics prevent layout shifts during font loading.
  • Time to First Byte (TTFB): Static generation means pages are pre-rendered at build time for instant delivery.

Code Splitting & Lazy Loading

Below-the-fold components are dynamically imported to reduce initial JavaScript bundle size, keeping the main bundle lean.

Image Optimization

Next.js Image component automatically:

  • Serves modern formats (AVIF, WebP) with automatic fallback
  • Generates responsive image sizes for different viewports
  • Implements lazy loading for off-screen images
  • Applies aggressive caching (1 year TTL)

HTTP Headers & Caching

Security and performance headers include:

  • HSTS: Enforces HTTPS connections
  • Cache-Control: Long-term caching for static assets (31536000s / 1 year)
  • Compression: Gzip/Brotli compression enabled
  • Security Headers: X-Frame-Options, X-Content-Type-Options, nonce-based CSP policies

Accessibility Features

Semantic HTML

Proper HTML5 semantic elements (<header>, <main>, <section>, <nav>) provide clear document structure for assistive technologies.

ARIA Labels & Roles

All interactive elements include descriptive aria-label attributes. Sections use appropriate ARIA roles for screen reader navigation.

Keyboard Navigation

Full keyboard support with visible focus indicators throughout the site.

Color Contrast

All text meets WCAG AAA contrast ratios (7:1 for normal text, 4.5:1 for large text). Dark mode maintains high contrast with carefully selected color values.

Responsive Design

Mobile-first responsive design ensures usability across all device sizes. Touch targets meet the 44×44px minimum for easy tapping.

Alternative Text

All images include descriptive alt text. Decorative images use empty alt attributes to avoid screen reader clutter.

Development Practices

Content Management

Content is managed through Markdown files (.md), making it easy to update text, links, and structured data without touching React components. Frontmatter is validated at build time with Zod, so malformed content fails fast instead of leaking into the UI.

This separation of content and presentation allows for:

  • Quick content updates without rebuilding component logic
  • Version control for content changes alongside code changes
  • Easy collaboration with non-technical contributors
  • Static generation at build time using gray-matter for frontmatter parsing and remark for HTML conversion

Type Safety

TypeScript strict mode catches errors at compile time. Typed routes, validated content schemas, and explicit component contracts keep the codebase honest as it evolves.

Code Quality

Biome handles formatting and fast static checks. ESLint stays in place for framework-aware Next.js rules that Biome does not cover yet.

Git Workflow

Source code is version controlled with Git and hosted on GitHub. App Router metadata routes generate the sitemap directly from the application instead of relying on ad hoc build scripts.

Monitoring

Vercel Analytics provides privacy-friendly traffic and engagement insights, while Vercel Speed Insights tracks real-world performance over time.

Social Sharing (Open Graph)

This site generates dynamic Open Graph images using @vercel/og through App Router's file-based metadata image routes. The opengraph-image.tsx and twitter-image.tsx files render 1200×630 images for the site and key subpages.

Progressive Enhancement

The site works without JavaScript for core content. Enhanced features (theme toggle, analytics) layer on top progressively. This ensures maximum compatibility and resilience.

Open Source

This website's source code is available on GitHub. Feel free to explore the code, learn from it, or use it as a starting point for your own site.

Last updated: May 2026