Panda Sleep Studio Portfolio
Frontend DeveloperImpact
- Built polished SPA with Vite + React 18, GSAP scroll-triggered animations, and custom lerp-based cursor system
- Implemented video-on-hover project cards, CSS marquee identity banners, and full-screen slide-down navigation drawers
- Designed complete warm-beige design system with 23.5KB hand-written CSS — no Tailwind or CSS frameworks
- Engineered Lenis smooth scrolling with GSAP ScrollTrigger integration for seamless scroll-driven animations
Skills
Project Abstract & Details
A polished single-page portfolio website for 'Panda Sleep Studio' — a fictional creative agency blending sleep culture with design technology. Built with Vite + React 18 featuring GSAP scroll-triggered animations, custom lerp-based cursor system, Lenis smooth scrolling, video-on-hover project cards, CSS marquee banners, and full-screen slide-down drawers. Warm beige aesthetic with hand-written CSS (no frameworks).
Key Features
GSAP Animations
Scroll-triggered animations with timeline sequencing — fade, scale, and translate effects on section entrance
Custom Cursor System
Lerp-based smooth cursor with magnetic attraction to interactive elements and state-based shape morphing
Video-on-Hover Cards
Project cards with hover-triggered video preview playback — loading spinner and mute toggle included
Pure CSS Design System
23.5KB hand-crafted CSS with warm beige color palette — no Tailwind, no CSS-in-JS, no frameworks
Lenis Smooth Scroll
Custom smooth scrolling via Lenis with GSAP ScrollTrigger synchronization for buttery scroll-driven animations
CSS Marquee Banners
Pure CSS marquee animation banners for brand identity text with seamless infinite scroll effect
Architecture
Single-page application (SPA) built with Vite + React 18. GSAP ScrollTrigger drives all scroll-based animations registered via useGSAP hook. Lenis smooth scroll replaces native scroll with configurable lerp easing. Custom cursor implemented as a React component tracking mouse position with lerp interpolation. Video-on-hover cards use IntersectionObserver for lazy loading and hover state management. Full-screen drawer navigation uses CSS transforms with GSAP timeline for enter/exit animations.
Architecture diagram placeholder