Monochrome Photography Portfolio

A striking black-and-white photography portfolio with full-bleed images, minimal UI, and dramatic contrast.

Preview of Monochrome Photography Portfolio
Works with:ClaudeChatGPTv0CursorBolt
monochromegrayscalephotographyportfoliominimal

Prompt

Create a monochrome/grayscale photography portfolio that puts images front and center. The design is deliberately stripped back — black, white, and shades of gray only.


Design Requirements

  • Color: Strictly black (#000000), white (#ffffff), and shades of gray. No color whatsoever.
  • Images: Full-bleed, high-contrast black-and-white photography. Apply CSS filter: grayscale(100%) to all images
  • Typography: Space Grotesk, all uppercase for navigation, thin/light weights
  • Spacing: Dramatic use of whitespace and full-viewport sections

  • Sections to Include

  • Landing — Full-screen hero image, photographer name in thin uppercase text, centered
  • Gallery Grid — Masonry or Pinterest-style grid of photos, hover reveals title + category
  • Project Pages — Horizontal scroll of images within a project, full-height
  • About — Split screen: large portrait left, bio text right
  • Contact — Minimal form: name, email, message. Black background, white inputs

  • Technical Details

  • CSS filter: grayscale(100%) on all images by default
  • Hover effect: images slightly scale, show bottom caption overlay
  • Masonry layout using CSS columns or grid with grid-auto-rows: masonry
  • Smooth fade-in on scroll for images (Intersection Observer)
  • Responsive: 3 columns → 2 columns → 1 column
  • Related Prompts