How I made this website

Motivation

Previously, I had a portfolio from a React template I purchased online. I set it up once and never touched it again. As years went by, I never updated the portfolio, so I was forever a 23 year old. I discovered the secret to eternal youth. I realized I needed something new badly, but I was always too lazy or too busy to actually create anything. Months went by, and my portfolio aged like a fine glass of milk left out in the sun.

Recently I watched Theo’s video reviewing amazing portfolio websites he was sent on Twitter. During the video, he showed 2 portfolios that really caught my eye due to their minimalist and effective designs. These were Paco’s and Nexxel’s, 2 amazing developers (go follow them). Their work was so good, it made me rethink my life choices. Nexxel built his portfolio taking inspiration from Paco’s. Seeing this, and being the creative developer I am, I decided to... well, let's say, 'embrace' Nexxel’s design.

Embracing Nexxel’s design

Nexxel’s GitHub repo is public, so the first thing I did was check it out. I noticed 2 interesting things. First noticed he built it with Astro, something I have 0 knowledge in, but that he used Tailwind CSS for styling, something I use daily at this point.

The second thing was that he uses mdx files to generate his blog posts. This sounded like a lot of work, and if there's anything I'm allergic to, it's unnecessary manual labor.

This revealed a problem. Knowing myself, I would build this website and never touch its’ code again, so I needed a way to easily update it, or else, it would get lost in time. This meant using a CMS, which are annoying and time-consuming to setup.

I checked the official Next js templates and saw an example built with Next 11 that used Notion as the CMS, and I love using Notion! It's like having a digital butler for your content. I also stumbled upon this npm package that converts Notion pages to perfectly formatted markdown. This is when I realized that I could use Notion to source the content of my portfolio, so I could easily update it through an app I already use daily.

The results

After bootstrapping a new Next js repo and getting some API credentials from Notion, I added some animations, some minor tweaks, and what you’re seeing is the result. This blog post was written entirely in Notion! The projects on the home page are also managed by a Notion database, and so is the resume page.

And then, I spiced things up:

• Shadcn/ui components and themes
• Dark and light mode
• Framer Motion animations

This means that the color palette of the site can be easily swapped with any Shadcn theme, making the site very versatile and easy to further customize. I’m saying this because I created a template repo for anyone to set up a portfolio just like this one, with Next 14 and Notion, in about as much time as it takes to pour a glass of milk and leave it out in the sun.

In my next article I’ll show you step-by-step how to use this template to quickly setup your own portfolio! I’ll also show you how to setup from scratch, but I don’t know why you would want to do that, but I won’t judge.