Why & How I rebuilt my site

• astro

  502 42,158 10.0 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

What really kicked of the new hype-train was my introduction to Astro from Theo. The concept of partial hydration instantly blew my away and its blazingly fast performance left me in awe. tl;dr on Astro: it's component syntax is super intuitive and its rich integration ecosystem makes it super easy to pick up. A more in-depth article on Astro is in the works. There's just so much to unpack here 🤯!

• Tailwind CSS

  1,276 78,166 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

For styling, I went all out with Tailwind CSS. This has been the most convenient experience I've had with styling and it comes built-in with an official Astro plugin. Tailwind also provides an elegantly styled of classes for markdown content, which is why the typography for this article 10x better than the previous iteration.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

What makes this combo truly incredible is the dark mode toggle, powered by Astro and Tailwind. This was where I tried out Astro's stellar feature of partial hydration. The only JS on this site comes from a tiny Svelte component which dynamically appends a 'dark' class to the entire site instantly. From here, tailwind handles the rest and voila we have dark mode!

Suggest a related project