Erwin Gepting
ExploreServices
product design, web design, frontend, backend, cms integration
Year
2025
What is Erwin Gepting?
Erwin Gepting is a cutting-edge portfolio website for a Hamburg-based Director of Photography. The site positions Erwin as a "Visual Storyteller by heart - bringing your Vision alive" through an immersive, cinematic web experience that showcases his work in commercials, fashion films, and brand storytelling.
Key Features
- Immersive Video Hero with masked text effects and smooth transitions
- Advanced Scroll Animations using Framer Motion and Lenis smooth scroll
- 3D Cursor Interactions with custom cursor animations and parallax effects
- Professional Video Integration via Mux with adaptive streaming
- Dynamic Project Gallery with category-based filtering (H World, Opel, ARES, Paco Rabanne)
- Parallax 3D Gallery on the "Who" page with React Three Fiber
- CMS-Powered with Sanity for easy content management
- Scramble Text Effects for sophisticated typography animations
- Vertical Cut Reveal animations for visual impact
- Mobile-First Design with adaptive video loading and touch optimization
- SEO-Optimized with dynamic OG images and metadata
- Multi-Language Support (German/English) with localized legal pages
- Cookie Consent Management for GDPR compliance
- Loading Screen with smooth entry animations
- Draft Mode for real-time content preview
Technical Highlights
- Built with Next.js 14.2 with App Router for optimal performance and SEO
- Styled using TailwindCSS with custom typography configuration
- Advanced animations with Framer Motion and Framer Motion 3D
- Smooth scrolling implemented with Lenis and Locomotive Scroll
- Content management via Sanity.io with custom schemas
- Professional video hosting through Mux with adaptive bitrate streaming
- Vercel OG for dynamic social media images
- 3D effects with React Three Fiber and Drei
- Custom video player theming with player.style
- Type-safe development with TypeScript
- Radix UI primitives for accessible components
- Deployed on Vercel with edge optimization
The Challenge
The primary challenge was creating a portfolio that matched the cinematic quality of Erwin's work while maintaining performance and accessibility. The site needed to:
- Showcase high-quality videos without sacrificing load times or mobile performance
- Create immersive scroll experiences that felt smooth and responsive across all devices
- Implement complex video masking effects within the hero text while maintaining browser compatibility
- Balance visual sophistication with practical content management needs
- Support German and English audiences with proper localization
- Handle large video files efficiently with adaptive streaming
- Provide an intuitive CMS for a non-technical client to update projects easily
- Maintain 60fps animations even with heavy video content and 3D effects
The Solution
We delivered a high-performance, visually stunning portfolio that seamlessly blends cinematic storytelling with modern web technology:
Video Architecture: Implemented Mux for professional video hosting with adaptive bitrate streaming. Created custom video hero components with masked text effects using CSS clip-path and blend modes. Preview videos autoplay inline while full-quality videos load on-demand in a custom lightbox modal.
Animation System: Built a comprehensive motion system using Framer Motion with custom variants for consistent animations. Integrated Lenis for buttery-smooth scroll performance and implemented scroll-triggered animations with useScroll hooks. Created reusable motion components including scramble text effects, vertical cut reveals, and 3D parallax transformations.
CMS Integration: Configured Sanity with custom schemas for projects, categories, hero sections, and about content. Implemented draft mode for real-time preview, orderable document lists for project sequencing, and Mux plugin integration for seamless video management. Added TypeScript type generation for end-to-end type safety.
Performance Optimization: Implemented lazy loading for videos with intersection observers, code splitting with Next.js dynamic imports, and optimized images through next/image. Utilized Vercel Edge Functions for dynamic OG images and implemented route-level caching strategies.
User Experience: Created a custom cursor that responds to video interactions, implemented category filtering for project navigation, and built a 3D parallax gallery on the "Who" page. Added loading screens with smooth transitions and cookie consent management for GDPR compliance.
The result is a portfolio that not only showcases Erwin's cinematography but serves as a testament to what's possible when creative vision meets technical excellence.
Project Showcase
