Case Study
Runner's UI Portfolio
A performance-focused, motion-led portfolio inspired by fitness dashboards. Built with Next.js, TypeScript, Tailwind CSS, and Framer Motion to showcase clean layout, responsive design, and intentional motion.
UpdatedLast updated: November 2025
Overview
This project is a full rebuild of my personal portfolio. I wanted a site that felt modern, fast, and intentional—something closer to a product UI than a basic developer template. The visual direction borrows from running apps and fitness dashboards: gradients, stat tiles, and motion that supports the content instead of distracting from it.
Tech stack & architecture
The site is built on the Next.js App Router with TypeScript and Tailwind CSS v4. Each major section (hero, projects, about, contact) is a reusable component, and Framer Motion is layered on top for entrance animations, scroll reveals, and hover motion. Layout is mobile-first with semantic breakpoints and a shared max-width container to keep content readable.
Motion design
Motion is used to guide attention: the hero animates in on load, project cards reveal on scroll and lift slightly on hover, and secondary sections fade in as you scroll. All animations use transforms and opacity for performance, and are short enough to feel responsive instead of flashy.
Contact & integrations
The contact form uses a client-side fetch to submit to Formspree, with local state managing loading, success, and error messages. That keeps the UX smooth and avoids a full page redirect while still using a simple, reliable backend service.
Outcome
The final result is a portfolio that feels like me: a mix of frontend design, motion, and real-world experience. It gives me a concrete example to talk about in interviews in terms of layout systems, animation, Next.js architecture, and UX decisions.