Production & client work
Shipped for real clients, with my role on each. Everything on this page runs inline — scroll and use it.
macOS desktop portfolio — talk to my AI avatar
A full macOS-style desktop running in the browser — boot screen, login, draggable windows, dock, Spotlight, Terminal — fronted by a 3D avatar built from a photogrammetry scan of my own face. Speak to it out loud and it answers questions about my work.
Sole developer — the desktop shell, the avatar rig, and the speech pipeline.
React · TypeScript · three.js · Zustand · Web Speech API · Groq (gpt-oss-120b) · Orpheus TTS · Blender
Tref2
Flagship freelance build — a production dashboard web app for a private client.
Sole developer. Built and maintain it: Next.js, Supabase/Postgres, auth, CRUD, Vercel deploys, ongoing feature work.
Next.js · Supabase · PostgreSQL · REST API · Vercel
SVG Shed Layout — Estimation View
Interactive shed estimator with save/load: React SVG UI plus ASP.NET Core API, EF Core, and PostgreSQL (Supabase) job persistence.
Built the live demo solo — UI and backend. Original Estimation View renderer was my work at Steelx (Nov 2022 – Apr 2024) in React/Tailwind with C# API integration.
React · TypeScript · SVG · ASP.NET Core · C# · EF Core · PostgreSQL · Supabase
KapeKoy POS
Family coffee-shop POS: Laravel 13 API + React/Vite PWA register, Docker on Render, Neon Postgres, GitHub Actions CI — Fly.io-ready.
Sole developer — API, PWA, Docker image, deploy runbooks.
Laravel · React · PostgreSQL · Docker · Render · GitHub Actions · PWA
GoHighLevel — agency client pages & automations
Handled GHL for three agency client brands at once (PCHelp IT Services, BCMS Compliance, ARPwave) — pages, funnels, workflows and email campaigns, without mixing assets.
Built pages from Figma using native, client-editable GHL elements, and built the workflow automations — including a ~106-contact RSVP campaign with tag triggers, if/else branches, a scheduled email sequence and bulk enrolment.
GoHighLevel · Figma → native elements · Workflow automation · Email campaigns
Best-looking builds
Where the design bar matters. Interact with any of them right here.
Piccolo Me — homepage redesign
Audited a live coffee brand's homepage and rebuilt it as a working concept: clearer order / find-store hierarchy, editorial layout, a scroll-controlled espresso sequence and mobile-first CTAs.
Sole designer and developer — audit, build and deploy. Kept the brand's yellow/black palette and existing photography.
HTML · CSS · JavaScript · Scroll animation · Vercel
FIFA Coin
High-end animated crypto landing page: a cinematic video-background hero with a GSAP entrance and self-drawing brush graphic, a live countdown to the World Cup final, and a DexScreener-style live 'Nations' leaderboard with sparklines and count-up stats.
Sole developer — design, build and continuous deploy.
React · TypeScript · Vite · Tailwind · GSAP
Cat Dancers ($CATDANCE)
Print-zine brutalism as a landing page: torn-paper collage, Bowlby One SC display type layered over coral and cobalt offset blocks, taped-down photography, an acid marquee, a live 'chaos' dial that speeds up the animation across the whole page, and a scrolling IRL photo mosaic.
Sole designer and developer — art direction, collage, build and deploy.
React · TypeScript · Vite · Tailwind · GSAP
Lumen Motion Commerce
Framer/Webflow-class motion ecommerce: Piccolo-level scroll motion married to a working shop — product grid, featured PDP, kit builder and a live bag UI.
Sole design, build and deploy.
HTML · CSS · JavaScript · GSAP · ScrollTrigger · Lenis
Kabosu Sigma
Animated brand site.
Design and build.
Web · Animation
MevsMe
Brand site.
Design and build.
Web · Animation
Apps & tools you can use right now
Working software, not screenshots. Click into any frame and drive it.
Pulse — strangers on a live globe
Every online stranger is a glowing dot on a 3D globe. Tap one to connect for peer-to-peer text chat or video. A hiring take-home for PawPay: I fixed it, redesigned it, closed a critical security hole and added a safe-by-default video feature.
Solo, in one day (Oct 2026). Fixed 6 bugs (dots that never left, dropped chat messages, lost ICE candidates, users stuck busy). Redesigned it as a Mapbox night globe. Found the critical hole: every client received everyone's session id, the only credential. Fixed it with private session ids and server-enforced pairing. Added video that arrives blurred until you choose to see it, plus a server-side block. 9 API tests and a two-browser end-to-end test pass against the live site.
Next.js 16 · TypeScript · WebRTC · Prisma 7 · PostgreSQL (Neon) · Mapbox GL · Vercel
Tasks — Laravel API + Next.js, with a code walkthrough
A small task tracker with full create, read, update and delete: a Laravel 13 JSON API on SQLite and a Next.js 16 frontend. Laravel validates; Next.js server actions show each error under its field. Built test-first with Claude Code, with a 7-minute code walkthrough.
Solo, in a 4-hour hiring assessment (Oct 2026). Designed it, wrote 7 Laravel feature tests first, built the API and the Next.js UI (server components, server actions, useActionState), and a Playwright test that drives a real browser through the whole flow. Caught a Next.js 16 behaviour the AI's test missed (hidden pages stay mounted) and a fresh-clone bug before submitting.
Laravel 13 · PHP · Next.js 16 · TypeScript · SQLite · PHPUnit · Playwright · Claude Code
Claude Agent Loop Guard (Anthropic SDK + Playwright)
A Claude tool-use agent browses a shop with Playwright and returns a comparison table. Around the loop sit the guards that stop an agent burning money: max turns and a USD budget checked before every call, a repeat-call breaker (soft error, then hard stop), checkpoint/resume and a per-call cost log. 6/6 offline tests.
TypeScript · Anthropic SDK · Claude · Tool use · Playwright · node:test
SaaS Billing Starter (Next.js + Postgres RLS + Stripe)
A tested starting point for a multi-tenant SaaS: orgs and owner/admin/member roles enforced by Postgres row-level security, a billing gate in the database, and a Stripe subscription webhook that verifies the signature, applies each event once, survives retries and ignores out-of-order events. 12/12 offline tests.
Next.js · TypeScript · PostgreSQL · Row-level security · Supabase · Stripe
LLM Eval Harness (golden dataset + CI gate)
Evals for a Claude support-ticket triage feature: a 20-case golden dataset, exact-match graders for fields and an LLM judge for the free-text reply, the cost of each run, and a GitHub Actions gate that fails on a pass-rate drop or any missed urgent ticket. Good run 19/20 passes; regressed 14/20 fails with exit 1. 5/5 tests.
TypeScript · Anthropic SDK · Claude · LLM-as-judge · GitHub Actions · node:test
AI Lead Responder (n8n + Claude)
A visitor asks a clinic a question on its website. n8n sends it to Claude, which drafts a helpful reply; the visitor has it 8.3 seconds later, and every lead is saved with its reply for the team to follow up.
Sole builder (Oct 2026): the n8n workflow (new lead, draft the reply with Claude, save the lead, send the reply), the Postgres lead sheet, a recorded real run and the case study.
n8n · Claude · PostgreSQL · Webhooks · Workflow automation
Clinic Chat Assistant (n8n + Claude)
A website chat for a dental clinic. It answers only from the clinic's info sheet, asks what the clinic needs (service, new or returning, day, name), offers real open times and books one. A question it can't answer goes to a staff member instead of a guess, and the front desk sees every lead, booking and handoff on one board.
Sole builder (Oct 2026): the n8n workflow (load clinic info, chat history and open slots; one Claude call that returns a strict reply/fields/action format; save the lead, booking or handoff), the Postgres tables, the chat widget and front-desk board, a recorded real run and the case study.
n8n · Claude · PostgreSQL · Webhooks · Chatbot · Appointment booking
AI Inbox Triage + Invoice Extractor (n8n + Claude)
Email triage and invoice data extraction for a dental clinic's front desk. Every minute n8n reads new email and Claude sorts each one (invoice, patient question, supplier, spam), copies the invoice details into one list with the total due, flags overdue and due-soon bills, and drafts replies to patients for staff to check and send. 8 emails sorted in 47 seconds, ₱28,150 in bills captured.
Sole builder (Oct 2026): the n8n workflow (check the mailbox, skip what's sorted, one Claude call per email with a strict JSON format, a code check that keeps an invoice only if its vendor and number are really in the email, save), the Postgres tables, the front-desk dashboard, a recorded real run and the case study.
n8n · Claude · PostgreSQL · Email triage · Invoice extraction · Mailpit
WordPress Speed Fix, before → after (WP-CLI + Lighthouse)
Site speed and Core Web Vitals for a dental clinic's WordPress site. One repeatable WP-CLI script removes unused plugins, converts 24 MB of camera photos to WebP, adds page caching, gzip and browser caching, serves Elementor's fonts locally, defers scripts and cleans the database. On simulated slow 4G the main picture shows in 4.9 s instead of 104.0 s; page 26.0 MB → 1.1 MB; Lighthouse mobile 55 → 78.
Sole builder (Oct 2026): the deliberately slow Elementor site (built the way real sites get slow), fix.sh (WP-CLI, ImageMagick + cwebp, free Cache Enabler), Lighthouse measurement (median of 3), a check that every heading survives and screenshots match, the before/after report, the demo video and the case study.
WordPress · WP-CLI · Elementor · Lighthouse · Core Web Vitals · Docker
WordPress Site Rescue, down → back (WP-CLI)
Fixing broken WordPress sites for a dental clinic: a white screen of death after a plugin update (rolled back, fixed in 7.0 s), a site stuck in maintenance mode after an update died half-way (damaged plugin found by wordpress.org checksums and reinstalled, 17.5 s), and a staged hack simulation (rogue admin removed, backdoor quarantined, spam stripped from the database, passwords reset, sessions logged out, salts rotated, PHP blocked in uploads, 23.6 s). Every cause comes from evidence; every fix is verified, booking form included.
Sole builder (Oct 2026): the healthy Elementor clinic site, break.sh (three staged incidents, the hack an inert simulation), rescue.sh playbooks that diagnose from HTTP status, debug.log, WP-CLI, checksums and the database, check.sh (all three break → rescue cycles, screenshot diff against the healthy site), the incident log, the demo video and the case study.
WordPress · WP-CLI · Elementor · Bash · Security · Docker
WordPress Care-Plan Report (n8n + Claude)
Website maintenance made visible: every Monday an n8n workflow checks a WordPress clinic site (3 online checks, updates waiting, WordPress/PHP versions, PHP errors, backup age, a Lighthouse speed score), Claude writes a green/amber/red report with a short to-do list in plain English, code checks every number in it against the run's data, and it is saved, emailed and archived. A plugin put behind on purpose turned the next report amber, naming the exact version to update to.
Sole builder (Oct 2026): the read-only health-check mu-plugin and care-bot user, backup.sh, the n8n workflow (schedule + run-now webhook, Code/HTTP/Postgres/Send Email nodes), the parse step with a status floor and numbers guard (12-case check), the email and archive, check.sh, the demo video and the case study.
n8n · Claude · WordPress · WP-CLI · Lighthouse · Postgres
Signal Map — Mindanao
An offline-first map of where mobile data actually works across Mindanao, per SIM. A public speed-data baseline colours the whole island on day one; a phone speed-probe and importable Android signal logs add my own per-carrier measurements on top; and a "nearest ≥5 Mbps spot" answer works with no connection.
Sole developer — Next.js 15 App Router, Drizzle + Neon Postgres, MapLibre + OpenFreeMap vector tiles, a hand-written service worker + localStorage queue for offline, and a DuckDB pipeline that reduces 3.4M Ookla tiles to a ~450 KB Mindanao layer. Tap any circle for its speed; the legend decodes the colours at a glance.
Next.js 15 · React 19 · TypeScript · Drizzle ORM · Neon Postgres · MapLibre GL · PWA / Service Worker · DuckDB · Geospatial · Vercel
Forge Desk — Nuxt / Vue / Flutter
One freelance ops desk — clients, tasks, timesheets, invoices — built three times over one typed domain model, all three live: a Nuxt 3 SSR app with 27 Nitro API handlers, a Nuxt 2 legacy twin at feature parity, and a Flutter web companion on the same API. 234 passing tests and a 1,850-line Nuxt 2→3 migration guide.
Sole developer — all three surfaces, the migration guide and the eight decision records. Sign in as demo@forgedesk.dev / forge-desk-demo and change anything; there is a reset button.
Nuxt 3 · Nuxt 2 · Vue 3 · TypeScript · Nitro · Pinia · zod · Tailwind · PostgreSQL · Vitest · Playwright · Flutter · Dart · REST API
BridgeOps Integration Hub
Forward-Deployed-style ops console on Netlify: Salesforce, AppFolio, Podio and Sage connectors, webhook ingest (Functions + Supabase), ETL field map, unified loans and RAG-ready chunks.
Sole design, build and deploy.
React · TypeScript · Netlify · Netlify Functions · Supabase · Webhooks · ETL
C Jane quiz app
Interactive quiz app.
Built and deployed.
React · TypeScript · Vite
Simonas quiz funnel
Interactive quiz funnel.
Built and deployed.
React · Vercel
Bubble Answer Sheet Generator
Printable A4 bubble answer-sheet generator — set the question count and options, then print. Pure HTML/CSS/JS, no dependencies.
Sole developer.
HTML · CSS · JavaScript
Stock Flow
Web app for tracking and visualising stock / inventory flow.
Built and deployed.
React · Vercel
Oracle Core
Web app.
Built and deployed.
React · Vercel
Ecommerce & CMS
Shopify, Wix, WooCommerce and WordPress — live stores and platform samples.
Lumen Skin Co — Shopify theme
Premium DTC skincare store on a Dawn fork with custom Liquid sections: cinematic hero, editorial product rail, story split, UGC masonry, ingredient spotlight and a kit builder. Four verticals share the theme — beauty, outdoor, supplements and fashion.
Sole build — theme code, sections and deploy.
Shopify · Liquid · Dawn fork
Lumen Skin Co — Wix Stores
The same beauty DTC brand rebuilt on Wix Stores in the Harmony Editor, with the static design reference it was ported from.
Sole build on both the Wix site and the static reference.
Wix Harmony Editor · Wix Stores
EZ Supps
Live supplements site built with WordPress + Elementor + Slider Revolution.
Built for a previous employer, including a dark variant.
WordPress · Elementor · Slider Revolution
Simplep Beauty
Live WooCommerce store.
Worked on the site and integrated a custom payment method into checkout.
WordPress · WooCommerce · Elementor
Alpha Longevity
Live WooCommerce store.
Site work plus a custom payment method integration.
WordPress · WooCommerce · Elementor
mckn-tigatto
Multi-page WordPress business site on a Twenty Twenty-Four child theme: Elementor layouts, custom child-theme CSS and scroll animations, and an ACF-driven team section that non-developers can edit via light custom PHP templates.
Sole build.
WordPress · Elementor · ACF · PHP · LocalWP
mckn-listings — IDX-pattern listing engine
A WordPress real-estate listing engine built from scratch instead of installed: property CPT on RESO Data Dictionary field names, filtered search, CSV/JSON feed import with idempotent upsert, delta sync on ModificationTimestamp and snapshot reconciliation that unpublishes departed listings without ever deleting them. Fields that IDX agreements forbid publishing are blocked at the schema layer — a test asserts a lockbox code cannot reach the HTML. 145 assertions on the WordPress-free core; three demo brands run on the one engine.
Sole developer — data model, importer, search, templates, REST, WP-CLI, compliance gate, SEO rules, tests.
WordPress · PHP 8 · RESO Data Dictionary · WP-CLI · REST API · JSON-LD · Docker
Business sites
Marketing and business sites, live.
Good Faith Exams — Figma → Elementor
A full 14-section healthcare marketing site built from a Figma design into WordPress + Elementor as native, client-editable blocks — containers and widgets only, no custom-code embeds. Hero, card grids, glass-overlay banners, pricing, icon lists and a fully styled FAQ accordion.
Sole build — matched section by section and pixel-checked at desktop and mobile, from scratch in about 2¼ hours.
WordPress · Elementor · Figma
Good Faith Exams — Astro port
The same healthcare layout ported to an Astro static site: componentised .astro pages, pure HTML/CSS, minimal JS, plus meta/Open Graph, JSON-LD (MedicalBusiness + FAQPage), a sitemap and robots.txt.
Sole build.
Astro · HTML · CSS · JSON-LD · SEO
Life Got Better Home Care
Live home-care business website.
Design and build.
Web
El Niño Construction
Construction business site.
Design and build.
Web · Vercel
On camera
Me, walking through the work. Press play — nothing here opens a new tab.
Intro
Who I am and how I work.
Walkthrough
Tref2 demo
The production client dashboard behind its login — onboarding and admin screens.
Next.js · Supabase
GoHighLevel demos
Three recordings: a general GHL demo, a Figma → GHL page build, and an automation / RSVP tagger build.
GoHighLevel
Earlier work
Real projects I shipped whose hosting has since been retired, plus employer products with no public demo. Kept here for range.