My Journey Creating xxvirus.pro: From React to Astro 🚀

My Journey Creating xxvirus.pro: From React to Astro 🚀

The Three.js Experiment

At the start of my web development journey, I learned React and some associated libraries. One day, I discovered Three.js and was impressed by how awesome it looked on other websites. Excited to learn, I took a course that involved creating a portfolio website with Three.js.

However, after completing the project, I realized that while Three.js is cool, it comes with a cost: tons of JavaScript and 3D model downloads. As a backend developer who prioritizes fast and efficient apps, I felt that having a few animations and 3D objects wasn’t worth the performance trade-off. Consequently, I scrapped the project without even pushing it to GitHub.

The Alpine.js Venture

Later, I heard about HTMX and similar web frameworks aimed at minimizing JavaScript and creating very fast apps. Inspired by this approach, I decided to create my website from scratch using Alpine.js. No external designs, no extra libraries—just Alpine and my own code.

I challenged myself by choosing to create a terminal-like design with a fully working shell emulation in JavaScript using Alpine. However, as I encountered various problems and got busy with my master’s projects, I unintentionally abandoned this project too.

The Astro Discovery

A few weeks ago, fate intervened when a web developer’s portfolio caught my eye on my timeline. I was immediately drawn to its simple yet catchy design, responsiveness, and speed. Although I couldn’t find the source code or identify the libraries used, it inspired me to create something similar.

Initially, I considered using React, but I knew it wasn’t the best choice for static websites like portfolios. After some research, I discovered Astro—a framework I’d heard of but never explored. It turned out that Astro was perfect for my needs.

The Final Stack

For my website, I settled on the following tech stack:

  • Astro (main framework)
  • React (for components)
  • Tailwind CSS (for styling)
  • shadcn/ui (UI components)
  • Various Tailwind CSS plugins

This combination worked seamlessly, allowing me to replicate the design that inspired me while adding my own touches.

Conclusion

After replicating the design and adding my personal touch, I was ready to deploy the website along with this blog post describing my journey. While this site might be replaced in the future, it deserves celebration for being deployed—otherwise, it would have been just another scrapped project in my portfolio.

This experience taught me the value of exploring different frameworks and finding the right tools for specific needs. It also reinforced the importance of perseverance in web development, as each “failed” project contributed to my learning and ultimately led to a successful outcome.