Modern Developer Portfolio Template

A sleek, minimal, and fully responsive developer portfolio website built with Next.js 15 (App Router), Tailwind CSS, and TypeScript. Designed for developers who want a high-performance, open-source portfolio with dark mode, smooth scrolling, GitHub contributions grid, Medium RSS integration, and a contact form with Nodemailer.

---

Features

• Next.js 15 App Router - Modern architecture with fast page loads & ISR optimization.
• Minimal & Modern UI - Clean typography, subtle grain background, pastel cards & smooth animations.
• Dark Mode Support - Automatic system dark mode detection with persistent toggle state.
• Fully Responsive - Optimized layout for desktop, tablet, and mobile devices.
• GitHub Contributions Grid - Dynamic contribution visualizer.
• Medium RSS Integration - Automatically fetches latest blog posts with fallback carousel cards.
• Working Contact Form - Built-in API route using Nodemailer for email delivery.
• SEO & OpenGraph Ready - Pre-configured metadata, dynamic sitemap, and robots.txt.

---

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Custom SVG & Emoji icons
• Form Mailer: Nodemailer
• RSS Parser: xml2js
• Deployment: Vercel (Recommended)

---

Quick Start

1. Clone & Install Dependencies

git clone https://github.com/your-username/portfolio.git
cd portfolio
npm install

2. Configure Environment Variables

Create a .env.local file in the root directory for contact form email notifications:

EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password
EMAIL_TO=your-receiving-email@gmail.com

3. Run Development Server

npm run dev

Open http://localhost:3000 to view the app in your browser.

---

Customization Guide

All personal details in the code are marked with clear comment tags like /* <your name> */ or <!-- <your domain> -->.

1. Personal Details & Metadata

• Metadata & Title: Update title, description, and keywords in src/app/layout.tsx.
• Hero Section: Edit name, roles, CV download link, and social links in src/components/Hero.tsx.
• Navbar Brand: Change brand name in src/components/Navbar.tsx.
• About Me: Customize bio text and tech stack items in src/components/About.tsx.
• Footer: Update copyright name in src/components/Footer.tsx.

2. Profile Photo & Images

• Replace /public/images/demo-profile.jpg with your profile picture.
• Replace education logos in /public/images/Edu_Logos/ and campus photos in /public/images/Edu_img/.
• Replace /public/sample_cv.pdf with your resume PDF.

3. Education Timeline

• Edit the education array in src/components/Education.tsx with your institutions, degrees, periods, and website links.

4. Medium RSS Feed

• Replace 'your-medium-username' with your Medium username in:
  • src/lib/medium-rss.ts
  • src/components/Blog.tsx

---

Build & Deployment

Build locally:

npm run build
npm start

Deploy on Vercel:

1. Push your repository to GitHub.
2. Import your project into Vercel.
3. Add Environment Variables (EMAIL_USER, EMAIL_PASS, EMAIL_TO) in Vercel project settings.
4. Click Deploy.

---

License

Distributed under the MIT License. See LICENSE for more details.