Showing all 19 projects.
Explorable math that lets students drag before they derive — light, shape, and reflection made tangible.
talking points
Built with Claude Code using multi-agent handoff (Codex + Claude Code)
6-module curriculum with shared math/draw/interaction ES modules across pages
Playwright E2E tests, persistent telemetry, ?debug=1 mode, and a lessons-learned doc
Each page has a teacher prompt, student challenge, and key vocabulary — designed for projection and phone
Vanilla JS + HTML Canvas, no build step, GitHub Actions CI for deploy + UX tests
The guide I wish existed when I started — plain-English briefing doc that makes agentic AI approachable for non-developers.
talking points
35-section guide: terminal basics → security → first project → deploy to GitHub Pages
Written for educators and "vibe coders" — people with ideas, no CS degree
Static HTML with self-hosted JetBrains Mono webfonts — zero external CDN dependencies
Explains the mental model shift from chat-based to agentic AI
Experimenting with UX like presentation mode, global search
Distilled wisdom from 20 speakers on building with AI — a conference turned browsable knowledge base, from Every Media Inc.
talking points
Built with Claude Code — conference knowledge extraction into a browsable, searchable format, but refining by Droid (Factory)
20 speaker profiles with 6 browsable views (grid, kanban, stacks, float, portraits, list)
Core concepts: agent-native software, compound engineering, malleable software, MCP
Includes infographics, slideshow, and DeepWiki link
A step-by-step launchpad for first-time builders — go from zero to deployed app in one workshop.
talking points
Built with Claude Code — single-file HTML, no build step, two deliverables
Main guide: TOC sidebar, Cmd+K search, copy blocks, tabbed Canvas vs AI Studio paths
Journey map: pannable/zoomable 3000×2100px canvas with 13 clickable card nodes and animated SVG flow lines
Workshop for Hawaii K-12 educators — participants use personal Google accounts with Gemini
Keyboard shortcuts (T, Cmd+K, Cmd+/, Esc), reading progress bar, vocab hints with tooltips
A curated resource hub connecting Hawaii's educators to the AI tools that actually matter. Not tested yet.
talking points
Built with Claude Code — React + Vite + Tailwind + Fuse.js for fuzzy search
Feed-based discovery with category/tag filtering, sort by recent/random/alpha, bookmarks via localStorage
Resource detail modals, responsive design, memoized search/filter operations
Built for the local Hawaii AI/EdTech community — MVP with mock data, designed for real-world resource sharing
An interactive map of the learning ecosystem — pick a path, link the big ideas, and build something real—based on a semester's class
talking points
TypeScript app deployed to GitHub Pages
Three entry paths: Quick Start (5 links), Start Here (10-min overview), and Deep Dive
Core navigation: Learning Journey, Atlas of Ideas, Projects & Efforts
Designed for self-directed exploration with guided options
Voice input after each class, LLM to clean up and organize
A dark-themed deep-dive companion to a Substack article — reading meets interactive exploration.
talking points
Bridges reading into interactive exploration, from a Substack explainer
Custom color palette: navy (#1e1b4b), banana (#ffe135), orange (#ff6719)
Built with Vite + Tailwind, custom scrollbar styling
A polished event page that brings families and tech together in one cheerful, mobile-friendly package.
talking points
React SPA built with Vite for a community tech event
Montserrat + Open Sans typography, SPA routing hack for GitHub Pages
A CLI-inspired dossier for your job search — file trees, interview prompts, and conversational intake in one browser tab.
talking points
CLI-inspired artifact builder — file tree with editable markdown files and conversational intake
Vanilla JS, no build step — all data in localStorage under jobseeker.artifact.v1
Export to JSON, markdown bundle, or ZIP (uses jszip)
Onboarding overlay and sample data to show the pattern immediately
The app you pull out at the school carnival so you know exactly how much scrip to buy.
talking points
Built with Claude Code — pure HTML/CSS/JS, data-driven via menu.json, no build tools
2026 theme: "Welcome to the Jungle" — jungle greens, carnival yellow, creme background
Hash map indexing for O(1) lookups, event delegation, WCAG 2.1 AA accessible
Updated annually every January — scrip value changed from 50¢ to $1 in 2026
"Most users are parents scrambling at carnival" — 90% mobile traffic, iOS Safari primary
Hawaii-specific mortgage math — because housing here hits different and you need to see the real numbers.
talking points
Vanilla JavaScript, no build tools, no frameworks
Monthly payment breakdown with additional expenses, save and compare multiple properties
Built for the Hawaii housing market
A no-fuss shopping list that just works — track items, check them off, move on, maintaining a budget.
talking points
Vanilla JS — basic shopping list with tax calculation and item management
Browser-based, no account needed, built in a single session
A woodworker's best friend — visualize your cuts before you waste a $70 sheet of plywood.
talking points
HTML5 Canvas visualization of optimal cut layout on a plywood sheet
Calculates remaining scrap and waste — saves real money on $70 sheets
"BYOA" (Build Your Own App) project — vanilla JS, no dependencies, from a 2025 course on AI-assisted coding
A fun Pomodoro timer that keeps you honest — 25 minutes of focus, then you've earned a break.
talking points
Classic 25-minute Pomodoro with integrated todo list
A solid starter app
The reference table for the agentic era — filter, sort, and actually understand which AI tool does what.
talking points
Built with Claude Code — vanilla JS, Fuse.js (only external dep), no build step
74 Playwright E2E tests, axe-core accessibility audit: 0 critical/serious/moderate violations
Based on Ethan Mollick's Feb 2026 guide — Models → Apps → Harnesses framework
3 separate color systems all meeting WCAG 4.5:1 contrast, light/dark theme toggle
Mobile: focus-one-service mode with next/prev; Desktop: full comparison table
One text box, one tap, straight into Google's AI search — built for speed on mobile.
talking points
Single-page vanilla JS app — one input, one button, opens Google AI Mode
Settings to change base URL if Google updates the endpoint
I use this all the time. Gemini doesn't yet have ?q= param
A retro-spirited contact book that lives in your browser — local, private, satisfying.
talking points
Contacts encoded in URL via ?c=Name:Number for sharing — tap big buttons to call via tel: links
Single HTML file, zero dependencies, localStorage persistence, dark mode
What if switching AI threads felt as fast as ⌘K? — a UX proposal for Codex's thread navigation.
talking points
Vanilla JS, no build step — command palette triggered by ⌘O / Ctrl+O
Search ranks title matches above body matches, shows highlighted snippet previews
⌘J/⌘K keyboard nav for both results (palette open) and threads (palette closed)
Functional prototype with realistic sample conversation transcripts
I did get acknowledgement from the Codex team
Spotify Wrapped but for your Claude Code year — key moments, meta achievements, and the vibes of building with AI.
talking points
Python scripts analyze ~/.claude/projects/ JSONL files — counts only your messages (type=="user")
Generates 3 outputs: detailed analysis, Spotify-style parody, and shareable summary
Also has a "one-prompt method" — paste a single prompt into Claude Code and it builds the analysis from scratch
Read-only, local-only, no tracking — community project tagged #ClaudeCodeWrapped
×
conversation map
How this portfolio got shaped
This is the short version of the build conversation: not raw transcripts, but the contours of what the user asked for and how the site responded. The pattern was consistent: start with a plain-language instinct, turn it into a small static implementation, test it, then leave a breadcrumb for the next agent.
User asked
Take an inventory of every live site and turn it into one portfolio page.
The very first session asked an agent to audit a GitHub account, find what was actually deployed on Pages, and build a single index that linked the work — without padding it with names, tags, or marketing language.
Implemented
A Cascade research-and-scaffold pass behind the page you're reading.
The GitHub API surfaced 38 repos and 24 live Pages sites. Cascade then read each project's local CLAUDE.md, AGENTS.md, and READMEs to write the talking points, scaffolded index.html from scratch — header, "how it's built" disclosure, filter pills, expandable cards, three-theme system — and committed it as init portfolio.
User asked
Be careful about what gets published.
Before pushing anything public, the user wanted a sweep for names, school identifiers, geographic tells, and leaked secrets — and a clear separation between local-only docs and public ones.
Implemented
A standalone PII audit and a strict gitignore.
Cascade scanned the whole repo with rules tuned for personal names, employer signals, API keys, and indirect identifiers, wrote PII-AUDIT.md with a risk-tiered table, and wired the gitignore so research notes, content drafts, and the audit itself stay local. Public copy uses "User asked," never the user's name.
User asked
Make the portfolio feel like "building code."
The name carried a double meaning: software code, plus architectural codes, permits, blueprints, and construction paperwork.
Implemented
A hidden appendix below the false footer.
The page now keeps scrolling past the first footer into a construction diorama, blueprint elevation, yellow building permit, pink work order, and final approval stamp.
User asked
Keep it subtle, mobile-friendly, and theme-aware.
The Easter egg should reward curious scrolling without shouting at visitors, and it should work across default, mauka, and makai modes.
Implemented
SVG, CSS, and dynamic counts with no build step.
The appendix uses inline SVG and vanilla JavaScript. Blueprint rooms map to live project categories, the permit counts project cards, and colors shift with the existing theme tokens.
User asked
Invite visitors to start building too.
The bottom section should not just be decoration; it should nudge someone from inspiration into a tiny first project.
Implemented
The pink work order became the call to action.
It offers three "construction crew" links for ChatGPT, Claude, and Google AI, each opening a preloaded coaching prompt for a first 20-minute project-planning conversation.
User asked
Polish the affordances instead of making things louder.
Requests included keyboard hints for themes, a more noticeable work order, better hover behavior, and stronger contrast in dark mode.
Implemented
Motion and contrast did the heavy lifting.
The theme dots gained a desktop-only 1/2/3 hint, the work order settles into view, lifts on hover, respects reduced motion, and gets an off-white outline against the dark theme.
User asked
Make the process inspectable for future humans and agents.
Several turns asked for local-only notes, boards, and handoffs so future agent harnesses could pick up the work cleanly.
Implemented
Docs, commits, and boards became part of the craft.
The build left behind brainstorms, plans, favicon boards, commit history, and this public conversation map so the site shows some of the process that shaped it.
Source note: reconstructed from a Windsurf/Cascade conversation that did the original scaffold and PII audit on 2026-03-24, a Cursor session that added the architectural easter egg on 2026-04-29, plus git history and local handoff logs. It is intentionally a narrative contour, not a complete transcript archive.