# 🌌 NEBULA — Premium Developer Portfolio Theme

> A modern, animated, fully-responsive dark-mode portfolio template built for developers, designers, and content creators who want to make a lasting impression.

![Version](https://img.shields.io/badge/version-1.0.0-blue)
![Bootstrap](https://img.shields.io/badge/Bootstrap-5.3-7952B3)
![License](https://img.shields.io/badge/license-MIT-green)

---

## 📑 Table of Contents

1. [Overview](#overview)
2. [Features](#features)
3. [Tech Stack](#tech-stack)
4. [File Structure](#file-structure)
5. [Installation & Setup](#installation)
6. [Customization Guide](#customization)
7. [Color System & Typography](#design-system)
8. [Section Breakdown](#sections)
9. [Animations & Interactions](#animations)
10. [Responsive Breakpoints](#responsive)
11. [Performance Optimization](#performance)
12. [Browser Compatibility](#compatibility)
13. [Deployment Guide](#deployment)
14. [Form Backend Integration](#form-backend)
15. [SEO Checklist](#seo)
16. [Troubleshooting](#troubleshooting)
17. [Credits & Resources](#credits)
18. [License](#license)

---

## 🎯 1. Overview

**Nebula** is a production-ready, single-page portfolio template designed for modern web professionals. It combines a sophisticated dark-mode aesthetic with smooth animations, glassmorphism effects, and a vibrant electric-blue accent system.

**Perfect for:**
- Full-stack developers
- UI/UX designers
- Content creators / YouTubers
- Freelancers
- Students showcasing projects

---

## ✨ 2. Features

### Core Features
- ✅ **Fully Responsive** — Mobile, tablet, and desktop optimized
- ✅ **Dark Mode by Default** — Deep slate/navy backgrounds
- ✅ **Glassmorphism UI** — Frosted glass cards and navbar
- ✅ **Smooth Animations** — AOS scroll animations throughout
- ✅ **Dynamic Typing Effect** — Typed.js hero text rotation
- ✅ **Animated Skill Bars** — Trigger on scroll into view
- ✅ **Interactive Timeline** — Education & experience sections
- ✅ **Project Cards with Hover Overlays** — Professional portfolio display
- ✅ **YouTube Integration** — Embedded video + thumbnail grid
- ✅ **Validated Contact Form** — With success/error states
- ✅ **Scroll-to-Top Button** — Appears after scrolling
- ✅ **Sticky Glassmorphic Navbar** — Transparent → solid on scroll
- ✅ **Active Nav Link Tracking** — Highlights current section
- ✅ **Download CV Button** — Prominently placed in navbar + hero
- ✅ **Custom Scrollbar** — Matches theme gradient

### UX Polish
- 🎨 Gradient text effects
- 🎨 Floating animated badges around hero image
- 🎨 Rotating gradient ring around profile photo
- 🎨 Waving hand emoji animation
- 🎨 Tooltips on social icons
- 🎨 Smooth page fade-in on load
- 🎨 Subtle background radial glows

---

## 🛠 3. Tech Stack

| Technology | Version | Purpose |
|------------|---------|---------|
| **HTML5** | Latest | Semantic structure |
| **CSS3** | Latest | Custom styling + variables |
| **Bootstrap** | 5.3.2 | Grid system & responsive utilities |
| **AOS** | 2.3.1 | Scroll-triggered animations |
| **Typed.js** | 2.0.12 | Hero typing effect |
| **FontAwesome** | 6.5.1 | Icons throughout |
| **Google Fonts** | — | Inter (body) + Space Grotesk (headings) |
| **Vanilla JS** | ES6+ | All interactions |

**No build tools required** — pure HTML/CSS/JS.

---

## 📁 4. File Structure
