Apex Build
Full multi-page marketing website for a fictional Texas-based general contracting company, built with a bilingual UX targeting the Austin construction market.
Home
Works
Services
Resources
Contact
Responsive Design
Mobile
375px viewport
Travel Filmz
Capturing Beautiful Moments
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.
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
About
Travel Filmz is a personal travel and lifestyle photography brand. Their work spans destinations around the world, with a focus on cinematic storytelling through stills and video. The portfolio is built around letting the imagery speak — clean layouts, a masonry gallery, and a lightbox experience that keeps the focus on the photographs.
Highlights
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.
Tags
PhotographyTravelPortfolioNext.jsReactTypeScriptTailwind CSSGlobal
Not sure where to start?
Other Projects
Grúas Y Maniobras Lucas
Bilingual website for a 100% Mexican crane rental company established in 1984, featuring a fleet of hydraulic cranes and industrial equipment for construction, mining, and energy projects.
BLNCD Engineering
Website + gated client portal for BLNCD Engineering — a California structural engineering firm that certifies generator systems (gensets) for seismic, wind, snow, and live loads under IBC standards.