Building a Portfolio with Next.js 14 and Tailwind CSS
How I built ihimanshu.in — from liquid glass navigation to MDX blog, Firebase guestbook, and a Lighthouse score above 90.
When I sat down to rebuild my portfolio, I had a clear goal: ship something that I'd be proud to show a hiring manager and a developer peer. That means fast, accessible, well-structured, and visually interesting — without being showy.
Here's what I chose and why.
The stack
- Next.js 14 (App Router) — server components by default, excellent DX, easy deployment on Vercel
- Tailwind CSS — no context switching between files, consistent design tokens
- Framer Motion — surgical animations without a large runtime cost
- Firebase — already had a project set up, using Auth + Firestore for the guestbook
The navigation
The nav was the most fun to design. iOS 26 introduced a "liquid glass" aesthetic — heavy backdrop blur, specular white highlights, and a shimmer sweep on hover. I implemented it with:
backdrop-filter: blur(50px);
background: rgba(255, 255, 255, 0.08); /* dark mode */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), /* specular top */
inset 0 0 0 1px rgba(255,255,255,0.15), /* border */
0 8px 32px rgba(0,0,0,0.12); /* drop shadow */The shimmer on hover is a pure CSS @keyframes animation — no JavaScript involved, which keeps it buttery smooth.
Blog: why MDX in the repo
I didn't want a CMS. MDX files in /content/blog/ mean:
- Posts are version-controlled alongside code
- No API calls at build time
- Full TypeScript support for frontmatter via
gray-matter
The trade-off is that publishing requires a code push — acceptable for a personal blog.
What's next
- Guestbook with Firebase Google Auth
- OG image generation per blog post
- Lighthouse ≥ 90 audit
The source code is on GitHub.