My Resume Project

Content

This project was build for my personal resume that able to be view by hiring manager in more simple and easy access way. User can choose which part of info that wish to view by clicking on the navigation bar.

Demo

A live website can be found here:"https://skyeoh06.github.io/resume-assg1/"

UX

1. Project strategy The Website was planned as required by user as below:

• User and Organisation Goal 1 : The Hiring Manager/Users want to know my basic info. I show personal info such as name, contact info, email, what i believe and objective.
• User and Organisation Goal 2 : The Hiring Manager/Users want to know summary of my background. I want to present my education and experience background in short amd details content presentation.
• User and Organisation Goal 3 : The Hiring Manager/Users want to know details of my education background. I want to present my working experience in sequence from latest to oldest.
• User and Organisation Goal 4 : The Hiring Manager/Users want to know more about of my working experience. I want to show my working experience based on industry and from current to past.
• User and Organisation Goal 5 : The Hiring Manager/Users want to know what type skills I have. I want to present my skills in the form of language, softskills and hardskills that i had accumulated so far from working experience, education background and organisation activities.
• User and Organisation Goal 6 : The Hiring Manager/Users want to know what i had been achieved so far. I want to present all the achievement besides education and working.
• User and Organisation Goal 7 : The Hiring Manager/User want to know the alternate way to contact me besides email and phone. I want to collect message from the hiring manager/users that wish to contact me.

2. Scope of the project With the info that required, the website was designed as per below:

• Home -- Starting project with the introducation about Myself, My thought and Career objective.
• About -- Summary about Me for education and working background.
• Education - A detail page of My Education background.
• Experience - A detail page of My working experience.
• Achievement - A detail page of My achievement.
• Connect - a form page for Hiring Manager/User to message their info .

The background was designed based idea of clear separate page with the contrast background image and color. The logo was updated together with My Name on the left of navigation bar for Hiring Manager/User had clear idea of what is this webpage for.

3. layout Draft The daft layout of each page can be viewed in this folder link: https://github.com/skyeoh06/resume-assg1/tree/master/layout-draft

Features

1. Existing Feature

• Hiring Manager/Users can access the info via clicking on the title button in the navigation bar on the top.
• Hiring Manager/Users can access the details of education background by clicking on the Details button.
• Hiring Manager/Users can leave their contact via the connect page.
• The webpage is mobile-friendly and reponsive.

2. Additional Features to be implemented in the future.

• galleries - present the image/picture of working project so far.
• Invention - to presented the project besides work related product.

Technologies Used

1. HTML5 (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5): The project uses HTML5 to structure the layout of the website.

2. CSS (https://developer.mozilla.org/en-US/docs/Web/CSS): The project uses CSS to add the stylistic designs to the webpages.

3. Bootstrap (https://getbootstrap.com/docs/4.3/getting-started/introduction/): The project uses the Bootstrap framework to make structuring and styling of the webpages easier

4. GoogleFonts (https://fonts.google.com/) The project uses GoogleFonts to style the typography used in the heading, paragraphs and buttons of the website.

5. Color Picker (https://www.google.com/search?q=color+picker) The Project uses Color picker to style the background image and font color for comfortable view.

Testing

1. Manual Testing The navigation bar can be see by User in the top of every page to make it easy for user to select any page.

• "home" directs to https://skyeoh06.github.io/resume-assg1/#home
• "about" directs to https://skyeoh06.github.io/resume-assg1/#about
• "education" directs to https://skyeoh06.github.io/resume-assg1/#education
• "experience" directs to https://skyeoh06.github.io/resume-assg1/#experience
• "skills" directs to https://skyeoh06.github.io/resume-assg1/#skills
• "achievement" directs to https://skyeoh06.github.io/resume-assg1/#achievement
• "connect" directs to https://skyeoh06.github.io/resume-assg1/#connect

Website testing

• Validator https://validator.w3.org/ There were some error some as spacing, invalid value for form type and no text in the UL line was being modified correctly. Re-test again to validate the modify error webpage. Result showed "Document checking completed. No errors or warnings to show."

• Mobile Friendliness Test Tool https://www.bing.com/webmaster/tools/mobile-friendliness Result showed " This page is mobile friendly Viewport configured correctly Page content fits device width Text on the page is readable Links and tap targets are sufficiently large and touch-friendly"

• Reponsinator https://www.responsinator.com/ Result showed : "For different type devices portrait, the background image was only shown within the area of content" "For different type devices landspace, the full background image was shown. For about page, flower image and about me banner was restructure by the landscape"

2. Mobile-responsive The webpages work on small to medium devices (i.e. mobile phones to laptops).

3. Bugs For same devices with different view : -in portrait view, the background image area only shown within area of the content. -in landscape view, the full background image can be seen. But only on about page, the small background image was re-adjust to be center view.

Deployment

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone hhttps://github.com/skyeoh06/resume-assg1 into your terminal.

There is not difference for deployment version and development version

Credits

(1) Content all the info was based on my current resume.

(2) Media The image was seacrh from http://www.goole.com

(3) Acknowledgements Get the idea of how resume platform look likes from https://www.wix.com/ Some code info from https://www.codexworld.com/