Why I Built My Agency Site From Scratch (And Why It Matters)

Most agency websites are built on templates. Mine isn't. Here's why that decision was deliberate — and what it says about how I approach every client project.

There's a version of this site that took two hours to build.

Pick a Webflow template. Swap the colors. Drop in a logo. Write some copy. Connect a domain. Done.

I didn't do that.

Not because I couldn't — but because the site is the pitch. Every potential client who lands here is making a judgment call in the first few seconds. If my own agency site looks like a template, why would they trust me to build something custom for them?

So I built it from scratch. Every component. Every animation. Every interaction. No shortcuts.

The Stack

The site runs on Next.js 16 with the App Router, Tailwind CSS v4, and TypeScript throughout. All visual effects — the star field, the Three.js globe on the home page, the parallax Earth horizon on the About page — are built on the Canvas API and Three.js, rendered completely outside the React tree to avoid reconciliation overhead.

The blog you're reading right now is powered by Sanity CMS, wired directly into the Next.js frontend via GROQ queries. No page rebuild required to publish — write, hit publish, it's live.

Deployed on Vercel with automatic preview deployments on every pull request.

Two Things That Were Harder Than Expected

The Scroll-Jacked Process Page

The Process page has a feature I'm particularly proud of: as you scroll through each of the 7 phases, the page temporarily locks, the current phase zooms into a centered modal, and only releases after you scroll past a threshold.

This is called scroll-jacking — and it's notoriously difficult to get right. Lock too early and it feels broken. Lock too long and it's frustrating. The key was using IntersectionObserver with a scroll direction ref — the lock only triggers when scrolling down into a phase for the first time, never when scrolling back up. The dismiss threshold is 120px of accumulated wheel delta, which feels intentional without being punishing.

The Satellite Scroll Tracker

The Services page has a pixel-art SVG satellite that travels diagonally across the screen as you scroll — top-left to bottom-right. It pulsates with rings that accelerate as it approaches the bottom, then bursts in a particle explosion on arrival.

The challenge was making the pulsation feel earned — slow and calm at the top, urgent at the bottom — without it feeling mechanical. The solution was decoupling the pulse duration from raw scroll percentage and instead mapping it to the satellite's actual travel progress, with acceleration only kicking in after 70% of the journey.

What This Site Is, Really

It's a proof of concept.

Every technique on this site — scroll-driven animations, 3D canvas effects, CMS integration, API routes, dynamic routing — is something I deploy on client projects. The site isn't showing off. It's demonstrating a standard.

When I take on a project, I build it the same way I built this: from the ground up, with intention, optimized for performance, and structured to last. No templates. No guesswork. No "we'll fix it later."

What Comes Next

I'll be writing regularly here — technical deep dives, business strategy for founders who need a digital presence, and breakdowns of projects as they ship.

If you're building something and you want it done right, the contact page is right there.

No pressure. No pitch deck. Just a conversation.

— Raymond CIMLAS Bespoke Solutions.