Overview
A fully custom portfolio built without UI libraries, using Next.js App Router, Tailwind CSS v4 custom properties, and a section-based layout system inspired by Stripe's marketing site architecture. Everything from the angled section transitions to the code animation was hand-crafted.
The Inspiration
Most developer portfolios are templates with swapped content. I wanted mine to reflect how I actually think about software — with intention, craft, and attention to the details that most people skip. Every design decision here is deliberate.
Tech Stack
Next.js 14
App Router gives me RSC for fast initial loads and the flexibility to mix static and dynamic sections.
Tailwind CSS v4
The new CSS variable-based theming system let me build a sophisticated design token layer without fighting the framework.
better-auth
Lightweight, type-safe authentication for any future gated content without the overhead of a full auth platform.
Vercel
Zero-config deployment with edge network, preview URLs per branch, and built-in analytics.
Challenges & Solutions
Angled section transitions created gaps and overflow artifacts across different viewport widths.
Derived all angle-related padding mathematically from the viewport width using CSS custom properties and trigonometric ratios, ensuring seamless joins at every breakpoint.
Dark mode default caused a flash of unstyled content on first load when the CSS class wasn't applied immediately.
Added the `dark` class statically to the `<html>` element in the server-rendered layout, eliminating the flash entirely since the class is present before any JavaScript executes.
What I Learned
- 01
CSS custom properties as a design token system scale better than utility class proliferation for design-heavy sites.
- 02
Static dark mode via server-rendered class is far simpler and more reliable than client-side theme detection for default-dark sites.
- 03
Building layout systems from first principles gives you far more control than adapting a component library to fit an unconventional design.