Gemma Sayers Portfolio Project

A portfolio site designed to showcase Gemma's prior employment experience as well as her recent training as a Full Stack Developer

View the live project here

View the repository in GitHub here

Contents

• UX

  • Project Goals & Objectives
  • User Goals
  • Stakeholder Goals
  • User Requirements and Expectations
  • Design choices
    • Layout & Wireframes
    • Colours
    • Icons
    • Fonts

• Technologies

  • Languages
  • Libraries

• Features

  • Included in current deployment
  • Future implementations

• Testing

  • Development testing
  • Design edits
  • Pre-Deployment validation testing
  • Peer-code review & mentor feedback
  • Post-Deployment Results

• Bugs

  • Development Bug & Fixes
  • Pre-Deployment Bugs & Fixes

• Deployment

  • Method

• Credits

UX

Project Goals & Objectives

• To provide a portfolio site that serves to;
  1. inform the user of Gemma's work history and industry experience
  2. inform the user about Gemma's proficency and work since becoming a Full Stack Developer
  3. gain approaches via email or linkedin for maximum future career and freelance opportunities.

User Goals

1. As a Potential Employer for a Coding Role, I want to;
   1. Easily find out Gemma's coding proficiency to ascertain how this will support her role as a Full stack developer.
   2. Easily download a CV for comparison with other candidates.
2. As a Potential Employer for a Leadership Role I want to;
3. View Gemma's work and profile to understand how Gemma's Full Stack Developer course will have given her the edge when it comes to working in the strategy and leadership team.
4. reveiw Gemma's leadership experience 3)download a CV.
5. As a Potential Collaborator, I want to be able to;
   1. Succinctly reveiw Gemma's strengths.
   2. contact Gemma directly through the site
   3. Navigate easily to Gemma's portfolio and social media pages.
   4. contact gemma directly through the site.

Stakeholder Goals

• To lead the user to;
  1. Contact Gemma using the contact form if user is a potential employer, collaborator or client.
  2. Download Gemma's CV if user is a potential employer.
  3. Connect with Gemma on social media if user is a potential employer, collaborator, or client.

User Reqirements and Expectations

1. Responsive design for accessibility across a range of devices.
2. Minimal design for easy navigation.
3. Easy to contact Gemma directly or through social media links.

Design choices

• Layout & Wireframes

  • I have included two sets of wireframes as initially I started to build the site intended to go across separate pages, but then decided with my mentor that a single-page site would be a much better user-experience for the purposes of this project. Final wireframes can be seen here, and the originals here. Filed in the wireframes folder

• Colours

  • I researched what the colour trends are for 2021 as I want my site to look current and appealing, and was inspired by some of the themes in 99designs. I then used colourmind.io to put my colours into a pallet for consistent use on the website. You can find my colour inspiration here. and the colour pallet below.

• Icons

  • Icons are a great way to signal to the user in a succinct way without being too wordy. I have used icons from Font Awesome (link) across my about and skills section.

• Imagery

  • I have used my own photograph for the header jumbotron to ad a personal edge to the site, however for the portfolio slides, I have used stock images from Shutterstock (link) as I wanted a clean, professional look and sadly my photography is not up to much!

• Fonts

  • I have used the Montserrat font across the whole site and used Sans Serif and the fail-safe incase of any loading issues. Monserrat is a simple clean font, easy to read and stylish.

Technologies Used

• Languages;
  • HTML5
  • CSS3
• Libraries, Frameworks & Resources;
  • Bootstrap 4.5.3 was used
  • Hover.css I used hover to make elements more interactive
  • Google Fonts I used Monserrat as the font for the whole site
  • Font Awesome Font awesome is where I sourced all the icons for the site
  • jQuery is used as a script to enable for example the navbar
  • GitHub is used to file the repository
  • GitHub Pages was used to deploy the site
  • GitPod was used for development and version control
  • Balsamiq was used to create, save and export my wireframes
  • Colourmind was used to put together my colour pallet, using the inspo images I sourced from;
  • 99designs was used to research upcoming colour trends
  • Apple Photobooth was used to make my self-portrait a little more appealing!
  • Google Dev Tools has been invaluable for solving issues and bugs and testing responsiveness.
  • Techsini Was used to create the mockup images.

Features

• Included in current deployment;
  • PDF CV and a function to download.
  • Contact button to open email directly.
  • I have included interactive Hover Elements for better UX.
• Future implementations;
  • I would like to upgrade the colours as I feel these did not come across as well as I anticipated based on the pallet.
  • I removed the form from the original design as I thought it lengthened the contact process too much - I may consider ways to add this in with UX taken into account.
  • I would look to improve the navigation bar so that it retracts on scroll.
  • I would look to improve on

Testing

• Development testing
  • My main development testing tool used was Google Dev Tools each time a commit made I would use the tool to;
    • check device sizing effects
    • solve bugs that I could not otherwise visualise from simply looking at the code.
• Design edits
  • My initial set of wireframes included a multiple page website, however on discussing with my mentor, it became quickly apparent that this was not the correct structure or navigation for the best user experience. Since each user is requiring simplicity and quick results.
  • This resulted in a change to a single page scrolling website with navigation leading to the differnt sections of the page.
• Validation testing was taken out using;

1. W3S CSS Validator
2. W3S Html Validator Before submission of the project. I received some errors on both sets of code and documented the required edits and edits made in this folderprior to sumbission, validation was approved for both CSS and HTML.
3. Lighthouse was used to assess the performance, accessibility, best practices and SEO.
   Whilst scoring highly for Accessibility and SEO, I would like to re-visit Best practices and performance to seek a higher score.

• Peer-code review was really helpful in finding a couple of solutions;

