This is my Milestone Project for User Centric Frontend Development

This is a personal profile website of a professional coder/designer aimed at advertising his skill, personality and work ethics. The visitors are encouraged to entrust the development of their website throughout the pages with quotes, skill set and previous work examples. It has a clean and stylish look that should draw the users attention to what the developer is capable of. The minimalistic text and look does not frustrate the user with information overload, yet is interesting enough for them to go on ahead and contact the designer for a more detailed discussion about the project they want them to be involved in. The website and it’s host sends an open, positive, “can do” message to the user.

The user will typically be a small to medium business owner that has decided to have a website developed for their company. Another user group can potentially be company that is head hunting for talent in software development as a part of a larger organization. As well as companies, certain individuals might look for a coder for their projects on partnership basis. User Stories examples:

• As a small company owner, I want to find a developer that can provide me with the best possible personal service catering to my business needs so that I can continue to grow my business.

• As an HR manager of a large organization, there is a particular individual with particular kind of skill criteria we are looking for to start/finish/collaborate on a large scale development project.

• As an individual who has the best idea in the world, but is unable to execute on it due to lack of development skills I will consider making an offer of partnership to the coder.

• As a user I want to find out how to contact the person presented in the profile via email, skype, social links and telephone.

• As a user I want to get an idea if the developers personality, skills and professional standards are the ones I look for in a developer.

• As a potential customer I want to see previous work done by the developer to understand the quality.

• As a headhunter I need to be able to see a full CV of the developer.

• As the developer I want my users to be able to reach me.

• As the developer I want to encourage visitors to take action.

To accommodate what the UX should be certain requirements have been set. These are:

1. The profile needs showcase the developer in a professional manner.

2. Potential clients need to have enough understanding about the developer to inform their decision to contact them.

3. Users need to see a variety of example in developers portfolio.

4. Interested users have to have the ability to contact the developer for further enquiries.

5. Interested users need to have the option to download profile holders full CV.

6. There have to be links to social media and a Contacts page to further enquire about the developer.

7. The user needs to have an understanding of developers skill set.

After understanding the requirements and taking into consideration best design practices the structure of the website was clear.

• Home Page – divided into two large sections; containing a large picture of the developer and a brief pitch with the ability to download the CV straight away. Stylized logo of the developer in the navigation bar and a quote in the footer.

• About Page – divided into two large sections; showing off skills and work ethics of the developer visually, as well as text.

• Portfolio Page – showing of past projects to give a scope of the profile holders abilities.

• Contact Page – hosting a number of means to contact the developer.

• Navigation and social links are fixed.

A ruff model was created for this profile website in MS Paint and is available as a .jpg file in the repository. Minor adjustments and changes are present in the final version of the website.

• Navigation Bar – fixed navigation bar on top of the page allows the user to comfortably navigate through the site. The logo in the top left corner will always take the user to the home page.

• Social Links Sidebar – an animated on hover stylized and fixed to the left side of the screen Sidebar with social links is present. These include facebook, Instagram, google, pinterest, twitter, linkedin.

• Home Page – has a Download CV button that opens up a new tab where a user can view and download developers CV.

• About Page – an animated visual representation of the coders best practices showcased as a series of progress bars.

• Portfolio Page – on this page there are examples of past projects the developer worked on represented by thumbnails with a short description. Users are encouraged to click the image which takes them to the website represented in the thumbnail via opening a new browser tab.

• Contacts Page – as well as developers contact details the page contains a small form where users can share their thoughts or leave their contact information if they want to.

• Have a comments section in the Portfolio Page for past clients to rate developers work, as well as leave a comment.

• Add a small interactive gallery of the developer and interests to further open up his character to the users.

• Add an additional language (Russia) to broaden the clients spectrum.

Several technologies have been used in the development of this personal profile website:

• HTML5 and CSS3 for structure and styling of the pages.

• Google Fonts where used for text editing and styling

• Font Awesome was used to implement the icons

• Bootstrap was implemented in design, to make the website responsive, styling, buttons and navigation

• GitHub repository was used to store the code and site deployment

• Gitpod was used for development and version control

• W3C Markup Validation Service was used for HTML validation

• Jigsaw W3 css validator was used to validate CSS

