developer-portfolio

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 :movie_camera:

View Live Demo

--- ## Features :sparkles: - ✅ **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 :rocket: 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 :bookmark: | 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 :scroll: - [Overview](#overview) - [Demo](#demo-movie_camera) - [Features](#features-sparkles) - [Sections](#sections-bookmark) - [Tech Stack](#tech-stack-computer) - [Installation](#installation-arrow_down) - [Getting Started](#getting-started-dart) - [Usage](#usage-joystick) - [Deployment](#deployment-rocket) - [Tutorials](#tutorials-wrench) - [Gmail App Password Setup](#gmail-app-password-setup) - [Create a Telegram Bot](#create-a-telegram-bot) - [Fetching Blog from dev.to](#fetching-blog-from-devto) - [Packages Used](#packages-used-package) - [Contributing](#contributing-handshake) - [License](#license-page_with_curl) - [Support](#support-coffee) --- ## Tech Stack :computer: | 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 :arrow_down: ### Prerequisites Before you begin, ensure you have the following installed on your machine: | Tool | Minimum Version | Download Link | | ---------------------- | --------------- | ------------------------------------------- | | **Node.js** | v18.17.0+ | [Download](https://nodejs.org/en/download/) | | **Git** | Latest | [Download](https://git-scm.com/downloads) | | **pnpm** (recommended) | Latest | [Install](https://pnpm.io/installation) | > **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: ```bash node --version git --version pnpm --version # or npm --version ``` --- ## Getting Started :dart: ### 1. Fork and Clone the Repository ```bash git clone https://github.com//developer-portfolio.git cd developer-portfolio ``` ### 2. Install Dependencies ```bash # Using pnpm (recommended) pnpm install # Using npm npm install # Using yarn yarn install ``` ### 3. Set Up Environment Variables ```bash cp .env.example .env ``` Edit the `.env` file with your values (see [Usage](#usage-joystick) section). ### 4. Run the Development Server ```bash pnpm dev # or npm run dev # or yarn dev ``` Open [http://localhost:3000](http://localhost:3000) in your browser. --- ### Docker Deployment (Alternative) #### Option 1: Using Docker Compose (Recommended) ```bash docker-compose up --build # Run in detached mode docker-compose up -d --build # Stop docker-compose down ``` #### Option 2: Using Docker Directly **For Development:** ```bash # 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:** ```bash # 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 :joystick: ### Environment Variables Configuration Create a `.env` file in the root directory with the following variables: ```env # 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 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`) ``` … ``` #### 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`: ```javascript profile: "/your-image-name.png"; // or .jpg, .webp ``` --- ## Deployment :rocket: ### Deploy to Vercel (Recommended) **Manual Deployment:** 1. Sign up at [Vercel](https://vercel.com/) 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](https://www.netlify.com/) 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 ```bash # 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 :wrench: ### Gmail App Password Setup 1. Go to [https://myaccount.google.com/](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: ```env GMAIL_PASSKEY=abcd efgh ijkl mnop [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/getUpdates` 7. Add to `.env` file: ```env TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz TELEGRAM_CHAT_ID=123456789 ``` --- ### Fetching Blog from dev.to 1. Create a [dev.to](https://dev.to/) account 2. Open `utils/data/personal-data.js` 3. Set your dev.to username: ```javascript export const personalData = { // ... other fields devUsername: "yourusername", }; ``` The portfolio automatically fetches and displays your latest public articles. No API key required. --- ## Packages Used :package: ### Core Dependencies | Package | Version | Purpose | | --------------- | ------- | ---------------------