Happy Birthday 🎉

🎈 About

A beautiful, interactive birthday gift website built with React and TypeScript. is a one of a kind Birthday Treasure, handcrafted as a gift to Celebrate my Friend in style.

Born from late-night coding sessions and a love for building something special, it’s a Sleek, Luxurious Escape. It’s more than a site - it’s a personal digital keepsake designed with care and attention to detail.

✨ Features

• Interactive Envelope: Click to open an animated envelope that reveals the birthday content.
• Animated Hero Section: A full-screen experience with a stunning northern lights as background for a birthday message.
• Photo Gallery: An elegant photo collection, showcasing your friend's unforgettable memories.
• Personalized Messages: Custom birthday greetings and wishes.
• Shooting Star Wisher: A magical wish-making experience with animated shooting stars.
• Background Music: Ambient music that plays when the envelope is opened.
• Responsive Design: Works beautifully on desktop and mobile devices.
• Custom Cursor: Enhanced user experience with a custom cursor.
• Smooth Animations: Parallax effects and smooth transitions throughout.

🛠 Tech Stack

Frontend

• React 19: Latest React with modern features and hooks
• TypeScript: Type-safe development for better code quality
• Vite: Fast build tool and development server
• Tailwind CSS: Utility-first CSS framework for styling
• FontAwesome: Icons for UI elements

Development Tools

• ESLint: Code linting and quality assurance
• PostCSS: CSS processing and optimization
• Autoprefixer: Automatic vendor prefixing

Project Structure

src/
├── components/          # React components
│   ├── CustomCursor.tsx
│   ├── Envelope.tsx
│   ├── Gallery.tsx
│   ├── Greet.tsx
│   ├── Hero.tsx
│   ├── Message.tsx
│   └── Wish.tsx
├── assets/             # Static assets
│   └── music-bg.mp3
├── App.tsx             # Main app component
└── main.tsx            # Entry point

📦 Installation

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Setup

1. Clone the repository

git clone git https://github.com/irfan-rg/present

cd present

2. Install dependencies

npm install

3. Start development server

npm run dev

🎨 Customization

Personalizing the Content

1. Update the Hero Section (src/components/Hero.tsx):

   • Change "Friend's Name" to the actual birthday person's name
   • Replace the video background URL with your own video
   • Modify the birthday message

2. Add Photos to Gallery (src/components/Gallery.tsx):

   • Replace placeholder images with actual photos
   • Add captions and descriptions

3. Customize Messages (src/components/Message.tsx):

   • Write personalized birthday messages
   • Add special memories or inside jokes

4. Update Background Music:

   • Replace src/assets/music-bg.mp3 with your preferred background music

Styling

The project uses Tailwind CSS for styling. You can customize:

• Colors in tailwind.config.js
• Fonts and typography
• Animations and transitions
• Responsive breakpoints

📱 Mobile Optimization

The project is fully responsive and includes:

• Touch-friendly interactions
• Mobile-optimized animations
• Responsive typography
• Mobile-specific audio handling

🎵 Audio Features

• Background music plays when envelope opens
• Mute/unmute button for audio control
• Mobile-friendly audio handling
• Automatic audio pause when leaving the page

🎉 Usage

This project is designed as a personal birthday gift. To use it:

1. Customize the content with personal photos and messages
2. Deploy to your preferred hosting platform
3. Share the link with the birthday person
4. Watch them enjoy their digital birthday surprise!

---

Made with ❤️ for special birthday celebrations