Inspiration
I am a social media content creator, I regularly post content related to web development, DSA, app development, and various technical skills. While browsing Instagram, I came across several pages showcasing fun and creative "confession" websites. Many followers were asking for the source code in the comments, which inspired me to create my own version of such a project.
Seeing the high demand and interest in such fun, personalized web experiences on Instagram really pushed me to build one myself. It gave me a chance to combine creativity, frontend skills, and social trends into a meaningful and engaging project. It also serves as a portfolio piece to showcase my skills in web development and user experience design.
What it does
The website allows users to enter the name of the person they want to make a confession to. Once the name is entered, the user is redirected to a new page where a heartfelt message appears in the format:
"I love you [Name]" Followed by a short line in Hindi, making the experience more relatable and emotional for Indian audiences.
At the bottom of the page, there’s a credit line: “Made by Deepak”, which is hyperlinked to my LinkedIn profile to give proper attribution and provide a way for people to connect with me professionally.
How we built it
I built this project using HTML, CSS (with animations), and a bit of JavaScript.
At the start, a JavaScript prompt is triggered to let users input the name of the person they want to confess to.
Once submitted, users are redirected to a new page where the confession message is personalized with the entered name.
I used CSS animations to create floating heart effects and a sparkling background, making the overall experience visually appealing and engaging.
The animations were implemented using @keyframes, giving life to the hearts and background sparkles for a romantic and fun feel.
Overall, the project took me around 10 to 15 hours to design, develop, and polish.
Challenges we ran into
As an experienced developer, I didn’t face any major challenges while building this project since it was relatively small in scope. However, there were a few minor slip-ups—like occasionally mixing up IDs and classes (e.g., using a # for a class or a . for an ID). These were simple syntax issues that were quickly identified and fixed.
Accomplishments that we're proud of
Successfully built a complete, functional, and visually engaging confession website from scratch using only HTML, CSS, and JavaScript.
Integrated personalized message rendering based on user input, creating a fun and interactive user experience.
Added CSS animations like floating hearts and sparkling backgrounds using @keyframes to enhance visual appeal.
Hyperlinked my name to my LinkedIn profile, giving it a personal touch and turning the project into a mini-portfolio piece.
Completed the entire project within 10–15 hours, showcasing quick turnaround and effective time management.
Received positive feedback and engagement from peers and Instagram followers, motivating me to build more such creative projects.
What we learned
Improved my understanding and application of CSS animations using @keyframes to bring creative ideas to life.
What's next for Confession
Integrate light background music or romantic sound effects to enhance emotional engagement. Allow users to add custom images or romantic GIFs alongside their confession for a more personalized feel.
Log in or sign up for Devpost to join the conversation.