Collage

Overview

Collage is an interactive photographer portfolio by SonoJS (demo: Noor Halberg, Copenhagen). Built with Vite, React 19, TypeScript, custom CSS, and Jost Variable. An endless contact-sheet table of 16 film prints (Interiors, Architecture, Travel, Still life, Portrait) with drag momentum, random/linear layout modes, category labels, lightbox full stills, about/contact popovers, and live Copenhagen clock. Demo portfolio chrome only - no booking backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Drag contact sheet

   Endless tiled prints with momentum drag, depth sizing, and throw physics.

2. 02

   Random / linear modes

   Switch layouts with gliding transitions across all 16 film stills.

3. 03

   Category + lightbox

   Interiors–Portrait filters, full WebP lightbox, about/contact chrome.

4. 04

   Vite and fork-ready

   Vite 7 + React 19 + TypeScript + Jost Variable - npm run build to dist/.

You get

• Full Vite + React 19 + TypeScript source (Collage / Noor Halberg)
• App.tsx collage stage, drag physics, lightbox, about/contact
• Custom style.css (no Tailwind)
• 16 thumb + 16 full WebP prints
• @fontsource-variable/jost