Live Page: https://anee127.github.io/Milestone-Project-1/

This Resume is part of the first Milestone Project carried out through the Code Institute.

This website showcases my skills and experience as a personal resume website. It includes some features about me as well as my details and CV to appeal to potential recruiter/employers. The website itself is an example of my skills and I have provided contact input for users who would like to get in touch.

• User Experience (UX)
  • Purpose
  • User Stories
  • Design
    • Structure
    • Colour Scheme
    • Typography
    • Images
    • Wireframes
• Features
  • Existing Features
    • Header
    • Sections
    • Footer
  • Features left to Include
• Technologies
  • Languages
  • Frameworks, Libraries and Programs
• Deployment
  • Deploy to GitHub
  • Accessing Code
    • Forking
    • Cloning
• Testing
  • Testing User Stories
  • Validator Checks
  • Responsive Design
  • Additional Testing
  • Bugs
• Credits
  • Content
  • Media
• Acknowledgements
• Contact

For this first milestone project the purpose is to create a personal website to showcase my skills and experience to become a full stack software developer, and so that it will give me a chance to be noticed by potential recruiters.

1. As a user of a recruiter, I should be able to easily navigate through the website to find relevant information.
2. As a user of a recruiter, I should be able to use the website on any device without problem.
3. As a user of a recruiter, I should be able to find out about the creator on the first page including their contact details.
4. As a user of a recruiter, I should be able to read through the creators’ CV and be able to download a copy.
5. As a user of a recruiter, I should be able to see their relevant skills.
6. As a user of a recruiter, I should be able to contact the creator with any message or feedback that I would like to give.
7. As a user of a recruiter, I should be able to access links to their social media accounts.

• Structure: I opted for a basic website design structure with a simple header and footer in the same style, as well as a hero image, all repeated to keep the website minimalistic.

• Colour Scheme:

1. A pastel minimalistic colour scheme in contrast to dark grey text to make is easier to read.
2. The key colours being white, grey, blue, pink and yellow.
3. The colours used, tie in with the colours in the hero image to keep the scheme throughout the website.
4. Most of the background is white to avoid visual clashes and create more emphasis on the text. Source: Coolors

• Typography: The Poppins font is used throughout the website, it is a rounded and easy to read font. Bold, coloured text is used for emphasis with some words. Sans serif is the backup font in case the original font does not load onto the website. Courgette is used for the web logo only to make it stand out from the rest of the text.

• Images: A relevant and simple hero image was used that ties in with the colour scheme. Images were also applied to represent each project on the home page.

• Wireframes: At the start of the project I designed the wireframes using Balsamiq. These initial designs made it easier to plan the responsive design and structure of the website. The final design changed slightly compared to the wireframes. [Wireframes link] (assets/pdf/MilestoneProject1Wireframes.pdf)

• Header

  • Navbar: used bootstrap to create a responsive navbar with my name as the logo which contains a link to the ‘About’ page. The navbar is fixed to the top of the page, as the user scrolls down it will be the same across all the pages. On standard and larger screens, the navbar menu will be shown as: About, CV and Contact, consecutively. For medium and smaller screens, the menu items will be within a hamburger icon button displaying as: About, CV and Contact, in a descending order below the logo.
  • Hero Image/Text: The hero image will be the same accross all pages and is responsive depending on the size of the device. The hero text changes so that it is relevant to each page.

• Sections

  • About page: This contains a brief introduction to myself, my contact details and links to my projects.
  • CV page: Has a timeline of my education and work experience as well as progress bars to represent my skills.
  • Contact page: this contains a form in which a user can provide their contact information and a message that can be submitted to myself.

• Footer

  • The footer has my copyright information, a download link to a printable pdf link of my CV and links to my social media that will all open in a new page.

I will be using this site to promote myself in the future so will update the CV and skills section when required. I will also update the ‘My Projects’ section to include more recent and better projects but will keep the same layout and just include them towards the bottom. Once I have more than 6 projects, I will create a whole page just for them and provide a link on the homepage. I will also make the contact page fully useable where the messages will be sent straight to my inbox.

• HTML5
• CSS3

