design · full stack
Process engine
An interactive 3D machine in plain three.js and WebGL. Describe your problem and watch it move through Discover, Design, Build and Grow, step by step.
Explore Process engine01 / Home
Show me your problems. I'll build the whole solution.
Strategy · design · code · AI
From question to launch.
Most problems don't arrive sorted by discipline. A product needs a clear position, an interface people understand, software that holds up and, more and more, AI that does real work. I carry all four, so nothing gets lost between hand-offs.
Four frontiers, one accountable builder
- AI engineeringassistants, agents and retrieval that work in production, with tests that show it.
- Full-stack developmentweb apps and platforms built to be maintained, from database to interface.
- Designinterfaces, identities and interactive 3D that make complex things feel simple.
- Brand strategypositioning and messaging, so the right people understand why it matters.
Recent problems I've worked on
02 / Journey
Your path from problem to solved
Every project follows the same four steps: we discover what's really wrong, design the answer, build it properly and help it grow. You always know which step we're in, what you'll get from it and what I need from you.
Where are you starting from?
I have a problem to solveStart with the four steps.
You run a business, a team or an organisation and something isn't working: a process, a product, a message. Start with the four steps below, then see similar work.
I'm hiringThe proof: Work, Lab, Principles.
You need someone who can own a problem across AI, engineering and design. The fastest proof is the Work case studies, the Lab tools you can try right now, and how I work in Principles.
Let's build something togetherHow I decide, then we talk.
You have a venture, a product idea or a partnership in mind. Read Principles for how I make decisions, then start a conversation.
I'm here to learnNotes first, then the Lab.
The four steps
We find the real problem, often not the first one named.
More about Discover
We find the real problem, which is often not the first one named. I talk to the people involved, look at what exists (your site, your data, your process) and restate the problem in one page you can agree with or correct.
You get: a problem statement, what success looks like, and the smallest useful first version.
I need from you: an honest hour or two, and access to what exists.
We shape the answer before writing much code.
More about Design
We decide what the answer looks like before writing much code. That covers positioning and message, the shape of the product, and the screens or flows people will use.
You get: a clear direction you can react to: a positioning statement, flows and key screens, or a working prototype.
I need from you: quick, honest feedback.
End to end, in small releases you can see.
More about Build
I build it end to end: interface, backend, data and any AI, with tests and documentation, in small releases you can see.
You get: working software you own, deployed where you choose.
I need from you: decisions when trade-offs come up.
Launch is the start: watch, fix, improve.
More about Grow
Launch is the start. We watch how it's used, fix what's unclear and improve what matters most.
You get: a short list of what to improve next, based on how people actually use it.
I need from you: time to look at the results together.
Frequently asked
How long does a project take?
It depends on the problem, so the first step always ends with a scoped plan and timeline. Small, focused builds take weeks; platforms take longer and ship in stages.
Who owns the work?
You do. Code, designs and content are yours, in your accounts.
What happens after launch?
We agree on it up front: a handover with documentation, a short support window, or ongoing work. See the formats in Principles.
A note from me
I like problems that need more than one kind of thinking. I'll tell you plainly what I'd do, what I wouldn't, and why.
03 / Frontiers
Four frontiers, one build
Most products stall in the gaps between specialists: the strategy that never reached the interface, the design that was too costly to build, the AI feature nobody could explain. I work across all four, so each decision is made knowing what it means for the others.
The toolkit
Technologies I work with.
- Claude: Anthropic's AI model. I use it to write, review and reason through code, and to build agents.
- GPT: OpenAI's GPT models, for chat, writing and AI features inside products.
- Higgsfield: AI video and image generation, for campaign visuals and motion content.
- Premiere Pro: Adobe's video editor, for cutting, grading and finishing video.
- Adobe: Adobe Creative Cloud: the suite behind print, photo, video and brand work.
- Figma: Collaborative interface design, from wireframes to prototypes and design systems.
- Photoshop: Image editing and compositing, for product shots and campaign graphics.
- Illustrator: Vector design, for logos, icons and brand assets that scale.
- Framer: Design-led website builder, for fast, animated marketing sites.
- Firebase: Google's app backend: database, sign-in, hosting and functions.
- JavaScript: The language of the web, running in every browser and on servers.
- React: A library for building interfaces from reusable components.
- GoHighLevel: An all-in-one CRM and marketing platform: funnels, email, SMS and pipelines.
- n8n: Workflow automation that connects apps and runs AI steps, self-hostable.
- Node.js: JavaScript on the server, for APIs, tools and backends.
- Next.js: A React framework for fast, search-friendly websites and apps. This site runs on it.
- Zapier: No-code automation that links thousands of apps together.
- PostgreSQL: A powerful open-source relational database for serious data.
- Tailwind CSS: Utility-first CSS, for building consistent interfaces quickly.
- SQL: The language for querying and shaping data in relational databases.
- Vercel: Cloud platform for deploying and hosting web apps, made by the Next.js team.
- Git: Version control: every change tracked, branched and reversible.
How they connect
- Brand strategy defines the promise
- design shapes the experience
- full-stack engineering makes it real
- AI makes it scale
Then what we learn from real use flows back into the strategy.
The four frontiers
AI engineeringAssistants, agents and retrieval systems that hold up with real users and real data.
Problems I take on: answering questions from your documents, automating repetitive work with agents, adding AI features to an existing product, deciding whether you need AI at all.
You receive: a working system, an evaluation set that shows how well it performs, and a plain-language explanation of its limits.
Full-stack developmentWeb apps and platforms built to last, from database to interface.
Problems I take on: a first version of a product, a portal that replaces paperwork, a slow or fragile system that needs rebuilding, integrations between tools.
You receive: deployed software you own, with tests, documentation and a handover.
DesignInterfaces, identities and interactive 3D that make complex things feel simple.
Problems I take on: confusing products, brands that look unfinished, websites that don't explain the offer, ideas that need an interactive demo.
You receive: design systems, key screens, brand assets, and production-ready interactive pieces.
Brand strategyPositioning and messaging, so the right people understand why your work matters.
Problems I take on: "people don't get what we do", a technical product that's hard to explain, a launch that needs a clear story.
You receive: a positioning statement, a message hierarchy, and the words for your site, deck and product.
Frequently asked
Can one person really do all four?
For focused products and early stages, yes, and it's often faster because nothing is lost in hand-offs. For large-scale or regulated systems I'll say when you need a bigger team. More in the note Can one person handle strategy, design and the build?
Do you subcontract?
No. The work you see is mine. If a project needs a specialist I don't cover, I'll tell you up front.
04 / Work
Work you can check
Each case study starts with the problem, then the constraints, what I did across strategy, design, code and AI, and what exists now. Where something is a prototype or a proposal, it says so. Where it isn't measured yet, it says that too.
For hiring managers
Every case lists my role, the stack and "what I'd change next time". If you'd like to walk through the code or decisions behind one, ask me.
Case studies
Drag or scroll over it to turn · click a project to open its prototype. Use the up and down arrow keys, or Tab, to move between projects, and Enter to open one.
- One connected system for every office of a town hall, as a prototype
A working prototype of a digital town hall for the Municipality of San Francisco, with 20 office workspaces, linked workflows and an AI receptionist, built on mock data by a team of specialized AI agents I designed and directed.
- A mobile wallet designed so a bug can't move the money
PasinPay is an emerging-market mobile wallet designed to run through a licensed partner bank, delivered by a team of 11 specialized AI agent roles. It has a clickable prototype of all 12 flows and a backend starter whose database refuses bad money data.
- Map how any website is built, from one URL
A Python crawler and Claude Code agent that turn a URL into a readable blueprint of a website: stack, structure, journeys and diagrams. It mapped all 43 benchmark sites behind this site's research.
- ClassPulse moves a school program's grading off fragile spreadsheets
ClassPulse is product work for the Sitapatr Pratom English Program: one app for marks, evaluations, parent reports, timetables and staff records, built on the school's real grading formula, with an AI lesson-plan assistant.
- A town's website rebuilt so residents find what they need, as a pitch
A prototype redesign of the Municipality of San Francisco's public website, with services, officials, emergency information, 3D maps and two languages, built to pitch alongside e-Serbisyo. Not the official site.
- A shop where browsing ends in an order sent on WhatsApp, as a pitch
The shop from my proposed rebuild of ZAD ZEAL's website: immersive galleries of hand-made bags, blouses and local designs, product pages with every design, and a cart that turns into a ready-to-send WhatsApp order.
- A knowledge atlas for a gemstone expert
A redesign prototype for a gemstone appraisal and consultation business. It carries every article, page and document from the old WordPress site into a searchable library, wrapped in a chaptered story with live 3D gems.
- A national aviation regulator's portal (independent concept)
An independent concept rebuild of a national aviation regulator's website. It turns 424 hard-to-find PDFs into a searchable reader, maps licensing journeys step by step and adds a live 3D aviation viewer.
- Learn how a local government is organized, by exploring it
A study app that maps government from national level down to the village, with every office, position and duty, a what-if editor and a seven-lesson course.
- A streetwear brand built from one strange question, then put online
Shave the Frog is a client's philosophical streetwear label. I worked on their brand strategy, identity and content plan, then hand-built and deployed their website. The online store is not built yet.
Graphic design
05 / Lab
Try it before you trust it
The Lab is where you can test what I do instead of taking my word for it. Every tool is free, needs no account, and keeps your work on your own device. Each one has its own page, a short note on how it works, and the code behind it.
Tools
Scroll over the dial to discover.Swipe the dial to discover.Or use the arrow keys.
THE LAB
ai engineering · full stack
Site X-ray
Enter a website and see its structure, technology and the SEO and AI-search gaps holding it back. Free, no sign-up, powered by my Z-web blueprint agent.
Explore Site X-raybrand strategy
Positioning canvas
A free, guided canvas to define who you serve, what they'd choose instead and why you're better, ending in a positioning statement you can test.
Explore Positioning canvasdesign · full stack
Particle playground
Play with the GPU particle systems behind this site: murmurations, mycelium, phyllotaxis and flow fields. Change the forces and share a snapshot.
Explore Particle playgroundProcess engine, tool 01 / 04
For AI assistants and agents
The Notes and selected Lab tools are available to AI agents through this site's MCP endpoint and llms.txt.
06 / Principles
How I work, and what you can count on
These are the commitments behind every project. They answer the questions people usually only ask once something has gone wrong: who owns what, how data is handled, how progress is reported, and what happens when plans change.
Positions
Production, not demos
A demo proves an idea; a product has to survive real users, bad data and Monday mornings. I build for the second.
Measured, not promised
I don't quote results I haven't measured. We agree on what success looks like, then we check.
Motion must earn its frames
Animation and 3D should explain, never get in the way. Everything I make respects reduced-motion settings and works without them.
- Plain wordsIf I can't explain a decision simply, it isn't ready.
Privacy by default
Collect only what's needed, keep it only as long as needed, and say so clearly.
Ownership, data and security
- You own the workcode, designs, content and accounts are yours from the start.
Your data stays yours
It's used only for your project, stored where you agree, and never used to train public AI models without your consent.
Secure by default
least-privilege access, secrets kept out of code, dependencies kept current, and security headers set from day one.
How I work with you
- Progress you can seeshort written updates and working software early, not long silences.
- One point of contactme. No account managers between you and the person doing the work.
Honest trade-offs
when time, scope and quality pull against each other, I lay out the options and recommend one.
- Changes are normalNew information changes plans; we agree on the impact before acting on it.
Ways to work together
- Project: a defined problem, scope and outcome, from discovery to launch.
- Sprint: a short, focused burst on one thing: a prototype, a positioning workshop, an AI feasibility check.
- Ongoing: a regular commitment to improve and extend something that's already live.
Every engagement starts with the Discover step, so the scope is clear before you commit.
What I won't do
- Promise results I can't measure.
- Hide the work behind jargon.
- Lock you into my accounts or tools.
- Take on work outside what I do well. I'll tell you who you need instead.
07 / Contact
Start a conversation
Email is the best way to reach me. Tell me what isn't working, your timeline, and what success would look like. I read every message myself and reply personally.
What to include
- If you have a problem to solvewhat's happening now, what you've tried, and when you need it solved.
- If you're hiringthe role, the team and the problem the role exists to fix.
- If you'd like to partner or investwhat you're building and where you think I fit.
- If you're learningyour question. If it's a common one, it may become a Note.