John Henry Thompson

Overview

A site that does two jobs at once: establishes four decades of pioneering work in computer science, art, and education with the gravity it deserves, and serves as the fundraising launchpad for the Creative Computing Clubhouse.

Context

A portfolio for someone of this stature carries a specific risk—it can flatten four decades of pioneering practice into a résumé. The brief was explicit: elegant, sophisticated, minimalist, with a sprinkle of red, gold, and green nodding to his Caribbean roots and Black-centered practice—executed as jewel tones, not literal flag motifs.

Why This, Now

Working with someone who invented a programming language sets a particular bar: the engineering has to be as considered as the design. Constraints that usually arrive late—accessibility audits, client editability, performance—had to be load-bearing from the first decision. This was the project where I committed to designing constraints as features, not afterthoughts.

Approach

1. 01

   Designed a color system where accessibility wrote the logic. Display gold fails WCAG 2.1 AA as body text on cream, so I split gold into a three-step ramp—gold-deep for text on cream, gold for display on dark, gold-bright for body on dark. Links use context-aware colors that key to their surface via the CSS cascade: a single global rule, two correct color worlds.

2. 02

   Made cultural fluency structural, not decorative. The Pan-African accent palette—red, gold, forest—lives in the content schema itself. Every work entry picks an accent color from the trio, encoded as a content type, not a stylistic afterthought.

3. 03

   Built an editorial CMS in Sanity that enforces the design's guarantees—required alt text on every image, locked heading hierarchy, constrained rich-text editing. The client edits everything himself with no way to accidentally break accessibility or layout.

4. 04

   Rendered the homepage headshot as a pixel mosaic—a direct homage to JHT's Data Portraits work and W.E.B. Du Bois's 1900 Paris Exposition infographics, so the visual language feels continuous with his practice rather than imported onto it.

5. 05

   Built a private HQ dashboard for the operational layer—site editing, donation tracking, Clubhouse sign-ups—so the client has a single front door for everything he owns post-launch.

Key Decisions

• — Used accessibility as the generator, not the audit. The color ramp, link system, and CMS schema each carry the WCAG 2.1 AA contract.
• — Made the cultural brief structural. Red, gold, green became logic encoded in the content model—not decoration applied at the end.
• — Designed the CMS so editorial integrity holds no matter what gets typed. The client cannot break the design from the content side.

Outcomes

• — Live at johnhenrythompson.com with a near-perfect Lighthouse profile—96 Performance, 100 Accessibility, 100 Best Practices, 100 SEO.
• — Core Web Vitals all in 'good' range. LCP at 1.3s after diagnosing the real culprit: a 388 KB headshot that, because it's only sampled into the Data Portrait mosaic, optimized down to 6 KB with no visible change.
• — An editorial CMS the client runs without a developer—every page, every project, every Clubhouse update.
• — A fundraising-ready platform for the Creative Computing Clubhouse: a free summer coding program for Brooklyn high-schoolers.

Gallery