My Personal Portfolio is a Milestone Project created for the "User Centric Front-end Development" module of my FullStack Software Development Course offered by Code Institute.
This Resume portfolio is an online web application designed for users with interest in getting to know who I am. The user can:
- Look at my resume
- See my creativity
- Contact me
- Hear a little of who I am
- I can present myself in best light and get hired
The site is for recruiters to consider me as an applicant and hire me.
View the site here: GitHub
The page is fully responsive to all screen-sizes. As the user first comes on the site they will get a warm Hello. The recruiter will smile back at the screen where they are greeted by my profile picture. The page is set up as one page where you scroll down to different segments. Or if you choose you can jump to a section by clicking on the sticky-top navbar. In the profile section 3 different projects are presented with links and short presentation. In the about section is a brief presentation of myself and a link to my resume. In the contact is a very visible email which conveniently opens a new email when clicked on. If you cannot send an email you can easily send a message in contact form. In the footer I invite the recruiter to join me in my social media presence.
A feature that will be implemented in the future, is a link in the about section which leads to a page with my qualifications and skills listed. As well as some more personal interests and experiences.
- HTML5 - used as the base for markup text.
- CSS3 - used as the base for cascading styles.
- GitHub - is a Web-based hosting service for version control using Git.
- Chrome Developer Tools - is a set of web developer tools built directly into the Google Chrome browser.
- FontAwesome - used for various icons in the navbar ,modal and footer.
- Google Fonts - used for the 2 fonts used: Playfair and Raleway.
- Bootstrap 4 - is a framework for building responsive, mobile-first websites.
The site has been tested manually throughout the process of building the webpage. NavBar testing, I tested to see that everything worked. When you click on the specific sections in the Navbar you jump to either, Home, Portfolio, About or Contact. When you click on Resume you are transferred to a new tab with my resume as a PDF file. In the About section you can click on a button which sends you to the PDF in a new window, it works appropriately. Email contact is working correctly and opens up a new email from your email server. The modal pops up when you click on it, but because the site is static it doesn't actually function.
Online validators used and the site is approved for HTML and CSS:
- W3C HTML Validator -
Document checking completed. No errors or warnings to show..
- W3C CSS Validator -
Congratulations! No Error Found.
I have gone to great length to ensure that all the aspects of the site works in all screen sizes and also vertically and horizontally. The site reacts correctly in different browsers such as Chrome, Firefox, Safari, Internet Explorer.
I managed the deployment through Github Pages, which updates after new commits are made. Github Pages is directly linked with the master branch and updates seamlessly with new changes and commits made. When I first created my repository I went to the settings page in Github, there there is a section for Github pages. In this section I set up my Github page for this repository adding the master branch as source. For a local run, I would clone this repo in the terminal git clone and use commands git commit and git push to get updated version of my site.
All content is original content and in my own words.
Images are borrowed for the portfolio, Whiskey and Love Running are Code Institute projects. Hagabageri is borrowed from the bakery's website, Hagabageri.
The layout of my resume webpage is inspired by several different sites because of the popularity of this layout at the moment. One in particular has inspired with the modified photo in the header and layout of the different sections. Daniel Autry. The layout has inspired but the code has been unique in the sense that it has not been copied from other resume sites, rather I have used elements from various projects and lessons from Code Institue. When I have needed guidance I have referred to W3C, Bootstrap, Youtube tutorials. The modal form is borrowed from mdbootsrap and modified to suit the layout of my webpage.
I received inspiration for this project from Code Institute - Project Ideas in the Student Assessment Handbook.