• ...

This project details how I built my portfolio, the site you're browsing now. Note that I redesign my site every 1-2 years. This article will be updated to reflect the changes.

Overview of the project

Motivation and analysis

A personal website is a reflection of your brand, what you want to show to other people.

Goals and requirements

  • Easy to update
  • Showcase my skills
  • Ability to post blog posts
  • Contact form

Research

I studied and analyzed portfolios from a lot of people, specially those from the GDE Web Experts program. I noted that each one of them had their own distinct style.

Web stack and why

Nuxt

I started to use Nuxt soon after they added full static support and it's one of my favorite tools. It's no surprise that I picked it up for the project. Using Nuxt allowed me to play with Nuxt Content, API routes, static generation and other features.

Netlify

I used Netlify mainly because it supports forms, 10/10 Nuxt support and I can automatically deploy from GitHub.

Project stages

Designing the site

Every time I open Figma, in order to improve my skills and abilities, I try to create my best work so far. I believe that's a good way to surpass your limits and get out of your confort zone.

After some time looking for design inspiration on the Internet and world-class portfolios, I got a few ideas to implement.

Early Figma prototype of the site A prototype doesn't need to be pixel-perfect and the accurate final representation, but rather a playground to test your ideas and evolve.

Implementing the idea

Now it was time to make the idea come to life. I decided to go with Nuxt and UnoCSS since they're tipically my favorite stack to work with. After spending a weekend, the page was nearly finished. I made some changes compared to the Figma file above, which you should notice if you go to the homepage.

After getting everything to work, it was time to polish it. I ran multiple Lighthouse audits as well as my own testing using DevTools and while I got 100/100/100/100 scores, there was room for improvement, so I spent hours optimizing font files, testing on multiple screens and devices...until it was good to go.

Hosting it

Now it comes the fun part. Setting up the domain and making it available to the rest of the world. I chose Netlify as I've been their customer and user for years, and they were already managing the namespace of my domain for certain tools and even my own link shortener. At the time of publishing this blog, I'll have open-sourced it if you want to take a look at it.


I'm really happy with how fast the site was finished, and my friends liked the result. Got any comments or questions? Feel free to contact me.