# Sanity Portfolio Gallery Setup

This project now supports a CMS-backed image gallery for `/work3` with:

- title-based filtering
- masonry-style gallery layout
- click-to-zoom lightbox
- local fallback data when Sanity is not configured

## Frontend Files

- `src/pages/work3/index.jsx`
- `src/components/Work-Four-Column/index.jsx`
- `src/lib/portfolio.js`
- `src/lib/sanity.js`
- `src/data/portfolio-work3-fallback.js`

## Environment Variables

Copy `.env.example` to `.env.local` and set:

- `NEXT_PUBLIC_SANITY_PROJECT_ID`
- `NEXT_PUBLIC_SANITY_DATASET`
- `SANITY_API_VERSION`
- `SANITY_API_READ_TOKEN`

If the dataset is public, the read token can stay empty.

## Recommended Sanity Schema

The schema scaffold is in:

- `sanity/schemaTypes/portfolioItem.js`
- `sanity/schemaTypes/index.js`

Minimum fields used by the frontend:

- `title`
- `slug`
- `published`
- `coverImage`
- `galleryImages`

## How The Gallery Works

- `/work3` fetches `portfolioItem` documents from Sanity at build time
- the page revalidates every 60 seconds
- filter chips are generated from each gallery entry title
- each uploaded gallery image becomes a tile in the masonry gallery
- clicking a tile opens the image in the lightbox

## Deployment

For the CMS-backed version, deploy as a normal Next.js app.

Use:

- `npm run build`
- `npm run start`

Do not use `npm run export` for the production CMS workflow, because static export removes ISR and the runtime CMS refresh path.