Personal Portfolio
A performant, fully custom portfolio and case study platform — the site you're reading this on — built with Next.js 15 and deployed on Vercel.
Tech Stack
Resources
Project Overview
This site is a fully custom portfolio and case study platform, designed and built from scratch to present my work clearly and without compromise. Rather than reaching for a template, I treated it as a project in its own right — making deliberate choices about architecture, performance, and design at every step. The result is the site you're on now.
The Challenge
Most portfolio templates trade personality for convenience. The goal here was a site that felt intentional — fast, content-focused, and visually distinct — without accumulating unnecessary dependencies or complexity.
The Solution
Built with Next.js 15 App Router for server-first rendering, Tailwind CSS v4 for utility-driven styling, and Framer Motion for purposeful animation. Each page is a React Server Component by default, dropping to client components only where interactivity demands it.
The Outcome
A production site with strong Core Web Vitals, zero third-party UI libraries, and a project case study system that scales cleanly as new work is added — including this page.
Project Visuals
The homepage introduces skills, featured projects, and experience in a single scrollable view.
The projects page presents each case study as a card with a preview image, tech badges, and a direct link.
The about page covers background, education, and certifications in a clean two-column layout.
Development Process
Design & Structure
Started with a clear information hierarchy: homepage for first impressions, projects for depth, about for context. Established a dark monochrome visual language with indigo accents and a subtle grid background — consistent across every page without a design system library.
Architecture & Component Design
Leveraged Next.js 15 App Router to keep pages as React Server Components wherever possible, reserving client components for animated and interactive elements. Components were kept small and co-located with their routes. Tailwind CSS v4 replaced any need for a component library, with all styling expressed as utilities directly in markup.
Performance & Deployment
Next.js Image handles automatic format conversion and lazy loading for all project screenshots. Turbopack powers the local dev server for near-instant HMR. The site is deployed to Vercel with automatic preview deployments on every pull request, and production builds gate on a clean lint pass via GitHub Actions.
Key Features
Next.js 15 App Router
Server-first rendering by default, with client components scoped only to interactive sections. Fast initial page loads with no unnecessary JavaScript shipped to the browser.
Zero UI Library Dependencies
Every component — badges, buttons, cards, navigation — is custom-built with Tailwind CSS v4. No shadcn, no Chakra, no Radix; full control over markup and style with no abstraction overhead.
Project Case Study System
Each project gets a dedicated route with a consistent layout: hero image, tech stack sidebar, overview, development process, key features, and a resources section. Adding a new case study is as simple as a new directory under /app/projects.
Framer Motion Animations
Purposeful entrance and scroll animations via Framer Motion, applied selectively to avoid visual noise. Motion enhances the experience on supported devices without blocking content on reduced-motion preferences.
Interested in working together?
Feel free to reach out — I'm always open to discussing new projects and opportunities.