Portfolio

This is the portfolio website which you are currently browsing. In this page I explain the general design decisions that I made and how I made the website responsive and accessible.

General design decisions

The general idea that I followed when I made the homepage of this website was that everything on the screen should be related. That is why each section has by default a height of 80% of the viewport height. The 20% remaining are for the user to know that they can scroll down to see more content.

To make the hierarchy of the content clear, I used different colors for primary buttons, secondary buttons, section titles and subsection titles. I also added a shadow below the navbar when the user scrolls down to make it clear that the navbar is not part of the content.

Responsiveness

I designed the website with a mobile-first approach, considering a layout for each section that can be shown in a single column. When a larger screen is available, the layout is changed to show elements side by side. The titles also appear bigger on larger screens.

The navigation menu is hidden by default on smaller screen. A button on the right side of the navbar (easily accessible with the thumb when using a mobile phone) toggles the visibility of the menu.

Accessibility

I tried to make the website accessible using different methods.

First, I used semantic HTML 5 tags when applicable to make the structure of the content clear to a screen reader.

Second, I checked that the colors that I used have sufficently high contrast ratios. I used the WebAIM contrast checker for this.

Third, I made sure that the website is usable with a keyboard. I checked that all the links and buttons are reachable using the tab key. I also checked that the focus state is visible. In addition to this, I started the page with the navigation menu, allowing to quickly skip to part of the page that the user is interested in. Even in mobile display, this menu automatically shows when focusing its elements with the tab key.

Finally, I used the alt, role and aria-label attributes to clarify the objective of some of the elements in the page.

These efforts resulted in a WCAG 2.1 level AA compliance with the accessible.com scan.