Waffo

Waffo is a website designed for the anxious. With its simple and cozy UI it is easy to navigate. Listen to gentle rain sounds alongside calming music. Waffo also offers a breathing aid.

Comment 1

Inspiration

I was inspired to create Waffo while stumbling upon the website xhalr I thought it was super cool that websites could also be designed to help calm a person down. However, I felt that xhalr had a few features missing so I decided to create Waffo.

What it does

Waffo is a meditation and relaxation app. It is designed to help calm your nerves through a variety of features and a simple yet cozy UI. It includes gentle rain sounds, select comforting songs, and even a breathing aid.

How we built it

I built Waffo on VSCode with live server using HTML, CSS, and Javascript. I also used GitHub's free pages feature to upload my project for the public to see. Mockups were made on Figma and Waffo was designed in Procreate.

Challenges we ran into

I spent a large majority of time learning how to use flexbox to align features horizontally on the page. In addition, I also spent a significant amount of time learning how to use Figma and getting around it.

Accomplishments that we're proud of

I am really proud that I was able to finish the key features for the website. I didn't think I would be able to implement them all, but as I've learned sometimes things do work out.

What we learned

I came into this project knowing very little about HTML, CSS, and Javascript. After creating Waffo, I have learned so much in such a short amount of time. I learned how to manipulate audio files, how to style, and how to use the transform features. I also learned Figma and how to set up GitHub pages.

What's next for Waffo

I want to add features to light up the buttons and make them get bigger when hovered over. Also would love to add a dark mode feature and also animate Waffo.

Built With

Share this project:

Updates