🎨 Premium Developer Portfolio

A production-ready, premium portfolio template with stunning animations, dark mode, and responsive design. No dependencies—just pure HTML, CSS, and JavaScript.

---

✨ Premium Features

🌟 Animated Hero Section - Floating gradient blobs, typing animation for roles

✨ Project Showcase - Dual-button overlays (Live Demo + GitHub) with smooth hover effects

🎯 Skills Display - Animated progress bars, skill icons, category organization

🌙 Dark/Light Mode - Smooth theme toggle with persistent storage

📱 Fully Responsive - Mobile-first design (mobile, tablet, desktop)

🎬 Smooth Animations - Scroll animations, entrance effects, micro-interactions

💫 Glowing Effects - Premium button hovers, card lift effects, smooth transitions

🎨 Modern Design - Clean, minimal, professional aesthetic

⚡ Fast & Lightweight - No heavy dependencies, optimized performance

---

🚀 Quick Start

Option 1: Local Server (Recommended)

# Python 3
python -m http.server 8000

# Node.js
npx http-server

# Then open: http://localhost:8000

Option 2: Direct Open

Double-click index.html in your browser

---

📁 File Structure

portfolio/
├── index.html          # Main page
├── css/
│   └── styles.css      # All styling (premium animations & dark mode)
├── js/
│   └── script.js       # Interactivity & animations
├── images/             # Project screenshots
└── README.md           # This file

---

🎨 Customization

1. Update Your Name & Title

Edit index.html, find the hero section:

<h1 class="hero-title">Hi, I'm <span class="text-accent">John Developer</span></h1>
<p class="hero-roles">
  <span class="typing-text">Frontend Developer</span>
  <span class="typing-cursor">|</span>
</p>

2. Change Colors

Edit css/styles.css - color variables:

:root {
  --primary-color: #6366f1;      /* Indigo */
  --secondary-color: #ec4899;    /* Pink */
  --accent-color: #06b6d4;       /* Cyan */
}

3. Add Projects

Update project cards in index.html:

<div class="project-card">
  <div class="project-image">
    <img src="images/your-project.jpg" alt="Project Name">
    <div class="project-overlay">
      <div class="project-buttons">
        <a href="https://your-demo.com" class="project-btn">
          Live Demo
        </a>
        <a href="https://github.com/yourrepo" class="project-btn">
          GitHub
        </a>
      </div>
    </div>
  </div>
  <!-- Project info -->
</div>

4. Update Skills

Add/remove skills in the skills section:

<div class="skill-item">
  <div class="skill-icon">
    <i class="fab fa-react"></i>
  </div>
  <div class="skill-content">
    <div class="skill-header">
      <span>React</span>
      <span class="skill-percent">90%</span>
    </div>
    <div class="progress-bar">
      <div class="progress" style="--progress: 90%"></div>
    </div>
  </div>
</div>

5. Update Contact Info

Edit contact section with your email, phone, and social links

---

🎬 Premium Features Explained

Typing Animation

Hero section cycles through roles with smooth typing effect:

Frontend Developer | UI Designer | Problem Solver

Animated Background

Three floating gradient blobs create a dynamic, premium feel

Hover Effects

• Cards Lift - Translate up with shadow increase
• Glow - Buttons and cards have glowing effects
• Scale - Icons and buttons scale on interaction

Smooth Scroll Animations

• Navbar shadow increases on scroll
• Sections fade/slide in as they appear
• Active navigation links highlight

Progress Bars

Skills animate in when section scrolls into view using CSS animations

---

🎨 Design System

Colors

• Primary: Indigo (#6366f1) - Main accent
• Secondary: Pink (#ec4899) - Highlights
• Accent: Cyan (#06b6d4) - Complementary

Typography

• Headings: Space Grotesk (premium, modern)
• Body: Poppins (readable, friendly)

Spacing Scale

• xs: 0.5rem | sm: 1rem | md: 1.5rem | lg: 2rem | xl: 3rem | 2xl: 4rem

Animations

• Fast: 150ms smooth
• Normal: 300ms smooth
• Slow: 500ms smooth
• Easing: Cubic-bezier(0.16, 1, 0.3, 1) for natural motion

---

🔧 Technologies

• HTML5 - Semantic, accessible markup
• CSS3 - Modern animations, grid, flexbox
• JavaScript - Vanilla (no frameworks)
• Font Awesome - Icons (CDN)
• Google Fonts - Typography (CDN)
• AOS - Scroll animations (optional CDN)

---

📋 Form Submissions

The contact form currently simulates submissions. To make it functional:

1. Using Formspree (recommended):

<form action="https://formspree.io/f/YOUR_ID" method="POST">
  <!-- form fields -->
</form>

2. Using EmailJS: Add EmailJS script and configure with your service ID

3. Backend Setup: Configure your own backend endpoint in the form's JavaScript

---

📸 Image Placeholders

Replace placeholder images with your own:

• images/profile.jpg - Your profile photo
• images/project1.jpg - Project screenshots (1200x600px recommended)
• images/project2.jpg - Keep images consistent size
• images/project3.jpg - Landscape orientation works best

---

🌙 Dark Mode

• Automatically detects system preference
• Toggle button in navbar
• Preference saved to localStorage
• Smooth transition between themes

---

📱 Responsive Breakpoints

• Desktop: Full layout (1200px+)
• Tablet: 768px - optimized spacing
• Mobile: 480px - stacked layout

Test on all devices before deploying!

---

✅ Pre-Deployment Checklist

• Updated your name and title
• Added your projects with images
• Updated contact information
• Customized colors to match your brand
• Tested dark/light mode toggle
• Verified mobile responsiveness
• Checked all links work
• Updated social media links
• Added real project images
• Set up form submission backend

---

🚀 Deployment

GitHub Pages

1. Create a GitHub repo
2. Push files to main branch
3. Enable Pages in Settings
4. Your site: https://username.github.io/portfolio

Netlify

1. Drag & drop folder to Netlify
2. Auto-deploys on push
3. Free HTTPS & custom domain support

Other Options

• Vercel, Firebase, AWS S3, etc.

---

📄 License

This template is yours to use, modify, and sell. No restrictions.

---

🎁 What's Included

✅ Fully functional portfolio
✅ Premium animations & effects
✅ Dark/light mode
✅ Mobile responsive
✅ Clean, customizable code
✅ No dependencies needed
✅ SEO optimized
✅ Ready to deploy

---

🤔 FAQ

Q: Can I use this commercially?
A: Yes! Customize it, sell it, use it for clients. It's yours.

Q: Do I need hosting?
A: No! Use GitHub Pages, Netlify, Vercel, or any static host—all free.

Q: Can I change the colors?
A: Yes. Edit CSS variables at the top of styles.css.

Q: How do I add more projects?
A: Copy a project card HTML and update the image, title, and links.

Q: Is it mobile friendly?
A: Yes! Mobile-first responsive design tested on all devices.

Q: Can I use my own fonts?
A: Yes! Change Google Fonts imports in the HTML <head>.

---

Made with ❤️ for developers who want a stunning portfolio