This website is a portfolio of a Bournemouth based Yoga instructor. User can find here description of different types of Yoga classes offered and sign up for classes using a form. Live demo [https://edytaj.github.io/Yoga-teacher-portfolio/]

• General Info
• User Experience Design
• Technologies Used
• Testing
• Deployment
• Features
• Room for Improvement
• Acknowledgements

The website I have built, is a portfolio of a yoga teacher. The main purpose of this site is for user to get to know the yoga teacher, what classes does she offer, cost and times and importantly, get motivated by the beautiful images used to create this website.

• This website intends to motivate the user to start practicing yoga and provide user with the basic but necessary information to choose a right class for their level.
• The purpose of this project is rooted deeply in my passion. I know world is a busy place and everyone needs a little bit of time for themselves, where mind can switch off the 'thinking' mode and the body can connect with mind to create these beautiful poses in more peaceful and tranquil way. Yoga is a beautiful combination of challenging fitness routines and great training to learn quieting the busy mind.
• I have been dreaming of creating website like this. I believe this page would motivate others to learn yoga, or even to just stay fit and healthy.

• Main goal of this website is to draw attention of potential students and attract them to attending classes offered by this yoga instructor. This website was also built to motivate people in general to look into yoga and healthy lifestyle.

• This website is for anyone who would like to get inspired, learn a bit about various classes offered by yoga teacher and potentially join the classes:
• people of any age group interested in getting fitter
• people interested in unwinding their minds
• people interested in joining classes and meeting other like-minded colleagues
• people who enjoy working out in a groups

• As a user, I would like to get to know the teacher and their background

Implementation The About me section is introducing user to the yoga teacher. User can read a little bit about instructor and get a feel of what is this teacher focusing on during classes. This section is written in very clear and easy to understand language to ensure that person reading is not intimidated by fancy terminology.

• As a user I would like to be able to see potential teacher in action, visual introduction is very important to me.

Implementation User can find beautiful, inspirational photos of the instructor during yoga practice in every section of the main page. This was a very important aspect and I ensured that user have plenty of photos to get a good idea of what level the teacher is at and what potentially then can work towards themselves.

• As a user I would like to know what classes are offered and to have the ability to pick between few to match my current abilities and interests.

Implementation The 'Join my classes' section has brief but very informative description of each class. Main focus of each class is clearly stated and length of the class is also included in description.

• As a user, I would like to be able to book in for a class without any fuss.

Implementation The 'Click the button to join my classes section' is easy to navigate, provides user with booking form that is easy to navigate. There is a prompt in case user forgets to put important details in, to ensure booking is made without any problems. Once form is filled in, user is taken to personalised 'Thank you' page. 'Thank you' page has a button to take user back to homepage.

• As a user, I would like to be able to get in touch with the teacher, in case I have a questions but without booking in for an actual class.

Implementation Navigation menu has a 'Get in touch' link that takes user to their emails, they will be able to get in touch with the instructor without booking in for a class.

This portfolio website is created with minimalist, uncluttered design that ensures user ability not to get distracted by mix colours or patterns. The minimalistic approach intend to create feeling of calmness. Nudes palette colour scheme chosen for this website creates feeling of tranquillity, calmness and ease.

• Colour Scheme:

The following are the colours used:

#000000 (Black font)
#EDE9E3 (Desert Storm)
#ddd (gray)
#D4B2A7 (tan)
#A38F85 (dark grayish orange)
#FEFDF8 (light yellow)
#DCAFAC (blossom)
#333 (dark charcoal)
#eee (very light gray)
#999999 (medium light gray)
#ffffff (light gray)
#f2bcc0 (very soft red)
#f2d3bc (very soft orange)

• Typography:

This portfolio website uses fonts from Google Fonts.

Below is list of fonts used:

Quattrocento Sans

Satisfy

• Layout

Navigation Menu - the navigation menu is fixed; user is always able to see navigation links when scrolling. It makes it easier for user to jump into desired sections.

Main Page - The main page consists of clearly define sections. Each section has clear title that hints to user about content. The scroll and reveal option used (the content of next section is revealed once we are 15% into it) gives the page smooth and gentle look.

Thank you page The 'Thank you' page is displayed to user once the user book in for class. It contains personalised thank you note, date of class, link to social media pages and also button to go back to homepage.

Footer Footer has the minimalistic look: address of the studio and link to social media platforms.

Change in layout between large and small screens The page is designed to be responsive on all screen sizes. Navigation menu is hidden and slides out from left to right when hamburger menu button is clicked on small devices, giving the page clean and aesthetic look when seen on smaller screens.

The following technologies are used in this website:

Programming languages

• Javascript
• HTML – Hypertext Markup Language
• CSS - cascading Style Sheets

For testing

• JSHint
• W3C CSS Validator
• W3C HTML Validator
• Mobile-Friendly Test
• Colour Contrast Accessibility Validator
• Lighthouse Developer Tool
• Am I responsive

Other Technologies

• Gitpod
• Github
• Github Pages
• Google Fonts
• Font Awesome
• Swiperjs

• JSHint

I used SHint a JavaScript Code Quality Tool to check for errors in Javascript. No errors were detected. Result below:

JSHint shows warining in my Javascript code that I was unable to solve. I decided to leave it and learn and try to understand why these warnings are there. I reaserched on line and used Stack Overflow solutions to try and fix this unfortunately I was not successful.

• Responsivenes

I have also tested if my webpage is responsive on various devices: desktop, laptop, tablet and mobile I have used Am I responsive [ I am Responsive (https://ui.dev/amiresponsive) and result is displayed bellow. This tesy was to to check if my website is fully responsive on all screen sizes.

Link used to run tests: [(https://edytaj.github.io/Yoga-teacher-portfolio/)]

• Validator Testing

I used W3C validators for my HTML [ Nu HTML checker (https://validator.w3.org/nu/#textarea)]

and CSS tests [ W3C Css Validation Service (https://jigsaw.w3.org/css-validator/?fbclid=IwAR3BVTQVCwQOTpIjEFUCHlwFSE8kRTiH6-0XioDN8QS14uUOH3FyfCMytnc#validate_by_input)]

• Lighthouse Testing

I tested webpage using Lighthouse automated tool for improving the quality of web pages. Lighthouse audited performance, accessibility, progressive web apps and more. Result is attached below:

For Desktop:

For mobile:

• Color Contrast Accessibility Validator Results

For this project I've used GitHub IDE editor. Project was saved/pushed to a GitHub platform cloud using below commands:

• git add .

• git commit -m "message"

• git push

This website is published on GitHub Pages. The following were the steps in deploying the site:

• Login to GitHub and open the GitHub Repository. Within the Repository click on "Settings" on the top of menu.
• Go to the "Pages" section.
• Under the Sources click the dropdown displaying "None" and select branch to be deployed ("Main"). Click on the "Save" button.
• Deployed link is generated at the top in green section (Link might be displayed in blue color, this means that your link is being prepared and is not yet ready. You might need to click refresh button few times until link turns green. Deployed link is then ready.)

By using Javascript programming language, I created website with many great features to make this site more dynamic for the user:

• Responsive navigation menu
• Revealing elements on scroll
• Swiper featuring selected photos
• Modal window
• Submission form
• 'Thank you' page personalised to each client

Home page

The webpage has a Homepage and 1 further page. 'Thank you' is page only visible to user who sign up for class.

• Photos - all photos on this page are from Jana Melanie, Yoga teacher and mindfulness advocate. Jana is a social media person and I reached out to her to seek permission in using her images. She agreed for her images to be used in my project. Jana is my inspiration behind the page content idea and of course image choice.

• Navigation menu

Page is featured with navigation menu clearly defined at the top of the page. Navigation links, once clicked, are taking user to particular section of the page.

Navigation menu is hidden on small screens, it makes the nvigation space looking cleaner and more spacious.

• Header

Header and main image stand out from other features. The role of the header is to introduce the teacher, the image is there to further help to make the connection between user and the instructor.

• Get to know me section

This section is an introduction of the instructor's skills and style.

• Swiper

This great feature includes 10 photos, involves quickly moving "swiping" between images. There are 2 slides per view.. Great feature to attract attention of the users and display many images in row without overloading the page.

• Join my classes section

This section includes description of each class, it is in keeping with the rest of the page: clean, minimalistic look.

This section contains modal window. Button 'Click here for studio address and class essentials' when clicked opens modal window. Modal contains information: everything person needs to know before attending class. The modal window has a linear background colour feature. Whilst modal window is open, the background is blurred ensuring that the viewer focuses purely on the content of this window.

• Join my classes section

This section contains 'I am in' button that opens up sign up form. Form is made in a simple way, user can choose date, class and user must input name and email in order to successfully sign up for a class. Once all the details are filled in (prompt window active) user will be taken to personalised 'Thank you' page.

• Sign Up form

Form is made in a simple way, user can choose date, class and user must input name and email in order to successfully sign up for a class.

• ‘Thank you’ page

This is personalised page that user sees after signing up for a class. Person's name is displayed and date of class is visible for user’s reference.

• Footer

Footer includes studio address and links to Social Media platforms. It’s simple looking and easy to navigate.

Room for improvement:

• Navigation menu is yet again something I need to work on more. I would like to ensure that navigation menu on smaller screens when visible and one of the links is clicked, navigation menu hides. This is something that I will work on in the future as it is 2nd time already that my navigation menu is not as great and accessible for user as I would like to.

• I would like to add more features to this site: reviews section, daily tips and trick for healthy mind, maybe blog..

credits!

• This project was inspired by Jana Melanie, yoga teacher and my passion for fitness for wellbeing.
• Code Institute for fantastic course content
• Stack Overflow
• Portfolio website tutorial
• Portfolio website tutorial
• W3Schools
• Swiper JS Tutoria
• Modal Window tutorial
• Many thanks to Spencer Barriball for ongoing support!