Creating a portfolio site

Once every few years, you might feel the urge to show the word your skills to cut and paste code from ChatGPT and websites across the internet, and to manage to push dead code and bugs to production.

Well, that time for me it's right now; so I headed on a quest to build a personal website/portfolio page.

Jokes aside, building a personal website it's a great opportunity to enhance your personal brand and online presence, which is a great asset to have in an era where attention it's very valuable and you need efficient ways to expand your network and open doors in your career.

Start with why

My first thought, was avoid my instinct to start building right away, but to take a few minutes to think intentionally about the direction I wanted for my portfolio page; so I could start small and iterate towards a bigger goal.

My priorities are:

  • To showcase my skills, in a way that can be useful for the people and fun for me.
  • To spark connections and create opportunities to meet and collaborate with interesting people.

And the principles I want to follow:

  • Better done than perfect.
  • Value creation.
  • Fun.

Choosing the technology stack and getting started

I've used a Vue + AWS stack for my last big project, so I wanted to come back to React for a while. Here's what I'm using right now:

React + Next hosted in Vercel.

I just love Vercel's documentation (the dashboard creation tutorial is fantastic, it includes data management, accessibility and error management) and they're the creators of Next.js. Platforms like Vercel can become expensive, but since I'm not expecting that much traffic, it seems like a good option to build something quickly.

TailwindCSS and other libraries were included right away. I'm still missing a components library; but I'd rather move on with a simple version 1, then head on to add more details.

And as a I've said before, I've been using Vue+Nuxt for a while, so a change is welcome (even though I ❤️ Vue). It's a great way to stay up to date and keep my skills sharp across different frameworks.

In summary:

  • Framework: React with Typescript + Next.js
  • Platform: Vercel
  • Styling: Tailwind CSS

Add content creation capabilities

Since I want to create value and build a more-dynamic portfolio page, I've decided to add a headless CMS; which allows me to get rid of the work required to create a text editor and manage posts (so I can focus on something funnier).

Also, good SEO can be huge over time.

My choice was Prismic.io. It integrates well with Next and allows me to add some customization plus it includes a free tier. It was important to also generate nice links to publish on social media, with proper previews.

I'm using it right now to write this post, I might review it in detail later.

💡As an alternative, I've used Amazon Lightsail, while not free, you can host a Ghost instance for blogging for less than $10/month. I've decided to test a headless CMS to address some personalization woes I've faced with a "full" blog.

A minimal brand

I didn't want to build something too generic. Also, in my experience, it's easier to build a site if you have the color palette available right away, so I went to Coolors and generated a ✨new and fancy✨ color palette, so I could store CSS variables to use in the future.

Also, a favicon was required, so I did a quick google search and found an AI tool to generate a cute little programmer avatar (no signup required ftw), to accompany the tab's title displayed in the browser.

A pixelated art depicting a programmer

And we're good to get started! Time to start building the version 0.0.1 of my personal website.