A modern, responsive portfolio website built with Next.js, showcasing projects, blog posts, and professional experience. Features dynamic routing, MDX blog support, and a clean, minimalist design.
- Dynamic Blog System: MDX-based blog posts with frontmatter metadata and dynamic routing
- Project Showcase: Detailed project pages with tech stack, descriptions, and links
- Dark Mode: Theme switching with system preference detection
- Responsive Design: Mobile-first approach with Tailwind CSS
- SEO Optimized: Dynamic metadata generation for all pages
- Performance: Static site generation with Next.js App Router
- Type Safety: Full TypeScript support throughout the codebase
- Next.js 16 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS 4 - Utility-first CSS framework
- shadcn/ui - Component library
- Lucide React - Icon library
- next-themes - Theme management
- Icons/Logos - simpleicons cdn
- MDX - Markdown with JSX support
- next-mdx-remote - MDX rendering
- gray-matter - Frontmatter parsing
- Vercel Analytics - Web analytics
- Vercel - Hosting platform
portfolio/
├── app/ # Next.js App Router pages
│ ├── blog/ # Blog routes
│ │ ├── [slug]/ # Dynamic blog post pages
│ │ └── page.tsx # Blog listing page
│ ├── project/ # Project routes
│ │ └── [slug]/ # Dynamic project pages
│ ├── projects/ # Projects listing page
│ ├── data/ # MDX blog post files
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── blog.tsx # Blog listing component
│ ├── projects.tsx # Projects component
│ ├── skills.tsx # Skills component
│ └── header.tsx # Navigation header
├── utils/ # Utility functions
│ ├── mdx.ts # MDX processing utilities
│ └── projects.ts # Project data management
├── lib/ # Library utilities
└── public/ # Static assets
- Node.js 18+
- npm, pnpm, bun
- Clone the repository:
git clone https://github.com/iampandit-in/portfolio.git
cd portfolio- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Create a new
.mdxfile inapp/data/:
---
title: "Your Blog Post Title"
author: "Your Name"
description: "A brief description of your post"
date: 2025-01-01
tags: ["tag1", "tag2"]
---
Your blog content here...- The blog post will automatically appear in the blog listing and be accessible at
/blog/your-slug.
- Edit
utils/projects.tsand add your project to theprojectsarray:
{
slug: "your-project-slug",
project: "Project Name",
description: [
"First description point",
"Second description point"
],
stack: [
{ name: "Technology", icon: "icon-url" }
],
github: "https://github.com/...",
website: "https://..."
}- The project will appear on the projects page and be accessible at
/project/your-project-slug.
npm run buildThis creates an optimized production build in the .next folder.
npm startStarts the production server on http://localhost:3000.
- ESLint: Code linting with Next.js config
- Prettier: Code formatting with Tailwind plugin
- TypeScript: Static type checking
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
Edit app/globals.css to customize color scheme and theme variables.
The project uses Tailwind CSS. Customize styles in:
app/globals.css- Global styles and CSS variables- Component files - Component-specific styles
Components are located in components/ directory. Modify or extend them as needed.
This project is private and proprietary.
Pandit Pawar
- Portfolio: iampandit.in
- GitHub: @iampandit-in
- Email: iampandit.in@gmail.com
- Next.js - The React Framework
- Tailwind CSS - A utility-first CSS framework
- shadcn/ui - Beautifully designed components
- Vercel - Hosting and deployment platform
Built with ❤️ using Next.js and TypeScript by Pandit