Building a Modern Portfolio with Next.js

Welcome to my blog! In this first post, I'll walk you through how I built this portfolio website using modern web technologies.

The Tech Stack

This portfolio is built with a carefully chosen stack:

• Next.js 14+ - React framework with App Router
• TypeScript - For type safety
• Tailwind CSS - Utility-first styling
• MDX - Markdown with React components for blog posts

Why File-Based Content?

Instead of using a database or CMS, I opted for file-based content management:

{
  "name": "Hridu",
  "title": "Full-Stack Developer",
  "skills": [
    { "name": "React", "level": 90 }
  ]
}

This approach has several benefits:

1. Version Control - All content changes are tracked in Git
2. No Database - Simpler deployment, no external dependencies
3. Fast - Content is built into static pages
4. Free Hosting - Easily deploy to Vercel or Netlify

Key Features

Responsive Design

The site looks great on all devices, from mobile phones to large desktop monitors.

Dark Theme

A sleek dark theme with subtle gradients and glassmorphism effects.

Blog with MDX

Write blog posts in Markdown with the power of React components.

Getting Started

If you want to build something similar, here's how to get started:

npx create-next-app@latest portfolio --typescript --tailwind --app
cd portfolio
npm install gray-matter next-mdx-remote

Conclusion

Building a portfolio website is a great way to showcase your skills and learn new technologies. I hope this gives you some inspiration for your own portfolio!

Feel free to reach out if you have any questions.