Mindful Moments

Know How You Feel. Grow How You Heal.

Comment

What it does

Mindful Moments is a simple, interactive mental health check-in website. It allows users to reflect on how they feel by selecting a mood — like happy, sad, anxious, tired, or motivated — and then displays an encouraging message tailored to that emotion.

The site also provides resources for mental health support in the Philippines, including links to trusted organizations and a QR code for GCash donations to MentalHealthPH. It includes a light/dark mode toggle for user comfort and a modern, responsive UI with subtle animations.

How I built it

This project was built using:

  • HTML for structure
  • CSS for layout, design, and glow effects
  • JavaScript for interactivity and theme toggling
  • AOS (Animate On Scroll) for scroll-triggered animations
  • Google Fonts (Poppins) for a soft, modern feel

The page is entirely frontend, with no backend or database, making it fast and easy to load. Mood buttons are linked to supportive messages using JavaScript. A theme toggle remembers the user's choice using localStorage.

Challenges I ran into

As a beginner, some of the challenges I faced were:

  • Implementing localStorage to remember the user's theme preference
  • Styling and balancing both dark mode and light mode designs to look equally clean
  • Making the layout mobile-responsive without breaking the design
  • Figuring out how to trigger and customize AOS animations properly
  • Overcoming self-doubt and staying motivated as I worked on my very first hackathon project

Accomplishments that I'm proud of

  • Creating a complete, functional mental health support tool from scratch
  • Making a user-friendly and accessible dark/light mode experience
  • Integrating real donation resources and hotline numbers that could make a real-world difference
  • Designing something meaningful with a clean layout and glowing, soft UI
  • Completing my first-ever hackathon project with a purpose

What I learned

I learned:

  • How to structure and build a project from start to finish on my own
  • How to use JavaScript to add interactivity like mood response and theme switching
  • How to use AOS.js to make subtle scroll animations
  • The importance of user experience, accessibility, and mobile responsiveness
  • That even beginners can build something impactful when the idea comes from the heart

What's next for Mindful Moments

I plan to:

  • Add more moods and customize messages even further
  • Allow users to submit how they’re feeling anonymously and track mood trends over time
  • Add meditation music or background ambient sounds
  • Create a dedicated “About Mental Health” section with articles and coping tools
  • Possibly turn it into a Progressive Web App (PWA) so users can install it on their phones

Mindful Moments is just the beginning — I want to keep building tools that help people care for themselves and each other.

Built With

Share this project:

Updates