A single-file, single-scroll portfolio with an email gate, Supabase lead capture, and its own design system — "Kinetic Precision." Zero npm dependencies. Ships by opening a file in a browser and works.
This page is the build record for the portfolio itself — a "meta" project. It covers the no-framework constraint, the current "Kinetic Precision" design system, the 8-panel single-file architecture, and the Supabase email gate.
This 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.
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 only other external dependency is the Supabase JS client, also loaded via CDN, for the email gate.
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.
--bg — Primary dark background across the entire site.
--gold — Sole accent. Active states, links, highlighted nodes.
--green — Reserved for "verified / live" status dots only.
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.
The site is a single HTML file with 8 full-viewport panels. Only one panel is
visible at a time — overflow: hidden on <body>,
panel switching toggles an active class, and all the switching logic lives inline in
index.html itself rather than a separate app.js.
On page load, the panel router reads window.location.hash and activates
the matching panel. Every panel has a shareable direct URL:
#experience, #work, #projects, and so on.
The desktop nav collapses into a hamburger button on mobile. Tapping it opens a full-screen overlay with numbered links, left-aligned with generous padding. ESC or selecting a panel closes it.
First-time visitors can see a full-screen gate before the portfolio. Submitting an
email inserts a row into a Supabase subscribers table via the anonymous
client. On success, a localStorage flag is set so returning visitors skip
the gate entirely — and the gate degrades gracefully (visitor still gets through)
if Supabase is unreachable or the email is a duplicate.
The anon key is embedded in gate.js — safe for client-side use
because Row-Level Security is configured to allow anonymous inserts only. No read or
delete access from the client.
All 8 panels, modal overlay, mobile nav overlay, and all panel-switching / canvas / modal JavaScript inline. Single file, no partials, no templating.
Kinetic Precision design system (~2,100 lines). Panel layout, hero split, philosophy grid, modal narrative, canvas utilities, mobile responsive.
Email gate logic: Supabase insert, localStorage flag, graceful degradation on error.
Empty stub, superseded by the panel-nav logic now inlined in index.html.
Shared styles for the older-generation case study pages still using the pagination pattern. Newer project/case-study pages (like this one) roll their own self-contained styles instead.
Geometric GG monogram, pure SVG, no raster asset.