Fabrica logoFabrica (current)

Fabrica (current)

Credit history flip animation
Mapbox dynamic parcel locator for smoother onboarding
List for sale modal
Clear and concise list for sale modal
Blockchain interactions that make sense to everyone
Blockchain interactions that make sense to everyone
Marketplace land purchase options
Marketplace land purchase made easy
Expressive profile activity feeds
Expressive profile activity feeds
Fabrica brings physical land onchain, and allows you to buy, sell, borrow againsg it, and trade it. As the only front end developer on the team, I'm responsible for the entire user experience.
ReactNext.jsTypeScriptMapboxTailwindCSSClaudeWagmiMotion
View Project →

Better Do It logoBetter Do It

Better Do It

Clean, fast, mobile-friendly UI
Clean, fast, mobile-friendly UI
Easy sign-in with Google authentication
Easy sign-in with Google authentication
AI-driven task suggestions based on local weather patterns
AI-driven task suggestions based on local weather patterns
Accessible, modern drag and drop
Accessible, modern drag and drop
Hand-rolled comment system
Hand-rolled comment system
Better Do It is an AI-driven side project that encourages accountability by sharing progress among friends. It features AI task suggestions based on local weather, a custom comment system, advanced accessibility, drag and drop, and easy sign-in via Google authentication.
ReactTypeScriptViteTailwindCSSClaudeSQL
View Project →

Custom Blog Integration

Custom Blog Integration

Using the View Transition API to create a smooth transition between pages
Blog post editor with live preview
Rich markdown editor with live preview
Perfect Lighthouse report in all categories
Perfect Lighthouse report in all categories
This web app integreates with a custom markdown blog, and allows you to create, edit, and delete posts.
ReactViteTypeScriptMDXClaude

ImgStacks

ImgStacks is an open-source React component I published for building interactive image stacks with randomized rotation angles for a more organic feel, configurable aspect ratios, and images lazy loaded by default. It includes a modal gallery for full-size images, touch-friendly swipe navigation, dark mode support, smooth animations, and accessible defaults—so you can add polished stacked previews without rebuilding the same UI in every project.
ReactTypeScriptCSS
View Project →

CodePen logoCodePen Projects

CodePen Projects

Animated Stacked Pages
Using SCSS loops to create stacks of paper with slightly different angles and shadows, creating a more organic, realistic presentation of paper.
React Slot Machine Demo
A slot machine built with vanilla React. The challenge here was setting up the sprites properly and applying a smooth, realistic easing animation to each wheel of the slot.
CSS Grid: Brady Bunch Edition
When Grid was considered bleeding edge (and really misunderstood), I wanted to create a fun example of how it could be used. This pen is a tribute to the Brady Bunch opening sequence.
Swaying Vertical Tabs
Vertical tabs with a gentle breeze animation, creating an organic overlapping effect during the peak of their respective sway.
I've had so much fun with CodePen over the years. More recently, I use it for prototyping ideas and sandboxing newer technologies.
ReactJavaScriptCSSSCSS
View Project →

Stack Overflow Elite Contributor

I've reached millions of people over a 15 year period, and have been a top contributor to Stack Overflow during its most vibrant years.
ReactJavaScriptTypeScriptCSS
View Project →