https://github.com/meghanapidaparthi/birthday-wishes-website
A simple cute birthday website for my friend :3
https://github.com/meghanapidaparthi/birthday-wishes-website
birthday-wishes react-components react-typescript reactjs shadcn-ui typescript
Last synced: 8 months ago
JSON representation
A simple cute birthday website for my friend :3
- Host: GitHub
- URL: https://github.com/meghanapidaparthi/birthday-wishes-website
- Owner: MeghanaPidaparthi
- Created: 2025-04-08T05:08:32.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-04-08T06:24:58.000Z (8 months ago)
- Last Synced: 2025-04-08T07:30:22.088Z (8 months ago)
- Topics: birthday-wishes, react-components, react-typescript, reactjs, shadcn-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 556 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Birthday Surprise Website
An interactive birthday website built with React and TypeScript, featuring animated balloons, confetti effects, background music, and a celebratory message triggered on user interaction.
---
## Features
- Gradient balloons animated with CSS
- Confetti animation on trigger
- Background birthday song (autoplay and loop)
- Embedded "Uia Uia" cat GIF (locally or via Tenor)
- Responsive and pastel-themed UI using Tailwind CSS
- Celebration sequence starts on button click
---
## Tech Stack
- React + TypeScript (using Create React App)
- Tailwind CSS
- ShadCN UI (Button component)
- Canvas Confetti
- HTML5 Audio
- GIF embed from Tenor
---
## Preview
_Add a screenshot or recording here to showcase the final experience._
---
## Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/your-username/sridevi-birthday.git
cd sridevi-birthday
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start the Development Server
```bash
npm start
```
Visit `http://localhost:3000` to view the application.
### 4. Build for Production
```bash
npm run build
```
---
## Project Structure
```
sridevi-birthday/
├── public/
│ └── birthday.mp3
├── src/
│ ├── assets/
│ │ └── oia-cat.gif
│ ├── components/
│ │ ├── Balloons.tsx
│ │ ├── OiaSticker.tsx
│ │ ├── HeroSection.tsx
│ │ └── Button.tsx
│ ├── App.tsx
│ └── main.tsx
├── tailwind.config.ts
├── index.html
└── README.md
```
---
## Customization Ideas
- Add carousel with personal photos or inside jokes
- Introduce more animation and sound effects
- Extend it with a countdown or RSVP section
---
## License
This project is created for personal use and learning. Feel free to fork and adapt it for similar celebratory experiences.
---
Crafted with care for a memorable birthday.