Medtech
Medical device interfaces rebuilt with modern web tooling. Vital signs monitor, blood pressure, glucometer, and pulse oximeter each replicating the physical device experience with clinical clarity.
Immersive Training
A physical and virtual training center for high-performance athletes and rescue teams. Simulates real terrain, altitude, and weather conditions in an immersive environment. First use case: mountaineers and rescue professionals.
CSS Grid Puzzle
Exploring CSS Grid layout with an interactive grid placement system. Playing with explicit track sizing, named areas, and overlapping elements.
Glassmorphism System
Layered blur effects and translucency using backdrop-filter. Exploring depth perception and accessibility trade-offs when using glass-style UI.
Scroll-driven Animations
Same result, two approaches: a dot moves horizontally as you scroll once with GSAP ScrollTrigger, once with the native CSS animation-timeline API. Each in its own self-contained scroll container.
Camera Framing
Camera framing fundamentals from my Image and Sound Design degree. The lens I keep returning to whenever I want to focus a piece or shift its perspective. Pick any shot and the camera reframes a crash-test dummy inside a live 9:16 viewport, with on-canvas angle indicators and degree readouts.
The 12 Principles of Animation
The Disney principles distilled by Ollie Johnston and Frank Thomas in The Illusion of Life, each illustrated with a self-contained CSS animation. The classic bouncing ball used as the lens to feel squash, anticipation, easing, follow through, exaggeration and the rest in motion.
OKLCH Color System
Building a perceptually uniform color palette using the OKLCH color space. Generating accessible, harmonious scales from a single hue.
Fluid Typography Scale
Responsive type that scales smoothly between viewport sizes using clamp(). No breakpoints, no jumping just fluid, proportional type.
The Alphabet in CSS
Every letter of the alphabet drawn entirely in CSS, no SVG, no images, no fonts. Pure geometry, box shadows, and transforms.