Hello everyone! Welcome to Nate's Space, Portfolio of Design and Code., And this is 'Project' page, the work that I proud with!

This project started from Assignment in my second semester, which focused on CSS animation, and continued in the fourth semester using OOP and data fetching techniques. The main idea behind the project is the website helps users practice breathing exercises to improve wellness and reduce stress. It offers a variety of techniques, from deep breathing to guided meditation, helping users regulate their emotions and lower stress levels. The features are simple and the site is free to use.

The target audience includes people who are seeking relaxation, better mental health, and stress relief. The site is designed to help users of all ages who are interested in improving their overall well-being through easy and effective breathing practices.

The biggest challenge was designing animations that matched each breathing technique, especially since the timing and steps can vary. Another challenge was making sure the website worked smoothly across all screen sizes, especially on mobile devices, as most users would likely access it that way. The goal was to let users start using the website immediately with no confusion.

The website was designed with a focus on simplicity and user-friendliness. The navigation is clear, and users can easily understand what to do with minimal instructions. The layout is clean, the colors are calm but colorful, and the text is minimal. Buttons are intuitive, so users can quickly begin exercises without needing to read instructions.

I didn’t sketch a layout at first because the site was meant to be a simple, static, single-page application with just one feature. My main task was to research proper breathing techniques. I found many methods, but I selected the popular 4-7-8 breathing technique. Since the first version was for a CSS animation assignment and my knowledge of DOM manipulation was still limited, I implemented only one breathing method.

In the fourth semester, I revisited the project for an OOP and data-fetching assignment. I added more features, such as multiple breathing methods and countdown timers that adapt based on user preferences.

I applied new JavaScript knowledge to dynamically control values in both CSS and HTML. For example, I built a timer and created new character animations to make the website more engaging. I also redesigned the layout to support all screen sizes, making it fully responsive.

I really enjoyed working on a project that could be genuinely useful for others. Creating something that people might actually use gave the project more meaning and made the development process more fun and challenging. Improving my older project with new skills gave me a chance to review my past work and learn from my mistakes. One of the hardest parts was managing logic for different breathing methods, as some had unique steps and durations. This challenged my logical thinking and gave me a real-world example of solving problems with code. I plan to continue developing Breath Bros alongside my growing web development skills and eventually release it to the public for free use.