Revolutionizing Zubizi.com: A Technical Deep Dive into Using AstroJS, TailwindCSS, and GSAP

When we decided to rebuild Zubizi.com from the ground up, I knew we needed something faster, cleaner, and more maintainable than our existing Bootstrap and jQuery setup. What I didn’t expect was just how much of a difference the right technology stack would make.

In this post, I’ll share our journey of redesigning our company website using AstroJS, TailwindCSS, and GSAP - three technologies that transformed not just our site’s performance, but how we approach frontend development.

Why We Needed a Redesign

Our old website was fast enough. It worked. But as someone who’s spent years building ERP systems and business software for SMEs, I know that “good enough” isn’t really good enough when you’re trying to deliver the best possible user experience.

The main issue wasn’t that the site was broken. It was loading unnecessary scripts and CSS files from Bootstrap and jQuery that we weren’t even fully utilizing. Every visitor was downloading code we didn’t need. As CTO of a company that builds efficient solutions for businesses, this inefficiency bothered me.

I wanted something faster. I wanted clean code. And honestly, I wanted to work with modern tools that would make development more enjoyable and productive.

Discovering AstroJS: The Game Changer

I first heard about AstroJS through a Fireship.io video on YouTube (yeah, that guy is amazing). What caught my attention immediately was the speed and the component-based approach. AstroJS promised to ship zero JavaScript by default and only hydrate the interactive parts of your site. This was exactly what we needed.

The beauty of Astro is its “islands architecture” - you build your site with components, but only the parts that need interactivity get JavaScript. Everything else is just plain HTML. For a business website like ours, where most content is static, this was perfect.

During the initial build phase, AstroJS helped us drastically reduce page load times. We saw improvements immediately. The component-based system made it incredibly handy to organize our code. I could create a header component, a footer component, and reuse them across pages without duplicating code. It’s the kind of clean architecture we advocate for in the ERP systems we build for our clients.

TailwindCSS: Utility-First Styling That Makes Sense

TailwindCSS was the natural choice for styling. If you’ve never used it, the concept is simple: instead of writing custom CSS classes, you use utility classes directly in your HTML. At first, it looks weird. Your markup gets longer. But once you get used to it, you never want to go back.

The key advantage? Tree-shaking. TailwindCSS analyzes your code and only includes the styles you actually use. No more bloated CSS files with hundreds of unused styles. This aligned perfectly with our goal of eliminating unnecessary code.

But I’ll be honest - integrating everything wasn’t just smooth sailing with Tailwind itself. The real challenge came when we started working with GSAP and ScrollTrigger.

GSAP: The Animation Library That Tests Your Patience (In a Good Way)

GSAP ScrollTrigger was one of the hardest tasks to implement initially. I had no prior experience with it, and let me tell you, it was tough at first. But once you get it working? Chef’s kiss. Absolutely love it.

You know how learning to ride a bicycle works? Initially, everything’s tough. You wobble, you fall, you wonder if you’ll ever get it. But once you find that balance, it’s smooth as butter. That’s exactly what working with GSAP felt like.

We used GSAP primarily on the homepage hero section for smooth text and image transitions. The goal was to create something that would immediately grab a visitor’s attention and showcase the kind of polished, professional work we do for our clients.

The Homepage Hero: A Labor of Love (and Perfectionism)

The homepage hero section took longer than expected. Not because of technical limitations, but because I’m a bit of a perfectionist. I had so many options with TailwindCSS for styling and GSAP for animations. I kept building, deleting, rebuilding. I wanted the best.

I know there’s still room for improvement, but what we have now is good. Really good. The animations are smooth, the performance is excellent, and it genuinely engages visitors in a way our old site never did.

Challenges We Faced and How We Solved Them

Not everything went perfectly. We ran into an issue where animations were freezing on slower devices. This was a wake-up call. When you’re building on a fast development machine, it’s easy to forget that not everyone has the same hardware.

