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:

Sections 🔖

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 💻

Installation ⬇️

Prerequisites

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

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=your_email@gmail.com

Variable Descriptions:

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: "your.email@example.com",
  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

🎨 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=your.email@gmail.com

🤖 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

UI & Animations

Functionality

Troubleshooting 🔧

Common Issues and Solutions

# 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

# 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

# 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

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