← Back to journal
Published on

Why I chose Astro and GSAP for my portfolio

How to achieve maximum mobile performance while delivering smooth, cinematic animations without slowing load times.

Modern web design often forces a difficult choice: prioritise raw performance, or deliver an animated, immersive visual experience. Many portfolios suffer from an overload of effects that slow navigation down, especially on mobile. A site that takes more than three seconds to appear is a site its visitors will abandon.

For my portfolio, my goal was clear. I wanted to combine optimal performance scores with refined animations. To do that, I paired two tools: Astro and GSAP.

Astro: Raw performance by default

Most modern JavaScript frameworks send a massive amount of code to the browser, even for pages that are primarily text. This penalises the initial load time.

Astro takes the opposite approach with its “Zero-JS by default” architecture. It generates static HTML files and sends no JavaScript to the client unless explicitly requested for an interactive component.

This technical choice delivers several concrete advantages:

  1. Fast server response time: Pages are pre-compiled and ready to be served instantly.
  2. Maximum scores in measurement tools: Lighthouse scores reach 100/100 without complex after-the-fact optimisation.
  3. Naturally easier indexation: Googlebot accesses clean, structured text content directly.

GSAP: Smooth scroll-driven interactions

While Astro handles the solid, fast structure, GSAP (GreenSock) manages interface animation. To avoid slowing the initial page load (the LCP), I applied strict integration rules:

  • No heavy animations above the fold: The first visible section (the Hero) uses very lightweight native CSS animations. This eliminates any visual rendering delay.
  • GSAP only for scrolling (ScrollTrigger): The GSAP library is loaded locally with the defer attribute. It only activates when the visitor starts scrolling, freeing up bandwidth during the initial display.
  • Smooth animations: By manipulating the DOM directly rather than going through a heavy reactive framework, transitions stay fluid even on mid-range mobile devices.

An alliance in service of results

This duo demonstrates that it is no longer necessary to choose between visual beauty and navigation speed. By designing the site carefully from the very first line of code, you get a showcase that is both performant and engaging.

Every technical decision on a site must have a precise objective: to improve the user experience and serve the business goals. It is with this same rigour that I design my clients’ projects.