Developer Portfolio

A modern, responsive, and customizable portfolio template for developers and freelancers

Demo • Features • Installation • Usage • Deployment • Tutorials

---

Overview

A professional portfolio template built with Next.js 16, React 19, and Tailwind CSS 4. Features a modern App Router architecture, server components, and data-driven configuration for easy customization.

---

Demo 🎥

🚀 View Live Demo

---

Features ✨

• ✅ Cutting-Edge Tech Stack: Built with Next.js 16, React 19, and Tailwind CSS 4
• ✅ Fully Responsive: Optimized for all devices and screen sizes
• ✅ SEO Optimized: Better visibility on search engines with Next.js metadata API
• ✅ Blazing Fast Performance: Leverages Next.js 16 server components and streaming
• ✅ App Router: Uses the modern Next.js App Router architecture
• ✅ Easy Customization: Simple data-driven configuration
• ✅ Contact Form: Integrated email and Telegram notifications
• ✅ Blog Integration: Automatically fetch posts from dev.to
• ✅ Dark Theme: Beautiful gradient design with Lottie animations
• ✅ Docker Support: Easy containerized deployment
• ✅ Google Analytics: Track visitor insights with GTM support

---

Next.js 16 Features Used 🚀

This portfolio leverages the latest Next.js 16 and React 19 capabilities:

Feature	Benefit
App Router	Modern routing with layouts and nested routes
Server Components	Improved performance with zero JavaScript for static content
Server Actions	Simplified form handling in contact page
Metadata API	Enhanced SEO with type-safe metadata
Image Optimization	Automatic image optimization with next/image
Font Optimization	Automatic font loading with next/font
Streaming & Suspense	Better loading states and progressive rendering
React 19 Features	Actions, use hook, and improved hydration

---

Sections 🔖

Section	Description
🦸 Hero	Eye-catching introduction with animated elements
👤 About Me	Personal information and professional summary
💼 Experience	Work history and professional accomplishments
🛠️ Skills	Technical skills with animated marquee display
🚀 Projects	Showcase your best work with descriptions and links
🎓 Education	Academic background and certifications
📝 Blog	Latest articles from dev.to (auto-fetched)
📧 Contact	Get in touch form with email/Telegram integration

---

Table of Contents 📜

• Overview
• Demo
• Features
• Sections
• Tech Stack
• Installation
• Getting Started
• Usage
• Deployment
• Tutorials
  • Gmail App Password Setup
  • Create a Telegram Bot
  • Fetching Blog from dev.to
• Packages Used
• Contributing
• License
• Support

---

Tech Stack 💻

Technology	Version	Purpose
Next.js	16.0.1	React framework with App Router
React	19.2.0	UI component library with latest features
Tailwind CSS	4.x	Utility-first CSS framework
SASS	Latest	CSS preprocessor
Lottie	Latest	Lightweight animations
Nodemailer	Latest	Email sending functionality
Axios	Latest	HTTP client for API requests
Docker	-	Containerization platform

---

Installation ⬇️

Prerequisites

Before you begin, ensure you have the following installed on your machine:

Tool	Minimum Version	Download Link
Node.js	v18.17.0+	Download
Git	Latest	Download
pnpm (recommended)	Latest	Install

Note: Next.js 16 requires Node.js 18.17 or later. Node.js 20+ is recommended for optimal performance.

Verify Installation

Check your installations with these commands:

node --version
git --version
pnpm --version  # or npm --version

---

Getting Started 🎯

1. Fork and Clone the Repository

git clone https://github.com/<YOUR_GITHUB_USERNAME>/developer-portfolio.git
cd developer-portfolio

2. Install Dependencies

# Using pnpm (recommended)
pnpm install

# Using npm
npm install

# Using yarn
yarn install

3. Set Up Environment Variables

cp .env.example .env

Edit the .env file with your values (see Usage section).

4. Run the Development Server

pnpm dev
# or
npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

---

🐳 Docker Deployment (Alternative)

Option 1: Using Docker Compose (Recommended)

