base on Software Developer Portfolio Website built with next.js and tailwind CSS that helps you showcase your work and skills as a software developer. <p align="center" width="100%"> <img height="100" src="https://github.com/said7388/developer-portfolio/assets/77630868/c0064908-cd5f-4751-a77c-eba90a62b55c"> </p> <h1 align="center">Developer Portfolio</h1> <p align="center"> <strong>A modern, responsive, and customizable portfolio template for developers and freelancers</strong> </p> <p align="center"> <img src="https://img.shields.io/badge/Next.js-16.0.1-black?style=for-the-badge&logo=next.js" alt="Next.js 16.0.1"> <img src="https://img.shields.io/badge/React-19.2.0-blue?style=for-the-badge&logo=react" alt="React 19.2.0"> <img src="https://img.shields.io/badge/Tailwind_CSS-4.x-38B2AC?style=for-the-badge&logo=tailwind-css" alt="Tailwind CSS 4"> <img src="https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge" alt="License"> </p> <p align="center"> <a href="#demo-movie_camera">Demo</a> • <a href="#features-sparkles">Features</a> • <a href="#installation-arrow_down">Installation</a> • <a href="#usage-joystick">Usage</a> • <a href="#deployment-rocket">Deployment</a> • <a href="#tutorials-wrench">Tutorials</a> </p> --- ## 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: <p align="center"> <img src="./public/image/screen.png" alt="Portfolio Screenshot" width="100%"> </p> <p align="center"> <a href="https://abusaid.netlify.app/" target="_blank"> <strong>🚀 View Live Demo</strong> </a> </p> --- ## 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/<YOUR_GITHUB_USERNAME>/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`) ```javascript 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`: ```javascript profile: "/your-image-name.png"; // or .jpg, .webp ``` --- ## Deployment :rocket: ### 🚀 Deploy to Vercel (Recommended) [](https://vercel.com/new/clone?repository-url=https://github.com/said7388/developer-portfolio) **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 [](https://app.netlify.com/start/deploy?repository=https://github.com/said7388/developer-portfolio) **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<BOT_TOKEN>/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 | | --------------- | ------- | ------------------------------------------------------------ | | **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 :wrench: ### Common Issues and Solutions <details> <summary><strong>❌ "next is not recognized as an internal or external command"</strong></summary> **Solution:** ```bash # 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 ``` </details> <details> <summary><strong>❌ Port 3000 is already in use</strong></summary> **Solution:** ```bash # 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 ``` </details> <details> <summary><strong>❌ Module not found or dependency errors</strong></summary> **Solution:** ```bash # 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 ``` </details> <details> <summary><strong>❌ Environment variables not working</strong></summary> **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_` </details> <details> <summary><strong>❌ Images not loading</strong></summary> **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 </details> <details> <summary><strong>❌ Contact form not sending emails</strong></summary> **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 </details> --- ## Contributing :handshake: 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 :page_with_curl: This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details. --- ## Support :coffee: - ⭐ [Star the repository](https://github.com/said7388/developer-portfolio/stargazers) - � [Report bugs](https://github.com/said7388/developer-portfolio/issues) - � [Suggest features](https://github.com/said7388/developer-portfolio/discussions) ---     ", Assign "at most 3 tags" to the expected json: {"id":"8555","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"