Dylan Habil
Filmmaker portfolio & personal website.
A cinematic personal website built for Kenyan filmmaker, conservation storyteller, and Founder of ALLDAY STUDIOS, Dylan Habil. The site showcases his filmography, documentary photography, awards, exhibitions, and services with a bold visual style that mirrors the tone of his work. Film-grain textures, custom cursor, scroll-triggered animations, and a hero slideshow set it apart from a typical portfolio.
The Brief
Dylan Habil is an audio-visual content producer at Ol Pejeta Conservancy, home to the world's last northern white rhinos. He's also Founder of ALLDAY STUDIOS, a platform for independent East African filmmakers. He needed a personal site that felt as intentional and cinematic as his film work, not a generic template. Something that could house his filmography, photography archive, exhibitions, fellowships, awards, and contact info in one cohesive experience.
How It's Built
Hero Slideshow
A full-height hero section with an auto-advancing image slideshow cycling through film stills. A floating card updates with the current film title and year. Navigation dots and a scroll hint complete the cinematic opening.
Filmography Section
All 7 films laid out in an editorial list format with thumbnails, descriptions, tags, and links. Each film row has its own metadata including genre, year, awards, and external links to FilmFreeway or YouTube.
Filterable Photography Gallery
A masonry-style gallery with 60+ images, filterable by category: wildlife, culture, conservation, people, nature, and landscape. Each image has a hover caption with title and category. Smooth filter transitions.
Exhibitions & Awards
A featured exhibition section with images from The Baraza Lens showcase. A recognition section with a scrolling logo marquee of organizations like Jackson Wild, African Wildlife Foundation, and Africa No Filter, plus 11 award/festival laurel images and a numbered awards list.
Film-Grain Aesthetic
SVG-based noise filter overlaid on the entire page for a subtle film-grain texture. Custom cursor with dot-and-ring that scales on hover. All contributing to a look that feels more like a director's reel than a website.
Scroll Animations & Responsive Nav
Intersection Observer-based reveal animations trigger as sections come into view. Mobile navigation with a hamburger menu and full-screen overlay. Stats counter animation in the hero. Fully responsive from desktop to mobile.
Screenshots
Hero
About
Recognition
Gallery
Exhibitions
Awards
Services
Contact
Key Highlights
Films Showcased
7
Gallery Images
60+
Award Laurels
11
Filter Categories
7
Fellowships Featured
5+
Sections
7
Tech Stack
Frontend
HTML5, CSS3, Vanilla JS
Animations
Intersection Observer, CSS Transitions
Effects
SVG Grain Filter, Custom Cursor
Forms
Formspree
Typography
Playfair Display, Space Mono
Hosting
Vercel