MY_CV-HTML_AND_CSS

This website is designed to show my basic HTML and CSS skills by making an usefull and user-friendly website, where further information about my career is shown.

Users will be able to navigate through the different sections and find out relevant information about me, my studies, work experiences, and so on.

In addition, users will be able to get in touch with me by filling out a form located in the "Contact me" section.

User Stories
Features
Future features
Typography and color scheme
Wireframes
Technologies
Testing
Deployment
Credits

User Stories

As an user I want to see the header and the navigation bar on the top of the website, so that I'll be able to navigate throught the different pages.
As an user I want to see the "About me section" so that I'll be able to see the main information about me in the online CV.
As an user I want to see the "Experience" section so that I'll be able to see the work experience in the CV.
As an user I want to see the "Abilities" section so that I'll be able to see the work abilities in the CV index.
As an user I want to see the footer with the contact of the person so that I'll be able to get in touch with him.
As an user I want to see a the "Contact" section in a new page (with the same header and footer) so that I'll be able to contact with him.
As an user I want to see a confirmation page when I submit the contact form, so that I'll know that it's been submitted correctly.

Features

Navigation Bar
- Featured at the top of the page, on all three pages: the main page, the contact form page and the confirmation page.
- In the left corner of the navigation bar the 'Julián Amigó Francés' logo (J.A.F.) is showed, that links to the top of the main page.
- In the right of the navigation bar, the other navigation links are displayed: 'About me', 'Experience', 'Abilities' and 'Contact'. The first three move to the relevant sections of the same page, while the last one links to the contact form located on a new page.
- The color of this section is a soft green, used throughout the page, as we will see below.

The Header
- As a background is used a set-up image, where the colours are similiar to the soft green we've already used.
- The header section shows my full name and my profession. It is located at the bottom left of this section.
- The background color of this text is the same soft green as was mentioned for the header.

About me section
- The About me section is divided in two subcolumns: 'about me' and 'studies'. It is displayed in a white background.
- In the first 'About me' column a brief introduction about me is shown, giving the most relevant details about my career, experiences and life.
- Besides that, the 'studies' column shows the user my university degree and other important certificates or courses I've completed or are still in proccess of completing.

Work experience
- This section shows more deeply detailed information about my work experience. For each work experience mentioned, the years worked on it, the company and the relevant aspects of job position are indicated.
- It is divided in two columns. The first columns is only for the title of the section, displayed with a background image.
- The second column is displayed on a green background and all the information mentioned above is shown.

Abilities
- This Abilities section, displayed on a white background, collects three differents subsections, each covered by a box.
- The first box gives "Further software and Technology skills" that I've worked with.
- The second box, shown on a soft orange background, gives "Other interests" information, such as other technologies that can be mentioned or voluntary work I've done.
- In the last box, displayed on a soft green background, the spoken languages I feel comfortable with are mentioned.

Contact
- This contact section is located in another page. By clicking on the contact link that is the last link in the navigation bar, you can navigate to this page.
- In here, the user can get in touch with me, by filling in the form with all the required inputs.
- There is just one section in this page, and the form is on a background image. Three inputs are mandatory in order to submit and get in touch with me: Full name, email and message.

Confirmation section
- Once you have clicked on the submit button, you will be redirected to another page, where a confirmation message will be shown in order to let you know that the form has been successfully sent.

Footer
- This footer section is displayed on a soft green background.
- It is divided in two columns, where different ways of get in touch with me are given.
- In the first column three link icons are positioned in the left side, and will redirect to each social media ny clicking on them.
- In the second colum my contact information is given, such as my email and phone number.

Future features

One posible future feature might be to give real functionaly to the get-in-touch form by setting up a javascript functionality in it.
Another usefull functionality might be to change the navigation bar in mobile design, creating a drop-down menu, for example.

Typography and color scheme

Typography
- "Source Sans Pro" from Google Fonts has been chosen as the main font for the entire website.
- This font has been tested for all screen sizes and fit well to each of them.
- It gives a profesional and modern look to the webpage, which is what an online CV needs.
Color Scheme
- In order to pick the accurate color that better fit with the website, I've used Color Adobe. Here I could generate a color palette and get all the necessary Hexadecimal Colors.
- I wanted to give my website a calming feel and profesionality, by selecting soft, muted colours and choosing images related to office enviroment.
- Therefore, the soft green, which is used in most of the above-mentioned section, is the main colour chosen for the website, which is displayed throughout.

Wireframes

Balsamiq Wireframes has been the tool used to generate the digital sketches of the initial website idea.
Below the sketch of the inital idea is shown. Some detail has been modified as the project progressed, such as the header image or the distribution of some content, in order to fit the text to the distribution of the elements.

Technologies

HTML and CSS:
- HTML is the standard markup language for Web pages.
- CSS is the language we use to style and HTML document.
- Both programing languages are the main technologies used in this project in order to create the webpage.
GitHub Pages: it is a static site hosting service. It take the code from a Github reposiroty and publishes a website. It will be explained in further detail in the Deployment section.
GitPod: this tool has been chosen as the IDE of this project. It is a cloud development environment accessible via a browser, that can be run directly from the github repository.

