Showcase
Tech demos
Smaller builds that don't need a full write-up: experiments, one-off tools, things I built because I was curious.
Wordle Kit
A fully customizable Wordle clone, packaged as a drop-in React component. Word length, word list, guess count, and color theme all configurable.
- React
- TypeScript
- Tailwind CSS
Command Palette
A fuzzy-searchable Cmd+K command palette as a drop-in React component and hook. Grouping, keyboard navigation, and a zero-dependency fuzzy matcher.
- React
- TypeScript
- Tailwind CSS
Minesweeper Kit
A configurable Minesweeper as a drop-in React component: flood-fill reveal, flag-to-mark, a safe first click, and four built-in themes.
- React
- TypeScript
- Tailwind CSS
2048
A drop-in 2048 component with smooth slide and merge animations, arrow-key and swipe controls, and a configurable board size.
- React
- TypeScript
- Tailwind CSS
Tic-Tac-Toe AI
Tic-Tac-Toe as a React component with a minimax-powered AI opponent, tunable from easy to genuinely unbeatable.
- React
- TypeScript
- Tailwind CSS
Markdown Widget
A split-pane markdown editor with live preview and a formatting toolbar, packaged as a standalone React component.
- React
- TypeScript
- Tailwind CSS
- marked
- DOMPurify
Form UI Kit
Accessible form primitives with validation states: text fields, selects, toggles, and a three-step multi-step form built from the same pieces.
- React
- TypeScript
- Tailwind CSS
Hover Button Lab
A gallery of button hover and animation effects for React: magnetic pull, click ripples, glow borders, 3D tilt, no animation library required.
- React
- TypeScript
- CSS
Admin Dashboard Kit
A clonable admin dashboard starter: sidebar layout, data tables, charts, a mock auth flow, and a settings page. A template to fork, not a drop-in component like the rest of these.
- React
- TypeScript
- Tailwind CSS
- react-router-dom
- recharts
Algorithm Visualizer
Step-by-step animated sorting and pathfinding visualizations as drop-in React components: real comparisons and swaps played back one step at a time, plus BFS, Dijkstra, and A* exploring a grid you can draw walls on.
- React
- TypeScript
- Tailwind CSS
D3 Gallery
A gallery of interactive D3.js visualizations packaged as typed React components: a force-directed graph, a zoomable sunburst, a chord diagram, and an animated bar chart race.
- React
- TypeScript
- D3.js
Schema Visualizer
An interactive, draggable entity-relationship diagram as a drop-in React component. Hand it a schema and get a canvas of draggable table cards connected by live-updating relationship lines, with pan and zoom built in.
- React
- TypeScript
Three.js Gallery
A small gallery of interactive Three.js/WebGL scenes as drop-in React components: a reactive particle field, an orbit-controlled object viewer, and a custom shader background.
- React
- TypeScript
- Three.js
- react-three-fiber
Kanban Board
A drag-and-drop Kanban board as a drop-in React component, built entirely on the native HTML5 Drag and Drop API. Reorder cards, move them between columns, and add or rename columns, with no drag-and-drop library dependency.
- React
- TypeScript
- Tailwind CSS
Motion Kit
Zero-dependency scroll and spring animation primitives for React: reveal-on-scroll, stagger, parallax, spring values, count-up, and an infinite marquee. Built entirely on native browser APIs, no framer-motion or gsap.
- React
- TypeScript
- Tailwind CSS
Physics Playground
An interactive 2D physics sandbox as a drop-in React component: drag, throw, and stack bodies with real gravity and collisions, powered by matter-js.
- React
- TypeScript
- matter-js