The evolution of my portfolio website

So... new year, new portfolio website I guess. Well, not really. Even though it just so happens that I'm releasing this new website at the start of the new year, I've been working on it for a while now, and I'm really excited to finally release it.

This is actually my first portfolio site that has a blog section, so I thought it would be fitting to write a blog post about the evolution of my portfolio website and how it got to where it is today.

Where it all started

So the first version of my portfolio website was last updated, well according to the git history, about 3 years ago, but I know I used this for quite a while even before that.

Sadly, I no longer host it anywhere so I can't show you a live version of it, but I do have some screenshots of it. In the first screenshot above, you can see the landing page of the website and in the two screenshots below you can see the about and the projects section.

This website was made with plain old HTML, CSS, and JavaScript. I didn't use any frameworks or libraries, and I didn't use any build tools either. I just wrote the code in my editor and uploaded it to github pages.

Probably the coolest part of this site was how I managed to make my projects section completely dynamic, because it would always fetch my repositories from Github and display them here (that's why you see my newer projects as well on the screenshot).

The whole design of this site is pretty simple just as its content (I really didn't overthink that about section huh) but I did come up with the idea to use particles.js for the background of the site, which I thought looked pretty cool.

The second iteration

Now the second iteration of my portfolio website was a bit more interesting. This version is actually still hosted, so I won't flood this post with screenshots of it, if you are interested go check it out at old.xeretis.me.

This version no longer used plain HTML, CSS and Javascript, but instead it used React and Mantine which was in hindsight a complete overkill for this site. It also used Three.js for the landing page which did in fact make it look pretty cool, but it also came with a great performance cost and increased load times, which ended up being one of the reasons I decided to make a new one after this.

In this iteration I ditched the dynamic projects section and opted for manually adding all the projects, thus ensuring that any visitor will not only see a more detailed description for each project but also screenshots. And of course I also included a more extensive about section.

The current version

Well, I won't include any screenshots for this one as you are currently viewing it, but let's just say it looks much better than the previous ones.

This version still uses React but now with Next.js which greatly increases performance and also removes much of the overhead that comes with a traditional React SPA application. Another interesting technicality is that I also use MDX for the blog posts in the brand new blog section.

The new features aside from the blog are a new home page with dynamic Github stats and a Spotify card as well (only visible when I'm listening to music), a new project section with support for multiple images per project, an even more extensive about section and a theme switcher.

Conclusion

So that's it, that's the evolution of my portfolio website. I hope you enjoyed reading this post and if you have any questions or feedback feel free to reach out to me through email.