This is my User Centric Frontend-Development Milestone Project

Welcome to my very first website!

This website was built as part of the learning material for Code Institute's Fullstack Web Developer program.

Please check out my website here!

Project Description

I have created this personal portfolio site in order to present myself in a best light possible for customers and employers and get hired. It aims also to fulfill my first learning milestone assessment in html, css and user centric frontend. To achive that got familiar with common development tools like GitHub, Git & GitHub, so I have learned how to use them in order to write and manage code.

Project Objective

The objective is to create an appealing personal portfolio site and present myself in best light possible and get hired.

Project Inspiration

The whole project is based on the "Milestone Project" and "love running project" learned skills. So, most of the codes used are from both projects. I have used for this project html, CSS, and User Centric Frontend skills learned so far in the course.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. For the First Time Visitors, I want them to be able to easily navigate throughout the site and to find contents easily.
    2. For the First Time Visitors, I want them to understand the contents displayed in the site and to learn more about my personal profile.
    3. For the First Time Visitors, I want them to look my experiences and skills so that they become interested in hiring me.
    4. For the First Time Visitors, I want them to be able to download my cv, to contact me and to locate my social media links.

  • Returning Visitor Goals

    1. For the Returning Visitors, I want to them to easily find information about myself regarding working and education background.
    2. For the Returning Visitors, I want to them to find the best way to get in contact with myself in case they have queries, projects, etc.
    3. For the Returning Visitors, I want to them to follow or to contact me through the social links.

  • Frequent User Goals

    1. For the Frequent Users, I want to them to check for updates, if any.
    2. For the Frequent Users, I want to them to be able to download my cv.
    3. For the Frequent Users, I want to them to send me projects or queries about projects that we are working together or contact me.

• Design

  • Color Scheme

    • The two main colours used are different shades of white and blue, and I used also some contrasting or highliting colors like yellow, green and grey and red.

  • Typography

    • The main fonts used in the website are Roboto and Oswald fonts with Sans Serif as the fallback font. Sans Serif is used as a fallback in case the font any or both of the main two fonts incorrectly imported due to varied reasons.

  • Imagery

    • I have used my photo for the imagery and it will appear in all the navigations links. The photo and my background title are designed to present myself in best light possible and to strike and catch the user's attention.

• Wireframes

  • Home Page Wireframe - View

  • Mobile Wireframe - View

Features

• The site has interactive elements and it is responsive on all device sizes.

Technologies Used

Languages Used

• HTML
• CSS3

Frameworks, Libraries & Programs Used

1. Balsamiq:
   • It was used to create wireframes for large screen and mobile view.
2. User-centered design (UCD) or User-Driven Development (UDD)
   • UCD or UDD was used to increase the site usefulness and usability.
3. Bootstrap 4.0.0:
   • The Bootstrap helped in making the website responsive, by providing the layout, size, color, and font for the project.
4. Font Awesome:
   • Font Awesome icons were used in the website for UX purposes.
5. Google Fonts:
   • The Roboto and Oswald fonts used through out the site are from Google fonts..
6. Hover.css:
   • Very useful tool, used mainly on navigation, social and cv links of the site.
7. Git
   • Git is where all the magic happened, without it, there would be no project. It was the work-station to produce the personal profile and the enabler to export to Github.
8. GitHub:
   • GitHub was used to store the projects code and to publish online.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• Time Visitor Goals

  1. For the First Time Visitors, I want them to easily navigate and to understand the contents in the site. Also I want them to learn more about my profile.

     1. The first page displayed when the user enter the site is the home page, where my picture, name and the job title is shown. The first page should spark users interest in learning more about me.
     2. The user has two options, either scroll down to learn more about me or to use the navigation links to learn more about me. The information displayed in the header and the footer is repeated in all the pages.
     3. The site is designted to attract user attention and to be fluid. A clean navigation bar is placed under the job title description and the picture, in order to lead the users to other different pages in the site.
     4. The site gives also the option to donwload my CV in case the user needs a printable version of it.
     5. The social media links are placed in the footer so that the user can follow me on the other platforms.
     6. At the bottom of the site, the user will find my contacts details or they can use the Contact page in case of any question or project.

• Returning Visitor Goals

  1. For the Returning Visitor, I want to them to find easily about information about myself, to contact me and to navigate easily throught out the site.

     1. The navigation links will help the user to navigate and to find the information easily.
     2. In case the user pretend to print my CV, they can easily to do without leaving the site.
     3. The users can contact me through the Contact Page or by finding the relevant information in the footer on every page in the site.
     4. The footer also contains links to social media so that the user can contact me or follow me in the other platforms.

