First Version

My personal portfolio website, that has been remade multiple. The initial version was made in pure HTML/CSS/JS and is what is shown below. That website was made at the start of my undergraduate degree in software engineering at uOttawa.

I was also experimenting with design at the time to create a new portfolio, as you can see below:

Second Version

After I acquired more knowledge about React and JavaScript, I wanted a way to showcase my projects from GitHub on my website. Hence, I coded a script that would call the GitHub REST API and fetch the READMEs of all my public repositories. Here is my second portfolio. (Note: the projects page may not work since the GitHub API may have changed)

Third Version

I was not not satisfied again with the last version, so I improved on it and got rid of most of the modals and added my resume. I went for a darker design and changed how projects were fetched. Now the projects would be manually fetched and pushed to GitHub instead of doing the requests on the client’s browser (which in some cases would reach the GitHub API limit and would in return not show any projects on my website).

Current Version

I was not satisfied with the layout and the content of my website, so I decided to put some constraints on my design and write all the content for my website without using the GitHub API. I went for a retro hack feel where you could see the projects that I am working on, whether it be public or private repos on GitHub, and whether it be on GitHub or not. You are currently getting a feel of the current version of my portfolio.

This website is still using React with Gatsby (and multiples of its useful plugins) while all being written in TypeScript with the projects being written in markdown. For the styling, it is now using Tailwind.css which is a useful framework to style a website by only using CSS classes.

In addition, what I am currently listening on Spotify is now displayed on my portfolio. I wanted to share what I listen to, add a realtime feature, and add more content to my portfolio. I made the server open source, view my currently_playing_spotify project for more info.

Also, I have a CRON job running on GitHub Actions that verifies and updates the number of GitHub stars on my projects. If there changes, it will write to the appropriate files and commit them to the repository.

Moving away from Gatsby

Recently (around the end of 2022), I wanted to update my website again and decided to move away from Gatsby since it made use of a lot of JavaScript for a simple static website. My website now uses Astro without any React and minimal JavaScript. The website “feels” the same except that it is now a multi page application (MPA) instead of a single page application (SPA).

Here’s the comparison between the two versions for the loading the home page:

Over the same network, the Astro page was faster, made less requests, and used less data. In addition, Astro works if JavaScript is disabled (only some small interactive parts fail).