Valentine's Proposal with a memory game 💝

A romantic and cute way to ask your special someone to be your Valentine! This web application features a memory card game in a heart shape, where matching all pairs reveals a special Valentine's proposal with cute animations and effects.

Demo

You can see the live demo of the project here

Features

• Memory card game in a heart shape
• Cute animations and effects
• Special Valentine's proposal
• Easy to use
• Customisable
• Built with Next.js and Tailwind CSS

Getting Started

1. Clone this repositry:

git clone https://github.com/mayankWHO/Valentines.git
cd valentines

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open the application in your browser:

Open http://localhost:3000 in your browser

5. Photos Customisation

• Navigate to public/game-photos directory.
• Replace the existing placeholder images (1.avif, 2.avif, etc.) with your own images.
• Make sure the images are in the same format (.avif) as the original images.
• Make sure you use the same naming convention (1.avif, 2.avif, etc.) for the images.

6. Text Customisation

• Edit proposal messages in src/components/ValentinesProposal.tsx
• Edit title in src/app/page.tsx
• Edit game instructions in src/components/TextFooter.tsx

7. Styling

• This project uses Tailwind CSS for styling.
• You can change the colors and fonts in respected component files.
• Main colour schemas can be found in tailwind.config.ts

8. Tech Stack

• Next.js
• Tailwind CSS
• TypeScript
• React
• Framer Motion
• Fireworks.js

9. Deployment

• This project is deployed on Vercel
• You can deploy it on Vercel by connecting your GitHub repository to Vercel.

10. Acknowledgements

• This project is is inspired by love and the idea of it 💕
• Built with Next.js and Tailwind CSS.