luizanao/first-project-ci

Code Institute - First Portfolio Project (Psychologist Grazi - Website)

Grazi Piazera

This page aims to provide people seeking cognitive behavioral therapy with a quality service.

The central idea is to show people interested in individual therapy how this approach works, for whom it is effective and to provide a point of contact for more specific questions, in addition to offering online psychotherapy service through the Contact Us field.

The website also contains important information about the psychologist responsible for the service, including her training and previous experience.

View website in GitHub Pages

Content Navegation

• Wireframe

• UX/UI Design

  • Expected traffic to this site

  • Visitors to this site are looking for

  • This project is the best way to help them achieve these things because

  • Site owner goals

  • Colour scheme

• Technologies Used

  • Resources

• Features

  • Existing Features

  • Resources to be implemented

• Testing

  • Project Issues

• Deployment

• Credits

  • Content

  • Media

• Acknowledgements

Wireframe

• The wireframe was created using the Balsamiq tool.

UX/UI Design

Expected traffic to this site:

• People interested in topics related to psychology.

• People interested in therapy, mainly focusing on CBT - Cognitive Behavior Therapy.

• People looking for online therapy.

Visitors to this site are looking for:

• A contact channel for hiring psychology services.

• Learn more about CBT - Cognitive Behavior Therapy.

This project is the best way to help them achieve these things because:

• Powered by search engines like Google, it has become the easiest way to get in touch with a therapy specialist, get information about treatment prices and how it works.

• This site is very simple, allowing visitors to discover everything they are looking for about therapy and contracting this service with just a few clicks.

Site owner goals

• Explain how cognitive behavioral therapy works

• Show the benefits of therapy

• Tell who can benefit from this type of therapeutic approach

• Attract people interested in therapy

Colour scheme

• Here is an image of the color palette (Coolors).

Technologies Used

• The main technologies used on this project is HTML, CSS and GITPOD as IDE.

• The fonts were selected from

  • Google Fonts

• GIMP - Image Manipulation Program.

• Font Awesome - The icons.

• Coolors- For web page colors

Resources

• Code Institute Course Content - Main source of fundamental knowledge.

• Balsamiq - Wireframing design tool.

• Youtube - General resource.

Features

A responsive single page website, navigation bar and social media links. The home page aims to be effective in identifying Grazi as a psychologist, portraying her photo at the top and her name in the upper left corner. To further strengthen the bond with Piscicologa, she talks a little about her story and the love she has for helping people.

Existing Features

• HEADER: Grazi Piazera's name in the left corner allows visitors to easily recognize who the site is about.

• FOOTER: Well-known icons direct to the Grazi's social media channels. They are easy enough to find while don't interfere in the experience.

• HOME: A striking image of Grazi welcomes visitors. The mobile version is simplified for a better experience.

• Who I am? : Here, visitors can understand a little of Grazi's history and why she became a psychologist and how she can help people.

• What is CBT? : The "CBT" section explains what your expertise is on how CBT can help solve problems in people's lives.

• Tell Me: where, visitors can answer the questions to understand if they need help.

• CONTACT: A simple form, with some basic information needed, where that people who are looking for help can get in touch and describe what situation they are going through.

Resources to be implemented

• Testimonials: the "Testimonies" section shows examples of people who were helped by Grazi to find their way in the world.

• Calendar: A section where people can schedule a 30-minute chat with Grazi, so that Grazi can understand the person's problem and the person can understand how Grazi works.

Testing

• HTML validation

• CSS validation

• Mobile Friendly Test

• Browse compatibility check

• Test links from navigation menu to each section

• Lighthouse DevTools

Project Issues

• Difficult in mobile responsive. I found the solution at Responsive Elements - Code Institude;

Deployment

The deployment process was made based on learnt on User Centric Frontend Development Git classes:

• From the repository location Repository, go to settings GitHub Pages section and select the branch "Master" on the source dropdown and click on Save button;

• Then, it will automatically publish the project to GitHub Pages and displays the site URL created;

• It is possible to run the project locally just clicking on the green 'Code' button and selecting either 'clone or download';

• The Clone option provides an URL, which you can use on your desktop IDE;

• The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine;

Credits

• Code Institute - I followed the contact form implementantion from 'Love Running' class project.i

Content

• All texts were from the Web Page and were written by Graziela Piazera.

• All photos were sent by Graziela Piazera.

Media

• All images are Graziela Piazera's property represented by myself, developer responsible.

Acknowledgements

• Code Institute for all the support.

• My wife Graziela Piazera for all her help.