# Ortiz Photography Portfolio Template

A minimalist, elegant photography portfolio template built with RSL components. Features large typography, smooth animations, and a sophisticated color palette perfect for photographers and visual artists.

## Preview

Open `index.html` in your browser to view the template.

## Features

- **Full-Screen Hero** - Large typography statement with scroll indicator
- **Animated Marquee** - "Let's create together" scrolling banner
- **Portfolio Gallery** - RSL Gallery with lightbox and hover overlays
- **Service Cards** - Clean card grid showcasing offerings
- **About Section** - Bio with stats and image
- **Testimonials** - Featured and card variants
- **Contact Form** - Modern RSL form elements with newsletter signup
- **Dark Mode Support** - Full light/dark theme toggle
- **Accessibility Widget** - Built-in accessibility features
- **Mobile Responsive** - Fully responsive design
- **WCAG 2.1 AA Compliant** - Skip links, semantic HTML, proper ARIA

## Pages Included

- `index.html` - Single-page photography portfolio

## RSL Components Used

- **Navbar** - Fixed navigation with theme toggle
- **Hero** - Full-height hero with centered content
- **Gallery** - Image gallery with lightbox effect
- **Cards** - Service offering cards
- **Testimonials** - Featured and card variants with star ratings
- **Form Elements** - Modern field tiles for contact form
- **Buttons** - CTA buttons with hover states
- **Grid System** - Responsive layouts throughout
- **Accessibility Widget** - User accessibility controls
- **Animate on Scroll** - Scroll-triggered animations

## Color Palette

```css
:root {
    --ortiz-charcoal: #1A1A1A;      /* Primary dark */
    --ortiz-cream: #FAF8F5;          /* Background light */
    --ortiz-gold: #C4A962;           /* Accent color */
    --ortiz-white: #FFFFFF;          /* Pure white */
    --ortiz-text-muted: #6B6B6B;     /* Muted text */
}
```

## Typography

- **Headings**: Playfair Display (Google Fonts)
- **Body**: Inter (Google Fonts)

## Customization

### Colors

Override the CSS custom properties in `ortiz-style.css`:

```css
:root {
    --ortiz-gold: #your-accent-color;
    --ortiz-charcoal: #your-dark-color;
}
```

### Typography

1. Update the Google Fonts link in `index.html`
2. Update `--ortiz-font-heading` and `--ortiz-font-body` in CSS

### Content

Replace placeholder content:
- Update photographer name ("Brandi Ortiz")
- Replace gallery images with your own work
- Update services and descriptions
- Replace testimonials
- Update contact information and social links

### Images

Current images use Unsplash URLs. For production:
1. Download or create your own images
2. Place them in an `images/` folder
3. Update `src` attributes in HTML

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included locally

## Browser Support

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

## Accessibility

This template includes:
- Skip navigation links (Skip to main content, Skip to gallery, Skip to contact)
- Semantic HTML5 elements
- ARIA labels and landmarks
- Keyboard navigation support
- Focus indicators with gold accent
- Reduced motion support (pauses marquee, disables animations)
- Color contrast compliant

## Inspiration

Design inspired by [ortiz-fluid-demo.squarespace.com](https://ortiz-fluid-demo.squarespace.com)

## Credits

Built with [Responsive Slot Layout (RSL)](https://rslayout.com)

Images from [Unsplash](https://unsplash.com)

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

## License

MIT License - Free to use for personal and commercial projects
