This portfolio website:
built as a product.
A single-page portfolio with its own design system, "Kinetic Precision." Zero npm dependencies and no build step. It ships by opening a file in a browser.
This page is the build record for the portfolio itself, a "meta" project. It covers the no-framework constraint, the "Kinetic Precision" design system, how the site is put together today, and the email gate I retired.
Project overview
OverviewThis site is a demonstration in itself: a recruiter-facing portfolio built with
zero npm dependencies, styled with Tailwind loaded at runtime via CDN
(no build step), and deployed straight to Vercel on every push to main.
No framework.
On purpose.
01 · Constraint
The constraint was intentional: no React, no build step, no bundler. The site must
work by opening index.html in a browser. This was both a technical
demonstration (can you ship a polished product with nothing but platform primitives
and a CDN?) and a practical choice, no dependency rot, no build failures, instant
iteration.
The result: 0 npm dependencies. Styling comes from Tailwind loaded via CDN at runtime plus a hand-written CSS layer; the Supabase JS client that the retired email gate used is no longer loaded.
Kinetic Precision:
dark, mono, exact.
02 · Design System
The current design system is called Kinetic Precision, a
dark, technical palette built around Space Mono for display type and DM Sans for body
copy. Gold is the single accent, used sparingly: active nav underlines, tab highlights,
links, and card icons. Every corner on the site is square, border-radius
is zero, everywhere, as an explicit architectural principle.
Design Tokens
#0e0e12
--bg, Primary dark background across the entire site.
#c9a84c
--gold, Sole accent. Active states, links, highlighted nodes.
#4caf74
--green, Reserved for "verified / live" status dots only.
Typography
- Space Mono, display headings, eyebrows, labels, stat numbers (technical, exact, monospace precision)
- DM Sans, body text, UI labels, navigation (clean, geometric, legible at small sizes)
No Border-Radius
Every element is square-cornered, cards, tables, tags, buttons, panels. This is an explicit architectural principle carried over from the site's earlier "Blueprint to Bits" identity: softness comes from spacing and type weight, never corner radius.
7 panels.
One visible at a time.
03 · Architecture
A single-page portfolio with section navigation. One main panel is visible at a
time. The page itself does not scroll: <body> has
overflow: hidden, and the nav switches panels. The switching logic lives
inline in index.html.
7 Panels
- Home, two doors (founders and teams, or hiring), a stats row and the Plan to Product canvas
- Experience, career rows in an accordion, including the enterprise work
- Projects, a tile grid by domain with filter chips, each tile opening a detail view
- Skills, how I build, from brief to shipped product
- Philosophy, the product principles I work by
- Credentials, education and certifications
- Contact, the same canvas story replayed, plus email and LinkedIn
Hash Routing
Every panel has its own hash, such as #experience or
#projects. On load, the router reads the hash and opens that panel, so
each panel has a shareable URL. Any link marked with a panel attribute switches panels,
not only the nav.
Motion
hero-motion.js draws Plan to Product on a canvas on Home and Contact. A
sketch becomes a plan, the plan is built floor by floor, and it ends at SHIP and LIVE.
It pauses when off-screen or in a background tab. It has no reduced-motion skip: that
skip froze the hero twice, so the gentle motion always plays.
Case Pages and Trailers
Each case study and project page is its own file and wears its own product's design
language: its own colors, fonts and corners. trailer.js fills each page's
trailer section with a recording of the live product, or a slide reel when there is no
public product to film.
Mobile Nav
On mobile, the nav collapses into a menu button that opens a full-screen overlay.
ESC or choosing a panel closes it. On case pages, nav-hint.js fades the
edge of the section strip while more links sit off-screen.
The gate
I turned off.
04 · Retired Gate
The first version asked visitors for an email before they could see the portfolio.
Submitting an email inserted a row into a Supabase subscribers table. I
turned it off in July 2026 because it was blocking visitors, and a portfolio that hides
its work behind a form defeats its own purpose.
The lesson: a gate has to earn the friction it adds. This one did not.
The old gate script is still in the repo but never runs, and its Supabase client is no longer loaded. Row-Level Security allowed anonymous inserts only, so the table never exposed data.
What's in
the repo.
05 · File Structure
index.html
All 7 panels, the detail view and the mobile nav overlay. Panel switching, hash routing, the project tiles and their filters run inline. No partials, no templating.
Inline styles
The Kinetic Precision tokens and components sit in one style block inside index.html, with Tailwind loaded from a CDN at runtime alongside it.
hero-motion.js
The Plan to Product canvas on Home and Contact. Pauses off-screen and in background tabs.
trailer.js
Fills the trailer section on each case and project page: a live-product clip, an embed, or a slide reel.
nav-hint.js
Fades the edge of the case-page nav on mobile while more links are off-screen.
analytics.js
PostHog, anonymous pageviews only. No custom events, no identify, no autocapture. Skips localhost and local file opens.
case-study-*.html, project-*.html
Every case study and project page is self-contained: its own inline styles and fonts, wearing the design language of the product it describes.
vercel.json, .vercelignore
Redirects only, so a published URL never breaks. The ignore file keeps internal notes and working files out of the deploy.
favicon.svg
Geometric GG monogram, pure SVG, no raster asset.