Building My Portfolio Website: A Journey in Next.js

Hey there! Welcome to my first blog post on this newly minted portfolio website. Today, I want to share the story behind how this site came to be, the technologies I chose, and some of the challenges I faced along the way.

Why Next.js?

When I started planning this portfolio, I knew I wanted something that could handle both static content (like this blog) and dynamic interactions. Next.js 14 with the App Router was the perfect choice because:

Server Components: Great for performance and SEO
Built-in MDX Support: Perfect for writing blog posts with code snippets
TypeScript Integration: Type safety from the ground up
Zero Config: Just works out of the box

The Tech Stack

Here's what powers this website:

Frontend Framework

Next.js 14.2.4 - The React framework for production
React 18 - With concurrent features and server components
TypeScript - For type safety and better developer experience

Styling & UI

Tailwind CSS - Utility-first CSS framework
Shadcn/ui - Beautiful, accessible components
Framer Motion - Smooth animations and transitions

Content & Blog

MDX - Markdown with JSX for rich content
Gray Matter - Frontmatter parsing for metadata
Rehype Pretty Code - Syntax highlighting for code blocks

Development Tools

ESLint - Code linting
Prettier - Code formatting
PostCSS - CSS processing

Key Features Implemented

1. Responsive Design

The site works beautifully on all devices, from mobile phones to desktop screens. Tailwind's responsive utilities made this a breeze.

2. Dark Mode Toggle

A seamless dark/light mode switch that respects user preferences and persists across sessions.

3. Interactive Components

Work Experience Cards: Click to expand, hover for preview
Project Cards: With favicons and external links
Animated Elements: BlurFade animations for smooth content reveals

4. Blog System

This very blog you're reading! Built with MDX for easy content creation and a clean reading experience.

Challenges & Learnings

One of the first challenges I faced was tooltips getting hidden behind other content. The solution was carefully managing z-index values and using CSS specificity when needed.

Animation Timing

Getting the BlurFade animations to feel natural took some experimentation with delays and easing functions. The key was using consistent timing across all components.

MDX Processing

Setting up the MDX pipeline with syntax highlighting and GitHub Flavored Markdown support required understanding unified.js and its ecosystem.

Performance Optimizations

Server-Side Rendering: All pages are SSR for better SEO and performance
Image Optimization: Next.js handles image optimization automatically
Bundle Analysis: Keeping an eye on bundle sizes to ensure fast loading

Future Plans

This is just the beginning! I plan to add:

More Blog Posts: Sharing my thoughts on web development, AI, and technology
Project Showcases: Detailed case studies of my work
Contact Form: A way for visitors to reach out
Analytics: To understand how people use the site

Conclusion

Building this portfolio has been an incredible learning experience. It combines everything I love about modern web development: performance, accessibility, and great user experience.

If you're reading this, thanks for stopping by! Feel free to explore the code on GitHub and reach out if you have any questions or feedback.

Happy coding! 🚀

This post was written on January 13, 2026, using the very blog system described herein.