loading
What I Build Work Contact
← Back to Projects
Agency Website / Design & Development

WebRift

I designed both my agency site and personal portfolio from scratch — no templates, no frameworks. Hand-written HTML, CSS, and vanilla JavaScript with GSAP animations and custom interactions. Every pixel, every animation, every line of code is mine.

Role
Design & Code
Type
Static Site
Framework
None
Live
webrift.dev
View Live Site →
01

The Build

The site for my own studio, so it had to do two jobs at once: sell the work, and be the work. A brochure built on a framework I would have to keep upgrading proves nothing.

Roughly 500 lines of JavaScript and 2,300 of CSS, hand-written. Three scripts from a CDN. No bundler, no framework, no package.json.

Source
Hand-written HTMLone file per page, no templating
CSScustom properties, layered by concern
JavaScript~500 lines, no modules to bundle
Runtime
One rAF clockGSAP ticker drives Lenis, Lenis updates ScrollTrigger
Deploy
Static filesnothing to compile, nothing to install
3 CDN scriptsGSAP, ScrollTrigger, Lenis
Zero build steppush the folder, it is live
02

Engineering Decisions

01

No build step, on purpose

Constraint

A studio site I alone maintain, and will still be editing years from now between client projects.

Decision

Hand-written HTML, CSS and JavaScript with no bundler and no framework. What is in the repository is exactly what the browser runs.

Trade-off

No module system and no type checking, so structure has to be enforced by discipline rather than by a compiler. In exchange there is no dependency graph to rot — nothing to reinstall, nothing to migrate, and no build that breaks because a transitive dependency shifted.

02

Motion that gets out of the way

Constraint

The site is scroll-driven throughout. For anyone with vestibular sensitivity that is not a flourish, it is a reason to close the tab.

Decision

Every animation sits behind a reduced-motion check in both the stylesheet and the script. Those users land on the finished state immediately rather than on a half-played animation.

Trade-off

Two paths to keep in step, and it is genuinely easy to add an effect and forget the guard. The alternative is a site that excludes people, which is not a trade I was willing to make.

03

One clock for scroll and animation

Constraint

Smooth scrolling takes ownership of the scroll position, while the animation library reads that position to drive timelines. Left alone, they disagree.

Decision

A single animation frame loop: the GSAP ticker drives Lenis, and Lenis reports back to ScrollTrigger. One source of timing for the whole page.

Trade-off

The two libraries are now coupled, so upgrading either means re-testing the handshake. Two independent frame loops produce drift that only shows up on slow devices and is miserable to debug.

03

Stack

Markup
HTML5
Styling
CSS3
Logic
Vanilla JavaScript
Animation
GSAP + ScrollTrigger
Scroll
Lenis
Fonts
Google Fonts
Methodology
BEM + CSS Variables
Responsive
Mobile-First

Next Project

Ordering & Delivery Platform →