How I built this portfolio

Building a portfolio is one of the best projects any developer or software engineer can have. It serves as a powerful way to market yourself and share your work and skills with the world. I have created three different portfolios (first portfolio, second portfolio, and this one), each with its unique theme and style, but all focused on one goal: to showcase my work and make myself marketable to future partners, employers, and clients. As a freelancer, having a portfolio is crucial. It allows me to demonstrate my skills, build trust with clients, and attract potential opportunities. A well-crafted portfolio helps me stand out from the competition and shows what I can offer in a crowded marketplace.

As a freelancer, having a portfolio is important. It allows me to demonstrate my skills, build trust with clients, and attract potential opportunities. A well-crafted portfolio helps me stand out from the competition

In this blog, I want to share an overview of how I built this portfolio. I will explain how I decided what it would look like, how I chose the tech stack, and what makes this portfolio different from my others. I will also share what I learned while building this site. You can find the code for this portfolio on GitHub.

Building My Portfolio

I built this portfolio from scratch using Astro and Tailwind. Normally, when I start a project, I do a lot of planning. This includes deciding what it will look like, choosing fonts, colors, spacing, and typography, as well as selecting the right tools and best practices for implementation. This planning gives me a broad vision of what I am going to build and helps me develop more efficiently.

In most cases, this approach can make development smoother, but sometimes overplanning and overthinking can lead to delays and unfinished projects. I tend to overthink even the smallest details because I want everything to be perfect. While working on this portfolio, I found myself stuck for days without making any progress. Then, it hit me: what if I stopped overthinking and just built it?

So, I decided to ignore my tendency to overthink. I built this site without creating a design in Figma, even though I had some inspiration for its look. I didn’t overdesign it or overthink the tools I would use. The result turned out to be exceptional.

“Perfection is the enemy of progress.” – Winston Churchill

The tools I used

  1. Astro - Astro is a modern web framework designed for building fast, content-rich websites. I chose Astro for my portfolio because it excels in static site generation, making it an ideal choice for a project that doesn’t require dynamic content.

  2. Tailwind CSS - Tailwind CSS is a utility-first CSS framework that I used to style my portfolio. I am already familiar with Tailwind, which made it easier for me to build.

Design Decision

As you may have noticed, the design of this portfolio is different from my first two portfolios. Initially, I struggled to decide on a good design for this site. I had the option to either replicate the design of my second portfolio or choose a more modern or even a renaissance style. I spent days iterating and changing how the site would look.

Since I’m not a professional designer and only use Figma casually, I realized that I was spending too much time on the design aspect. To overcome this, I made the decision to simplify my approach. I chose to go with a minimalist design—straight to the point—because that’s what a portfolio should be.

The primary goal of this site is to introduce myself, showcase my skills, highlight the projects I’ve built, and provide a way for people to contact me. While I can demonstrate my ability to create well-designed sites in other projects, this portfolio focuses on clarity.

How This Is Different from My Other Portfolios

The first portfolio I built was created using React (v17). I chose this tool because I was learning React at the time and wanted to improve my skills.

For my second portfolio, I used Next.js. I choose this framework because it offered great interactivity, which was essential for the features I wanted to implement. One of the standout features was a terminal-like interface where users could type commands, making Next.js the best choice for that functionality.

While my previous portfolios focused on showcasing my skills with specific frameworks, this one emphasizes simplicity and clarity.

What I Learned Creating This Site

Building this portfolio taught me that if my goal is to perfect every tool and piece of code, I will struggle to make progress and my learning will be slowed down. Overthinking and overengineering a simple site is not beneficial.

The key is that as long as your project serves its purpose, you’re on the right track. Minimal design can be just as effective as overdesign.

Planning for the Future of This Site

I will continue to update this site as I improve my skills. My goal is to enhance the portfolio and add tools that can improve both the site and the developer experience.

I don’t have a complete plan for how I’ll implement everything yet, and I expect there will be some iterations along the way. However, for now, I’m happy with this starting point.