Hashton
Design System & Studio2026 · Design, Frontend & Content

Hashton.dev — Portfolio & Consulting

High-Performance Contract Engineering Surface

Hashton.dev — Portfolio & Consulting

Contract and consulting portfolio with paper-and-ink design system, Mux intro video, MDX case studies, dark mode, and Tailwind v4 token architecture.

100/100Lighthouse score
Tailwind v4Tokens
FluidRestrained motion

The Challenge & Constraints

Creating an authoritative digital portfolio that instantly proves 11+ years of senior frontend taste, technical precision, and architectural maturity without generic templates or bloated animations.

Engineering Solution

Crafted a bespoke paper-and-ink visual identity using CSS custom properties bridged into Tailwind v4 `@theme`. Engineered an interactive Mux hero video player, dynamic MDX case study figures, and accessible focus management throughout.

Hashton.dev — Portfolio & Consulting screenshot 2
Hashton.dev — Portfolio & Consulting screenshot 3

Key Innovations & Highlights

  • Tailwind v4 token architecture with custom paper-and-ink palette
  • Dynamic MDX case study rendering with rich interactive preview figures
  • Accessible modal dialogs with focus trap and keyboard controls

Delivered Outcomes

  • ✓Sub-second load times with top-tier Core Web Vitals and 100/100 Lighthouse scores.
  • ✓Seamless light/dark mode transition with zero layout shift or hydration flicker.
  • ✓Direct conversion funnel generating inbound senior contract and consulting inquiries.

Technology Stack

Next.js 15React 19TypeScriptTailwind CSS v4MDX

View Live Project

Explore the production implementation at hashton.dev

Visit Live Site ↗