Testing

Test cases and fixed bugs

Tests have been done to each user story as well and, in here, only few bugs have been found. The tests that have been done and the bugs found are the following:
- User story number 1:
  - The background color must be green and the logo (J.A.F.) must be displayed to the left side of the header.
  - The navigation bar must be to the right, in the middle of the green background and the white space between the image and the header.
  - This nav.bar must have a black border and white background with 4 sections inside: About me, experiences, abilities and contact me.
  - The three first sections have to redirect to each section on the same page.
  - The last section (contact me) must redirect to a new page.
  - The image below must have a text, occupy the entire screen in width, be displayed at the bottom right, with a green background.
  -> Bugs found: Half of the navigation bar was behind the main header image. To fix this, a z-index attribute has been set on the "nav" tag in the css.
- User story number 2:
  - This section must be divided in two columns: the first column shows the "about me" information and the second shows the "studies" information.
  - The background on this section must be white.
  - The "studies" section have two links and they must redirect to an external page.
  -> No bugs were found.
- User story number 3:
  - This section must have two parts.
  - One part on the left side, with an image as background and the white title of the section at the top.
  - Another part on the right, with all the information about the work experience, displayed on a green background and with the text in black.
  - All the links shown at this right part must redirect to an external page.
  -> Bugs found: Some of the element widths were bad styled on mobile design. To fixed it, the element width has been calculated with the function "calc()".
- User story number 4:
  - In the "Abilities" section 3 cards must be shown. One on the left side and two on the right side, one underneath the other.
  - On the left side, "Further Software and Technology skills" card must be seen, with a soft blue branckground. Within this card, four subsection must appeared with a list on each.
  - On the right side, "Other Interests" and "Languages" cards must be shown, one underneath the other one, the former with a soft orange background and the latter with a soft green background.
  - Each of this two cards on the right, must have a list on it.
- User story number 5:
  - The footer should have a green background.
  - On the left side, three social media icons are shown inline,
  - On the right side it is shown the email address and the phone number, one below the other, and each must have a corresponding icon.
  -> Bugs found: two of the links within the footer section, on the confirmation page, redirected to a 404-not-found page. This bug has been fixed by setting the correct URL for those "a" elements that redirected to the wrong page.
- User story number 6:
  - The "Contact" section, located on a new page must show a form on the left side of.
  - This form is displayed on a background image and it contains thre inpust: Full name, email address and message.
  - No form must be sent if any input is missing.
  - The address input must be an valid email address, otherwise a warning message will be displayed.
  - When the form is fully filled in, it must redirect to a new page.
  -> Bugs found: a bug was found related to the initial textarea value. It was a blank space, so the form could be submitted with an empty "message" input. To fix it, some blank spaces have been removed from the HTML within contact.html file.
- User story number 7:
  - This "confirmation" section must show a confirmation message to the user.
  - It is displayed in the center of the screen and is on a dark semi-transparent background.

Code validation

HTML: Some errors ocurred after auditing every page with the official HTML validator: HTML Validator.
- Errors found on the index.html:
- Errors found on the contact.html:
- Errors found on the confirmation.html:

All these bugs have been detected and fixed after the HTML validator testing, as were undetectable while testing the user stories.

CSS: No errors ocurred after auditing the style sheet with the CSS validator: CSS Validator. I used this validator due to this other CSS validator jigsaw responded with "503 Service Unavailable" when trying to access.

Lighthouse - Dev Tools

I have used Lighthouse from Google Chrome DevTools, to test my website performance and accesibility. The first testing scored 84%, as some audit failed.
Color contrast was one of them, and to improve this failure, some white texts (with a green background) have been modified to black. Color Contrast recommendations
In addition, it was also recommended to add a discernible name to the footer links. Links recommendations
Therefore, by fixing this found bugs the new lighthouse score is as follows:

Supported screens and browsers

The website was tested on the most common screen sizes. The sizes where possible erros could appeared were: 1200px, 900px and for mobile sizes (down 480px). For this reason, three different styles have been set for these three cases.
The browsers where the website has been tested are Firefox and Google Chrome. In the case of the former, the tests have only carried out for desktop size. For the latter, tests for mobile and desktop sizes have been done.

Deployment

The website was deployed to GitHub pages. These are the steps to deploy it:

Navigating to the GitHub repository settings tab, you will find the "Pages" tab.
In this tab, choosing the main branch of the site and saving the changes it is enough to deploy.
Once it has deployed (it could take 5-10 minutes) the site would be available on the URL shown in this "pages" tab.
The deployed URL for this project is the following: Deployed URL.

Credits

I like to thank my tutor, Rohit, for all the recommendations he has given me.

Content and Media

Some HTML and CSS tips have been taken from W3Schools and Stack Overflow.
In addition, some ideas for the website were taken from Zyro Blog

code-institute-submissions / my_cv-html_and_css Goto Github PK

my_cv-html_and_css's Introduction