A Decade of Engineering

Contracted as the sole engineer, I took the Figma designs to a working product in just over a month — frontend, API, database, authentication and cloud infrastructure. The stack is deliberately lean: a React 19 SPA over a Hono API, with types flowing from the Postgres schema all the way to the UI through Hono's RPC client, so there's no code generation and the compiler catches any contract mismatch.

Tenant isolation is enforced twice over — Postgres row-level security scoped per request inside transactions, backed by a three-tier role model spanning system, vendor and per-journey access. WorkOS handles authentication with a custom session layer on our side. The whole AWS estate (networking, database, compute, secrets and CDN) is defined in CDK and deploys to separate staging and production environments.

I built KanSpec to manage a fleet of agents and their work. Each agent gets its own Git worktree with an embedded terminal, so several run in parallel and I can preview what each is producing side by side. It doubles as a project-management tool, keeping tasks, notes and specifications in one place.

Requirements, tasks and decisions are stored as YAML inside the repo, so an agent's context lives in version control rather than a disposable chat window. A dedicated integration branch keeps agent output separate from the shared branch, and because the KanSpec resources are committed alongside the code, context travels between branches and agents through ordinary Git.

Amender is a visual editor that treats the final rendered HTML as an editable canvas. Developers can change the output of third-party plugins — server-side or client-side — without editing the original code.

It pairs a server-side DOM manipulator with a 20KB client-side event manager that orchestrates over 100 action/aspect combinations. Undo is handled recursively with a WeakMap, and a built-in package manager auto-injects ES modules like GSAP and Three.js when a design needs them.

An agent that sits between an LLM and live DOM manipulation, using a structured protocol to turn the model's intent into concrete code changes.

To give the model something to reason about, I built a context-probing system that uses XPath analysis to feed it the page's layout, letting it inspect a page the way a developer would. Latency matters in a live editor, so I ran a geo-optimised deployment on Vertex AI and compressed payloads with Zlib to keep responses under a second.

A cache-friendly parser that evaluates nested logical expressions — AND, OR and parentheses — and runs a whitelist of WordPress functions to control which assets load.

It walks the string character by character onto a stack and uses regex to interpret each condition. A recursive template-map walker then loads assets based on the (optionally nested) logic, written in a PHP-like format developers already recognise, but without ever calling eval().

A projection engine that injects a proxy element to measure exactly where a pseudo-element sits, making it possible to interact with something the browser treats as unclickable.

By temporarily mapping the pseudo-element's styles onto a real tag, I can query the CSSOM for its transformed coordinates. That lets you select and style elements which don't actually exist in the DOM tree, with logic to handle transforms and z-index relationships.

I moved the editor off its fixed layout onto a modular, drag-to-resize workspace.

A theming engine built on Sass maps and CSS-variable injection added a native dark mode, and on-page breadcrumb navigation for the nested DOM made it far easier to target elements deep in a complex layout.

An 'infinite tape measure' slider for scrubbing through numeric values with precise visual feedback.

Underneath it is a two-way unit converter that works out pixel equivalents for relative units — rem, em, vh, % — on the fly. It isolates and adjusts individual numbers inside multi-value strings like background-position, so you can tweak one part without disturbing the rest.

A two-way layout engine that maps the whole CSS Grid spec onto interactive drag-and-drop controls and visual inputs.

I wrote a parser to normalise computed sub-pixel values back into clean grid coordinates, so tracks and areas could be resized by hand while the generated code stayed exactly in sync.

A watcher that lets other builders sit inside Microthemer in a single, shared workspace.

I used the MutationObserver API to notice when a builder's panel moved and shift the parent interface to match, keeping responsive views in sync too. A regex sanitisation layer filtered out the builder's transient classes so the HTML navigation panel stayed readable.

This connected animate.css to scroll triggers and custom DOM traversal, so a trigger element could animate a different element elsewhere on the page.

A double requestAnimationFrame pattern force-resets an animation by guaranteeing a style recalculation between frames, which makes animations replay reliably.

A selective compilation system that reached 50ms compile times on projects with over 3,000 selectors.

By parsing Sass into an abstract syntax tree, I built a dependency map of variables and mixins. That let the compiler rebuild only the selector you edited and its direct relatives, instead of the entire stylesheet.

I internationalised the interface with WordPress i18n and built an automated error-capture system.

The telemetry deduplicates client-side JS exceptions and bundles them with context — browser, OS and active plugins — so I could resolve conflicts remotely instead of waiting for a user to report and reproduce them.

An HTML inspector that lets you traverse the DOM by clicking code in a synchronised ACE editor panel.

I moved code beautification onto a Web Worker and mapped code lines to live elements using node-index snapshots, so the link between the two held even when the DOM changed underneath it.

One of the first visual interfaces to allow per-element media-query overrides, so an element could take different CSS at different widths.

Dedicated breakpoint tabs let users switch between device views and apply CSS to each — granular responsive control that predated the major WordPress builders.

The first visual CSS editor that worked on any WordPress theme, turning the platform into a design surface.

I built a selector engine and a UI covering more than 100 CSS properties, so people could style any element on the page with a proper toolkit while staying completely theme-independent.