Balance Your Life

Balance Your Life is a website created to assist individuals in achieving balance in all aspects of their lives. Unlike other platforms that focus solely on work-life balance, this site addresses a wider audience, acknowledging that true well-being encompasses every area of life.

This site offers valuable insights and practical techniques to help users effectively balance their lives. Whether they are struggling with stress, burnout, anxiety, or fatigue, Balance Your Life provides a starting point for enyone seeking to boost their life energy and overall well-being.

Features

• Navigation Bar

  • Featured on all three pages, fully responsive with links to the Logo, Home page, Start Here and Contact page.

  • Enables easy navigation from page to page on all devices.

    

• The Home page

  • The landing page showcases a photograph of a balanced tower of stones of various sizes, shapes, and colors. It serves as a powerful metaphor for different aspects of life and the art of balancing them. Despite their differences, when in harmony, they contribute to an overall sense of stability and well-being.
  • This section introduces to Balance Your Life and emphasizes the importance of achieving balance. Each aspect of our lives is unique, with its own weight and shape - work, relationships, health, personal growth, and leisure. While it may seem daunting to integrate these varied components together, with thoughtful arrangements and balance, they can create a harmonious and stable existence.

  

  • The reasons section clarifies to the user why it is essential to harmonize mind, body and soul to create a meaningful life and enjoy every moment, as well as how we can accomplish this.

  

• The Footer

  • The footer section includes links to social media such as Facebook, Twitter and YouTube.
  • All links open in a new tab for easy navigation.
  • It offers users quick access to additional information.

  

• The Start Here page

  • The start here page is designed to help users begin their journey towards achieving a harmonious life. Whether they are new to the concept of holistic well-being or looking to deepen their understanding, this guide provides simple, actionable steps they can take right now to start feeling more balanced and energized.

  • Mind. This section focuses on enhancing mental and emotional well-being. Users can find simple tips that can help them start improving their mental and emotional health by emphasizing mindfulness and meditation, especially in natural settings.

  

  • Body. In this section, users can find simple advice on how they can balance their life by moving their body, starting with Yoga or Pilates.
  • Movement is essential for physical and mental health. It boosts energy levels and mood, contributing to an overall sense of well-being.

  

  • Soul. In this section, users can explore ways to balance their soul not only through spiritual practices, but also by nourishing the body with the right foods.
  • Both Ayurveda and the Chinese Five Element Diet offer holistic approaches to dieting and encourage mindful eating, where one is fully present while eating, focusing on the taste, texture, aroma of food. These diets consider the mind-body-soul connection. Certain herbs, such as ashwagandha and turmeric, are recognized for their calming and mood-enhancing properties.
  • Integrating both diets and simplifying life can help users to cultivate inner peace, emotional stability, and a deeper connection with their soul.

  

• The Contact Page

  • This section encourages users to complete the form to request personalized advice. They can choose areas they wish to focus on, such as diet, exercise, or a comprehensive approach. This form aims to provide tailored guidance based on individual needs and preferences.
  • The background of the form features a tree of life. Among its branches, gentle rays of light shine through, symbolizing the positive aspects that exist even in an unbalanced life. This photographs serves as a metaphor, reminding users that there is always a possibility for improvement and balance, regardless of their starting point.

  

Features to implement

• Audio and video.

Testing

• Accessibility

• Website tested with lighthouse. It is accessible.

• Tested on various browsers: Chrome, Edge, DuckDuckGo, and Mozilla Firefox. The website functions on all.
• Tested internal links. All work and redirect users between pages.
• Tested external links for Facebook, Twitter, and YouTube. All open in separate tab.
• Tested the contact form. All fields are required, and the email field accepts only email addresses.

• HTML
  • No errors found on W3C HTML Validator

• CSS
  • No errors found on W3C CSS Validator

Bugs

• No bugs found.

Unfixed Bugs

• No unfixed bugs.

Deployment

Version Control

• The site was developed using the Gitpod editor and pushed to GitHub to the remote repository balance_your_life.
• Git commands were utilized to push the code to the repository.

Deployment to Github Pages

• This website was deployed to GitHub Pages with the following steps:
  • Navigate to the repository on GitHub
  • Go to the settings tab in repository
  • Scroll down to the "Pages" section
  • Select the branch
  • Under "Source" select the branch to deploy ('main')
  • Save the settings
• Link to website: Balance Your Life

Wireframes

• The wireframes for the website were sketched by hand for a mobile version.

1. Home Page
2. Start Here Page
3. Contact Page

Credits

• Special Thanks:
  • Spencer Barriball - For your mentorship. Your insights and advice were crucial to the success of this project.

Content

• Favicon: Taken from Favicon.
• Icons: Taken from Font Awesome.
• Design Inspiration:
  • Header, Footer and Contact page: Inspired by "Love Running project".
  • Start Here Page: Inspired by YouTube tutorial

Media

• Images:
  • Downloaded from Pexels:
    • Reasons section (Lady in Yoga position - Home Page).
    • Body and Soul section (Start Here Page).
  • Downloaded from Unsplash:
    • Hero Image (Home Page).
    • Reasons section (Men on the bridge - Home page).
    • Mind section (Start Here Page).
    • Background Image (Contact Page).