🎂 Interactive Virtual Birthday Celebration Site

An elegant, immersive, and fully customizable virtual birthday celebration web application built with React, TypeScript, and Tailwind CSS. Designed with rich micro-animations, accessible interfaces, seamless light/dark mode transitions, and responsive structures for mobile and desktop screens.

---

✨ Features

• 🔐 Lock Screen Verification: A playful, secure entry lock screen that requires a secret pattern or code to unlock the celebration. Can be customized or disabled.
• ✨ Ambient Visual Themes: Fully customized premium background gradients with modern organic backdrop lights. Supports smooth transitions between Light Mode and Dark Mode.
• 🖼️ Interactive Memory Lane: A structured grid of memory cards with real-time text search and category filtering (e.g., Adventures, Milestones, Fun). Click a card to open a full modal storytelling detail panel.
• 🏆 Compatibility Vault (Quiz): A custom mini-quiz game that checks how well friends know the birthday star, complete with a high-affinity dynamic percentage result screen and rank badge.
• 💌 Heartfelt Wishes & Greetings Board: A responsive, live-submitting board where friends and family can leave love-notes, wishes, and relationship tags. Generates automatic random fun color initials avatars.
• 📱 Ultra-Responsive & Accessible Nav: Fully adaptive navbar that converts to a clean slide-out drawer on mobile viewports. Audited for contrast and screen-reader friendliness (aria-label tags, semantic tag hierarchy).

---

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Local Development Setup

1. Clone the project:

   git clone https://github.com/your-username/birthday-celebration-site.git
   cd birthday-celebration-site

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Your app will run locally at http://localhost:3000.

4. Build for production:

   npm run build

5. Lint the codebase:

   npm run lint

---

🛠️ Customization Guide

All personal contents, questions, names, dates, and memories are defined in a single, well-organized configuration file: /src/config/siteConfig.ts. You can change these values to instantly spin up a custom site for any friend, partner, or family member!

1. Modifying the Birthday Star

Open /src/config/siteConfig.ts and customize the birthdayPerson object:

export const siteConfig = {
  birthdayPerson: {
    name: "Alex",
    heroGreeting: "Happy Birthday, Alex! 🎂",
    heroSubtitle: "Celebrating another year of laughter, adventures, and beautiful milestones shared together.",
    photoUrl: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=600",
    birthDate: "2026-07-15T00:00:00" // Use full ISO string for the countdown timer
  },
  ...
}

2. Changing the Lock Screen Mode

Toggle or change the security question or pattern for entry:

  lockScreen: {
    enabled: true,
    correctPattern: [0, 1, 2], // Connect these indexes on the grid nodes to unlock
    hint: "Connect the top 3 nodes horizontally from left to right!"
  }

3. Modifying Memories

Add, delete, or modify memory milestones. Each memory accepts:

• id (Unique index)
• title
• description
• date
• category ("Adventure", "Milestone", "Kitchen Disaster", "Inside Joke", etc.)
• image (Unsplash or local image asset URL)

4. Customizing the Trivia Quiz

Tailor the quiz questions in the compatibilityQuiz list to match real stories:

  compatibilityQuiz: [
    {
      question: "What is Alex's absolute go-to midnight snack?",
      options: ["Extra Spicy Ramen", "Peanut Butter Toast", "Cold Leftover Pizza", "Gummy Bears"],
      correctAnswer: "Peanut Butter Toast",
      funFact: "Yes! Alex can consume toast in under 10 seconds flat."
    },
    ...
  ]

---

📂 Project Structure

├── .github/
│   ├── ISSUE_TEMPLATE/       # GitHub bug & feature templates
│   └── workflows/
│       └── ci.yml            # CI automation workflow
├── src/
│   ├── components/
│   │   ├── CompatibilitySection.tsx  # Trivia Quiz game
│   │   ├── HomeSection.tsx           # Countdown & Profile Hero
│   │   ├── LockScreen.tsx            # Grid pattern unlock overlay
│   │   ├── MemoriesSection.tsx       # Memory list & detailed modals
│   │   ├── MessagesSection.tsx       # Guest wishes message board
│   │   └── Navbar.tsx                # Responsive adaptive header
│   ├── config/
│   │   └── siteConfig.ts             # All content & media JSON configuration
│   ├── App.tsx                       # Main entry layout and Router state
│   ├── index.css                     # Global styles and Tailwind imports
│   └── main.tsx                      # App bootstrap
├── index.html                        # SEO meta tags, title and OG cards
├── package.json                      # Build & scripts manager
└── README.md                         # Project documentation

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

💖 Contributing

Contributions are welcome! If you want to expand the game modes or introduce fancy background canvas effects, check out CONTRIBUTING.md. Let's make every birthday memorable! 🎉