Portfolio case study
59 pages. 42 tool‑ettes. 7 branches. 42 Custom GPTs. One shared design language, a client‑side search engine, a Python CI gate, and a governance model built to keep everything coherent as it grows — all without a single framework or npm install. This is what it proves.
Most AI tools feel cold. They launch with a blank prompt box, a generic voice, and zero context about who you are or why you showed up. They're powerful in theory and exhausting in practice — because figuring out how to talk to them is a skill most people don't have time to develop.
Everyday users — the ones managing households, navigating career changes, tracking a pantry, planning a road trip — don't need more capability. They need approachability. They need an AI that already knows the domain, already has a personality, and already sounds like someone who's on their side. Generic tools don't give them that.
The deeper problem is structural: building one personalized AI tool is easy. Building forty‑two that share a voice, a taxonomy, a visual language, and a navigation system — without a team or a budget — is a design and architecture problem, not just a prompting problem.
The answer wasn't to build a better blank box. It was to give every tool a home, a name, a personality, and a clear place in a system visitors could understand in three seconds.
"Toolbox" frames the whole system immediately: these are things you reach for when you need them, organized by the kind of job they do. Not a "platform," not a "suite" — a toolbox. Familiar, physical, purposeful. The metaphor does orientation work before the visitor reads a word.
A three‑tier taxonomy keeps 60 pages navigable. The trunk (Toolbox hub) shows seven branches at a glance. Each branch groups tools by life domain — careers, food, travel, health. Each tool‑ette has its own page, personality, and GPT link. Every page always knows what's above it, beside it, and below it.
The Glee‑fully tone — warm chai‑fueled friend, not corporate bot — is baked into the brand CSS, the copywriting patterns, and the character voice that runs through every GPT. Clear routing (breadcrumb, "Keep exploring" tray, ⌘K search) means no visitor is ever stranded at a dead end.
Glee‑fully shares a stylesheet with two sibling
brands — OverKill Hill P³ and AskJamie. The
5,940‑line theme.css is divided into
four named scopes (GLOBAL, OVERKILL, GLEE, ASKJAMIE),
each separated by a boxed banner comment and a
body‑class selector. New rules go into the correct
scope based on which brand they affect — no specificity
wars, no !important hacks. All colors
declared as CSS custom properties on :root
— no hardcoded hex values in component rules.
Every technical decision has a legible reason. Static GitHub Pages, client‑side search, a Python validation toolchain, and structured data — each one chosen because it fits the constraints and outlasts the trend.
Zero server costs. Zero cold starts. One CSS file, one JS file, pure HTML. The site is fast by default, not by optimization — because there's nothing to slow it down. Deployable from any machine, readable by any browser, archivable by the Internet Archive.
A Python script walks every HTML page and writes a 130 KB JSON index. The runtime — 200 lines of vanilla JS — tokenizes queries, scores by field weight (title × 10, headings × 5, description × 4, body × 1), and renders results in under 50 ms. No Algolia. No API key. No monthly bill.
The Ecosystem page renders the
full OKHP³ universe as a live Mermaid diagram — a
canonical, always‑current map of how all three
brands relate. The Mermaid referral credit is enforced
by validate-site.py so it can never be
silently dropped in a future edit.
Every page carries JSON‑LD WebPage
or SoftwareApplication schema with a
matching BreadcrumbList. The 42
tool‑ette pages each declare their GPT as a
SoftwareApplication, making them eligible
for Google rich results. The indexer validates
parseable JSON‑LD on every run.
No webpack, Vite, Rollup, or bundler. No
package.json to drift out of date. One
shared app.js (918 lines) handles nav,
search, scroll animations, and the mobile overlay.
Dependencies are loaded from CDN with preconnect hints
— Google Fonts, Ko‑fi overlay, GA4.
On every push to main, GitHub Actions runs
validate-site.py (metadata, JSON‑LD,
theme‑color, favicon, h1 count) and
check-links.py (every internal href against
the filesystem and sitemap). A push with a broken
canonical or a missing description doesn't reach
production.
A site with 59 pages and two maintainers — one of whom is an AI agent — needs explicit rules. The governance system makes the right action obvious and the wrong action hard.
The project root carries a replit.md that
functions as a living specification: tech stack, project
structure, CSS scope map, script run‑order, and a
timestamped change log. Any agent or human joining the
project reads it first and finds everything they need
to work without breaking what's already there.
A 10‑skill document defines exactly what AI agents are allowed to do on this codebase. Six core constraints are non‑negotiable: static‑only architecture, no fabricated content, brand voice, trunk→branch→tool‑ette taxonomy, idempotent scripts only, Mermaid referral invariant. Each skill has a Purpose, Checks, and Off‑limits section — so an agent always knows its scope before it touches a file.
Periodic multi‑pass audits cover metadata, links,
assets, accessibility, and performance across all 59+
pages. Each audit produces machine‑readable JSON in
assets/audit/ and a human‑readable
Markdown report. The audit cycle is the feedback loop that
keeps the site honest between feature additions.
Bulk‑generated content — breadcrumbs, JSON‑LD,
keep‑exploring trays — is fenced with
<!-- AUTOGEN:BLOCK --> markers. Every
mutator script is byte‑idempotent — re‑running
it on any page produces no change if the content is already
correct. Nine structural HTML templates cover every page
type and are invisible to all validators, so they evolve
freely without affecting production.
Seven Python scripts have a defined run order that prevents
dependency failures. inject-jsonld.py reads
og:image to set primaryImageOfPage,
so it runs after activate-icons.py.
inject-breadcrumb.py reads the JSON‑LD
that inject-jsonld.py wrote, so it runs last
among the mutators. The order is documented in
replit.md and in each script's docstring —
the documentation and the code are the same artifact.
Glee‑fully isn't just a product — it's a proof of methodology. Six capabilities, documented in a live system that anyone can click through and verify.
A three‑tier taxonomy (trunk → branch → tool‑ette) makes 60 pages navigable without a mega‑menu or a site map page. Every page always knows what's above it, beside it, and below it — and communicates that to both humans and search engines through breadcrumb, "Keep exploring" trays, and JSON‑LD structured data.
42 Custom GPTs share a personality, a canon, and a voice without blurring into each other. Consistency at that scale is an information‑architecture problem, not just a writing problem. Named characters, domain‑scoped tool‑ettes, and a shared canon document solve it structurally — so any future GPT knows exactly where it belongs before it's built.
One stylesheet, four named scopes, three brands — no
specificity wars. A token‑based color system
(var(--color-rust), var(--color-teal))
supports dark mode and future brand extensions without
touching component rules. The Fredoka headings, paper‑cream
backgrounds, and rust‑and‑gold accents are a
deliberate aesthetic statement, not a scaffold default.
A fully functional product site — search, dark mode, lazy loading, scroll animations, mobile nav, structured data, Atom feed — built without a single npm package or a build pipeline. Every dependency is a deliberate choice. The CI gate exits non‑zero on any metadata regression, broken link, or missing JSON‑LD before it reaches GitHub Pages.
The codebase was built and maintained with AI agents as
active collaborators — not autocomplete assistants. The
operating constitution (agent-skills.md),
AUTOGEN‑marker discipline, idempotent scripts, and
the CI gate all exist so agents can do real work on a live
site without introducing regressions. This is what
human‑AI co‑authorship looks like in practice.
Making AI tools approachable for everyday users is not a prompt problem — it's a UX and product design problem. Glee‑fully demonstrates a coherent strategy: named domains, warm brand voice, physical metaphors (toolbox, branches, leaves), clear navigation patterns, and a zero‑friction entry point for users who have never written a system prompt in their lives.