February 13, 2025

How I Created This Professional Web Portfolio

A portfolio is an opportunity to showcase your skills and let people learn more about you. But more than that, I had a ton of fun creating mine!

cover-image-How I Created This Professional Web Portfolio

I’ve always wanted to have a cool portfolio to showcase my skills and create a space where I can regularly update my side projects and articles, because I love coding and, lately, writing. The main goal when building this was to create a minimalist-designed website with content management functionality.

Some people might consider using Next.js for a web portfolio an overkill, but at the end of the day, we’re here for the fun and the learning 🥳, so I decided to build the app with it. Since the first time I tested the framework to build a small JWT login application, I’ve been curious about what I could create to thoroughly test Next.js's developer experience and features. So far, it has been highly rewarding and smooth to use.

I was surprised at how straightforward it is to create a full-stack app with Next.js, but I'd probably not recommend it for someone who doesn't have experience with React.

The app is mainly divided into two sections:

    1. The public side of the app, which includes the Bio, Projects, and Articles views.
    1. The admin side of the app, which allows for Create, Update, and Delete operations on the data.

Regarding the UI, I wanted it to reflect my own style, but at the same time, I didn’t want to take the risk of styling the components from the ground up. So, I went with Chakra UI, an old trusted friend of mine.

For handling backend-database communication and models creation, I used Prisma, which I found great for easy CRUD operations but a little bit awkward for more advanced queries. This may be because it was my first time using it, and I'm more familiar with raw SQL or the built-in Django ORM. Anyway, by the end of the development, I was able to move at a decent speed with it.

I made an error while developing the app that cost me a good amount of time. I was using server actions for GET requests as well, which I later found on Reddit was considered bad practice. So, I had to rebuild the API. Human errors aside, the experience with Next.js was great, and I'm already thinking about the next thing I’m going to build with it 💙.