As part of my milestone project I decided to create a personal website as part of building a personal brand.

The main goal of the project is to present myself in the best light possible to future potential employers.

The website contains a short section about me, a portfolio of completed projects to demonstrate competencies, a timeline of my work and educational history, progress bars to display my abilities in different languages, a contact section and a footer including social links.

This website is mainly for recruiters either in agencies or in-house recruiters at a variety of different companies.

The site is mapped out as one page, allowing the user to easily scroll through each section one at a time. There is a blend of colours and background images to make the user experience appealing.

The site allows the user to easily build an impression of myself through information about my work/education, my skills and background and also my portfolio of projects. The contact section and social links also give the user the opportunity ease of access to reach me if more information is required or the page has peaked their interest in me as a potential hiree.

For example, if the user wanted to gain a better insight into my professional career, the links to my social platforms in the footer, allows this to be done easily.

I employed the same wireframe as the one used in Haley Schafer's sample project.

Navbar - allows users to quickly navigate through the page. A collapseable navbar is used for mobile devices.

Home - home section uses a background image and jumbotron to give an appealing user experience.

About - the about section provides a brief synopsis about myself.

Portfolio - my porfolio sections gives a brief description of each project and also shows the technologies used in each project.

Work/education - the work/education section employs a bootstrap timeline to show the history of my work and education.

Skills - the skills section demonstrates bootstrap progress bars to highlight my proficiency in a number of different languages.

Contact - the contact section allows the user to leave a direct message to me.

Footer - the footer contains social links and more contact information.

Navbar - allows users to quickly navigate through the page. A collapseable navbar is used for mobile devices.

Home - home section uses a background image and jumbotron to give an appealing user experience.

About - the about section provides a brief synopsis about myself.

Portfolio - my porfolio sections gives a brief description of each project and also shows the technologies used in each project.

Work/education - the work/education section employs a bootstrap timeline to show the history of my work and education.

Skills - the skills section demonstrates bootstrap progress bars to highlight my proficiency in a number of different languages.

Contact - the contact section allows the user to leave a direct message to me.

Footer - the footer contains social links and more contact information.

Feature 1: In future I would like to provide a version of my downloadable CV.

Feature 2: I would also like to include functioning links to my repositories in my portfolio and links to my social platforms.

• JQuery
  • The project uses JQuery to simplify DOM manipulation.
• [HTML5]
  • The project uses HTML5 to structure and display information in the browser.
• [CSS3]
  • The project uses CSS3 in order to style the HTML5 elements.
• Bootstrap 4
  • The project uses Bootstrap 4 to build responsive features.

In order to test my project I mainly used Google developer tools, I checked the project worked in different browsers and I also ensured the project worked on different devices to make sure that it's responsive.

I also used a code validator to ensure my code was of a sufficient standard.

Desktop: The view on desktop takes up most of the screen, it's one page which allows the user to scroll down.

Tablet: The only difference in tablet is that one of the portfolio projects is hidden.

Mobile: In mobile the Navbar is collapsed, the footer information is stacked, one of the portfolio projects is hidden and some of the text is moved in order to make it legible with the new positioning of it in the background image.

I deployed my project using github pages.

The process was as follows: 1. Click into settings in Github account. 2. Scroll to the Source section within the Github Pages section. 3. From the dropdown menu, select master branch and then click Save.

• The bootstrap timeline was copied from W3Schools, (https://www.w3schools.com/howto/howto_css_timeline.asp)
• The contact section was copied from W3Schools, (https://www.w3schools.com/howto/howto_css_contact_section.asp)
• The progress bar was copied from the previous 'Rosie Odenkirk Resume' as part of the User-Centric Front-End Module in the Code Institute course, (https://courses.codeinstitute.net/courses/course-v1:codeinstitute+FE+2017_T3/courseware/616289d66b5641a3808cc43e53842695/104d9207aa2a4bcbbdce3e321ff7f263/?activate_block_id=block-v1%3Acodeinstitute%2BFE%2B2017_T3%2Btype%40sequential%2Bblock%40104d9207aa2a4bcbbdce3e321ff7f263)
• The collapseable navbar was copied from the 'Whiskey Drop' project as part of the User-Centric Front-End Module in the Code Institute course, (https://courses.codeinstitute.net/courses/course-v1:codeinstitute+FE+2017_T3/courseware/a4b90d17e5c94220a0f83f00ce7fa606/7c0e25d1061e47cdae9c492d623bfc65/?activate_block_id=block-v1%3Acodeinstitute%2BFE%2B2017_T3%2Btype%40sequential%2Bblock%407c0e25d1061e47cdae9c492d623bfc65)
• Other components such as the navbar in were obtained from Bootstrap, (https://getbootstrap.com/)
• Icons in the footer were used from Font Awesome, (https://fontawesome.com/)
• Stack Overflow and Tutor Support were used to get help with issues I was struggling with.
  • These are links to questions I posed on Stack Overflow: (https://stackoverflow.com/questions/60343701/blending-jumbotron-into-background-image/60343854?noredirect=1#comment106755313_60343854) (https://stackoverflow.com/questions/60323668/social-icons-not-floating-to-the-right-hand-corner-of-footer/60324257#60324257) (https://stackoverflow.com/questions/60155333/why-is-my-bootstrap-timeline-not-styling-correctly/60155757#60155757) (https://stackoverflow.com/questions/60061009/html-bootstrap-for-displaying-images-side-by-side/60061401#60061401)

• The photos used in this site were obtained from Google Images, (https://www.google.com/search?q=background+images+for+websites&rlz=1C5CHFA_enIE862IE862&sxsrf=ALeKk03oIGg5wWJwM_MlWcUddgxk0sWAfw:1582586493051&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiMkfqNquvnAhVFZcAKHSypD18Q_AUoAXoECBAQAw&biw=1439&bih=701)

• I received inspiration for this project from Haley Schafer's sample project.