Building a Minimalist Portfolio with Next.js
When I set out to build my portfolio, I had one goal in mind: keep it simple. No flashy gradients, no complex layouts — just clean typography, good spacing, and content that speaks for itself.
Why Next.js 14?
Next.js has become the go-to framework for React developers, and for good reason. The App Router introduced in Next.js 13 (and refined in 14) brings a new paradigm of server-first development that's perfect for content-heavy sites like portfolios.
The file-based routing makes it incredibly intuitive to organize pages. Want a new section? Just create a folder. Need a dynamic route for blog posts? Add a [slug] directory. It's that simple.
Styling with Tailwind CSS
I chose Tailwind CSS for its utility-first approach. When you're building a minimalist design, you want precise control over every pixel — and Tailwind delivers exactly that.
The stone color palette was a deliberate choice. Unlike pure greys, stone tones have a subtle warmth that makes the design feel more inviting without sacrificing the clean, professional aesthetic.
// The stone palette adds warmth
<h1 className="text-stone-900 dark:text-stone-100">
Hey, I'm Yashika Jotwani
</h1>Typography Choices
The combination of Libre Baskerville for headings and Montserrat for body text creates a nice contrast between editorial elegance and modern readability. Serif fonts for headings add a touch of sophistication, while the sans-serif body text keeps things clean and scannable.
Adding Motion with Framer Motion
Animations should enhance the experience, not dominate it. I used Framer Motion's whileInView for subtle fade-up effects as sections enter the viewport, and kept transitions to 0.4–0.6 seconds — fast enough to feel responsive, slow enough to be noticed.
Key Takeaways
- Start with content — design around what you want to say, not the other way around
- Limit your palette — two or three colors plus their variants is plenty
- Typography matters — spend time choosing fonts that complement each other
- Less animation is more — if you can't explain why an animation exists, remove it
The result is a portfolio that loads fast, looks clean, and puts the focus where it should be: on the work.