A Decade of Engineering

Move from 'manual engineering' to agentic orchestration using tools best positioned for this. I refined a technology stack specifically optimized for AI readability and rapid synthesis.

By channelling Cursor's capabilities with SSR/SSG, type-safe GraphQL schemas and a Payload CMS, I established a workflow that avoids the friction of an impenetrable legacy stack. This allows me to act as a Systems Architect, shipping production-ready solutions at maximum velocity.

Amender ia a novel visual editor that treats the final rendered HTML as a malleable design canvas, allowing developers to modify third-party plugin output without touching source files (both server-side and client-side).

I engineered server-side DOM manipulator and a lightweight (20KB) client-side Event Manager orchestrating 100+ 'action:aspect' combinations. It uses a recursive undo-system powered by the WeakMap API and a built-in NPM manager that auto-injects ESM libraries like GSAP and Three.js.

A high-performance agent that bridges the gap between LLMs and live DOM manipulation via a 'Structured Protocol' that translates AI intent into code snippets.

I developed a context probing system using XPath analysis to feed granular layout data to the AI. To achieve sub-second latency (vital when working with a live editor), I engineered a geo-optimized deployment on Vertex AI with Zlib-compressed payloads.

A cache-optimized text parser that evaluates nested logical expressions (AND/OR/Parentheses) and executes white-listed WordPress functions for granular asset control.

I built a character-walking stack and used Regex to safely interpret conditions. The engine features a recursive 'Template Map' walker to conditionally load assets based on (optionally nested) logic supplied in a PHP format familiar to developers, but without the security risks of using eval().

A projection engine that injects a proxy element to measure the exact coordinates of pseudo-elements, making them visually interactive.

By temporarily mapping pseudo-styles onto a real tag, it's possible to query the CSSOM for transformed coordinates. This enables visual styling and selection for elements that technically don't exist in the DOM tree, with internal logic to handle complex transforms and z-index relationships.

An adaptive workspace architecture that moved away from a fixed layout to a modular, drag-resizable IDE

I engineered a dynamic themeing engine using Sass maps and CSS variable injection to support a native Dark Mode. By implementing on-page breadcrumb navigation for the nested DOM, I reduced the cognitive load of targeting elements in deep, complex layouts.

An 'infinite tape measure' slider that allows developers to scrub through numerical values with high-precision visual feedback.

I built a bidirectional unit conversion engine that calculates pixel equivalents for relative units (rem, em, vh, %) on the fly. It uses 'Slidable Pieces' logic to isolate and adjust individual numbers within complex multi-value strings like background-position and shape functions.

A bidirectional layout engine that mapped the full CSS Grid spec to interactive drag-and-drop controls and visual UI inputs.

I wrote a custom parser to normalize computed sub-pixel values into clean grid coordinates. This allowed for visual resizing of tracks and areas while keeping the underlying code perfectly synced.

A buidler interface watcher that allows other builders to sit inside Microthemer in a single, unified workspace.

I used the MutationObserver API to detect when a builder’s panel moved, shifting the parent interface to match. Responsive views were also synchronised. I implemented a Regex sanitization layer to filter out transient builder classes, ensuring the HTML navigation panel remained intelligible.

Connect animate.css to user-defined scroll triggers and custom DOM traversal logic to pair trigger elements with event-receiving elements.

I implemented a double-requestAnimationFrame pattern to force-reset animations. This ensures a style recalculation happens so that animations replay correctly.

A 'Selective Compilation' system that achieved 50ms compile times for projects with over 3,000 selectors.

By parsing Sass into an Abstract Syntax Tree (AST), I built a dependency map that tracks variables and mixins. This allowed the system to compile only the edited selector and its direct relatives instead of the entire codebase.

Refactored the UI with WordPress I18n for global use and developed an automated remote error-capture engine.

I engineered a telemetry system to deduplicate client-side JS exceptions and bundle them with contextual metadata (browser, OS, active plugins), allowing for the remote resolution of conflicts without waiting for users to report an issue.

High-performance HTML inspector that allows users to traverse the DOM by clicking code in a synchronized ACE editor panel.

I offloaded code beautification to a Web Worker and developed a mapping algorithm using node-index snapshots. This ensured that the link between code lines and live elements remained synced even if the DOM was dynamic.

One of the first visual interfaces to support per-element media query overrides, allowing users to apply specific CSS logic to elements at different widths.

I introduced dedicated breakpoint tabs that let users visually toggle between device views and apply CSS logic. This predated the granular responsive controls of major WordPress builders.

The first visual CSS editor for WordPress. It worked on any WordPress theme, turning the platform into a design canvas.

I developed a selector engine and a UI with 100+ visual CSS properties. This allowed users to style any element on a page through a professional toolkit while maintaining complete theme independence.