**View live project here

This is the main website for Joseph Gagner, personal trainer in Rolling Hills, California. It is designed to be responsive and accessible on a range of devices, including iPhone, iPad, Android and desktop. It is designed to be easy to navigate for potential new clients looking to hire a personal trainer that understands their concerns about exercising and nutrition.

• A first time visitor should be able to easily learn about Joseph Gagner, his personal journey and why he is the best professional trainer for them.
• A first time visitor should be able to easily navigate throughout the site in a simple and intuitive way.
• A first time visitor should be able to quickly look at the types of services that Joseph offers and view his starting price points. This is important because displaying price points naturally weed out “tire kicker” visitors, allowing for more qualified Sign-up form submissions.
• A first time visitor should be able to quickly look at testimonials and before/after pictures that corroborate Joseph’s training expertise and success in facilitating their transformation.
• A first time visitor will easily be able to contact Joseph for an initial consultation and get started on their health journey.

• A returning visitor’s purpose for visiting Joseph Gagner’s website would be to download the California release form required to start their training. This is easily downloaded from the footer, which is repeated on every page of the site.

• The main colors used will be gray, white, and blue (specifically, Hex #235384).

• The primary font family will be Oswald throughout the site, with San Serif as the fallback font if such font family is not being imported.

• Imagery is important. The large, background hero image on the main page is designed to be striking and evoke the emotion of accomplishment or the dawning of a new day at the end of a long journey. It also has a modern, inspirational aesthetic.
• Header images are placed on every page. These images are meant to tie back to the theme of each page- Services, Testimonials, Start Now!

• View complete wireframe here

• Responsive on all device sizes
• Interactive elements- Forms download link and Sign-up form

• HTML5
• CSS3

Bootstrap 4.5.2:

• Bootstrap was used to assist with the responsiveness and styling of the website.

Google Fonts:

• Google fonts were used to import the Oswald font family into the style.css file which is used on all pages throughout the project.

Font Awesome:

• Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

jQuery:

• jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.

Git:

• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

GitHub:

• GitHub is used to store the projects code after being pushed from Git.

Balsamiq:

• Balsamiq was used to create the wireframes during the design process.

PicResize:

• PicResize was used to resize large pictures during the design process.

1. A first time visitor should be able to easily learn about Joseph Gagner, his personal journey and why he is the best professional trainer for them.

   • Upon landing on the site, users are greeted with a hero image that evokes accomplishment and inspiration.
   • A quick bio details Joseph’s drive and passion for fitness.
   • A journey timeline solidifies the point that while Joseph is a personal trainer that has had a passion for health and fitness all his life, he has also had to overcome obstacles, thereby making him a more relatable trainer for the common person.
   • Thirdly, the section displaying his various certifications should lend credibility to his level of knowledge and professionalism.

2. A first time visitor should be able to easily navigate throughout the site in a simple and intuitive way.

   • The navigation bar is clearly visible and accessible, fixed to the top of the page on every page of the site. The titles of the pages clearly indicate the information provided on each and the user can easily navigate.
   • A call to action button is clearly displayedin the top right hand corner of the navigation bar. It stands out with the site's signature blue color and is visible across all pages. There is also a call to action button displayed in the middle of the hero image on the home page.

3. A first time visitor should be able to quickly look at the types of services that Joseph offers and view his starting price points. This is important because displaying price points naturally weed out “tire kicker” visitors, allowing for more qualified Sign-up form submissions.

   • The types of services offered are clearly displayed in block format on the Services page. Each service has a detailed explanation of what it is included in the service and what the client should expect. Below each service block there is a starting price point identified and it stands out in the site's signature blue color.
   • Below all price points a first time visitor will note that there is a note stating that prices for all service offerings can be highly discounted when purchased as packages. This can ease the mind of those who may find the prices of services nearing their pain threshold.

4. A first time visitor should be able to quickly look at testimonials and before/after pictures that corroborate Joseph’s training expertise and success in facilitating their transformation.

   • The Testimonials page has statements provided by real-life clients that Joseph has helped in the past.
   • Some before and after pictures are included with the testimonials to visually prove the transformations achieved by previous clients.
   • Additional pictures can be found on Joseph's Instagram page, a link to which is clearly displayed on the footer of the page.

5. A first time visitor will easily be able to contact Joseph for an initial consultation and get started on their health journey.

   • A Sign-up form is linked to the call to action buttons that are clearly displayed throughout the site.
   • For a direct contact methods, Joseph's email and telephone number are listed on the footer that is visible on every page of the site.
   • Additionally, visitors can also contact Joseph via social media channels which are linked also on the footer.

1. A returning visitor’s purpose for visiting Joseph Gagner’s website would be to download the California release form required to start their training.
   • This is easily accomplished via a download icon from the footer, which is repeated on every page of the site.

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate your GitHub Repository. For this particular project the name is milestone-project-1.
2. At the top of the Repository, find the "Settings" button and select it.
3. Scroll down the Settings page and find "GitHub Pages" section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page should automatically refresh but if it doesn't, refresh the page.
6. Scroll back down through the page to the same section and find a published site link.

• Bootstrap: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• All content was written by the developer with input and assistance from Joseph Gagner.

• All before and after images were acquired from Joseph Gagner and used with the permission of each client.
• Hero image and other header images were acquired from Unsplash.

• My Mentor for continuous helpful feedback.
• Tutor Support at Code Institute for their support.
• CI Slack community for their ongoing assistance.