🎂 Happy Birthday Special — Interactive Web Experience

---

🌸 Preview

   

✨ → Klik untuk melihat langsung ← ✨

---

🎉 About This Project

A fully interactive Happy Birthday web experience built with pure HTML, CSS, and JavaScript — no frameworks needed. Designed as a personal digital gift featuring animations, music, a love letter modal, a 3D cake, and a scratch card.

💌 "Sometimes the best gift you can give someone is something you built yourself."

---

✨ Features

Feature	Description
🎵 Auto-play Music	Background music plays on first user interaction
💌 Love Letter Modal	Animated typewriter-effect letter with floating hearts
🎂 3D Cake + Candle	Tap the flame to blow out the candle — cinematic darkness effect
🎁 Scratch Card	Gold foil scratch-to-reveal gift card with confetti explosion
💬 Floating Love Notes	Clickable bubbles that pop up sweet messages
🎊 Confetti Cannon	Fires on letter open and candle blow-out
📱 Fully Responsive	Works on mobile, tablet, and desktop
✍️ Typewriter Animation	Date and letter text animate character by character
🌸 Animated Profile Card	Floating photo with balloons and rotating circular text

---

🛠️ Tech Stack

Libraries used:

• jQuery 3.7.1 — DOM manipulation & animations
• canvas-confetti — confetti particle effects
• Font Awesome 6.5 — icons
• Google Fonts — Poppins & Dancing Script

---

📁 Project Structure

birthday-special/
│
├── index.html        # Main HTML structure & modals
├── style.css         # All animations, layout & responsive design
├── script.js         # Game logic, typing effects & interactions
├── music.mp3         # Background birthday music
└── README.md         # Project documentation

---

🚀 How to Use / Customize

1. Clone or download this repo

git clone https://github.com/YOUR_USERNAME/birthday-special.git
cd birthday-special

2. Edit the config at the top of script.js:

let datetxt       = "19th — 30 Mei";          // Tanggal ulang tahun
let datatxtletter = "Selamat ulang tahun...";  // Isi surat
let titleLetter   = "Untuk Ahmad Haifullah";   // Judul surat

3. Replace the profile photo in index.html:

<img src="YOUR_PHOTO.png">   <!-- Ganti dengan foto penerimanya -->

4. Replace music.mp3 with any .mp3 file you like.

5. Deploy for free on Netlify — drag & drop folder, done! 🎉

---

🎨 Color Palette

Color	Hex	Usage
🌸 Pink	#ff4d6d	Primary accent, buttons, hearts
💜 Purple	#c77dff	Birthday text, secondary accent
💛 Gold	#ffd60a	Scratch card, confetti
🤍 White	#ffffff	Cards, modals background
🌑 Dark	#1a1a2e	Text, name display

---

💡 Customization Ideas

• 🖼️ Replace GIF images with your own photos
• 🎵 Swap music.mp3 with their favorite song
• 🎁 Change the scratch card reveal text to a real gift or message
• 🌈 Update CSS --pink and --purple variables to match their favorite colors
• 📝 Add more floating love note bubbles in index.html

---

📄 License

This project is open source and available under the MIT License.

Feel free to fork and personalize it for someone special! 💖

---

👤 Author

Made with 💖 by @KejamHatan05

---

If this made someone smile, it was worth every line of code. 🎂✨