Full multi-page photography portfolio for a travel and lifestyle brand — pure CSS masonry gallery, native dialog lightbox, custom scroll animations, and AVIF image optimization, built with zero UI libraries.
Mobile
375px viewport
Masonry gallery on mobile
1-column layout with smooth fade-in as you scroll
Portal-based mobile menu
Slide-in panel with ESC support, scroll lock & focus management
Native dialog lightbox
Tap any photo to open full-size — no third-party library
AVIF + blur placeholder loading
Photos load progressively, fast on any connection speed
Travel Filmz is a photography portfolio for a personal travel and lifestyle brand. The site spans three pages — Home, Work Gallery, and Contact — designed around a warm editorial aesthetic with a near-black base, earthy amber and beige tones, and generous whitespace that lets the photography breathe. The gallery uses a pure CSS masonry layout, photos open in a native lightbox, and every interaction — from scroll animations to the mobile menu — was built from scratch without any external libraries.
Pure CSS Masonry Gallery
Column-based masonry layout (1/2/3 columns responsive) built entirely in CSS — no JavaScript calculations, no Masonry.js, no react-photo-gallery.
Native Dialog Lightbox
Click-to-open full-size image viewer built with a native HTML dialog element — no third-party lightbox library, keyboard accessible by default.
Custom Scroll Animation System
Scroll-triggered fade-ins across all major sections via a custom useInView hook using IntersectionObserver — no GSAP, no Framer Motion.
Portal-Based Mobile Menu
Slide-in right panel rendered via React portal with ESC key support, scroll lock, focus management, and auto-close on route change.
AVIF Image Pipeline
All 12+ portfolio photos served in AVIF format with blur data URL placeholders via Next.js Image — maximum compression at high visual quality.
Word-by-Word Hero Animation
Staggered text reveal (70ms per word) built with inline CSS transitions — no animation library, fully respects prefers-reduced-motion.
Not sure where to start?
Full multi-page lead-gen site for a granite countertop company serving 30+ cities across Utah, Idaho, and Wyoming — 3-step MT-aware booking wizard, middleware city routing with cookie persistence, auto-generated SEO landing pages, and a dual-nav system — zero UI kits.
6-page personal brand site with custom bilingual EN/ES support (900+ line translations file, no i18n library), History API client-side routing, Intersection Observer scroll animations, floating orb background, live YouTube + Spotify API feeds, and a hero background video — zero UI component libraries.
Complete accounting and finance solution for growing businesses—from bookkeeping to fractional CFO services and strategic tax planning.