docker-compose up --build

# Run in detached mode
docker-compose up -d --build

# Stop
docker-compose down

Option 2: Using Docker Directly

For Development:

# Build the development image
docker build -t developer-portfolio:dev -f Dockerfile.dev .

# Run the container
docker run -p 3000:3000 --name portfolio-dev developer-portfolio:dev

# Stop and remove container
docker stop portfolio-dev && docker rm portfolio-dev

For Production:

# Build the production image
docker build -t developer-portfolio:prod -f Dockerfile.prod .

# Run the production container
docker run -p 3000:3000 --name portfolio-prod developer-portfolio:prod

---

Usage 🕹️

Environment Variables Configuration

Create a .env file in the root directory with the following variables:

# Google Tag Manager (Optional - for analytics)
NEXT_PUBLIC_GTM=GTM-XXXXXXX

# Your deployed app URL
NEXT_PUBLIC_APP_URL=https://your-domain.com

# Telegram Bot Configuration (for contact form notifications)
TELEGRAM_BOT_TOKEN=your_bot_token_here
TELEGRAM_CHAT_ID=your_chat_id_here

# Gmail Configuration (for contact form emails)
GMAIL_PASSKEY=your_gmail_app_password
EMAIL_ADDRESS=[email protected]

Variable Descriptions:

Variable	Required	Description
NEXT_PUBLIC_GTM	No	Google Tag Manager ID for analytics tracking
NEXT_PUBLIC_APP_URL	Yes	Your portfolio's public URL
TELEGRAM_BOT_TOKEN	No	Token for Telegram bot notifications
TELEGRAM_CHAT_ID	No	Your Telegram chat ID for receiving messages
GMAIL_PASSKEY	No	Gmail app password for email notifications
EMAIL_ADDRESS	No	Your Gmail address for sending emails

Note: Contact form features require either Telegram or Gmail configuration (or both).

---

Customize Your Portfolio Data

All portfolio content is managed through data files in the utils/data/ folder:

📝 Personal Information (personal-data.js)

export const personalData = {
  name: "YOUR NAME",
  profile: "/profile.png", // Path to your profile image
  designation: "Software Developer", // Your job title
  description: "Your bio and introduction...", // About yourself
  email: "[email protected]",
  phone: "+1234567890",
  address: "City, Country",
  github: "https://github.com/yourusername",
  facebook: "https://www.facebook.com/yourprofile",
  linkedIn: "https://www.linkedin.com/in/yourprofile",
  twitter: "https://twitter.com/yourusername",
  stackOverflow: "https://stackoverflow.com/users/your-id",
  leetcode: "https://leetcode.com/yourusername/",
  devUsername: "yourusername", // dev.to username for blog integration
  resume: "https://link-to-your-resume.pdf",
};

💼 Additional Data Files

File	Purpose
experience.js	Your work experience and job history
projects-data.js	Portfolio projects with descriptions and links
skills.js	Technical skills and competencies
educations.js	Academic background and certifications
contactsData.js	Contact form configuration

🎨 Adding Your Profile Image

Place your profile picture in the public/ directory and update the profile field in personal-data.js:

profile: "/your-image-name.png"; // or .jpg, .webp

---

Deployment 🚀

🚀 Deploy to Vercel (Recommended)

Manual Deployment:

1. Sign up at Vercel
2. Import your GitHub repository
3. Add environment variables in Settings → Environment Variables
4. Deploy

Features:

• Native Next.js 16 support
• Automatic deployments on push
• Preview deployments for PRs
• Edge runtime support
• Global CDN and free SSL

---

🌐 Deploy to Netlify

Manual Deployment:

1. Sign up at Netlify
2. Import your GitHub repository
3. Build command: npm run build
4. Publish directory: .next
5. Add environment variables in Site Settings → Environment

---

🐳 Deploy with Docker

# Build production image
docker build -t developer-portfolio:prod -f Dockerfile.prod .

# Run
docker run -d -p 80:3000 --name portfolio developer-portfolio:prod

