# Photography Portfolio Template

A refined, elegant photography portfolio template built with the RSL Framework. Inspired by premium photography platforms like Zenfolio and Jose Villa's aesthetic.

## Features

- **3-Page Design**: Home, Portfolio, and About/Contact pages
- **Masonry Gallery**: Responsive grid layout with category filtering
- **Lightbox Viewer**: Full-screen image viewing with keyboard navigation
- **Testimonial Slider**: Auto-advancing client testimonials
- **Contact Form**: Styled form with validation
- **FAQ Accordion**: RSL Classic Accordion component (ADA compliant with keyboard navigation)
- **Instagram Feed**: RSL Thumbnail component with hover overlays
- **Dark/Light Mode**: Full theme support with smooth transitions
- **Accessibility Widget**: Built-in accessibility options (text-to-speech, zoom, etc.)
- **Responsive Design**: Mobile-first approach, looks great on all devices
- **Smooth Animations**: Scroll-triggered animations and hover effects

## Pages

### Home (index.html)
- Hero section with parallax background
- Introduction/about teaser
- Featured work gallery
- Services overview with pricing
- Client testimonials
- Instagram feed section
- Call to action

### Portfolio (portfolio.html)
- Category filtering (All, Weddings, Engagements, Portraits, Editorial)
- Masonry grid layout with varied item sizes
- Lightbox image viewer
- Keyboard navigation support

### About (about.html)
- Photographer bio and story
- Photography philosophy section
- Awards and features
- FAQ accordion
- Contact form with validation
- Contact information and social links

## Customization

### Colors
Edit the CSS variables in `photography-portfolio-style.css`:

```css
:root {
    /* Core Colors */
    --color-bg: #ffffff;
    --color-bg-alt: #f8f6f3;
    --color-text: #2d2d2d;

    /* Accent Colors - Change these for your brand */
    --color-accent: #c9a96e;
    --color-accent-dark: #a88d4e;
    --color-accent-light: #e8d5a8;
}
```

### Typography
The template uses Google Fonts:
- **Headings**: Playfair Display (elegant serif)
- **Body**: Lato (clean sans-serif)

To change fonts, update the `@import` URL and font variables.

### Images
Replace the placeholder images in the `images/` folder:
- `image-01.png` through `image-12.png` - Gallery and section images
- Add your own photos with similar aspect ratios

### Content
1. Update the photographer name in the navigation and footer
2. Replace testimonials with real client reviews
3. Update pricing in the services section
4. Add your real contact information
5. Update social media links

## Accessibility

This template includes the RSL Accessibility Widget with:
- Text-to-speech functionality
- Page zoom controls
- High contrast mode
- Keyboard shortcuts
- State persistence

The widget is themed to match the template's gold accent color.

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🎯 Icons

This template uses **Font Awesome 6** icons for easy local preview. Icons work immediately when you open the HTML file directly in your browser.

### Why Font Awesome?

RSL includes its own zero-dependency icon system (300+ SVG icons), but SVG sprite icons require a web server to work due to browser security restrictions. Font Awesome works without a server, making it easier for you to preview and customize templates locally.

### Migrating to RSL Icons (Optional)

For true zero-dependency deployment, you can convert to RSL Icons:

**1. Include RSL Icons CSS:**
```html
<link rel="stylesheet" href="styles/rsl-icons.css">
```

**2. Replace Font Awesome icons:**
```html
<!-- Before (Font Awesome) -->
<i class="fas fa-check"></i>

<!-- After (RSL Icons) -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>
```

**3. Common icon mappings:**
| Font Awesome | RSL Icon |
|--------------|----------|
| `fa-check` | `rsl-icon-check` |
| `fa-times` | `rsl-icon-times` |
| `fa-chevron-down` | `rsl-icon-chevron-down` |
| `fa-camera` | `rsl-icon-camera` |
| `fa-image` | `rsl-icon-image` |
| `fa-images` | `rsl-icon-images` |
| `fa-envelope` | `rsl-icon-envelope` |
| `fa-phone` | `rsl-icon-phone` |
| `fa-instagram` | `rsl-icon-instagram` |
| `fa-arrow-right` | `rsl-icon-arrow-right` |

**4. Run a local server** (required for RSL Icons):
```bash
python3 -m http.server 8000
# Then visit http://localhost:8000
```

**Note:** RSL Icons work perfectly on any web hosting - the server requirement is only for local development.

See the [RSL Icons Documentation](../../docs/components/icons/index.html) for the full icon list and API reference.

## Credits

Built with [RSL Framework](https://github.com/gpowell13/Responsive-Slot-Layout-Git)

Icons: [Font Awesome](https://fontawesome.com)

Fonts: [Google Fonts](https://fonts.google.com)

## License

MIT License - feel free to use this template for personal or commercial projects.
