Design engineer. Full-stack builder.

I make things that sit between design and engineering. Background in graphic design and visual communication, now building products, autonomous AI pipelines, and creative tools. Everything below is something I built.

21 products16 experiments21 case studies

Products

Gamut

Next.js, TypeScript, OKLCH, Tailwind CSS

Real-time theme builder powered by OKLCH colour science. Multiple colour scales with semantic token mapping, 11-step palette generation with perceptual lightness curves, sRGB gamut clamping, WCAG contrast checking, live UI preview with light/dark toggle, and export to CSS variables, Tailwind config, JSON, or Style Dictionary tokens.

Open View CodeCode

Kern

Next.js, Tailwind CSS, Framer Motion, TypeScript

Interactive typography explorer for variable fonts, optical sizing, and fluid type scales. Features real-time axis manipulation with spring animations, side-by-side font comparison, clamp() CSS generation, URL state persistence for shareable configs, and a classic specimen sheet. Includes Inter, Fraunces, Recursive, Roboto Flex, Playfair Display, and Source Serif 4.

Open View CodeCode

Prism

Next.js, Framer Motion, Spring Physics, GLSL, TypeScript

Design engineering component library with an autonomous daily build pipeline. Cursor-reactive buttons, spotlight cards, ripple effects, and shader-driven playground experiments. Dark, luminous aesthetic with spring physics and GPU-accelerated animations.

Open View CodeCode

ScapeStudio

Next.js, TypeScript, Web Workers, Canvas 2D, Zustand, JSZip

Browser-based photo editor for fine art print and t-shirt preparation. Non-destructive grayscale pipeline with interactive curves, threshold knockout with feather control, dual split preview, and batch multi-size export at 300 DPI. All processing runs off-thread via Web Workers with OffscreenCanvas.

Open View CodeCode

Lattiq

Next.js, Lexical, Yjs, WebSockets, TypeScript

Local-first collaborative rich text editor. Content saves to IndexedDB instantly and syncs between clients in real time via WebSocket and Yjs CRDTs. Includes a formatting toolbar, Gutenberg book seeding for performance testing, and a custom collaboration server with room management.

Open View CodeCode

Pizzazz

JavaScript, Rollup, Jest, npm

Published npm package adding customisable click and hover effects to any website. 13 built-in effects with gravity, rotation, spread radius, and spring-based easing curves. Zero dependencies, ~1KB, framework-agnostic with TypeScript declarations.

Open View CodeCode

Lunary

Next.js, Typescript, Astronomy Engine

Progressive Web App calculating planetary and lunar positions in real time using the Astronomy Engine library, with personalised lunar data and subscription features.

Open View CodeCode

Conjure

Next.js, Turborepo, Groq (Llama 3.3 70B), Prisma, Chrome Extension MV3

AI-powered prompt builder for Midjourney, FLUX, and DALL·E. Describe what you want in plain English and get three variations tuned for safe, creative, and experimental outputs, with iterative refinement, per-platform parameter formatting, and a Chrome extension that injects the builder into any page.

Open View CodeCode

sammii-cli

Node.js, Ink, React, chalk

Terminal portfolio rendered entirely in the command line using Ink and React. Browse projects, links, and bio with arrow key navigation, gradient ASCII header via ink-gradient, and colour-coded sections for products and experiments. Published to npm as a global package. Run npx sammii from any terminal.

Open View CodeCode

Podify

Next.js, Kokoro-82M, Orpheus 3B, ffmpeg

AI podcast generator that turns any text, URL, or content path into a fully produced two-host episode at roughly $0.04 each. Kokoro-82M and Orpheus 3B TTS synthesis, ffmpeg audio assembly, RSS feed output, and a web UI with real-time generation progress.

Open View CodeCode

Spellcast

Next.js, Turborepo, Drizzle ORM, PostgreSQL, Docker, Postiz

Self-hosted social media scheduling platform managing multiple brands across 8+ platforms. Turborepo monorepo with a Next.js frontend, a Node.js BFF, and a self-hosted Postiz + Temporal stack on Hetzner via Docker Compose.

Open View CodeCode

Orbit

Node.js, Shell, Claude Code SDK, Windmill

Autonomous content command centre orchestrating 14 specialised AI agents across a multi-stage pipeline: scriptwriting, editing, optimisation, scheduling, engagement, SEO, and performance analysis. Real-time dashboard with agent status, social metrics, and pipeline visualisation.

View CodeCode

iPrep

Next.js, Llama 3.3 70B, Whisper Large V3 Turbo, Prisma, PostgreSQL, Web Audio API

AI-powered spoken interview practice platform. Record answers, get automatic transcription via DeepInfra Whisper, and receive multi-dimensional scoring on delivery (WPM, fillers, confidence, intonation) and content quality (STAR methodology, impact, clarity). Includes question banks, analytics, and a quiz system.

Open View CodeCode

Artify

Next.js, Remotion, FLUX, Kling, DeepInfra, fal.ai

Automated daily content pipeline generating witchcraft and astrology illustrations, carousels, reels, and stories using FLUX image-to-image generation, Kling video synthesis, and Remotion compositions, then scheduling everything via Spellcast.

Open View CodeCode

Glint

Next.js, Vercel Edge Middleware, PostgreSQL, Recharts

Custom analytics platform built on Next.js Edge Middleware for zero-latency tracking and PostgreSQL for persistence. Self-populating dashboard via Cloudflare Worker cron job that simulates traffic from global edge locations.

