This project is an interactive romantic web experience designed to celebrate a one-month anniversary. Instead of presenting a traditional static message, it uses animated envelopes that open to reveal personalized letters, creating a playful and emotionally immersive interaction.
🎯 Purpose of the project is to: Deliver a heartfelt message in a creative way Provide an engaging user experience Combine animation, layout design, and interactivity Demonstrate frontend development skills using pure web technologies It transforms a simple love letter into a small interactive web application.
📌 Technologies Used
1️⃣ HTML5 Used for: -Semantic structure of the webpage -Organizing envelopes, letters, images, and text content -Defining layout containers -Embedding media (images) -Structuring interactive components
Key elements: - modern HTML5 declaration -Responsive configuration -Structured container layout -Multiple reusable .envelope-wrap components
2️⃣ CSS3 (Advanced Styling & Animations) This project heavily relies on modern CSS features: 🎨 CSS Variables (:root) Used to define reusable color tokens: --pink-1, --pink-2, --accent, etc. This improves maintainability and theme consistency. 📐 Flexbox Layout
Used for: -Centering the container -Creating a responsive card grid -Aligning envelopes properly
✨ Visual Enhancements -Gradients (linear & radial) -Shadows (box-shadow) -Clip-path for triangular flap -Custom scrollbar styling -Responsive media queries -This shows strong knowledge of: -CSS animations -3D transformations -Modern UI design principles
3️⃣ JavaScript (Vanilla JS) No external libraries are used — everything is written in pure JavaScript.
🔹 Dynamic Floating Hearts
-Random emoji selection -Random size -Random animation duration -Automatic cleanup using setTimeout() -Continuous generation using setInterval()
🔹 Welcome Screen Auto Hide
Uses: -window.addEventListener('load') -setTimeout() This demonstrates: -DOM manipulation -Event handling -Timed animations -Dynamic element creation
🌟 Strengths of the Project
✅ Fully responsive
✅ Clean visual design
✅ Strong use of modern CSS
✅ Smooth animations
✅ Interactive UI
✅ No external dependencies
✅ Creative concept execution
✅ Proper overflow handling inside scrollable cards
🎯 To improve this project: Organize the code better Make it more accessible Optimize animations Polish the text Improve performance Structure it like a real production project
🍿Video