Building a Modern Blog with Next.js 16 and Glass Morphism

So basically, I wanted to build a blog that felt both modern and personal. Here's how I approached it.

The Stack

The foundation is pretty straightforward:

Next.js 16 with App Router for performance and flexibility
Tailwind CSS v4 for utility-first styling
MDX for rich, interactive content
Atomic design for component organization

Design Philosophy

The visual language borrows from 90's flannel colors—warm, earthy tones that feel personal without being overly styled. Glass morphism effects add depth without cluttering the interface.

// Example: Glass effect utility classes
const cardStyles = 'glass hover:glass-heavy transition-all';

If that makes sense, the glass effects create hierarchy through blur and opacity rather than traditional borders and shadows.

What's Next

I'll be adding more interactive components and exploring how to blend magazine-style layouts with modern web patterns.