Rituals : Realign Your Life

Rituals

This website can be accessed by this link

Here is a link to preview the website on all screens Responsive Preview

User Stories

Visior goals:

• As a visitor, I want to know main goal of the site, so I can know how to function it.
• As a visitor, I want to be able to change the theme of the site, so I can adjust it to the time of the day for better vision.
• As a visitor, I want to simply add rituals, so I can track them.
• As a visitor, I want to simply name the rituals so I know what I'm tracking
• As a visitor, I want to be able to track the completed rituals, so i can see what rituals i completed and what i need to complete
• As a visitor, I want to be able to remove rituals, incase i added one accidently.

Features

• Lightmode

• Darkmode

Design

Color Scheme

This colour pallete has been used as it is very calming and easy on the eye. Green and the shades of green have many psychological benefits. I used it specifically as it goes incredibly well with the purpose of the website. Green is a symbolical colour for GO and Passing and accomplishment that's why. I used it here as the whole purpose is to realign users lifes. By getting them to show up everyday to achieve small habits and improve drastically over time. 1% improvement a day is a 365% improvement by the end of the year.

Typography

This google font was used as it is very aesthetic and extremely readable.

Wireframes

Light Mode

Dark Mode

Technologies Used

• HTML was used as the foundation of the site.
• CSS - was used to add the styles and layout of the site.
• CSS Flexbox - was used to arrange items on the pages.
• CSS Grid - was used to make the hero section responsive.
• CSS Grid-Template-columns - was used in hero section.
• CSS roots was used to declaring global CSS variables and apply them throughout the project.
• Balsamiq was used to make wireframes for the website.
• VSCode was used as the main tool to write and edit code.
• Git was used for the version control of the website.
• GitHub was used to host the website.
• remove background was used to remove backgrounds from images.
• FontAwesome used for icons in the pricing cards.
• UI Amiresponsive Preview responsiveness of website.
• Javascript Functionality of the website.
• iconsax.io all the icons on the website

Testing

Manual Testing

Bugs

Validator testing

• HTML

Html validation passed with no warnings.

• CSS

CSS validation passed with no warnings.

• JS

• Accessibility and performance

Lighthouse

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Main Branch, then click "Save".
  • The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Local Deployment

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

•  git clone https://github.com/Omar-Alme/rituals-tracker
  

Credits

• Content

  • Flexbox used this to but elements into two a row.
  • Lightmode toggle helped with the functionality of the toggle
  • Darkmode toggle helped me build the lightmode toggle.
  • Udemy javascript course helped me with all the javascript functionalities.

• Media

All my media and icons have been retrieved from iconsax.io as well as iconscout.

Acknowledgements

• I would like to acknowledge Chris Pennington for the design idea for the website.
• I would also like to acknowledge the authot of Atomic habit James clear, as i was reading he's book when i decided to make a habit tracking application.