Project 1 - Resume Project

We were given the task to create a webpage to showcase what we have learned for the past one month. I took the opportunity to create a personal online resume. Reason for that was so that I could build up on it and use it after graduation. The theme I had for my webpage was a clean look inspired by two websites that I had as reference.

Inspiration 1 - Code Institute project demo

Inspiration 2 - Anotherstate website

Demo

Click here to navigate to the demo page.

UX

The goal in the design was to reflect my personality while maintaining the clean and neat look on the webpage.

Users of webpage should be able to look for the things they want to find out about me without hassle.

Technology USed

1. HTML
2. CSS
3. Bootstrap

Features

Existing Features

Scrollspy was used to highlight the section the user is currently on. Also it allows a quick navigation to the section the user wishes to go to. Action on Scroll (AoS) was used to reveal the skills section.

Features to Implement

Improvements could be made to enable animation only after the AoS was activated. Further optimization to adapt to different browsers would be something I would look into as well.

Testing

The overall look of the webpage was achieved as intended. Though improvements could be made to the skills section so as not to distrupt the flow of the webpage.

Scrolling down the website, the words on the navbar bolds according to the section you are currently on. There were no issues in clicking the navbar to direct to the section either.

AoS works as intended in the skills section, though it would have been better if the animation starts after the AoS was activated.

Under the projects section, the "post-its" looking cards animates on mouse hover and the buttons changes color on hover as well. Links to the demo page and GitHub goes to the addresses coded. For this section, I used my current project as a placeholder. I didn't feel it was necessary to find other's projects to link out.

Hobbies section also has a mouse hover function implemented on the card section. On hovering, the card section turn more opaque. For this section, I placed Lorem Ipsum as a placeholder.

Contact me section has a form that works as intended. Clicking on submit while the form is empty would trigger notification on the empty section itself.

Follow me section has three buttons each leading to the respective pages as indicated by the icons. They too have the mouse hover function.

The site was tested for mobile usage thru my iPhone 7s. The layout of the webpage as a whole looks as intended. On mobile, the "post-its" in the projects section is striaghtened up to reduce the animation redundancy for it.

Deployment

The webpage was hosted using GitHub deployed from the Master Branch. As new commits are pushed, the webpage will automatically update. You can clone the repository if you wish to run the webpage locally.

Credits

Thank you to Michael Snik for his AoS code.

Content

All content was written by me. Lorem Ipsum was used to fill in.

Media

Respective pictures were borrowed from the following sources:

Icons8 for Phtoshop (PSD), Microsoft Office, HTML, CSS, JavaScript(JS) and Python (Py).

Pexels for the following:

• bench - Photo by Jaymantri from Pexels
• camping - Photo by Lum3n.com from Pexels
• indoor - Photo by EVG photos from Pexels
• notepad - Photo by Pixabay from Pexels

Pixabay for the following pictures:

• corkboard - Image by PublicDomainPictures from Pixabay

Font Awesome for Twitter, Instagram and GitHub icons.

Acknowledgements

My website was inspired by two webpages. I was trying to achieve a clean minimalistic look inspired by these two projects.

• Inspiration 1 - Code Institute project demo
• Inspiration 2 - Anotherstate website

Also, to avoid any misunderstandings, I would like to reitrate again that this webpage is for educational purposes only.