🚀 DevOps Portfolio Website

A modern, ultra-responsive portfolio website for DevOps engineers with real-time admin panel, email integration, and stunning animations. Built with Node.js, Express, and vanilla JavaScript.

✨ Features

🎨 Frontend Features

• Ultra-modern UI with gradient animations and particle effects
• Custom animated cursor with smooth tracking
• Responsive design that works on all devices
• Timeline experience section with achievements display
• Interactive skills showcase with progress bars
• Project filtering by category
• Smooth scrolling navigation
• Contact form with real email delivery

🛠️ Admin Features

• Inline editing - No popups, edit directly in the admin panel
• Real-time updates - See changes instantly
• Full CRUD operations for all sections:
  • Profile & Statistics
  • Experience with location and achievements
  • Skills (Hard, Soft, Tools)
  • Education
  • Certifications
  • Projects with features
• Visual feedback with toast notifications
• Backup & Restore functionality

📧 Email Features

• SMTP email integration with Nodemailer
• Beautiful HTML email templates
• Auto-reply functionality to visitors
• Fallback system - saves locally if email fails
• Support for multiple email providers (Gmail, Outlook, Yahoo, etc.)

💾 Storage Options

• JSON file storage (default)
• SQLite database support (optional)
• Automatic backups before updates

🚀 Quick Start

1. Clone and Install

# Clone the repository
git clone <your-repo-url>
cd portfolio

# Install dependencies
npm install

# Initialize project structure
npm run init

2. Configure Environment

Create a .env file in the root directory:

# Server Configuration
PORT=3000
NODE_ENV=development

# Storage (false = JSON, true = SQLite)
USE_DATABASE=false

# SMTP Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=[email protected]
SMTP_PASS=your-app-password
RECIPIENT_EMAIL=[email protected]
SEND_AUTO_REPLY=true
SITE_URL=http://localhost:3000

3. Setup Email (Gmail Example)

1. Go to Google Account Settings
2. Enable 2-factor authentication
3. Generate app password:
   • Visit App Passwords
   • Select "Mail" and generate
   • Use this 16-character password as SMTP_PASS

4. Start the Server

# Development mode with auto-reload
npm run dev

# Production mode
npm start

Visit http://localhost:3000 to see your portfolio!

📁 Project Structure

portfolio/
├── server.js              # Express server with SMTP
├── package.json           # Dependencies
├── init.js               # Setup script
├── .env                  # Environment variables
├── .gitignore            # Git ignore file
├── README.md             # Documentation
├── contacts.json         # Contact form submissions
├── portfolio.db          # SQLite database (optional)
└── public/            
    ├── index.html        # Main HTML file
    ├── css/           
    │   └── style.css     # Optimized styles
    ├── js/            
    │   ├── main.js       # Frontend logic
    │   └── complete-admin-panel.js  # Admin panel
    ├── data/          
    │   ├── portfolio.json         # Portfolio data
    │   └── portfolio-backup.json  # Automatic backup
    └── images/           # Image assets

🎨 Customization Guide

Using the Admin Panel

1. Click the Admin Panel button in the navigation
2. Navigate through tabs:
   • Profile: Update name, title, bio, statistics
   • Experience: Add jobs with location and achievements
   • Skills: Manage hard, soft, and tool skills
   • Education: Add degrees and certifications
   • Projects: Showcase work with features and links
3. Edit directly in the forms - no popups!
4. Click Update for individual items
5. Click Save All Changes to persist

Manual Customization

Colors and Gradients

Edit CSS variables in public/css/style.css:

:root {
    --bg-primary: #0a0a0a;
    --accent-cyan: #06b6d4;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* ... more variables */
}

Portfolio Data

Edit public/data/portfolio.json:

{
  "personal": {
    "name": "Your Name",
    "title": "Your Title",
    "email": "[email protected]"
  }
}

📧 Email Configuration

Supported Providers

Gmail

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
# Use app-specific password

Outlook/Hotmail

SMTP_HOST=smtp-mail.outlook.com
SMTP_PORT=587
SMTP_SECURE=false

Yahoo

SMTP_HOST=smtp.mail.yahoo.com
SMTP_PORT=587
SMTP_SECURE=false

Custom Domain

Contact your provider for SMTP settings:

• Namecheap: smtp.privateemail.com
• GoDaddy: smtpout.secureserver.net
• Zoho: smtp.zoho.com

🌐 Deployment

Deploy to Vercel

npm install -g vercel
vercel

Deploy to Heroku

# Create Heroku app
heroku create your-portfolio-name

# Set environment variables
heroku config:set SMTP_HOST=smtp.gmail.com
heroku config:set [email protected]
heroku config:set SMTP_PASS=your-app-password
# ... set other variables

# Deploy
git push heroku main

Deploy to Railway

# Install Railway CLI
npm install -g @railway/cli

# Login and initialize
railway login
railway init

# Set environment variables in Railway dashboard
# Then deploy
railway up

Deploy with PM2 (VPS)

# Install PM2
npm install -g pm2

# Start application
pm2 start server.js --name portfolio

# Setup auto-restart
pm2 save
pm2 startup

# Monitor
pm2 monit

Deploy to DigitalOcean App Platform

1. Push code to GitHub
2. Create new app in DigitalOcean
3. Connect GitHub repository
4. Set environment variables
5. Deploy

📡 API Endpoints

Method	Endpoint	Description
GET	/api/portfolio	Get portfolio data
POST	/api/portfolio	Update portfolio data (admin)
POST	/api/contact	Submit contact form
GET	/api/backup	Download portfolio backup
POST	/api/restore	Restore from backup
GET	/api/health	Health check with email status

🔧 Troubleshooting

Email not sending?

• Check SMTP credentials in .env
• Ensure 2FA is enabled for Gmail
• Use app-specific password, not regular password
• Check /api/health endpoint for email status

Admin panel not opening?

• Clear browser cache
• Check browser console for errors
• Ensure complete-admin-panel.js is loaded

Mouse cursor lag?

• Already optimized with requestAnimationFrame
• Disable custom cursor on mobile automatically
• Check if particle count needs reduction

Data not saving?

• Check write permissions for public/data/
• Verify JSON structure is valid
• Check server logs for errors

🔒 Security Best Practices

1. Never commit .env file - It's in .gitignore
2. Use environment variables for sensitive data
3. Enable HTTPS in production
4. Sanitize user inputs (already implemented)
5. Regular backups of portfolio data
6. Use app-specific passwords for email

📦 NPM Scripts

npm start         # Start production server
npm run dev       # Start with nodemon (auto-reload)
npm run init      # Initialize project structure
npm run backup    # Create manual backup

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add 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.

🙏 Acknowledgments

• Icons from Lucide React
• Particle effects inspired by particles.js
• Email templates styled with modern gradients
• Built with love for the DevOps community

💬 Support

Having issues?

• Check the Troubleshooting section
• Open an issue on GitHub
• Contact via the portfolio contact form

---

Built with ❤️ by DevOps Engineers for DevOps Engineers

Last Updated: 2024