We fixed it by optimizing animation timings and being more careful about what we were animating. Sometimes less is more. You don’t need to animate everything - just the elements that truly enhance the user experience.

This is something we apply in our ERP systems too. Just because you can add a feature doesn’t mean you should. Software should solve problems, not create complexity.

The Results: Numbers That Speak for Themselves

Our previous site’s Google PageSpeed score was around 60-70 on mobile and 80-90 on desktop. After the redesign? We’re consistently hitting 98-99 on both mobile and desktop.

That’s a significant improvement. And it’s not just about bragging rights. Faster sites mean better user experience, better SEO rankings, and ultimately, more engaged visitors who are more likely to become clients.

When I showed the new site to a few friends, they were genuinely surprised. “It’s this crazy fast and still interactive,” one of them said. That validation felt good, not because of ego, but because it confirmed we were on the right track.

The Unexpected Benefits of This Tech Stack

One thing I didn’t anticipate was how well these three technologies would work together. The synergy between AstroJS, TailwindCSS, and GSAP enabled faster iterations and cleaner code than I expected.

AstroJS gave us the performance foundation. TailwindCSS made styling quick and consistent. GSAP added that layer of polish that makes the site feel premium. Together, they created a development experience that was actually enjoyable.

In the ERP systems we build at Zubizi, we always talk about how software should adapt to how people work, not the other way around. This tech stack felt the same way. It didn’t force us into rigid patterns. It gave us flexibility while maintaining structure.

What I Would Do Differently

If I were starting this redesign again, I would allocate more time upfront for team training on TailwindCSS. The utility-first approach is different from traditional CSS, and there’s a learning curve. Investing in proper training earlier would have sped up development even more.

I’d also spend more time planning the animation strategy before diving into GSAP implementation. Having a clear animation style guide from the start would have reduced the trial-and-error phase.

Key Takeaways for Developers and Technical Leaders

If you’re considering a similar redesign for your business site, here’s what I learned:

Choose performance-first frameworks. AstroJS isn’t the only option, but whatever you choose, make sure it prioritizes speed. Your users will thank you, and so will Google.

Don’t be afraid of utility-first CSS. TailwindCSS looks strange at first, but the productivity gains are real. The tree-shaking alone makes it worth considering.

Plan your animations carefully. GSAP is powerful, but with great power comes the responsibility to not overdo it. Animate with purpose, not just because you can.

Test on slower devices. What works on your development machine might struggle on a mid-range smartphone. Always test performance on lower-end hardware.

Invest in learning time. New technologies require upfront investment. Budget time for your team to learn properly. It pays off in the long run.

Why This Matters for Business Software

You might wonder why a CTO of an ERP company cares so much about website performance and modern frontend frameworks. The answer is simple: the principles are the same.

Whether we’re building a billing platform for a retail business or redesigning our company website, the goals are identical: create something fast, intuitive, and maintainable. Remove unnecessary complexity. Focus on what matters to the user.

The lessons we learned from this redesign directly inform how we approach our client projects. When we talk to SMEs about building custom ERP systems, we bring this same mindset. We don’t just throw features at problems. We craft solutions that are efficient, clean, and built to last.

Final Thoughts

Redesigning Zubizi.com with AstroJS, TailwindCSS, and GSAP was one of the most rewarding technical projects I’ve worked on recently. It reminded me why I got into programming in the first place - that satisfaction of building something that works beautifully and efficiently.

If you’re a developer or technical leader considering a similar approach, I encourage you to give these technologies a try. Start small, maybe with a landing page or a side project. Get comfortable with the component-based thinking of Astro, the utility-first approach of Tailwind, and the animation power of GSAP.

The web development landscape keeps evolving, and that’s exciting. These tools represent where frontend development is heading: faster, more efficient, and more enjoyable to work with.

Have questions about our redesign process or these technologies? Feel free to reach out through the contact page. I’m always happy to discuss technical approaches and share learnings from our journey building software that actually helps businesses grow.