To practice working with React.js and Styled Components, I redesigned and rewrote my portfolio. This project also allowed me to figure out version control on Github through the command line.

Wireframing was done in Figma, going for a mobile-centric design. I went for a compact approach by having the About and Resume pages lay on top of the homepage. These two pages have the same width as most common tablets do (give or take 768 pixels wide), which allowed for more consistency compared to, say, using viewport width.

I opted to have the navigation at the bottom for smartphones and at the top for other devices, opposed to using a 'classic' hamburger menu which you see on many other websites. The reason behind this choice is that, quite frankly, I think the hamburger menu is not user-friendly, specially on mobile. The menu is not visible, it's not on the screen, unless you perform an action. Not to mention the fact that most people use them at the top of the screen, which a lot of users, including myself, can't reach with one hand.

I went with a minimal and bold approach with a focus on colour. The original idea, which can be found in the earlier designs, was to go with full-size photographs instead of the coloured background. Performance wise this wouldn't have been the best, and I grew to like the gradient I created.

The website is written using React.js and Styled Components / Styled System. The components in the library were created with reusability and minimal clutter in mind. Links to the several internal pages were created using React Router and responsiveness across platforms was achieved by using breakpoints.

Tools

• React.js
• JavaScript
• Styled Components
• Github
• Figma