Open View CodeCode

create-mcp-server

Node.js, TypeScript, tsup, Prompts

CLI scaffolder for Model Context Protocol servers. Interactive prompts for project name, description, and example tool selection, then generates a TypeScript project with the MCP SDK, Zod validation, stdio transport, and dev mode with auto-reload. Published on npm.

Open View CodeCode

Crystal Index

TypeScript, Next.js, Prisma, SQL, GPT4, React 3 Fiber

Custom CMS for cataloguing crystals with structured filters for colour, chakra, and properties, and GPT-4-generated descriptions.

Open View CodeCode

The CSS Color Game

Next.js, Vercel Edge Middleware, React Email, Resend

A daily color platform built with Next.js that combines an interactive color recognition game with automated email delivery and social sharing.

Open View CodeCode

Flip

Next.js, Prisma, PostgreSQL, TypeScript, Zod

Feature flag and A/B testing service with a dashboard, drop-in JS SDK, and real statistical significance engine. Deterministic variant assignment via MurmurHash3, two-proportion z-tests with Wilson confidence intervals, and a sub-2KB SDK using sendBeacon for reliable conversion tracking.

View CodeCode

Succulent

Next.js, Ayrshare API, AI SDK, Stripe, Shopify API

Social media management platform with integrated print-on-demand and e-commerce automation. Unified publishing, scheduling, and product creation across 13+ social platforms with automated store synchronization.

Open View CodeCode

Scape²

Next.js, Vercel E-commerce, Shopify

Customised Vercel E-commerce template integrated with Shopify APIs to create and deploy a functional online storefront.

Open View CodeCode

Experiments

Kinetic

Next.js, Framer Motion, TypeScript, Tailwind CSS

25 interactive demos showcasing spring physics, layout animations, gesture-driven interactions, SVG morphing, scroll-linked parallax, and more. Each demo is self-contained with adjustable parameters and real-time feedback.

Try it

Spectra

Three.js, GLSL, Web Audio API, Next.js

Audio-reactive shader visualiser driven by microphone input. Domain-warped simplex noise fragment shader with bass, mid, and high frequency bands mapped to warp intensity, hue rotation, and shimmer, all running in real time on the GPU.

Try it

$Refract$

Refract

WebGL, GLSL, JavaScript

Text-to-shader generative art tool. Type any word or phrase and watch it rendered as a unique real-time GLSL shader, with colour, form, and motion derived from the semantic feel of the input.

Try it

Grove

Next.js, Canvas API, TypeScript, Sprite Engine

Pixel-art forest simulation with dynamic time-of-day lighting, seasonal changes, fireflies, particle effects, and sprite-based characters. Custom 2D rendering engine with scene graph, sprite sheets, and a clearing system.

Try it

Isle

TypeScript, Canvas API, VS Code Extension API, Astronomy Engine

VS Code extension that visualises active Claude Code agent sessions as pixel-art characters in an Animal Crossing-style village. Agents sit at desks in an office, wander outdoors, and display real-time status. Dynamic time-of-day, seasonal changes, a pond, trees, and flowers.

View CodeCode

Beyond Light VR

Three.js, WebXR, GLSL, Vite

WebXR reconstruction of my MA dissertation installation. A journey through the visible light spectrum from infrared to ultraviolet: quotes screen-printed on acetate walls remain invisible until the final UV phase, where they blaze to life with a custom GLSL UV-reactive shader before the room dissolves into white.

Try it

Celestial map

D3.js, HTML5 Canvas, Vite

Interactive star globe rendered on Canvas using D3 orthographic projection. Realistic star colours from B-V colour index, magnitude-scaled sizes with glow effects, constellation lines and labels, Milky Way band, drag-to-rotate with idle spin, and a time slider that shifts the sky in right ascension.

View CodeCode

Creative Coding

p5.js, Javascript

15 browser-based visual experiments treating a single photograph as raw material. Pixel data drives particle systems, edge detection, flow fields, Voronoi partitions, kaleidoscopes, and more; each sketch is unique to the source image.

Try it

Liquidity

Next.js, Typescript, GSAP, Rapier2D

Experimental Next.js project exploring advanced animation techniques for creating liquid text effects through multiple approaches.

Try it

Day Lite

React, Javascript, Mapbox GL, Vite

Interactive globe visualising daylight patterns worldwide in real time using geospatial data from MapBox GL.

Try it

Balloon Bonanza

React, Typescript, Matter.js, Vite

A real-time physics simulation using Matter.js to render interactive balloons with realistic collision dynamics and constraint-based interactions.

Try it

Tailwind Colour Creator

React, TypeScript, Vite, Tailwind CSS

Colour palette generator that produces Tailwind-accurate 11-step scales from any base colour. Derives lightness, saturation, and hue curves from official Tailwind palettes, with click-to-copy swatches and CSS variable or config output.

Try it

Rainbow Laser Pointer

React, TypeScript, HTML5 Canvas

An interactive canvas-based laser pointer application with smooth trail rendering and color transitions.

Try it

Volcano Visualisation

D3.js, Javascript, React 3 Fiber

3D globe mapping volcanic eruptions worldwide using GeoJSON datasets with D3.js and React Three Fiber.

Try it

Artistry

React, Python, SQL

Integrates the Rijksmuseum API to retrieve and search artwork data, storing results in a SQL database accessed through a Python REST API.

Try it

Communication Infographic

React, Javascript

Interactive timeline highlighting key developments in communication technology, built with React and SVG animations.

Try it