Project Examples

A collection of my work showcasing various technologies and solutions

Ecuador Provinces Quiz

An interactive geography quiz game that helps users learn Ecuador's provinces. Features include an interactive SVG map, real-time scoring based on speed and accuracy, visual feedback for correct and incorrect guesses, and a dynamic scoring system. The game provides an engaging way to learn Ecuador's political geography through gameplay.

React SVG Tailwind CSS JavaScript

Finish Time Calculator

A sophisticated running calculator that helps runners plan their races with two different approaches: pace-based calculations and predicted finish time calculations. Features include split time tables, unit conversion between metric and imperial, and detailed pace analysis.

React Bootstrap JavaScript CSS

Life in Weeks

A personalized visualization of life broken down into weeks, organized by life stages (Early Years, Teens, 20s, 30s). Features include interactive week blocks with tooltips, color-coded life stages, and special event markers for birthdays, races, and significant life events. The visualization helps put life's timeline into perspective.

React Tailwind CSS date-fns JavaScript

GPX Route Tools

A tool for analyzing and visualizing GPX route data from trail races. Features include elevation profiles, distance calculations, aid station planning, and route visualization. Includes sample routes from various trail races in Ecuador and Colorado.

React Leaflet GPX Parser CSS

Background Remover

A browser-based tool for removing backgrounds from images in real-time. Features include automatic background detection, adjustable hard cut and feather settings, and instant preview. The tool uses color sampling and distance calculations to create transparent PNGs with smooth edges.

React Canvas API Tailwind CSS JavaScript

Training Calendar

An interactive training calendar visualization for ultramarathon training. Features include a scrollable multi-year view, color-coded training intensity, race planning and tracking, and weekly mileage display. The calendar supports different training profiles for each year, from base training to advanced ultramarathon preparation.

React Tailwind CSS JavaScript CSS Grid

Masonry Gallery

A responsive, high-performance masonry image gallery built with React and Tailwind CSS. Features true masonry layout logic, keyboard navigation, image preview modal, and dynamic column balancing based on image heights. Showcases a large set of images with smooth user experience and modern design.

React Tailwind CSS JavaScript Masonry Layout