Frontend Engineering & Experiments

This section demonstrates advanced frontend engineering, UI systems and interaction design. These applications showcase my ability to execute demanding layouts, achieve high frame rates and engineer robust interactive architectures.

Personal Finance Tracker
Experiment

Personal Finance Tracker

A modern web application for tracking personal income and expenses with visual analytics

2023
2 months

A creative frontend experiment exploring modern UI patterns and data visualization techniques. This project demonstrates Vue 3's Composition API, reactive state management and interactive charting capabilities for personal finance tracking.

UI Architecture

State management avoids prop-drilling. SVG charts.

Performance

60fps chart rendering via memoization.

Responsive Grid

CSS Grid for dense tabular data on mobile.

Technologies Used

Vue.js 3
TypeScript
Chart.js
Tailwind CSS
Live DemoCode
Open the Personal Finance Tracker lab case study
Fitness Class Scheduler
Experiment

Fitness Class Scheduler

A modern Angular SSR application for planning weekly fitness classes

2023
1.5 months

A modern Angular SSR application for planning weekly fitness classes with dark mode, responsive design and client-side persistence.

UI Architecture

Interactive calendar with drag-drop and optimistic UI updates.

Performance

Minimized re-renders, pre-fetched months.

Responsive Grid

Touch-friendly day-view carousel for mobile.

Technologies Used

Angular 20
TypeScript
Angular SSR
Tailwind CSS
Live DemoCode
Open the Fitness Class Scheduler lab case study
Habit Tracker & Streak Counter
Experiment

Habit Tracker & Streak Counter

A Progressive Web App for tracking daily habits and building momentum

2023
2 months

A creative Progressive Web App experiment exploring offline-first design patterns and modern UI interactions. This project demonstrates PWA capabilities, service workers and engaging visual feedback for habit tracking.

UI Architecture

Accessible Gamification with Framer Motion.

Performance

IndexedDB for local state, offline-first.

Responsive Grid

Fluid SVG streaks from 320px to 4K.

Technologies Used

React 19
PWA
Chart.js
Tailwind CSS
Live DemoCode
Open the Habit Tracker & Streak Counter lab case study
Event Countdown Timer
Experiment

Event Countdown Timer

A feature-rich countdown timer for various life events

2022
1 month

A feature-rich countdown timer web application for creating and managing multiple countdowns for various life events with recurring events and smart notifications.

UI Architecture

State-machine for time and CSS animations.

Performance

requestAnimationFrame drops CPU utilization by ~40%.

Responsive Grid

Fluid typography clamps for hero timings.

Technologies Used

Vanilla JavaScript
HTML5
CSS3
Canvas API
Live DemoCode
Open the Event Countdown Timer lab case study
Travelogue - Travel Storytelling Website
Experiment

Travelogue - Travel Storytelling Website

A comprehensive travel platform with interactive world maps

2023
2.5 months

A comprehensive travel platform featuring interactive world maps, travel stories, destination exploration and responsive design for travel enthusiasts.

UI Architecture

Immersive masonry UI. Lazy-loaded galleries.

Performance

Next/Image optimization and AVIF generation.

Responsive Grid

Viewport-based masonry columns.

Technologies Used

React 18
Leaflet.js
OpenStreetMap
Tailwind CSS
Live DemoCode
Open the Travelogue - Travel Storytelling Website lab case study
Rasoha Academy - School Website
Experiment

Rasoha Academy - School Website

A modern, responsive website for a private school in Kenya

2024
1 month

A modern, responsive website for a private school in Narok, Kenya, providing comprehensive information about programs, events and resources for students and parents.

UI Architecture

Enterprise portal with role-based routing.

Performance

Component-level code splitting.

Responsive Grid

Data tables switch to card-based stacks.

Technologies Used

React 19.1.1
Tailwind CSS
PWA
React Icons
Live DemoCode
Open the Rasoha Academy - School Website lab case study

Experimental Features

Interactive experiments and creative tools I've built to explore new UI patterns and enhance user experiences.

Now Playing

What I'm listening to while coding

Focus Sessions cover

Coding Vibes

Lofi Hip Hop

0:453:00

Fun Facts

Interesting tidbits about my journey

Built 30+ Projects from Solo to Full-Stack

Started with simple HTML/CSS and now building complex real-time applications with WebSockets and databases.

Love Mapping with Leaflet.js

Created interactive travel maps and discovered the power of geospatial data in web applications.

Always Testing with Jest/Playwright

Believe in the importance of testing - from unit tests to end-to-end automation.

Started Freelancing in March 2024

Made the leap from student to freelance developer, delivering real projects to real clients.

Real-time Collaboration Enthusiast

Built TaskForge with Socket.io to solve the challenge of real-time team collaboration.

Full-Stack Problem Solver

From frontend animations to backend APIs, I love solving problems across the entire stack.

Favorite Tools

The tools and platforms I use daily to build amazing things

VS Code

My go-to code editor with amazing extensions

Netlify

Perfect for deploying static sites and JAMstack apps

Vercel

Excellent for Next.js deployments and edge functions

Render

Great for hosting full-stack applications and databases

GitHub

Version control and collaboration platform

Figma

Design and prototyping tool for UI/UX

Experimental Toggles

Enable experimental features and UI enhancements (saved to localStorage)

Custom cursor with particle effects

Custom cursor with particle effects

Parallax scrolling effects on hero sections

Parallax scrolling effects on hero sections

Now playing music widget

Now playing music widget

Enhanced animations and transitions

Enhanced animations and transitions