A beautiful, interactive Valentine's Day website generator to ask your special someone to be your Valentine! Create your own personalized version in minutes. Perfect for Valentine's Day 2025! π
π Live Demo | π Quick Start | π Deploy Your Website
Help others find this project:
- β Star this repository if you like it
- π Fork it to create your own version
- π’ Share on your social media
- π± Show your creation to friends
Ready-to-use messages for sharing:
Twitter/X
π Create your own Valentine's website for free! No coding required!
π Fully customizable, easy to deploy with your own website name
β¨ Try it now: https://github.com/End2EndAI/valentine-website-2025
#ValentinesDay2025 #WebDev #GitHub #Love
Instagram/Facebook
π Make Valentine's Day 2025 unforgettable!
Create your own interactive Valentine's website in minutes - completely FREE!
β¨ No coding required
π¨ Fully customizable
π Get your own website link
Try it now: https://github.com/End2EndAI/valentine-website-2025
#ValentinesDay2025 #Love #WebDev #CodingWithLove
Reddit (r/webdev, r/coding)
[Project] π Valentine's Website Generator - Free & Open Source
I created a free, open-source Valentine's website generator that lets anyone create their own interactive Valentine's proposal website. No coding required!
- π¨ Fully customizable
- π Interactive elements
- π Easy deployment
- π± Mobile-friendly
- π― Free forever
Demo: https://end2endai.github.io/valentine-website-2025
GitHub: https://github.com/End2EndAI/valentine-website-2025
- π Floating hearts and bears
- π― Interactive questions
- π Love meter that goes beyond 100%
- πββοΈ Playful buttons that run away
- π Hidden answer for the first question, "Do you like me?"
- π Grand celebration when they say yes!
- Click the "Fork" button at the top right of this page
- Wait a few seconds while GitHub creates your copy
- You now have your own version of the code!
Note: Make sure you're logged into your GitHub account. If you don't have one, you can create a free account here.
- In your new repository, click on
config.js
- Click the pencil icon (βοΈ) to edit
- Change the values to personalize your website
- Click "Commit changes" at the bottom
Here's what you can customize in config.js
:
// Basic Information
valentineName: "Jade" // Your Valentine's name
pageTitle: "Will You Be My Valentine? π" // Browser tab title
// Floating Background Elements
floatingEmojis: {
hearts: ['β€οΈ', 'π', 'π', 'π', 'π'], // Heart emojis in background
bears: ['π§Έ', 'π»'] // Bear emojis in background
}
// Questions and Buttons
questions: {
first: {
text: "Do you like me?", // First question
yesBtn: "Yes", // Yes button text
noBtn: "No", // No button text
secretAnswer: "I don't like you, I love you! β€οΈ" // Hidden message
},
second: {
text: "How much do you love me?", // Second question
startText: "This much!", // Text before percentage
nextBtn: "Next β€οΈ" // Next button text
},
third: {
text: "Will you be my Valentine...?", // Final question
yesBtn: "Yes!", // Yes button text
noBtn: "No" // No button text
}
}
// Love Meter Messages
loveMessages: {
extreme: "WOOOOW You love me that much?? π₯°ππ", // Shows above 5000%
high: "To infinity and beyond! ππ", // Shows above 1000%
normal: "And beyond! π₯°" // Shows above 100%
}
// Final Celebration
celebration: {
title: "Yay! I'm the luckiest person...", // Celebration title
message: "Now come get your gift...", // Celebration message
emojis: "πππ€ππβ€οΈπ" // Celebration emojis
}
// Website Colors
colors: {
backgroundStart: "#ffafbd", // Background gradient start
backgroundEnd: "#ffc3a0", // Background gradient end
buttonBackground: "#ff6b6b", // Button color
buttonHover: "#ff8787", // Button hover color
textColor: "#ff4757" // Text color
}
// Animation Settings
animations: {
floatDuration: "15s", // How long hearts float (10-20s)
floatDistance: "50px", // Sideways movement (30-70px)
bounceSpeed: "0.5s", // Bounce animation speed (0.3-0.7s)
heartExplosionSize: 1.5 // Final heart explosion size (1.2-2.0)
}
// Music Settings
music: {
enabled: true, // Music feature is enabled
autoplay: true, // Try to autoplay (note: some browsers may block this)
musicUrl: "YOUR_CLOUDINARY_URL_HERE", // Paste your music URL here
startText: "π΅ Play Music", // Button text to start music
stopText: "π Stop Music", // Button text to stop music
volume: 0.5 // Volume level (0.0 to 1.0)
}
Want to make it extra special with your own romantic song? Follow these steps to add background music:
-
Get a Cloudinary Account (Free):
- Go to Cloudinary.com and sign up for a free account
-
Upload Your Music:
- Log in to your Cloudinary dashboard
- Click on the "Upload" button in the top right
- Select "Upload" from the dropdown menu
- Choose your MP3 file (keep it under 10MB for better loading)
- Wait for the upload to complete
-
Get Your Music URL:
- After upload, find your music file in the Media Library
- Click the "..." (more options) button on your music file
- Click "Copy URL"
- Select "Copy Original URL with options"
- The URL should look like:
https://res.cloudinary.com/your-cloud-name/video/upload/v1234567890/your-file-name.mp3
-
Add to Your Website:
- Open
config.js
- Find the
music
section - Replace the
musicUrl
value with your Cloudinary URL
- Open
music: {
enabled: true,
autoplay: true,
musicUrl: "YOUR_CLOUDINARY_URL_HERE", // Paste your URL here
startText: "π΅ Play Music",
stopText: "π Stop Music",
volume: 0.5
}
- Go to your repository's "Settings"
- Click "Pages" in the left sidebar
- Under "Source", select "main" branch
- Click "Save"
- Wait a few minutes
- Your site will be live at:
https://your-username.github.io/repository-name
- Go to Netlify
- Sign up for a free account
- Click "Add new site" β "Import an existing project"
- Choose your GitHub repository
- Click "Deploy site"
- Once deployed, click "Domain settings"
- Choose a custom domain (e.g.,
my-valentine-2025.netlify.app
)
- Test the website before sending it to your Valentine
- Try all the buttons and interactions
- Check how it looks on mobile phones
- Keep the secret message subtle (bottom-right corner)
Use these tools to find beautiful colors:
Find more emojis at:
- Create an issue in this repository
- Check existing issues for solutions
- Contact me through GitHub
Created with love for Valentine's Day 2025. Feel free to use and modify for your special someone!
- Louis Fontaine -
MIT License - Feel free to use this for your Valentine!