Welcome to the dark side! Here, I am going to attempt to explain what powers my website. The first thing is what has been used.

Technologies used

I used SCSS without using external libraries. The decision to utilize SCSS, was to have complete control and efficiency in styling, allowing me to create novel complex animations. I used it with CSS modules, allowing styles to be isolated from other components and pages, ensuring a clean, modular, and maintainable codebase, which we know in CSS can get out of hand very quickly! Additionally, CSS modules results in significant space savings up to 70% when these are minified for production.

I reserved the power of HTML5 Canvas for the most intense and complex animations, like the section divider on the homepage. The section divider is a dynamic and random system where each bar moves independently, rising and falling in a carefully orchestrated, yet random, dance. To prevent collisions, each bar adheres to a set of underlying rules. The true challenge lies in the initial positions of these bars, which might lead to either a boring or a captivating animation. Furthermore, these bars interact with the mouse!

I chose Astro for my personal blog because of its unique ability to deliver static content efficiently. This framework only sends the necessary JavaScript, significantly speeding up page loads. This approach is especially beneficial for my blog, which primarily consists of static content.

For the dynamic elements of my website, such as the animated contact form, the interactive header, and the portfolio section, I opted for React. Its component-based architecture allows me to efficiently manage these dynamic sections. By leveraging Astro's 'client:load' directive, these React components are optimally integrated into my site. They are only loaded when needed, ensuring that the initial page load remains fast and efficient, aligning perfectly with Astro's performance-first approach.

Tests with Lighthouse

After some hard work optimizing I got all 100 in Lighthouse!

Lighthouse screenshot showing all 100 for this website

Some pure CSS tidbits

Buttons have quite of a interesting animation on mouse hover!

Primary button
Neutral button

The menu instead contains a first pure CSS animation for the mouse hover

For the mouse click instead, I didn't just want to have the bar moving with a CSS transformation, so I created an animation that is a combination between JavaScript and CSS.