# Shutter - Photography Portfolio Template

A modern, lightweight photography portfolio template built with Bootstrap 5.3.8 and vanilla JavaScript. Perfect for photographers, artists, and creative professionals who want a clean, fast-loading portfolio.

## Features

- **Bootstrap 5.3.8** - Latest Bootstrap framework with modern utilities
- **Vanilla JavaScript** - No jQuery dependency, lightning fast
- **GLightbox** - Beautiful, responsive image lightbox gallery
- **AOS Animations** - Smooth scroll-triggered animations
- **WebP Images** - Next-gen image format with JPG fallback
- **Mobile-First** - Fully responsive design
- **Photography Social Links** - Facebook, Twitter, Instagram, 500px, Flickr

## Pages Included

- `index.html` - Home page with photo grid
- `photos.html` - Extended photo gallery
- `bio.html` - Biography/about page
- `blog.html` - Blog listing
- `single.html` - Single photo gallery with lightbox
- `contact.html` - Contact form

## Quick Start

1. Download and extract the template
2. Open `index.html` in your browser
3. Customize the content, images, and colors

## Customization

### Primary Color

Edit `scss/style.scss` and change the `$primary` variable:

```scss
$primary: #ef6c57; // Coral/salmon (default)
```

Then compile SCSS:

```bash
sass scss/style.scss css/style.css
```

### Images

Replace images in the `images/` folder. For best performance, provide both WebP and JPG versions:

```html
<picture>
  <source srcset="images/your-image.webp" type="image/webp">
  <img src="images/your-image.jpg" alt="Description">
</picture>
```

### Social Links

Edit the social links in the `<ul class="social">` section of each HTML file.

### Google Analytics

Replace `G-XXXXXXXXXX` with your GA4 measurement ID in the `<head>` section.

## File Structure

```
shutter/
├── css/
│   ├── style.css          # Compiled CSS
│   ├── aos.css            # Animation library
│   └── glightbox.min.css  # Lightbox styles
├── scss/
│   ├── style.scss         # Main SCSS entry
│   ├── _site-base.scss    # Base styles
│   ├── _site-navbar.scss  # Navigation styles
│   ├── _site-blocks.scss  # Layout blocks
│   └── bootstrap/         # Bootstrap 5.3.8 source
├── js/
│   ├── main.js            # Site functionality (~80 lines)
│   ├── bootstrap.bundle.min.js
│   ├── aos.js             # Animations
│   └── glightbox.min.js   # Lightbox
├── images/                # Photo assets (WebP + JPG)
├── fonts/
│   └── icomoon/           # Icon font (social, UI icons)
└── *.html                 # Page templates
```

## Build Commands

```bash
# Compile SCSS
sass scss/style.scss css/style.css

# Watch for changes
sass --watch scss/style.scss:css/style.css

# Convert images to WebP
for f in images/*.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
```

## Browser Support

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

## Credits

- [Bootstrap 5.3.8](https://getbootstrap.com/)
- [GLightbox](https://biati-digital.github.io/glightbox/)
- [AOS - Animate On Scroll](https://michalsnik.github.io/aos/)
- [IcoMoon Icons](https://icomoon.io/)
- [Google Fonts - Quicksand](https://fonts.google.com/specimen/Quicksand)

## License

This template is provided by [Colorlib](https://colorlib.com/). Please check the license terms on the original download page.

## Version

**v2.0.0** - January 2026
