Fabiane Martins Portfolio

Stream One Project: User-Centric Frontend Development - Code Institute

Overview

This is my personal portfolio website to share with prospective employers or clients my skill set and experience. The website structure was designed from top to bottom - left to right reading with the about section highligting a profile about myself, then there is a skills section, work history section and a contact form section. The contact form gives the opportunity for direct communication, not far below in the footer there is a download CV link and social links for further information.

Demo

Website live demo can be found here

User Experience (UX)

This project is to target hiring managers with little time on their hands to scan through an entire CV, hence the scroll down layout and sleek and clean design. The main focus is get the user to scan all the main infomation in one page and use the contact form or social links to get in touch or download the pdf CV.

User stories

• First Time Visitor Goals

  1. I want to spend as little time as possible on the website.
  2. I want to learn more about the candidate and its skill set.
  3. I want information on its past experience.
  4. I want to see the candidate projects so, I will check its social media links.

• Return Visitor Goals

  1. I want to contact the candidate.
  2. I want to download the CV.

• Frequent User Goals

  1. I'd like to see new projects.
  2. I'd like a blog.

Design

• Color Scheme

  The main color is Boostrap custom light grey however, I've choosen blue and orange as an accent colour to separate content from title.

• Typography

  Roboto is the main font inported from Google Fonts with Sans Serif as fallback font. Roboto is rounded and clean typography it is also easy to ready.

• Imagery

  Imagery capture visitors atthention and provide a better user experience. Two images was choosen, the main banner of myself and a background image for the skill section.

Wireframes

• Desktop wireframe - view
• Mobile wireframe - view

Features

• Home page with 5 sections linked in the nav bar as individual pages.
• Fixed nav-bar for easier user navigation regardless of where the user is located on the page.
• On mobile view the nav-bar collapses showing all the pages, once the page is selected the hamburger nav automatically closes back-up again.
• The Download CV page opens in a new tab with pdf attached for printing or download.
• Scocial link icons are on the footer as well as extra download CV function.

Features Left to Implement

In the furture, I'd like to add JavaScript function to create a 'scrolling effect'. I also, want to have a section or an additional page with other project templates.

Strategy

• My goal is to have all the information in one page but separated by section within a scroll down manner.
• A fixed nav bar is avaliable to allow users to move quickly between pages.
• The design is clean and minimalist for an easy reading.

Technologies Used

• Languages Used

  • HTML5
  • CSS3

• Framework, Libraries & Tools Used

  • Bootstrap - via CDN to html doc
  • Google Fonts - import typography url to style.css sheet
  • TinyPNG - image compressor
  • PicMonkey - image resize
  • GitPod - IDE workspace
  • GitHub - project repository and hosting service
  • Balsamiq - used to cread wireframe design

• Code Validation

  • Close Tag Checker link
  • W3 CSS validator link
  • Nu HTML validator link

Testing

As the development progressed, I tested each new feature and fixed or amended it accordingly. Once the project was finilised and I was happy with it, I tested all the function and links in different browsers.

• Tested menu bar respnsiveness on iphone, desktop and tablet.
• Tested social media lnks - this direct users to my social page in another tab.
• Tested scrow down functionality.
• Tested both header and footer donload cv feature - this opens the pdf CV in another tab.
• Tested contact form button.
• Tested that all pages were linked correct.
• Tested code validation - no errors or warnings showing.

Deployment

This site is hosted using GitHub pages and has been deployed with the following processes:

• The code is written on Gitpod a cloud based IDE and can be accessed via Gitpod workspace or Github here.
• The code is was pushed to my Githug repository where it is hosted.
• To generate the url, I went under the setting section of the GitHub repository - scrolled down to GitHub Pages section and under the code selected master branch.
• Once selected and saved it published the project to GitHub Pages.
• Once the master branch is deployed it will update automatically everytime commits are pushed to the repository.
• The download the zip file is located under the code button.
• The files can be unziped and cloned on local machine. Click hereto find further instructure on how to clone a repository.

Resources

• Code Institure Course Content
• Course Slack community
• My mentor Oluwafemi Medale
• Course tutor
• Youtube videos
• W3 school website
• Bootstrap documentation
• CSS tricks website

Credits

Content

All content in this portfolio website was written by myself.

Media

Banner image is an image of myself owned by me. The background image in the skills section were taken from unsplash, free stock-photo library.

Code Snippets

• Code Institute Course Content
• Bootstrap

Acknowledgements

• I'll give thanks to my mentor, Oluwafemi Medale for mentoring me on the processes of designing to create this website as well as me ntoring me on the best practises and tool to approach.
• The slack community, in special Jim Morel, #user-centric-frontend lead channel for being tireless and efficient in aswering the many questions I've posted on the forum.
• To my fiancee, for all love and support in encoraging me on the many times I wanted to give up.
• Friends and families for the projects they have lined-up for me - this certainly helps me keep going.