The result is this responsive portfolio working across all browsers. Read about the process here below and check my code on Github.
Showcase my work, communicate my personality and facilitate contact.
Create a responsive website for all viewposts and browsers with HTML and CSS.
The ultimate goal is to be able to build interactive prototypes and learn how to code with React, to work closer with developers.
Visual Studio Code
Analyzed the data on Google Analytics and the videos on Hotjar. I realized that most users tried to scroll down on the home page, unsuccessfully.
Taking into account the learnings from Google Analytics and Hotjar, I created wireframes for mobile and desktop, as well as a design system on Figma.
I exported all the images for mobile and desktop to the /img folder.
Created Github and Netifly account, and linked them together.
With a mobile-first approach, I continued to write the HTML pages first and after that added the CSS.
Added some simple bootstrap code, to solve some layout issues quickly.
I wrote media queries for all viewport sizes.
At this point, it was time to test. I organized 5 testers with similar characteristics to my users (potential employers, clients and designers).
I updated the portfolio with the feedback I got from the usability tests.
I tested the portfolio one last time across all viewports (mobile, tablet and desktop), as well as across all main browsers (Safari, Chrome, Firefox, Edge).