( Connect )
Menu
Major Sections
Service Hub Pages
Custom Build
Emily Riskas needed a portfolio website that would serve as both a showcase for her cinematography work and a professional service hub. Traditional portfolio sites often feel static or overly flashy. For a Director of Photography, the site itself needed to demonstrate mastery of visual storytelling, timing, and composition, the same skills Emily brings to every production.
The site needed to:
The design follows a minimalist aesthetic with maximum impact. Large typography, generous whitespace, and carefully selected imagery create a gallery-like experience. Colour is used sparingly, each project page features a custom colour scheme that reflects the mood of the work.
Every scroll, hover, and transition is choreographed using GSAP animations, creating a cohesive narrative flow from homepage to project detail pages. Motion design that feels intentional, not decorative.
(Key Features)
Cinematic Hero Sections
Dynamic Project Showcase
Service Hub Architecture
Process Visualisation
Full-Screen Mobile Navigation
Performance Optimisation
(Technical Implementation)
Cinematic Hero Component
Custom SectionHero component with GSAP ScrollTrigger. Uses sticky positioning combined with scrub-based animation to create a reveal effect as users scroll. Title bar animates upward based on scroll progress.
Font loading detection prevents CLS, animations wait for the custom Questrial font to load before triggering SplitText. This ensures character-level animations measure correctly and don't cause layout shifts after the initial render.
Project Showcase System
The /works section displays all projects in a responsive grid with auto-rotating image slideshows. Each project links to a detailed page featuring full-screen hero images with custom colour overlays and staggered text reveals.
Interleaved content blocks combine text and images in an editorial layout. Seamless “Next Project” navigation loops back to the start, encouraging visitors to explore the entire portfolio without hitting a dead end.
Mobile Menu Radial Wipe
The mobile menu uses CSS clip-path animation powered by GSAP. A circle expands from 0% at the top-right corner to 150% covering the full screen. Menu items reveal with staggered character animations using SplitText.
Social links are integrated at the bottom of the menu. Smooth close animation triggers on route change with body scroll lock during the open state, preventing background content from scrolling while the menu is active.
Service Hub Architecture
Rather than a simple Services page, we created a hub-and-spoke model. The main hub at /what-we-do provides an overview with three service cards linking to individual deep-dive pages.
Individual service pages cover Commercial Production, Creative Directing, and Post Production. Each uses the same hero banner system as project pages, maintaining visual consistency with unique colour treatments that reflect the mood of each discipline.
Performance Strategy
Logo image uses the priority prop for immediate loading. Hero images load eagerly with Next.js Image optimisation. Heavy Three.js components load dynamically after the initial render to avoid blocking the main thread.
Route-based code splitting ensures optimal bundle sizes for each page. Next.js automatic format conversion (WebP, AVIF) with responsive sizing handles image delivery. Below-fold content uses lazy loading to prioritise the critical rendering path.
A cinematic digital experience that translates the artistry of high-end cinematography into an immersive web portfolio. Every animation, transition, and interaction was designed to reflect the quality and intentionality of Emily's film work.
Performance optimised with comprehensive SEO metadata and structured data. Brand consistency maintained across all copywriting with a unified “we” voice. An immersive, app-like mobile experience that rivals native applications.
(Testimonial)
Emily Riskas, Director of Photography
6
Major Sections
100%
Custom Build
(Technical Stack)
Framework
Styling
Animation
Language
Icons
Fonts
We create immersive portfolio experiences for creative professionals , cinematographers, photographers, designers, and artists who need their digital presence to match the quality of their work. Every animation is intentional, every interaction is choreographed, and every page is performance optimised.
If you're a creative professional who needs a portfolio that does your work justice, let's talk.
Start your project