My old portfolio showed all the roles I could do in the same page and it was confusing to recruiters so I wanted to redesign it.


The recruiters see if they are interested in me the first seconds, they don’t waste time, they need to see what I’m able to do quickly.

I needed to split the portfolio for each role, that way they’d be able to choose what they want to see, thus they won’t have to guess what I exactly do.

They also need to find what they are looking for easily, so I had to have all the contents well distributed along the webpage, making clear separations between them.



  • - Make clear who I am
  • - Have a consistent design
  • - Aimed to be responsive


To have a general idea of how I was going to do the style and distribute the content I made a bunch of low fidelity sketches, that way I was able to make a sitemap and at the same time I got a general idea of the design I wanted to make.

To make the website aimed to be responsive I started with the mobile sketches, since it's easier to expand the content from mobile to pc that shrinking it from a pc screen to mobile.


To give consistency to the design I set a number of rules that helped making it uniformed. I started with the most basic ones: the colors, text and spaces.

In this case I wanted to have a light/dark mode, so I made 2 complementary palettes instead of just one.


After that I chose the fonts I was going to use, the sizes of the headings, paragraphs and spaces between them.


After those 3 main rules I started working on the details. I wanted the website to be a one pager web, so it would feel like a presentation, but without loosing the forth and back buttons of the browser, so the users wouldn't feel alienated. I achieved that with a smooth transition between pages, so it would look like a one pager, but wouldn't be one.

Then, to keep it simple, since the website wouldn't have many subpages it was enough with a “home” and “theme” buttons in the navigation bar.

Then to split the content I mainly used the headings, but since when you are scrolling fast they are not as easy to see, I also used lines to make clearer separations between groups of content.

Hi-Fi Protoype

After all this process I started working on the final design. In this phase I add the final details and fix any design problems that might show. portfolio figma