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.
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!
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!
Some pure CSS tidbits
Buttons have quite of a interesting animation on mouse hover!
The menu instead contains a first pure CSS animation for the mouse hover