Hello, I'm Kristopher
I'm a Frontend Engineer crafting scalable web applications with an eye for micro-interactions, subtle animations, and thoughtful UX using Next.js, React, and TypeScript.
<Projects />
VibeCheck
A mood-tracking web app where users log daily emotional states through a color-coded grid visualization. I built the entire frontend using Next.js 15 (App Router) and React 19, implementing a real-time optimistic update system that lets users see their vibes appear instantly, with automatic rollback on failure.
The core challenge was creating an intuitive emotion selector that works across devices. I designed a single component handling four input modes: scroll-wheel navigation on desktop, swipe gestures on mobile (with device-specific sensitivity thresholds), full keyboard navigation, and traditional button controls. The grid itself renders 16 emotion types, each with an 11-shade color palette that adapts to light and dark themes.
I integrated HuggingFace's GoEmotions model to detect sentiment from user text, mapping 28 AI-detected emotions to the app's 16 vibe categories with debounced API calls. Media uploads use client-side compression via WebWorkers, reducing images to under 1MB before hitting Supabase storage. The result is a snappy, visually rich experience that handles image uploads, Spotify embeds, and complex state without perceptible lag.
SportsFest Dashboard
A multi-tenant SaaS platform powering SportsFest's annual corporate beach team-building event. I architected and built the entire system solo over three months, from database schema to deployment, using Next.js 15, React 19, and a 20-package monorepo structure with shared packages for authentication, billing, UI components, and email workflows.
The platform handles the full event lifecycle: coordinators funnel player interest through a public-facing, customized dedicated interest form, then organize and build team and event rosters based on event constraints manually or with auto-fill functionality. Stripe integration powers the shopping cart and registration payments. I implemented a granular permission system spanning organization admins, team managers, and players, with super admins able to impersonate any user via "view as" capabilities for hands-on support.
Beyond core functionality, I built engagement tools that help coordinators promote participation within their companies, automated email workflows for key touchpoints, and comprehensive PDF and Excel exports for roster management.
KO Unwrapped
A personal music analytics dashboard that transforms Spotify listening data into an interactive, visual experience. I built Unwrapped as a solo project to explore advanced frontend techniques, specifically dynamic theming and complex animations.
The color system extracts dominant hues from album artwork using color-thief and propagates them through CSS custom properties, so the entire UI adapts to whatever's playing. For animations, I architected a GSAP-based system
with ScrollTrigger for scroll-driven reveals, staggered list animations, and 3D parallax effects across the dashboard.
The backend syncs listening history via Spotify's API into PostgreSQL using Drizzle ORM, with a Vercel cron job handling daily incremental updates. Built with Next.js 16, React 19, and Three.js for 3D track visualizations.
{ skills }
UI/UX Design
Front-End Development
Full-Stack Tools
Back-End Development
DevOps & Deployment
Testing & Debugging
Other Skills
Interests & Inspiration
Let's build something together
I'm currently open for contract and full-time opportunities. If you're looking for a senior frontend developer who cares about craft, let's connect.