Milestone Project 1: User Centric Frontend Development - Code Institute
This is my portfolio website to present to potential employers and collaborators. It has been built with a responsive design making it accessible and simple to navigate on a range of devices from mobile to desktop. On the homepage, there is some general info about myself. My portfolio inlcudes a page with my resume where you can find out about my education, work history and skill set. You can find examples of my work on GitHub via a projects page and for those interested in collaboration, I can be contacted with any ideas you might have. Lastly, you can easily download a copy of my CV from my website.
- Does this fit my user's needs?
- Does the user like my website?
- Does the user like being at my website?
- Is this a website a user might want to return to in the future?
These are all questions I asked myself throughout the UX process.
- As an employer, I want to see what Gary is capable of doing as a software developer by seeing examples of his work so that I have an idea if he is a good fit for my available position within our company.
- As a software development collaborator, I want an easy and appropriate way of contacting Gary with my collaboration idea, so that we can work together on something.
- As a software development student, I'm looking for design ideas and inspiration for my project, so that I can do well in my course.
- As a recruitment agent, I want to see a broader overview of Gary by seeing his full resume and I expect to be able to easily download a copy of his CV for my records so that I can determine whether Gary can be shortlisted for any of the available positions I need to fill.
- Shades of blue are used for the navbar text, heading text and buttons. White boxes form the areas of content with primarily black text and sit on top of a black background for the whole website. Bright orange provides the accent and outlines.
- Michroma and Roboto are the main fonts used throughout the website, with Sans Serif as the fallback font if for some reason the main fonts can't be imported into the site correctly. Both of these fonts are very popular in the developer world and are also very easy to read, so they are both attractive and appropriate. Michroma is used for the larger headings and menus, and Roboto is used for the remaining text.
- I decided to include large hero images which closely relate to the content of the page they occupy, whilst trying to fit my website's colour scheme. These combine with the fonts and colours to produce a modern and attractive looking design.
The focus of this project is I’m an unemployed software development student looking for work opportunities, collaboration ideas, contract work, and working with startups. First I need an online resume, an online presence for me and a place to showcase my work. I have listed my opportunities to include in my website and rated each on a scale of 1 to 5 in terms of importance and viability or feasibility to determine what I will include in my first deployment and what will be left out at least for the time being. For me, creating a minimal online presence is the primary goal followed by displaying a work portfolio. Increasing GitHub followers is the least important opportunity and is not viable at the moment.
It's important to provide employers and recruiting agents with a brief overview of myself and my capabilities. This way, they are able to get a look at who I am, my background, work I've done, and my skill set, and they have the option to contact me at their choosing.
My website consists of 4 pages all easily accessible from the navbar on larger screen sizes or toggler "hamburger" button on smaller screen sizes. All external links, including links to my projects and social media, open in separate tabs so the flow is not disturbed. On larger screen sizes the navigation stays fixed to the top of the page even during scrolling. All text and content have been positioned from left to right and top to bottom in terms of importance. The title of the active page in the navigation appears a darker shade of blue than the inactive pages in a subtle way of letting the user know where they within the website. My name logo is positioned to the left of the navbar and when clicked on will return the user to the homepage. Each page title when hovered over will appear highlighted and underlined in orange to visualise to the user that this is a "clickable" action.
- The Home / Landing page consists of a Hero image, a "Personal Info" section and an "About Me" section telling the user what they can expect from me, how I go about it, why they should hire me and what I do for fun.
- The Resume page consists of a Hero image, a button link to download my CV, my skill set relating to coding and separate timelines displaying my education/training and work history.
- The Projects page consists of a Hero image and a gallery of recent coding projects with links to the GitHub repositories.
- The Collaboration page consists of a Hero image and a contact form providing user interaction with myself.
Listed below are the desktop and mobile wireframes for each page of my website, created with the Balsamiq Wireframes application. These were created to show the planned differences in appearance and navigation between large and small screen sizes, but please note that they do not reflect a 100% replicated end result of my website and were only used as an original concept design to get the layout of each page started.
- Home Page Wireframes - Click to View
- Resume Page Wireframes - Click to View
- Projects Page Wireframes - Click to View
- Collaboration Page Wireframes - Click to View
Predominantly mono colours were chosen for the backdrop with splashes of colour giving an extra pop to create a modern and attractive look.
- Responsive to all device sizes make the website easily accessible and simple to navigate.
- Interactive elements.
- Home Page - The Personal Info section provides the user with my contact information and you can see what I look like. The about me section includes three reasons why the user and I should work together and an extra box of text letting the user know a little bit about my personal lifestyle outside of work.
- Resume Page - The user can find a button to download my CV in pdf format, browse my skill set relating to web development with button links to find out more about each if they are unfamiliar. Further down the user can view timelines of my education/training and work history.
- Projects Page - The user can browse my recent projects with an overview image and button link to the GitHub repository for each project.
- Collaboration Page - The user with a collaboration idea can use the contact form, submitting their name, email address and message, with a button to request any interest or assistance.
In future, I would like to expand the skill set section with newly acquired skills as I progress through my course and more projects I hope to work on to create a more comprehensive display of my work. I would also like to include more animation techniques with elements and use JavaScript.
- HTML5 - The main language used to build the basic layout of each page.
- CSS3 - This language is used for styling and formatting the base HTML code to personalise my pages.
-
Bootstrap 4.5.0 - Bootstrap was used behind the existing HTML and CSS as the core structuring method of the website, using a grid system of rows and columns. This produces a responsive and mobile-first design.
-
Hover.css 2.3.1 - Hover.css was used on static icons throughout the website to add some animation to them while they are hovered over.
-
Google Fonts - Google Fonts were used to embed and link the 'Michroma' and 'Roboto' fonts into all HTML pages for use throughout the website.
-
Font Awesome 4.7.0 - Font Awesome was used to provide the icons within the footer of all pages and all other icons throughout the website for aesthetic and UX design purposes.
-
jQuery 3.5.1 - jQuery comes as part of the Bootstrap framework and was used to provide responsive expandable and collapsable functionality to the navbar.
-
Git / Gitpod - Git was used for version control by utilizing the Gitpod terminal to commit files to Git and push them to GitHub.
-
GitHub - GitHub is used to store the project's code within a repository including all previous versions or commits of the project after being pushed from Gitpod and is used to host the deployed website for public viewing.
-
Adobe Illustrator - Adobe Illustrator was used in the creation of my logo at the top of this file and placed within the Hero image of my homepage, resizing and editing of photos for the website.
-
tiny png - Tiny png was used to compress the images used throughout the website to reduce data size, decreasing load times without sacrificing the integrity or quality of the original images.
-
Google Chrome DevTools - The Chrome DevTools debugging program was used throughout the building of the website to quickly see any changes made to the website code visualised in a live browser tab. I'm able to test the responsiveness of all elements and CSS visual changes.
-
Balsamiq Wireframes 4.0.47 - I downloaded and used the Balsamiq Wireframes desktop application to create all my wireframes during the design process.
-
Shutterstock - Shutterstock provides the stock hero imagery of my website.
-
Am I Responsive Design? - The web application was used to generate screencaps of my lading page at different viewports and position them to form a static demo presentation of my website's responsiveness as can be seen towards the top of this file.
-
htmlcolorcodes.com built by Dixon & Moe - HTML colour codes was used to choose my colour scheme and obtain the corresponding hex codes for each colour.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of my project to ensure there were no syntax errors in the project.
-
As an employer, I want to see what Gary is capable of doing as a software developer by seeing examples of his work so that I have an idea if he is a good fit for my available position within our company.
- Upon entering the website, the employer is greeted with a personal info section containing contact info and they can easily locate the navigation menu in the top right. Clicking or tapping on the 'Projects' link will take them to the Projects page.
- In the Projects page, the user can see an image and brief description of each project and each project has a clickable link to take the user to the GitHub repository or live website in a separate browser tab.
-
As a software development collaborator, I want an easy and appropriate way of contacting Gary with my collaboration idea, so that we can work together on something.
-
Upon entering the website, the user can easily locate the navigation menu in the top right. Clicking or tapping on the 'Collaboration' link will take them to the Collaboration page.
-
In the Collaboration page, the user can fill out a simple contact form with their name, email address to be contacted back and a message with their collaboration idea.
- All fields of the contact form are required as indicated to the user by an asterisk at the end of each placeholder text.
- When the user tries to submit the contact form with an empty field, a message will pop up, telling the user to enter text into the required field(s).
- When the user tries to submit the contact form with an incorrect email address, a message will pop up, telling the user that the text they entered into the field is invalid.
- If all fields are entered as required and valid then upon submitting the form, the current page will reload.
-
-
As a software development student, I'm looking for design ideas and inspiration for my project, so that I can do well in my course.
- Upon entering the website, the student can easily locate the navigation menu in the top right. Clicking or tapping on any of the page links will take them to the relevant page they might want to look at.
-
As a recruitment agent, I want to see a broader overview of Gary by seeing his full resume and I expect to be able to easily download a copy of his CV for my records so that I can determine whether Gary can be shortlisted for any of the available positions I need to fill.
- Upon entering the website, the user is greeted with 'personal info' and 'about me' sections providing contact information and reasons to hire me.
- The user can easily locate the navigation menu in the top right. Clicking or tapping on the 'Resume' link will take them to the Resume page.
- In the Resume page, the user can download a copy of my CV by clicking/tapping the link to open my CV in a pdf file in a new browser tab.
- They can view my skill set concerning coding and education, training and work history timelines.
- Throughout the building process of the website, I conducted regular testing through the use of Google Chrome DevTools (with Chrome being my default and primary browser used for this project).
- Beginning from the mobile-first perspective, every element of each page was tested to ensure they appear and function as desired and expected. When enabling the DevTools Inspector and toggling the device toolbar I was able to select specific device screen sizes or an unlimited responsive option for testing purposes.
- The website has been tested across multiple other popular web browsers including Mozilla Firefox, Microsoft Edge, Internet Explorer 11 and Apple Safari and tested on a variety of devices including iPhone 6S, iPhone X, iPad 2, laptop and desktop.
- A large amount of testing was done to ensure that all pages were linking correctly.
- I asked my partner to review my website at different developmental stages and the completed product across multiple device sizes for feedback and to point out any obvious bugs or issues with her user experience.
- Whenever I encountered something not appearing or functioning as it should, I would first try to rectify the problem with the DevTools elements panel by applying a fix. If this fix was successful, it would be replicated in Gitpod. If the fix was unsuccessful, my attention would turn to an online resource(s) or Slack, to help identify why the problem is occurring, if there are any underlying issues and workarounds or asking for advice to tackle the problem.
Below are some bugs I have encountered during testing and fixed:
-
Bug: Invisible text was showing instead of placeholder text in the message field of the contact form on the collaboration page.
-
Fix: The textarea element has been restricted to occupy one line of code to remove any conflicting spaces, thanks to Aquarelle at Stack Overflow.
-
Bug: Too much empty space on both sides of container content and elements too small at larger screen widths.
-
Fix: Added media queries for larger screen widths up to 4K resolution and replaced hero images with larger sizes to match and prevent blurring/stretching.
-
Bug: Timelines were overlapping the container area at larger screen widths.
-
Fix: Added left margin to history-items class divs.
-
Bug: HTML files were not mappable to XML as described by the HTML validator because of extra hyphons within comments.
-
Fix: Removed the extra hyphens in comments, thanks to Geert Bormans.
My project was deployed directly from the master branch to GitHub Pages as the website host. Whenever new commits are made to the master branch the deployed site will update to the latest version. In order for the project to deploy successfully on GitHub Pages, the landing page has to remain as 'index.html'.
I deployed my project to GitHub Pages using the following steps...
- Log in to GitHub, locate Repositories then click on the repository GRHUGHES-Portfolio.
- Locate the "Settings" button at the end of the horizontal menu and click to go to the settings page.
- Scroll down the settings page until you find the "GitHub Pages" section.
- Under "Source", click on the dropdown menu, set as "None" by default and change it to "master branch" from the available list of options.
- The page will automatically reload, with a ribbon notification stating: "GitHub Pages source saved" indicating a successful deployment.
- Above "Source", click the link next to "Your site is published at https://gazroh87.github.io/GRHUGHES-Portfolio/".
To run this repository locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/Gazroh87/GRHUGHES-Portfolio.git into your terminal and hit 'Enter'. To cut ties with this GitHub repository, type git remote rm origin into the terminal and hit 'Enter'.
- The Personal Info section idea and implementation remain largely the same as used in Code Institute's UCD Rosie Resume Mini Project.
- Bootstrap 4.5.0: Bootstrap was used throughout the project mainly to make the site responsive using Bootstrap's Grid System.
- Credit to MD Bootstrap for the animated hamburger menu icon found under 'Hamburger menu icon animations' over at mdbootstrap.com.
- Credit to Merangely Asensi for the script to close the hamburger menu after clicking/tapping the button or making a selection, found here.
- All of the text content of my website was written by me.
- The Michroma and Roboto fonts were obtained from Google Fonts.
- The hero images used in my website were obtained from Shutterstock and edited in Adobe Illustrator, except for the photo of myself in the 'Personal Info' section of the 'Resume' page.
- The icons used in my website were obtained from Font Awesome and styled by me.
-
Thank you to fellow student Orla Madden on Slack for her UCFD video calls on getting started on the first milestone project and wireframing.
-
Credit to Tutorialspoint for their simple CSS positioning explanation, obtained from here.
-
Credit to Skelly aka Zim at Stack Overflow for help with the following:
- Changing Navbar colour in Bootstrap, found here.
- Bootstrap 4 Navbar Center Links Examples, found here.
- Producing square tiles (my cards) with same horizontal/vertical gaps, found here at Stack Overflow and codeply.
-
Credit to Shawn Reisner for the fade-up animated nav link when hovered, found here.
-
Credit to sepuckett86 at Stack Overflow for help with equal height/width Bootstrap card images, found here.
-
Credit to JoelDoryoku & Zim/Skelly for help with centering images within Bootstrap cards, found here at Stack Overflow and codeply.
-
Credit to Jacob Lett and w3schools.com for help with responsive text found here and here.
-
Credit to mmtuts on YouTube for help in implementing a favicon to all website pages.
-
For help in the structuring and wording of my README, I credit Code Insitute, Haley Schafer and auxfuse.
-
Thank you to my mentor, Ashish Srivastava, for his continuous advice, helpful feedback and his recommendation in reading 'CSS3: The Missing Manual by David Sawyer McFarland'. Sharing his industry experience and his ideas in what makes a good professional looking and functioning website with me, gave me great confidence in both himself as a mentor and my ability to produce a quality 1st milestone project.
-
And just a big thank you to everyone involved with Code Institute, the mentors and fellow students on Slack who have helped to make this project possible.
This project was created for educational use.