Hello everyone! This is my first post and it will be about how I created this website.

Let’s just start with the fact that I’m definitely not a designer. Most of my websites just look very basic and I like it that way.

Inspiration #

This website takes heavy inspiration from Anh, I really liked how clean and simple her website was so I decided to make mine similar to hers. She does amazing work, her halloween homepage/comic is such a great idea! (And looks scary as hell!) You should definitely check it out!

Why a new website? #

All my previous websites used plain HTML, CSS and JS along with some helpful libraries like Bootstrap or Tailwind. I wrote every single line of code and I was happy with the results. But having to update the code each time I wanted to add a new post was a bit annoying. So I decided to use a static site generator to help me with that and possibly make the website faster.

I wanted to limit my JS usage to the bare minimum, I’m currently only using to show images in a modal and for a small easter egg during halloween (but that file is only loaded for halloween). Having a fast and light website was one of my main goals and using a static site generator helped me achieve that by minimizing the amount of JS that is bundled with the website.

Using a static site generator also made it easier to add new posts, I just have to write a markdown file and the website is updated automatically.

Seasons #

I always loved that my old website had a different theme for each season and I wanted to maintain that. The way I changed seasons in the last one was manually changing the CSS file, but now I wanted to make it automatic. I used the SSG to generate a date variable and based on it I change which CSS file is loaded, removing the need for me to manually change it.

assign dateString = "today" | date: "%m-%d"
if dateString >= "03-20" and dateString < "06-21"
  assign season = "spring"
elsif dateString >= "06-21" and dateString < "09-22"
  assign season = "summer"
elsif dateString >= "09-22" and dateString < "12-21"
  assign season = "autumn"
else
  assign season = "winter"
endif

Performance #

I achieved a 100-93-100-100 score on Google Lighthouse for performance, accessibility, best practices and SEO. The 93 score on accessibility is due to the colors I chose for the light mode of the website, in dark mode, the score is 100-100-100-100. I also received an A+ score on Website Carbon Calculator, making this homepage cleaner than 96% of all webpages globally.