Showcase

Interactive frontend experiments

Each demo below explores a different slice of complex frontend work - state management, custom interaction patterns, data visualization, and design-system integration - built from scratch without component-library shortcuts.

The demos are also a demonstration of the Chameleon Engine. Open the theme picker in the navigation and switch themes as you browse: the same demos keep their structure while their layout and visual language change. They are all using the same components and design tokens.

These demos are all Svelte-implementations, and most of them are a variation of tasks I have completed in React, in various projects, over the course of my career as a web developer.

Marine Forecast

A multi-window coastal forecasting interface where locations open as draggable, resizable analysis panels with live weather and marine data, D3 time-series charts, and persistent workspace layout. It's pretty cool.

Dynamic Table Workbench

A schema-driven data workbench with typed columns, inline row editing, safe operations instead of formulas, computed columns, and live summaries.

Form Builder

A Google Forms-style builder running entirely in the browser: define fields, preview the generated form, collect submissions, and inspect the schema and results.

This website's Component library!

The full Chameleon design system as a switchable gallery: the same components, content, and stylesheets implemented in Astro, React, and Svelte. Flip between frameworks and watch nothing change, then use the theme picker to make all three versions transform together.

Places Map

A personal atlas built with MapLibre: filter lived-in and visited places, explore projected pins, and fall back to readable place details when the map is not available.

Life Timeline

A scroll-driven visual autobiography that turns authored dates and life events into an illustrated, interactive journey through time.