Stream One Project: User-Centric Frontend Development - Code Institute

This website was coded to showcase certain levels of skills to future employers. It contains four different sections: About Me, Portfolio, Skills and Contact Me.

I believe that most people will only stay on the website for about 2-3 seconds. My goal is to encourage my future employers to stay on and continue looking through what I can do. Although my social media buttons and my 'Contact Me' section is positioned below, the 'call-to-action' to connect with me should be one of the first few things they see. The colour scheme that I chose should represent my age. If bright colours show energy and monochrome colours show professionalism, I have chose to balance both.

I wanted to showcase that I am open to follow any formalities or think outside of the box. Thus, 85% of the website will showcase my knowledge to utilize bootstrap's grid system and 15% of the website will showcase the 'out-of-grid' thinking only for the portfolio section. This way, they would understand that whatever their company represents, I can show that I can fit in their business style.

I placed a strong focus on the present and on the future, thus I don't feel that it is important for me to showcase my irrelevant past experiences and education. I believe it's important that I showcase the personality of being humble, knowing that I do not have any experiences in the relevant field. With that in mind, I have added quotes to show humility.

1. HTML
2. CSS
3. Bootstrap (4.3.1)

This site uses the sticky navbar feature in Bootstrap so that you can visit the section you need to instantly from where you are in the site.

The employer and recruiter user story achieved the intended outcome of providing them with a showcase of myself and my work. They are able to see my showcased projects via the links in the "Recent Works" section. The hover animation was coded so that it could encourage my future employers to pursue the action of clicking through. In the skills section, they can hover onto the respective icons and peek at the strengths bar, representing each level of strenth on a scale of 1 to 5, 5 being the strongest. They are also able to view my social media profiles via clicking on the icons in the footer.

In the contact form, all fields are set to 'required' because all information are needed for future employers to fill up.

All links have been manually tested to ensure that they are pointing to the correct destination.

By clicking on the links in the navbar, it will bring you to the page section.

This site was viewed on multiple mobile devices (iPhone 4, 5, 7: Chrome and Safari, iPad, Samsung Galaxy) via Chrome Inspect to ensure compatibility and responsiveness. During this testing phase, I realized that the portfolio section will be sliced short. To fix this, the font-sizes were reduced and the image was removed in a media query. I also realized that hover elements do not work in mobile. Thus, the elements made sense without hover during mobile responsiveness testing.

This site is hosted using GitHub pages, deployed directly from the master branch.

All photos were taken from: Pexels, Burst, Unsplash.

The Bootstrap components that I've used can be found here.

Fonts used are from Google Fonts.

Took inspiration for the fullscreen responsive menu from here

This is for educational use.