• Frequent User Goals

  1. For the Frequent User, I want to them revisit the site and to check and see if there are any update and also to contact me for project or questions.

     1. It is aimed for the users to easily navigate and contact me using the site, considering that they are already familiar with website.
     2. The users will be able to check for new updates in the site or to following the social links.
     3. The frequent users wil be able to submit their project request in the contact page or email me directly if they prefer.

Further Testing

• The further testing was conducted on Internet Explorer, Google Chrome and Microsoft Edge.
• Various devices (large and small screens devices) were used to view the website.
• This further test requirement was conducted to ensure that the navigation bars and the links were working correctly.

Known Bugs

• Header
  • The design in the wireframe was to have the navigation bar on the top of the picture and on top of the items name and title. However, I have decided to keep the navigation bar, below the picture and the items name and title as it looks better.
  • The profile picture maybe displayed with top of the picture slightly cut off on larger screens devices.
• Home page
  • I spent lot of time in putting the profile picture left and align it correctly with navigation bars. After consulting external sources such as W3SCHOOLS and the course contents, I finally managed to do it correctly.
  • The picture of the ship and the structure around it may appear slight off-centered(moved to the right) when view in smaller screens.
  • I spent alot of time trying to use centered unordered list for the contents of "About Me", "My Work", "My Specialty", "My Network and Connections". Due to my limited knowledge I have decided to proceed without the unordered list, but with just centering the contents.
• Resume Page
  • I spent lot of time trying to center the content in the page. They appear slight off center when viewed mainly on a smaller screen.
  • The picture of the ship and the structure around it may appear slight offcentered(moved to the right) when view in smaller screens.
  • The Progress bar are slightly to the left when viewed mainly on smaller screen.
• Hire-Me Page
  • I spent lot of time trying to use centered unordered list for the contents in this page. Due to my limited knowledge I have proceeded without the unordered list, but with just centering the contents and use the tick mark from fontawesome.
  • The first anchor picture that I tried to use, did not work and it had to be replaced. The picture I tried to use was big in terms of size and I could not place properly within the page. I proceed by using the current anchor picture from Depositphotos.
• Footer
  • I could not follow the wireframe design in having the items displayed in line or on one line only due to my limited knowledge.
• W3C CSS Validator
  • When I tested the css code for the first time, I had one error. I corrected it, and I re-tested gain the css code and this time I got no errors.
• Gitpod -I deleted the history in the gitpod by mistake. So, I have done two initial commit and push to Github twice. Unfortunately I thought that the only way to commit the code and to push them to Github is by refering them as Initial Commit. My tutor made me aware of this misunderstanding and I started committing and pushing correctly as an updates, since then.

Deployment

GitHub Pages

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

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository, locate and click the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under GitHub Pages Section, locate the menu Source. Click the dropdown menu and and select "Master Branch".
5. On top of Source menu will see a green band highlite with following text displayed: "Your site is published at" then click link

Making a Local Clone

1. Log in to GitHub and locate the Aguipedro/User-Centric-Frontend-Development-Milestone-1Project GitHub Repository.
2. Click the repository name, and then click Setting on the top right corner.
3. Scroll down to Github pages.
4. Select Master Branch and Save it.
5. You see the following notificatrion:

Your site is published at click Here

Credits

• The design, formatting and styling are mostly from "the Milestone" project" and "love running project".
• I used this code from W3SCHOOLS. Please find it [Here] (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_noshade_css)
• I used this code from W3SCHOOLS. Please find it [Here] (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_center)
• I used a photo from the Depositphotos. Please find it [Here] (http://st2.depositphotos.com/3321433/6479/v/950/depositphotos_64798731-Stylized-anchor-with-rope.jpg)
• I used the following readme design, formatt and styling Here

Code

• Code Institute:I used some codes from both projects "the Milestone" project" and "love running project". I have used mainly the knowldge learned from the course so far.

• Bootstrap 4.0.0:The Bootstrap helped in making the website responsive, and it was used throughout the project.

• Font Awesome:Font Awesome icons were used in the website for UX purposes.

• Google Fonts:The Roboto and Oswald fonts used through out the site are from Google fonts..

• Hover.css:used mainly on navigation, social and cv links of the site.

Content

• All content was written by the developer.

Media

• The ship picture is from the developer photo gallery.

• The anchor picture is from the Depositphotos. Please find it [Here] (http://st2.depositphotos.com/3321433/6479/v/950/depositphotos_64798731-Stylized-anchor-with-rope.jpg)

• The profile picture is from the developer photo gallery.

Acknowledgements

• For my Mentor for continuous support and for the helpful feedback.

• For the Slack Community.

• For Tutor support at Code Institute for being helpful at all the time.