This version of the site was designed from scratch after a very basic v1 that had been in place for a little over two years.
I used Figma throughout the process. I decided early on to rely on an animation library, so most of the motion was defined beforehand. Later in the browser (where I spend most of my time), I simplified parts of the original animation plan.
The fonts are Tablet Gothic and a variant of Baskerville. I’ve liked them since forever, so it was pretty nice to see they play well together.
For the color palette, I created light and dark themes that are automatically selected based on the user’s preferred color scheme. I also explored a set of experimental themes and ended up including three of them as additional options.
The site is built with Astro. It was my first time using it, and the experience of working through the docs and source code was great. It will likely become my go-to static site generator.
I use mostly plain-ish HTML, CSS, and TypeScript, with a few exceptions where plain JavaScript was required.
Animations are powered by GSAP. As mentioned earlier, the initial version had more motion and scroll interactions, but I removed some to keep things simpler. It had been a while since I went through the docs in depth, and the DX was really good.
Fluid font sizes were generated with Utopia. The hero shapes are tied to one of those values, but since CSS scale doesn’t support clamp, I replicated the calculations in TypeScript so they scale fluidly as well.
Everything on this site is designed and coded by me, without using generative AI.
This is not an anti-AI stance—I use it on a regular basis; even one of my side projects relies on it. I simply enjoy the process of building things myself when possible, and more importantly, I think using LLMs effectively requires a solid understanding of the underlying technologies. That’s also why I appreciated the quality of Astro and GSAP docs.