Why Build From Scratch?
Most agency sites use templates or page builders. We built ours from the ground up because this site is our portfolio — it should demonstrate exactly what we can do for clients.
The Stack
We chose a modern stack that prioritizes performance and developer experience:
- Next.js 16 with App Router for server components and static generation
- React 19 for the latest concurrent features
- Tailwind CSS 4 with OKLCh color space for perceptually uniform colors
- GSAP 3.14 for scroll-driven animations and complex timelines
Design System
Every color, spacing value, and typography scale is defined as CSS custom properties using OKLCh — a color space that produces perceptually uniform lightness steps.
Animation Architecture
We built a custom animation system on top of GSAP:
- ScrollTrigger drives all scroll-based animations
- DrawSVG handles line reveal effects
- SplitText powers character-by-character text animations
- Custom easing curves give everything a consistent feel
The constellation effect in the hero is a canvas-based particle system with parallax layers, twinkling stars, and diffraction spikes.
View Transitions
Page transitions use the CSS View Transitions API with a custom star-shaped mask.
Performance
Despite the heavy animation work, the site scores well on Core Web Vitals.
What We Learned
Building your own site is the hardest project because you are both the client and the agency.