Back to all work
Marketing Site
TITAN Development
Animated portfolio site with project filtering and scroll-optimized interactions for NYC construction firm.
React 19TypeScriptVite
Overview
Marketing website for a NYC construction firm featuring custom scroll-triggered animation system via useIntersectionObserver hook, non-linear counter animations with requestAnimationFrame and ease-out-quart timing, and deployment-agnostic routing supporting both root and subdirectory paths.
Hard Problems
Challenge
Smooth scroll animations without jank on content-heavy pages.
Solution
Custom useIntersectionObserver hook with configurable thresholds, decoupled observation lifecycle from animation triggers.
Challenge
Supporting root and subdirectory deployments from same build.
Solution
Dynamic basename resolution via Vite import.meta.env.BASE_URL.
Key Decisions
| Decision | Chose | Over | Because |
|---|---|---|---|
| Animation system | Custom hooks | Framer Motion | Zero dependencies, full control, smaller bundle. Marketing site doesn't need declarative layout animations. |
Tech Stack
languages
TypeScript
frameworks
React 19Vite 7Tailwind CSSReact Router
tools
PostCSSESLint 9