Designer & Lead Front-End Engineer • 3 weeks
Live
Active Maintenance
A performance-focused, animation-driven portfolio designed to communicate engineering depth, architectural thinking, and attention to detail.
Built as a static multi-page site with deliberate motion, clean information hierarchy, and minimal runtime overhead.
This portfolio functions as both a professional surface and a controlled engineering environment. The goal was not to impress with excessive motion, but to use animation as a narrative tool — guiding attention, establishing rhythm, and reinforcing structure.
Rather than adopting a heavyweight framework, the site is intentionally built with HTML, TypeScript, and GSAP. This keeps the runtime simple, the mental model clear, and performance predictable.
Every interaction is designed with discipline: animations are scoped, state is explicit, and layout decisions prioritize readability and long-term maintainability over visual novelty.
Problem Scroll-driven animations can easily introduce jank, layout shifts, and excessive main-thread work, especially on lower-end devices.
Solution Animations were designed around transform and opacity-only properties, scrubbed timelines, and pinned sections where necessary, avoiding layout-thrashing and ensuring smooth rendering across devices.
Problem Without React or Vue, complex interactions risk becoming tightly coupled and difficult to reason about.
Solution Logic was organized around clear section boundaries, shared utilities, and typed data models, keeping animation orchestration, page initialization, and utilities decoupled and maintainable.
Problem Initial DOM rendering occurred before animation timelines were ready, causing visible flashes and layout instability.
Solution Critical elements were pre-styled using CSS and only revealed once GSAP timelines were fully initialized, ensuring a stable first paint.
