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-video opens 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)

1. Default — auto-playing hero image slider
2. Static — single full-bleed hero image
3. Glitch — RGB-split animated hero effect
4. Particle — animated particle canvas hero

Page Sections

1. Hero (4 variants)
2. About — photographer bio with signature
3. Information — stats and counters
4. Portfolio — filterable grid
5. Plans — pricing packages
6. Services — offerings list
7. Features — workflow callouts
8. Recognition — awards & editorial features
9. Testimonials — sliding client quotes
10. Journal — blog post grid
11. Contact — booking form + studio address
12. 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.