The Stack Behind 4ugusta.dev

When I set out to rebuild my portfolio, I wanted something that felt alive — not another static grid of project screenshots. Here's every technical decision I made and why.

The Foundation: Next.js 16 + React 19

I chose Next.js 16 for its App Router, server components, and the new React 19 features. The portfolio is mostly static — no database, no auth — so the pages are pre-rendered at build time.

// The layout is minimal — just font loading and providers
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${outfit.variable} ${geist.variable}`}>
      <body><Providers>{children}</Providers></body>
    </html>
  );
}

The Particle System: Three.js + R3F

The "4" made of 15,000 particles is the hero element. It uses Three.js via React Three Fiber, with a custom web worker that samples points from a font glyph.

The key challenge was random sampling. Sequential sampling of ordered point arrays causes the bottom of the character to clip when the particle count is lower than the source points. The fix: random sampling with a seeded PRNG for deterministic results.

Animations: GSAP + ScrollTrigger

Every section uses GSAP ScrollTrigger for scroll-driven reveals. The critical learning: on portrait devices (tablets in portrait, phones), start: "top 95%" is necessary or content stays invisible.

Responsive Design

The responsive system uses three utilities:

fluid() — scales a value between min and max based on viewport width
useViewport() — returns physics values adjusted for screen size
useBreakpoint() — structural layout switches only

Mobile doesn't get a scaled-down desktop — it gets a fundamentally different DOM layout.

What I'd Do Differently

If I rebuilt this tomorrow, I'd use CSS @property for more animations and reduce the Three.js bundle size with tree-shaking. The particle system alone adds ~150KB gzipped.