1. That I had incorrect image paths and this was causing the broken links on my portfolio cards section. Fix remove the first /!
2. To highlight some missing alt tags.

• Items identified that I may re-visit later;

1. ---

   link identified as not best practice any more. As I went tot a lot of trouble to get this right I didnt want to work on it close to the end, but will research after submission.
2. Advice to close the nav drop-down on click, which I have also highlighted myself in future implementations, hovever the navigation was one of the trickier things for me to get right in this project, so I kept to the original solution.

• Device and browser Testing - I asked family and friends to take a look on various devices;

  • Apple Iphone 5, 7, 11.
  • Ipad mini 4th Gen
  • Ipad pro
  • Samsung Galaxy A20e
  • Dell laptop (model unknown)
  • Apple Macbook Air

  Browsers;

  • Chrome
  • Safari
  • Microsoft Edge - idenitfied slower loading of images , resulting in re-sizing travel-guide.img
  • Mozilla Firefox

• User Goal Testing;

  To provide a portfolio site that serves to;

  1. inform the user of Gemma's work history and industry experience
  2. inform the user about Gemma's proficency and work since becoming a Full Stack Developer
  3. gain approaches via email or linkedin for maximum future career and freelance opportunities.

User Goals

1. As a Potential Employer for a Coding Role, I want to;
   1. Easily find out Gemma's coding proficiency to ascertain how this will support her role as a Full stack developer.
      • The user is able to get a great snapshot on Gemma's coding proficiencies in the Skills section - This is re-enforced by the use of progress bars for a quick identification of skill strengths. ✅
   2. Easily download a CV for comparison with other candidates.
      • The user can download a CV from 3 areas in the site making it very easy to access
        1. The navigation ✅
        2. About section ✅
        3. The footer ✅
2. As a Potential Employer for a Leadership Role I want to;

   1. View Gemma's work and profile to understand how Gemma's Full Stack Developer course will have given her the edge when it comes to working in the strategy and leadership team.

      • The user can view both industry and developer skills in the same skills section ✅

   2. reveiw Gemma's leadership experience

      • The strategy and leadership skills card has been placed at the top of the industry experience cards and identify years of experience visually. ✅

   3. Download a CV.

      • The user can download a CV from 3 areas in the site making it very easy to access
        1. The navigation ✅
        2. About section ✅
        3. The footer ✅
3. As a Potential Collaborator, I want to be able to;
   1. Succinctly reveiw Gemma's strengths
      • The user can view both industry and developer skills in the same skills section ✅
   2. contact Gemma directly through the site
      • The user can contact directly using a contact button in the contact section which opens to directly email Gemma ✅
   3. Navigate easily to Gemma's portfolio and social media pages.
      • The user can navigate to the portfolio section from the nav menu or by scrolling the page ✅
      • There are icons used in both the first section and the footer section for easy link direct to social media pages, opening in a new tab for best practice ✅
   4. contact gemma directly through the site.
      • The user can contact directly using a contact button in the contact section which opens to directly email Gemma ✅

Bugs

• Bugs & Fixes
  • Long gap on righthand side. Took a lot of working out and help from Jim and use of the Chrome dev tools. Issue;
    • too many margins across the board
    • particulatly within the header name and title - now fixed after trail and error with different styling options ✅
  • Navbar was not clicking and after much going around in circles a few things I discovered;
    • I did not have the js.popper installed in the right place - now fixed by adding script after footer closing tag before body closing tag ✅
    • I had a beta version of Bootstrap - now fixed and using 4.5.3 ✅
    • I had nav-item and nav-link mixed up which was causing many issues - thanks to @jimlynx_lead for identifying this as well as imput on many of the bugs and issues ✅
  • Project cards were not displaying properly and continually over-lapping - eventually I settled on a combination of justify-content-center and inline-block display with a padding of 2% and removing all margins. ☑️ I would like to re-visit the display of these as they pull a little to far apart on the larger devices.
• Remaining bugs - The travel image still seems to be loading slowly, despite re-sizing to same size as other images, further investigation needed.

Deployment

GitHub Pages

This project is deployed on GitHub Pages using the following method;

1. Log in to GitHub Pages and click on 'repositories'
2. Find the correct repository (repository that you want to pulish to pages.
3. Go to settings from within the repository.
4. Scroll quite far down the page to find the GitHub Pages section.
5. Under source, there are three buttons select the branch button (at time of writing the first button of the three) and choose 'Master'.
6. Once the page has refreshed (it can take a while) when you scroll back down you will see a green bar with a tick showing that your site is published.

Forking the GitHub repository

To make a copy of the repository, which may be necessary if you wish to make changes without affecting the original using this method;

1. Ensure you are logged in to GitHub
2. The Fork button is on the top right of the page, above settings and below your github icon. Click on it to make a copy of the original.

Credits

• Content - All written content is created by the developer.
• Media - Jumbotron image is created by the developer using Apple photo booth.
• The portfolio images are dowloaded from Shutterstock
  • Laptop image - Royalty-free stock photo ID: 1478246771 Pro-Stock Studio
  • Team image - Royalty-free stock photo ID: 1731284125 by Stefano Garau
  • Travel guide image - Royalty free photo ID: 574613491 by Jacob Lund
  • Journey Through the Tundra image - Royalty-free stock illustration ID: 294169949 by NextMarsMedia

Acknowledgements

• Thank you to my mentor Gurjot Singh for advice and guidance since I started.
• Thank you to the tutor team at Code Institute
• Thank you to Jim Morel for jumping in and helping me understand the nav solution and identity various bugs and issues.
• Thank you to Ed B for helpful comments on peer code review.