HTML
Lenscape — Editorial Photography Portfolio HTML Template
Lenscape — Cinematic Portfolio for Photographers & Visual Artists
A dark, editorial-quality HTML template designed for photographers, directors, and visual storytellers. Built with Tailwind CSS and vanilla JavaScript — no jQuery, no Bootstrap, no build tools. Just open and customize.
What's Included
- 4 hero variants — Image slider, static full-bleed, RGB glitch, and particle canvas
- 12 page sections — Hero, About, Stats, Portfolio, Plans, Services, Features, Recognition, Testimonials, Journal, Contact, Instagram
- Filterable portfolio grid — category tabs with grayscale-to-color hover effect
- Portfolio marquee — infinite horizontal scroll with size variants
- Testimonial slider — quote track + crossfading client portraits
- Plans / Pricing section — Portrait, Wedding, and Commercial packages
- Contact form — studio address, booking inquiry fields
- Off-canvas mobile drawer — smooth slide-in navigation
- Preloader — sliding accent line on page load
- Vertical social rail — brand-colored social icons (xl: and up)
- Video modal — any element with
data-videoopens fullscreen iframe - Documentation — complete setup guide with component examples
Tech Stack
- Tailwind CSS (via CDN — no build step)
- Vanilla JavaScript (no jQuery, no frameworks)
- Jost + Inter + Montserrat Alternates (Google Fonts)
- Heroicons (inline SVG)
- Zero Bootstrap, Zero build tools
Key Features
- Fully responsive (375px, 768px, 1024px, 1440px+)
- Dark cinematic aesthetic with warm tan accent (
#D4A574) - 6 reusable background patterns — cross, dots, diagonal, rings, aperture, grain
- Sticky navbar with scroll-aware background
- Scroll-spy active navigation states
- Prefers-reduced-motion support
- SEO-optimized with JSON-LD Person schema
- Semantic HTML5 structure
- Descriptive alt text on every image
- Lazy loading for below-fold imagery
- Easy to customize — swap colors, fonts, photos in minutes
- Well-documented with copy-paste component snippets
Home Variants (4 total)
- Default — auto-playing hero image slider
- Static — single full-bleed hero image
- Glitch — RGB-split animated hero effect
- Particle — animated particle canvas hero
Page Sections
- Hero (4 variants)
- About — photographer bio with signature
- Information — stats and counters
- Portfolio — filterable grid
- Plans — pricing packages
- Services — offerings list
- Features — workflow callouts
- Recognition — awards & editorial features
- Testimonials — sliding client quotes
- Journal — blog post grid
- Contact — booking form + studio address
- Instagram — feed marquee
Perfect For
- Editorial photographers
- Wedding & portrait studios
- Travel & documentary photographers
- Film directors & cinematographers
- Visual artists & creative directors
- Modeling and talent portfolios
No build tools. No npm install. Just open and go.
