Birthday Page Generator

I built this Birthday Page Generator to help people create ultra-smooth, visually rich, and personalized birthday microsites for their loved ones. It's designed to be mobile-first and incredibly interactive.

Why I Built This

I wanted to create a way to send a digital birthday card that feels premium and special, not just a static image. This project allows users to:

• Create a personalized page with a recipient's name, photo, and message.
• Interactive Candle Blowing: I implemented a microphone-based interaction where you can physically blow into your phone's mic to extinguish the candles on the screen!
• Premium Aesthetics: I focused heavily on smooth animations, glassmorphism, and vibrant color palettes.

How It Works

1. Create: Enter the birthday person's details and upload photos.
2. Preview: See exactly what they will see in real-time.
3. Share: Generate a unique link to send to them.

Tech Stack

I used the following technologies to bring this to life:

• Next.js: For the framework and routing.
• Tailwind CSS: For rapid, beautiful styling.
• Framer Motion: To add those buttery smooth animations.
• Canvas Confetti: For the celebration effects.
• Web Audio API: For the candle blowing detection.

Getting Started

If you want to run my project locally:

1. Clone the repo.
2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 to see it in action.

I hope you enjoy using this tool as much as I enjoyed building it!

Birthday-Card-Generator