• Bootstrap 4.5.2
• FontAwesome 4.7.0
• GitHub
• Git
• JQuery
• Visual Studio Code
• Balsamiq
• Google Fonts
• Coolors
• HTML Formatter
• CSS Formatter

1. Login to GitHub and find the GitHub repository.
2. Click the settings button at the top of the repository menu.
3. locate "Pages" on the settings page which will be at the bottom of the menu.
4. Under the subheading "Source" there will be a dropdown menu stating "None", select "Main or Master Branch" and save.
5. The page will refresh automatically.
6. The link to the published site will appear at the top of the page.

Forking

1. Login to GitHub and find the GitHub repository.
2. find the "fork" button on right-hand corner of page.
3. click "fork" to recieve a copy of the original repository in your GitHub account.

Cloning

1. Login to GitHub and find the GitHub repository.
2. click the code button next to the green GitPod button.
3. copy the url, open a terminal and change the directory to where you want the repository to be.
4. In the terminal type "git clone" and paste in the url, press enter - the local repository is created.

1. The homepage is structured in a simple and easy-to-read format. the header, navbar and footer are the same on all pages to keep a consistent design. The header text is different to relate to each page, so the user knows what they are about to read.
2. The menu items are underlinned when the user is on that current page for easy navigation.
3. All the text is large enough for the user to read and is responsive to be suitable for all devices.
4. All the social and project links are in working condition and quickly open a new tab in the browser for the third-party websites so as not to overwrite the page the user is currently on. The CV is opened in a separate tab in the browser and can also be downloaded.
5. On the contact page, if the user wants to submit a message, all fields must be completed before they submit. If one field is missing a reminder pop-up message will appear.

• HTML Validator

  No errors or warning messages were received for my html code.

• CSS Validator

  No errors or warning messages were recived for my css code but two errors and several warnings occured for the third party links used in my code.

• The website is a mobile first design hence the use of Bootstrap. A viewport tag was included in the head section of the html code to give indication to the browser on how to respond to different resolutions.

• The Website was tested on Google Chrome, Firefox and Safari browsers.

• The website was tested on many devices including a Laptop, Desktop, iPad, iPhone (5, 6, X) and Samsung Note 10.

• I recieved plenty of suggestions from friends and family to improve user experience:

  • The original font used for the logo was pointed out to be too childish, so I changed it to a fancier font.
  • The project titles were placed in the middle of each image with some CSS changes for contrast between text and images.
  • The hero text was put into a translucent box in the middle of the hero image to stand out more and make it easier to read.

• My project was posted on Slack to recieve some feedback from other students.

1. The hero image used initially caused the whole website to load slowly, so I had to compress the image to make the file size smaller but so that the resolution of the image would not change drastically. I used Reduce Images to make the image smaller which resolved the problem.
2. The hamburger icon for the menu was not functioning at first and found that it was because I did not have JQuery script in my code. I found the links needed by searching 'JQuery for navbar'.
3. The project section on the about page had images that were too large. I first manually cropped them and save the pictures as seperate files but also used Reduce Images website to make the images smaller and quicker to load on the page.
4. Some of the icons used in the footer were not working as a small square was showing instead of an icon. I assumed it was a problem with the browser, but my mentor pointed out to me that I was taking the icon links from the most recent version of FontAwesome when in fact, I am using version 4.7.0. This was easily fixed as I took the icons from the site that was compatible.

• Bootstrap 4.5.2: Bootstrap was used throughout the website which included the navbar, footer, grid system, timeline and form templates.
• Timeline and Progress bar elements taken from the Code Institute.
• Navbar, Header and the basic elements were produced with the help of W3schools.com.

• The hero image was taken from Freepik.
• The mock-up image provided at the top of the README.md was created using About Am I Responsive.
• The 'My Projects' images were taken from the respective websites' hero images.
• The icons in the footer were taken from FontAwesome, also linked in my html code.

I would like to thank:

• My Mentor for helping and supporting me throughout the project.
• The Code Institute Slack Community.
• A friend who has given me continuous advice and support throughout the project.

• Created by @aneesakhan
• Contact: [email protected]