This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Creating Galleries

Galleries are driven by JSON files — no code changes needed.

1. Create a project file

Add a JSON file to content/projects/ named after your slug (e.g., my-project.json):

{
  "slug": "my-project",
  "title": "My Project",
  "subtitle": "Location or context, Year",
  "category": "Editorial",
  "year": "2024",
  "location": "Tokyo",
  "volume": "Volume I — Edition 01",
  "heroImage": "/images/projects/my-project/hero.jpg",
  "description": [
    "First paragraph describing the series.",
    "Second paragraph with additional context."
  ],
  "curatorsNote": "An optional curator's note displayed in italics on the project page.",
  "metadata": { "lens": "85mm", "aperture": "f/1.4", "iso": "100" },
  "images": [
    { "src": "/images/projects/my-project/01.jpg", "alt": "Descriptive alt text", "aspect": "21/9", "span": 12 },
    { "src": "/images/projects/my-project/02.jpg", "alt": "Alt text", "aspect": "4/5", "span": 5, "offsetClass": "md:mt-24" },
    { "src": "/images/projects/my-project/03.jpg", "alt": "Alt text", "aspect": "4/3", "span": 7 }
  ],
  "credits": {
    "Photography": "Photographer Name",
    "Post-Production": "Studio Name",
    "Curator": "Curator Name",
    "Client": "Client Name"
  },
  "featured": false
}

Image fields

Field	Description
aspect	Aspect ratio string — "21/9", "16/9", "4/3", "3/4", "4/5", "1/1"
span	Grid column span (out of 12) — 5, 6, 7, or 12 for full width
offsetClass	Optional Tailwind margin-top class for vertical offset (e.g., "md:mt-24", "md:mt-16")

Featured project fields

To feature a project on the homepage, add these fields:

Field	Description
featured	Set to true
featuredOrder	Integer controlling display order
featuredAspect	Aspect ratio in the featured grid (e.g., "4/5", "3/4")
featuredGridClass	Tailwind column class (e.g., "md:col-span-7", "md:col-span-5")

2. Add images

Place your images in public/images/projects/my-project/:

public/images/projects/my-project/
├── hero.jpg    # Hero/cover image
├── 01.jpg      # Gallery images
├── 02.jpg
└── 03.jpg

3. Register the project

Add your project slug to the projectOrder array in content/gallery.json to control where it appears in the gallery listing:

{
  "projectOrder": [
    "existing-project",
    "my-project"
  ]
}

The itemsPerPage field in this file controls how many projects show before the "Load More" button.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.