Skip to main content
Back to work

Live / 2024 - Present

FrankWilson.me Portfolio System

The portfolio you are viewing: a design system, component architecture, content pipeline, and performance budget built to carry a multi-surface career narrative without looking like a template.

Verified Metrics

Custom typographic and color system
Self-hosted font stack
Static export with sub-250 KB initial JS
MDX-driven case-study pipeline

Role

Designer & Engineer · Sole Owner

Timeframe

2024 - Present

Stack / Domain

Next.js 16React 19Tailwind CSS v4TypeScriptMDXStatic export / CDN hosting

Context

This site is not a wrapper around a resume. It is a product: a design system, a content architecture, and a performance budget that has to sell a career spanning data-center floors, manufacturing lines, and production software.

The identity starts with the signature monogram and a dark, high-contrast palette. Every page uses the same token set, the same spacing scale, and the same component language so the experience feels authored rather than assembled.

The case studies are written in MDX and validated by a schema, which means new projects can be added, versioned, and reviewed like code. The résumé engine renders styled, ATS, and plain-text variants from the same data model, so the story stays consistent no matter how someone consumes it.

Rack & Role borrowed this same design discipline: typed surfaces, clear hierarchy, and a system that could be maintained by one person under production load.

Constraints

  • The design had to feel premium and authored, not like a downloaded template
  • Every claim needed a route back to verifiable proof: credentials, experience, metrics
  • The site must perform on mobile, desktop, and low-end devices without heavy animation dependencies
  • Content must stay maintainable by one person without a CMS

Outcomes

  • Built a cohesive visual identity around a signature monogram, dark surfaces, and semantic color coding
  • Designed a responsive type system and spacing scale that holds across marketing and dense résumé pages
  • Shipped a static-export Next.js app with scoped lazy loading and manual code splitting
  • Created an MDX case-study pipeline so new projects can be added as files, not database records
  • Maintained a single source of truth for stats, experience, and credentials across the site

Next Step

Discuss similar work.

Contact Frank