Products, Platforms & Tools

I owned engineering across the interactive React product, Hono API, PostgreSQL data model, authentication and deployment. The result is a type-safe product with drag-and-drop journey mapping, inline editing, reusable research, media handling, role-aware interfaces and realtime collaborator signals.

I also built the AWS foundation in CDK: CloudFront and private S3 origins, an ALB and ECS Fargate API, RDS PostgreSQL, Secrets Manager, logging and alarms. Staging and production have repeatable preflight, deployment and smoke-test paths, while WorkOS authorization and PostgreSQL row-level security enforce tenant boundaries.

I built KanSpec as a project-management system that both people and coding agents can use. Tasks, specifications and notes live in version-controlled files, while the interface provides the board, document views and search I need to manage them.

Each task can run in a separate Git worktree with its own agent terminal and application preview. KanSpec then handles the less visible parts of parallel work: ports and databases, private work-in-progress branches, commit review, coordinated integration and task-specific design evidence.

Amender records selector-based amendments to the final rendered page. The same structured change can run against the completed HTML in PHP or in the browser after load, so plugin and theme updates remain untouched.

Live inverse operations and an IndexedDB-backed revision stack make the changes reversible. The published runtime extracts only the active snippets and page-level dependencies, including ES modules such as GSAP and Three.js when a change uses them.

I built a structured protocol that gives the model the selected element, relevant styles and editor state, then lets it request additional XPath or CSS evidence before proposing a change in Microthemer's own format.

Regional Firebase functions build the prompt and call Vertex AI without putting provider credentials in WordPress. Compressed payloads reduce transfer time, while an AI routing check and deterministic static analysis review requests and generated code before it reaches the sketchpad.

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.