Portfolio Website

Background

Slowly building this website. If you are curious, here’s my building and thought process.

For reference, here’s my previous website

Reasons for rebuilding it

Why I want to rebuild the website:

• It was my first serious website, which resulted in messy code.
• Don’t really like the styles of it, especially the dull colors.
• Have Dark and light mode. Explained and shown more here: Theme Switching
• (Still WIP) Want to separate between web dev and game dev. Maybe have different themes for each site? Thinking of web dev being a modern website and game dev be a website with some gaming elements added. Something like: https://bruno-simon.com/

Main Features

Theme switching

Has clean transitions between the 2 themes, without any sudden colors changes. Note that light theme is still WIP.

Click on the Sun/Moon icon on the top right to try it!

Project filtering

Filtering options:

• Search by Title
• Filter by including & excluding tags
• Sorting by Rank

Easy to add projects

Left: Webpage, Right: Markdown

Uses markdown, making adding new projects very easy. No need to write full pages in HTML and CSS for every project! Mainly thanks to Astro’s Markdown and Content Collections.

Fast to load

Uses Unlighthouse which uses Google’s Lighthouse to scan the entire website.

Note that though there are some pages that are slightly slower to load, it’s only because those pages have either a lot of images or have large gif sizes. The full page will load normally, while slow to load images/gifs will load separately and appear without any layout changes.

Smooth animations

Including the animations shown in the Theme Switching and Project Filtering sections, there are lots of smooth animations around the website.

Other smaller features

• Automatic Table of Contents based on headings in markdown
• Infinite scrolling project thumbnails in home page

Credits

Here’s a list of all the assets I used (mainly icons): Credit Page