# Or use Docker Compose
docker-compose -f docker-compose.prod.yml up -d

---

Tutorials 🔧

📧 Gmail App Password Setup

1. Go to https://myaccount.google.com/
2. Navigate to Security → 2-Step Verification (enable if not already)
3. Go to Security → App Passwords
4. Select app: Mail, device: Other (Custom name)
5. Generate and copy the 16-character password
6. Add to .env file:

GMAIL_PASSKEY=abcd efgh ijkl mnop
EMAIL_ADDRESS=[email protected]

---

🤖 Create a Telegram Bot

1. Open Telegram and search for @BotFather
2. Send /newbot command
3. Set bot name and username (must end with bot)
4. Copy the bot token
5. Send a message to your bot
6. Get chat ID from: https://api.telegram.org/bot<BOT_TOKEN>/getUpdates
7. Add to .env file:

TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz
TELEGRAM_CHAT_ID=123456789

---

📝 Fetching Blog from dev.to

1. Create a dev.to account
2. Open utils/data/personal-data.js
3. Set your dev.to username:

export const personalData = {
  // ... other fields
  devUsername: "yourusername",
};

The portfolio automatically fetches and displays your latest public articles. No API key required.

---

Packages Used 📦

Core Dependencies

Package	Version	Purpose
next	^16.0.1	Latest React framework with App Router and Server Components
react	^19.2.0	JavaScript library with improved concurrent rendering
react-dom	^19.2.0	React package for working with the DOM
tailwindcss	^4.1.16	Modern utility-first CSS framework
sass	Latest	CSS preprocessor for styling

UI & Animations

Package	Purpose
lottie-react	Lightweight animations with Lottie files
react-fast-marquee	Smooth scrolling marquee component
react-icons	Popular icon library with easy integration
react-toastify	Beautiful notification toasts

Functionality

Package	Purpose
axios	Promise-based HTTP client
nodemailer	Email sending functionality
@emailjs/browser	Client-side email service
react-google-recaptcha	Google reCAPTCHA integration
sharp	High-performance image processing
@next/third-parties	Third-party script optimization

---

Troubleshooting 🔧

Common Issues and Solutions

❌ "next is not recognized as an internal or external command"

Solution:

# Option 1: Install Next.js globally
npm install -g next

# Option 2: Use npx (recommended)
npx next dev

# Option 3: Use package manager scripts
npm run dev

❌ Port 3000 is already in use

Solution:

# Find and kill the process using port 3000
# On macOS/Linux:
lsof -ti:3000 | xargs kill -9

# On Windows:
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# Or use a different port:
PORT=3001 npm run dev

❌ Module not found or dependency errors

Solution:

# Clear cache and reinstall dependencies
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

# Or with pnpm:
rm -rf node_modules pnpm-lock.yaml
pnpm store prune
pnpm install

❌ Environment variables not working

Solution:

• Ensure .env file is in the root directory
• Restart the development server after changing .env
• Check that variables starting with NEXT_PUBLIC_ are used for client-side code
• Server-side variables should NOT start with NEXT_PUBLIC_

❌ Images not loading

Solution:

• Verify images are in the public/ directory
• Use paths starting with / (e.g., /profile.png)
• Check image file extensions match the code
• Ensure image files are committed to your repository

❌ Contact form not sending emails

Solution:

• Verify Gmail App Password is correct (16 characters)
• Check that 2-Step Verification is enabled on your Google account
• Ensure EMAIL_ADDRESS matches the Gmail account
• Test Telegram bot token and chat ID separately
• Check browser console for error messages

---

Contributing 🤝

1. Fork the repository
2. Create a feature branch: git checkout -b feature/AmazingFeature
3. Commit changes: git commit -m 'Add some AmazingFeature'
4. Push to branch: git push origin feature/AmazingFeature
5. Open a Pull Request

---

License 📃

This project is licensed under the MIT License - see the LICENSE file for details.

---

Support ☕

• ⭐ Star the repository
• � Report bugs
• � Suggest features

---