Portfolio

M4L Labs & Reference Architecture

Portfolio, Architecture & R&D Projects

A showcase of my solo-engineered reference architectures, technical demonstrators, interactive SVG engines, and developer experiments. The projects below serve as production-ready foundations designed for further team and content scaling.

Reference Architectures & Core Engines

Fretty & Guitar-Poet

Architecture PoC

Technical demonstrator and core application engine for interactive music education and an upcoming robotic guitar teacher. Generates dynamic guitar fretboards, musical notation, and chord diagrams in real time using vector SVG graphics and atomic state management (Zustand).

💡 Architectural State: Rather than a commercial song catalog, it is engineered as a modular NPM package ready to be scaled by a product team, connected to Python/IoT hardware, and populated with educational curricula.

React 19 Zustand Dynamic SVG TypeScript Music Theory Engine

Headless Web Platform

Reference Blueprint

Multi-domain cloud reference architecture powering this platform, solo-engineered on a modern stack: Next.js 16 (App Router), Docker, Google Cloud Run, and Headless WordPress connected via WPGraphQL API with full 5-language (i18n) routing.

💡 Ready to Scale: Built as a production-ready skeleton that allows editorial teams or additional developers to immediately step in and scale content without building publishing infrastructure from scratch.

Next.js 16 GCP Cloud Run WPGraphQL Docker Tailwind CSS

Developer Lab & Vector Engineering

Generative & Reactive SVG Graphics

I enjoy pushing the boundaries of what can be rendered directly in the browser without heavy rasterized images. I focus on building interactive UI primitives, dynamic charts, and mathematically generated SVG vectors driven by application state.

// Example: Dynamic SVG Fretboard Node Generation
<svg viewBox="0 0 800 200" className="w-full">
  <Fretboard strings={6} frets={24} tuning="EADGBE" />
</svg>

Looking for commercial client projects?

Explore my track record with enterprise companies, media houses, and commercial clients in the References section.

Explore Client References