Dec 27

・2 min read

What I built

I have built a website which offers 3 visually guided breathing exercises to calm ourselves in these troubling times.

Category Submission:

Program for the People

App Link

https://calm-breathing-22hza.ondigitalocean.app/

Screenshots

Description

The website shows a circle which expands and contracts to guide inhale, hold and exhale patterns. The color patterns and a rotating pointer guide the user as well. The background image and the colors lie on the cooler side of the color palette to induce a calming effect. The website is built with basic HTML, CSS and Vanilla JS (and a little Bootstrap).

Link to Source Code

https://github.com/rishikesh1419/calm-breathing-static

Permissive License

MIT License

Background

During the pandemic, as we are forced to stay indoors with little or no social interactions, a lot of people are suffering from anxiety and stress. Attending online lectures and tests, and working from home with no social life is tough. One of the easiest and the quickest ways to temporarily feel calm is by breathing properly. 'Box Breathing', '4-7-8' and '7-11' are some of the most popular breathing patterns.

How I built it

I was already working on a personal project of Flutter app for guided breathing. Although my work mostly involves ReactJS, for weeks I have been meaning to brush up my basic CSS and Vanilla JS skills. The DigitalOcean App Platform Hackathon provided with me an opportunity to build this website and host it. The DigitalOcean App Platform had an extremely easy method to host this static site. Moreover, automated re-builds when pushing commits to the GitHub repository turned out to be an amazing feature.

Additional Resources/Info