Functional testing is designed to ensure that each function of the website works in accordance with the requirements of the specification. Testing the functionality of the website shows "What the system does." For this a checklist for testing website functionality is created and tested with a “Passed” or “Failed” status with a brief description of the outcome if necessary.

• Outbound Links – Passed – all links to external pages are working as intended (opened in a new tab displaying the page)

• The correctness of internal links – Passed – all navigation links between pages work as intended

• Missing links leading to one page – Passed – none

• Are there any non-linked pages? – Passed – none

• Are there any broken links – Passed – none

A form is used for interactive communication with the customer.

• Validity of input; email window – Failed – validation of input is not implemented (will be fixed in the next version)

• Form parameters in which deletion or other modification is possible; comments window – Passed – works as intended

• Placeholders are in place – Passed

• Send button functionality – Passed*- It is functional, but it does not communicate with any servers at the moment (It opens a new tap with a homepage instead)

• HTML syntax errors – Passed – none (validated using W3C Markup Validation Service)

• CSS syntax errors – Passed – none (validated using Jigsaw W3 css validator)

Usability testing is designed to evaluate the web page from the perspective of the end user (UX Testing). This helps to determine whether the product meets user expectations, identifies problem areas in the interface.

Navigation testing of the site is performed with following checks:

• All pages of the site are clear and easy to use – Passed

• Buttons, shapes and fields are convenient to use – Passed

• Access to the main menu is carried out from all pages - Passed

• No grammar, spelling errors – Passed

• Images are sized and placed correctly – Passed

• Website color palette optimization and font sizes – Passed

• Content is informative, understandable, structured and logically connected – Passed

• The instructions are clear and contain the correct information - Passed

Upon evaluatin the usability of the website it can be said that the structural integrity is in place. The site is understandable and convenient. The navigation is intuitive and easy to understand for all types of users. The impressions it makes are visually striking and stylish with no unnecessary clutter. It is easy to understand what this site is trying to showcase.- Passed

User Interface testing is performed to verify that site’s graphical user interface conforms to specifications.

• GUI Compliance – Passed

• Assessment of design elements: layout, colors, fonts, font sizes, labels, text fields, text formatting, titles, buttons, lists, icons, links – Passed

• Testing with different screen resolutions – Passed

• Testing the graphical user interface on target devices: smartphones – Failed – Landscape view of Iphone XS, Pixel 2, IPhone 6-7 is not responding correctly, this will be fixed and documented appropriately (Testing made using http://www.responsinator.com/)

• Testing the graphical user interface on target devices: tablets – Passed

Compatibility testing is performed to verify the operation of the site with various software and hardware configurations.

Cross-platform testing of the site allows to evaluate the performance of the site under different operating systems (both desktop and mobile):

• Widows – Passed

• Mac OS - Passed

• iOS – Passed

• Android – Failed – Issue with graphical user interface stated above, text merging.

Cross-browser testing of the site helps to verify the correct operation of the site in different browser configurations:

• Google Chrome – Passed

• Mozilla Firefox – Passed

• Internet Explorer - Passed

Total number of tests: 32

Number of successful tests: 29

Number of failed tests: 3

Fixes shall be implemented and documented accordingly for the identified issues.

1. Email validity of input fix –

2. Graphical user interface on target devices: smartphones –

3. Android merging of text issue -

In conclusion, the website is of sound structure and is ready to be deployed.

Vladimirs Boreckis Personal Profile website code is located on GitHub. The repository for this site can be found at VladimirB3/portfolio-milestone-1. The website was deployed using GitHub Pages, the link to the live version is: https://vladimirb3.github.io/portfolio-milestone-1/

Gitpod was used for development – to run the site locally python3 -m http.server command needs to be run on the terminal inside the repository VladimirB3/portfolio-milestone-1.

• For the Portfolio Page 4 websites have been used to showcase developers work – noratecsoft.com, sagatkft.com, https://godofwar.playstation.com/, purnavumuiza.lv.

• Some code was copied from Bootstrap Documentation and modified.

• This README file was drafted up using MS Word following the giudelines provided by Code Institute.

• The photo used in the Home Page is from a personal collection.

• The logo pictures of the company websites placed in thumbnail in Portfolio Page where cut out from their respective websites: noratecsoft.com, sagatkft.com, https://godofwar.playstation.com/, purnavumuiza.lv.

• I received inspiration for this project from my Lovely Spouse.