Skip to content

KejamHatan05/Birthday

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

🎂 Happy Birthday Special — Interactive Web Experience

Typing SVG

Live Demo


🌸 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

HTML5 CSS3 JavaScript jQuery Netlify

Libraries used:


📁 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. 🎂✨

Releases

No releases published

Packages

 
 
 

Contributors