# Vinit Photography Website

A professional, fully responsive photography website template.

## File Structure

```
photography-website/
├── index.html                 ← Main HTML (single-page, all sections)
├── assets/
│   ├── css/
│   │   └── styles.css         ← All custom styles, CSS variables, animations
│   └── js/
│       └── main.js            ← All interactivity (nav, gallery, lightbox, form)
└── README.md                  ← This file
```

---

## Quick Start

1. **Unzip** the folder and open `index.html` in any modern browser
2. No build tools, no Node.js — it works out of the box
3. Edit text directly in `index.html`
4. Tailwind CSS is loaded via CDN — no install required

---

## Customization Guide

### 1. Replace Placeholder Images
All images use Unsplash URLs. Replace with your own by:
- Uploading photos to your server (or Cloudinary, ImageKit, etc.)
- Swapping the `src` attribute on each `<img>` tag
- Recommended sizes: Hero 1920×1080, Gallery 800×1000, About 800×1000

### 2. Change Your Name & Brand
In `index.html`, search and replace:
- `Lumière` → your studio name
- `Arjun Sharma` → your name
- `Mumbai` → your city
- `+91 98765 43210` → your phone
- `hello@lumiere.photography` → your email
- `123 Studio Lane, Bandra West` → your address

### 3. Colors & Theme
Open `assets/css/styles.css` and edit the CSS variables at the top:
```css
:root {
  --accent: #c9a96e;       /* ← Change this to your brand color */
  --bg-primary: #0a0a0a;   /* ← Dark background */
}
[data-theme="light"] {
  --accent: #9b7240;       /* ← Light mode version of accent */
}
```

### 4. Add/Remove Gallery Photos
In `index.html`, find the `<!-- Grid -->` section inside `#gallery`.
Each item follows this pattern:
```html
<div class="gallery-item" data-category="portraits">
  <img src="YOUR-IMAGE.jpg" alt="Description" loading="lazy"/>
  <div class="gallery-item-overlay"> ... </div>
</div>
```
Categories: `portraits` | `landscapes` | `weddings` | `street`

### 5. Contact Form — Wire Up a Backend
The form currently simulates submission. To make it live:
- **FormSubmit.co** (free, no backend): Replace the `<form>` action
- **Netlify Forms**: Add `netlify` attribute to `<form>`
- **EmailJS**: Add their SDK and call in the form submit handler in `main.js`

In `main.js`, find section `10. CONTACT FORM` and replace the `setTimeout` with a real `fetch()` POST.

### 6. Social Media Links
Find all `<a href="https://instagram.com"` etc. and replace with your actual profile URLs.

---

## Features Checklist

- [x] Dark / Light mode toggle (persists via localStorage)
- [x] Sticky transparent navbar → frosted glass on scroll
- [x] Mobile hamburger menu with full-screen overlay
- [x] Hero section with cinematic parallax background
- [x] Scroll-triggered fade-in animations
- [x] Featured work 3-column grid with hover zoom
- [x] Animated stats counter
- [x] Filterable gallery grid (All / Portraits / Landscapes / Weddings / Street)
- [x] Full-screen Lightbox with Prev/Next/Close + keyboard + swipe support
- [x] Works / Services section (6 service cards)
- [x] Photography Studio shop banner
- [x] About split-screen with skill bars
- [x] Contact form with validation + success state
- [x] Custom animated cursor (desktop only)
- [x] Fully responsive: mobile, tablet, desktop
- [x] ARIA labels and keyboard accessibility
- [x] Performance: lazy loading images, passive event listeners

---

## Browser Support
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

---

Built for replacement of placeholder content with your own photography.