Rebuilding my portfolio website

Hello world

I have just redesigned my portfolio site and built everything from the ground up. The first iteration of my website was built with HTML, CSS, and JS. But, as you know, we don’t like simple developers. We often find more complex ways of doing simple things. I’m guilty of the same, to some extent. For the second version, I went for Gatsby. This is now the third iteration, built with Astro and deployed on Netlify.

So, let’s talk about my new design, the motivations behind redesigning and rebuilding my site, and the thought process behind how everything was done the way it was done.

The technology

First and foremost, this website uses Astro, yet another framework for building sites. Astro defines itself as an “all-in-one web framework designed for speed.” And I agree.

Astro has a simple learning curve, primarily if you’ve worked with other JavaScript frameworks like React and meta frameworks like Nextjs. Therefore, the “speed” in its description is not just about the performance benefits but also the speed at which you can get your ideas to life.

One of the reasons for switching to Astro was the simplicity of adding integrations, especially blog integrations, since I intended to set up a blog. Astro makes it easy because it’s mainly built as a static site generator (or at least that’s what I understand from hours of reading the docs), unlike React and other JavaScript-heavy frameworks.

You can pull content from different CMS platforms in Astro, like WordPress, Ghost, Contently, etc., without breaking a sweat by using dedicated integrations. Despite that being the case, this blog uses MDX, so I’m writing all my articles in markdown and displaying them.

Like Nextjs, Astro uses file-based routing, so I don’t have to put a slug in frontmatter. I wanted to have a slug property and pull my URLs from there. Then it hit me that I could easily duplicate url slugs if I became consistent with my writing. File-based routing means I won’t be able to have similar file names and hence unique URLs.

I chose to deploy the site on Netlify because its cheap free 🙂

Why rebuilt from scratch?

The previous version of this site used Gatsby, but I didn’t develop it myself. I used a template that I later discovered was hard to customize. Reason being, well, I probably didn’t understand Gatsby enough.

Let’s talk about design

The design looks roughly like what I envisioned and designed, but not exactly. The current design is not final and probably won’t ever be finished, but hey, it’s a good starting point.

I wanted to keep everything simple and dark. The latter didn’t happen; I took a step back while developing and decided light mode doesn’t hurt. Technically speaking, dark mode is a little hard to pull off because of accessibility concerns.