malott.dev — Personal Portfolio

Overview

malott.dev is a personal portfolio site built to the same standard I'd hold production software — not just a static resume page, but a full-stack application with real observability, accessibility infrastructure, CMS-driven content, and automated testing across browsers and screen readers.

The design leans into a retro phosphor terminal aesthetic: four switchable themes (green P1, amber P3, blue P7, white P4) built on OKLCH color space for perceptual uniformity. Dark and light modes layer on top independently.

Tech Stack

Framework: Next.js 16 with App Router, React 19, TypeScript strict mode, Node.js 24, pnpm.

UI: Tailwind CSS 4, Radix UI primitives, shadcn/ui-style components with Class Variance Authority for type-safe variant composition.

Content: Contentful CMS with ISR caching (1hr for blog, 2hr for projects), webhook-based on-demand revalidation, draft mode for preview, and XSS-safe rich text rendering.

3D / WebGL: Three.js terrain background with adaptive quality tiers (high/medium/low/frozen) driven by a rolling-average FPS monitor with hysteresis to prevent jitter. Quality adapts in real time without user intervention.

Observability:

• Server-side: Vercel OTel

• Client-side: Grafana Faro RUM

  • Web Vitals/Performance

  • Navigation

  • Console errors

  • User Actions

  • Custom events (scroll, quality change, etc.)

Accessibility

Accessibility is treated as infrastructure, not an afterthought. The site targets WCAG 2.1 AA:

• Fully keyboard navigable with skip-to-content

• Dynamic announcement of navigation and notification

• Reduced motion support

• CI-validated accessibility for contrast and keyboard

Performance

• Next.js routes prefetched

• Theme CSS cached (all 8 combinations) automatically

• Three.js lazy-loaded and tree shaken

• Adaptive terrain quality degrades gracefully

Testing

• 336 unit tests

• E2E tests on Chrome, Edge, Firefox, Safari and WebKit

• Accessibility test suite

• Lighthouse CI

CI/CD

GitLab CI pipeline with stages: install → test (lint, type-check, unit, dep audit, secret scanning) → build (with bundle analysis) → E2E (cross-browser, accessibility, Lighthouse CI) → deploy notification.

Bundle analysis artifact is stored per pipeline for regression tracking.

Source

The full source is available on GitLab. The site is deployed to Vercel at malott.dev (where you are right now).