Erwin Gepting

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:

1. Showcase high-quality videos without sacrificing load times or mobile performance
2. Create immersive scroll experiences that felt smooth and responsive across all devices
3. Implement complex video masking effects within the hero text while maintaining browser compatibility
4. Balance visual sophistication with practical content management needs
5. Support German and English audiences with proper localization
6. Handle large video files efficiently with adaptive streaming
7. Provide an intuitive CMS for a non-technical client to update projects easily
8. 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