Introduction
This is going to be a sort of logbook and showcase of how I created my portfolio website. I will be going through each section and page, and explain some of the thought process behind it. While some components will have their own blog post with a more in depth description, I will try to describe the basics of each component here, as well as link to it. To start off, lets look at the tech stack for this project.
Last updated: 12. June 2024
Tech Stack
The tech stack for this project is as follows:
- Frontend: React, Astro, TailwindCSS
- Backend: Google Firebase with Firestore as Database
- Hosting: Google Firebase Hosting
- CI/CD: GitHub Actions
Home Page
The home page is the initial page you see when you visit the website. I am currently very happy with how it looks, but there has been a process to get to what you see today. I believe the home page is the most important page on a website, as it is the first impression a visitor gets of your website. Since the start of making the website I always knew I wanted a game as an element on the landing page, and initially I went with a 3D game made using Spline Design. The game allowed for the user to move using the arrow keys, but there was no goal and it was more of a tech demo than anything else. It did however offer color changes with the switch of theme from night to day, as showcased in my Spline Design blog post. To show the user which controls where used, I added the keys to the top left section of the screen for desktop users. Here is an image of how it looked:
To see a live demo, click here
After some careful consideration as well as testing, I decided to opt out of the 3D game, mostly due to reasons previously mentioned as well as the load time being too long and the information given to the user simply is not enough. I then decided to go with in a more standard approach, having an introduction section with some information about me as the first the user sees. To keep the interactivity and grab the users attention, I wanted to add a playable Gameboy to my design. More about how I created this can be read in its own blog post, Creating a Playable Gameboy. Long story short is that I created it firstly using an Image of a Gameboy pocket as the base and adding buttons and case on top of the picture. After some time, I discovered a person by the name of “TheAngularGuy” having created a similar component on his own site. I decided to take some inspiration from his in regards to how the buttons looked, while keeping the rest of my design the same. Here is an image of how it looks today:
While the Gameboy itself is not functional as of today, 12th of June, there will be playable games added soon enough. After the changes from our 3D game using Spline to the new Gameboy design, our performance metric increased from about 86 to 100 in Google Lighthouse testing. Feel free to test this yourself and give me feedback in regards to changes you think should be made. :)
