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.
View Live Site →
Overview
WebRift is my web development agency. The site needed to communicate one thing clearly: I build professional, high-quality digital products. No template could do that — the site itself had to be the proof.
I designed the entire visual identity: a dark, minimal aesthetic with electric blue accents, brutalist typography using Syne for display and Space Mono for labels, and a hand-crafted design system with CSS custom properties for every token — colors, typography scale, spacing, borders, and effects.
Every animation is intentional. GSAP ScrollTrigger reveals sections as you scroll, a custom cursor tracks mouse movement with lerp smoothing, Lenis provides buttery-smooth scroll physics, and a tech marquee runs on an infinite GSAP timeline. No animation library beyond GSAP — every interaction is hand-wired.
Details
Custom Design System
Built a complete design token system with CSS custom properties — a 9-level gray scale, semantic color aliases, fluid typography with clamp(), a spacing scale, border tokens, and effect tokens (shadows, glows, noise). Everything is consistent and maintainable without a framework.
GSAP Animation System
Every section animates on scroll using GSAP ScrollTrigger. Hero lines slide in with staggered power4 easing, service cards fade up with delay offsets, stats count up when visible, and the about photo has parallax. All animations respect prefers-reduced-motion.
Custom Cursor & Smooth Scroll
A lerp-based custom cursor that expands on interactive elements using mix-blend-mode for a subtle inversion effect. Lenis smooth scroll integrated with the GSAP ticker for frame-perfect sync. Auto-hidden on touch devices. Character stagger on the hero name with a glitch effect.
Stack
Next Project