This project was created to help sales teams better understand the day‑to‑day reality of an “AI Creator.” Rather than presenting technical specs or feature lists, the experience focuses on showing how AI‑powered professionals move through a demanding workday. The result is an energetic piece that feels more like an interactive story than traditional instructional content.

One of the defining choices was the sideways‑scrolling format. Early in the project, I researched and built technical demos to validate that horizontal scrolling could work smoothly across devices without compromising usability. I owned the technical implementation from end to end, including scroll mechanics, animation systems, and responsive behavior, while collaborating closely with the designer to refine assets and interactions where needed. The experience is powered by multiple GSAP ScrollTrigger timelines layered over a flexible CSS layout, using state‑aware interactions and subtle visual feedback to guide users forward.

The course was localized into more than 20 languages, requiring careful handling of variable text length. Text containers scroll independently when needed, and soft hyphenation was selectively applied to prevent overflow. The final build became a reusable template for a second sideways‑scrolling course, reflecting my focus on code that balances creativity, scalability, and production readiness.

grain. is a client‑side gratitude tracking app built with React 19, TypeScript, and Vite. Instead of only rendering entries as a list or feed, each journal entry becomes a physics object inside a Matter.js canvas. On load, previously saved “grains” fall from the top of the screen and settle into a growing pile. When a new entry is added, a single particle drops in and joins the rest. The interaction makes a normally invisible habit feel tangible — “individually small, collectively powerful.”

I designed clear boundaries between React’s declarative UI model and the Matter.js physics engine, exposing a command layer so the two states could coexist with their own logic, and interact without being fragile. The UI is composed of custom‑built, reusable components supported by a lightweight design token system, ensuring the UI can scale cleanly as new pages and features are introduced. Accessibility is supported across the app, including within the canvas layer itself. The app is fully responsive, and the physics simulation gracefully resizes without teardown or loss of state.

This project also represents a deliberate shift in my skill set. I taught myself React and TypeScript specifically to build it, using AI as a teacher and critical thinking partner rather than simply a code generator. I explored tradeoffs, pressure‑tested architectural decisions, and consciously scoped a v1 that ships cleanly while leaving room for future features like filtering, mood tracking, and additional visualizations. It’s a compact project, but it reflects how I approach engineering: idea‑driven, technically grounded, and built with the user experience in mind.

This project addressed three challenges common to interactive educational content built at scale: creating experiences that feel memorable, ensuring smooth and reliable behavior across devices and input types, and establishing a durable base template that could be reused by a broader development team. I built a single‑page clickthrough module designed to balance visual polish and interactivity with strict control over progression, navigation, and user state. The goal was not just to ship a compelling one‑off experience, but to define a stable, production‑ready format that reduced bugs, prevented broken user flows, and could be fine‑tuned and reused across future courses without sacrificing quality or consistency.

At the core of the module is a master GSAP timeline that sequences multiple content scenes and pauses at labelled boundaries. This is paired with a centralized page index that tracks page‑specific data such as ScrollTrigger timelines, scroll completion and interaction completion. Course progression is gated through three independent lock types (scroll, timeline, and interaction) rather than a single boolean, ensuring users can only advance once all required conditions are met, while remaining resilient to edge cases like rapid scrolling, repeated clicks and viewport resizing.

The module uses a modular structure for popup interactions and repeated animation patterns, allowing shared behavior without duplicating logic across pages. Popups are generated through factory functions that enforce a consistent lifecycle (open, disable scroll, animate, close, restore state), while still allowing optional customization per instance. Common motion patterns are similarly abstracted into helper functions that build and return GSAP tweens, keeping timelines readable, DRY, and easy to tune globally without refactoring individual scenes.

The module also supports localization and responsiveness, including layout‑aware animation adjustments. The result is a stable, production‑ready template designed not just to ship one course, but to be reused and maintained by a broader team with varying levels of technical depth.