Balanced Life

Have you been keeping a good balance between work and life? Try out this page to check your balance.

Comment

Inspiration

I am a workaholic. Frequently, I happened to spend so much more time at work than in my personal life. It makes me anxious and depressed when I am not working. Eventually, it start to affect my wellness. So I thought what if there is a website where I can do a weekly check-up to keep my work-life balance in check?

What it does

It asks a couple of questions to the user relating to his work-life balance. The degree of work involved in the user's life will be indicated by the wave in the background.

How we built it

This website is built by using JavaScript as the primary language along with HTML/CSS. I used libraries such as ReactJS, and TailwindCSS to make it less time-consuming and much prettier.

Challenges we ran into

The challenge I run into is making it look pretty. Since the page's main concept is simple and straightforward, I had to come up with an interface that looks eye-catching to the user while carrying a real meaningful representation.

Accomplishments that we're proud of

I can proudly say that I solved the challenge of developing a pretty interface. Getting the idea from the phrase "I am drowned in work", I created a wave animation to indicate how much work is trying to drown the user's personal life.

What we learned

From this project, I have learned how to use CSS more efficiently to make the page look great. Since it is a really straightforward website, I needed to use all the UI/UX knowledge I had to make it look NOT boring. For that effort, I learned how to use UI libraries in React JS. For this project, I used the react-waveify library to create waves.

What's next for Balanced Life

Right now, the questions from the website are from my personal knowledge and from some websites. If I were to get more scientifically tested questions from research, the result from my page would be more accurate and it will be helpful to many people to keep their wellness in check.

Built With

Share this project:

Updates