Personal2026

Personal Portfolio Website

Solo Developer

Overview

A modern, responsive portfolio website that serves as my professional home on the web. It showcases my career history, featured projects, technical skills, and a way to get in touch. Built from scratch with the latest web stack, with careful attention to performance, accessibility, dark-mode design, and motion.

Tech Stack

Next.js 16React 19TypeScriptTailwind CSS v4Framer Motionshadcn (base-nova)next-themesLucide IconsFormspreeVercel

Screenshots

Live Demo

The Problem

As a senior engineer looking for new opportunities, I needed a personal website that did more than list a resume - it needed to communicate who I am, what I've built, and how to reach me, all while loading fast, working well on every device, and looking polished enough to compete with top-tier portfolios.

The Solution

Built a Next.js 16 App Router site from scratch with a single design language across every page. Used Tailwind v4's CSS-first configuration for theming, Framer Motion for tasteful entrance and scroll-triggered animations, and a token-driven color system that supports light and dark themes with one switch. The site is statically generated for speed, fully responsive down to small phones, and ships with structured metadata for SEO and social sharing.

Challenges

Designing a coherent visual system that holds together across 7 distinct pages with very different content shapes
Balancing motion and performance - every animation is GPU-friendly, but the home page still runs at 60fps on mid-range mobile
Wiring dark mode cleanly with next-themes without flashing the wrong theme on first paint
Keeping the codebase small enough to maintain as a one-person side project, without sacrificing polish

Key Learnings

Tailwind v4's CSS-first @theme and CSS-variable token system is a meaningful upgrade over v3's config file - far less ceremony for the same power
Framer Motion's `useInView` + `once: true` pattern is a great fit for scroll-driven content reveals on marketing-style pages
Server-rendered pages with focused client islands (the filter, the contact form, the theme toggle) give the best of both worlds: fast static content, interactive only where it matters

PotholeWatch - Pavement Assessment Dashboard