Creating This Website

Initial plans

I knew I wanted to build some kind of personal site but I didn’t really know how I wanted to do it. Without any true experience in web development, I didn’t really know where to begin, either.

When I was doing some preliminary research, It felt like I was constantly being bombarded with React or Next.js. I’m sure they are great frameworks but it felt overkill to use them for something simple like a personal website.

I had initially settled on htmx but I somehow stumbled upon the Astro docs and saw some examples and decided to give it a go.

Getting started

I involved my good friend Piotr from the beginning because he does frontend development professionally. He uses TailwindCSS on a daily basis and he managed to successfully recruit me into the Tailwind club. After some basics and general discussion, I (we) started with the nav bar. Two weeks of education via nav-bar later, I moved on to the rest of the site.

At some point, I discovered the existence of TailwindCSS component libraries and was immediately captivated by daisyUI. I messed around with it for a while and ultimately decided to implement their theming system to manage my colors and dark/light modes. Overall, I don’t regret this decision. It has made theme management fairly simple.

The dark/light mode toggle

The Astro base template shipped with a button that shot out confetti when you clicked it and I thought that was really sick. So, as an homage to the template and as a cool micro-interaction, I read through the documentation to figure out how to modify the confetti and then added it to my dark/light toggle button.

Gradients

When I started working on the Footer, I discovered the existence of gradients and animating them. I proceeded to use these in various places on this site because I think they look appealing. I tried to keep the implementations tasteful but I may have gotten too aggressive with it.