Archive
2026 · May·demo·website·live

References

A showcase of editorial brand sites built to demonstrate range. Custom type, motion and design systems across several distinct identities, from photography to hospitality.

Impact

A single demo that proves design and build range. Each sample site has its own typography, motion language and design tokens, none of them a template.

Tech Stack
Next.jsReactTypeScriptTailwindSanityGSAPVercel
References editorial sample site
Editorial sample
References sample brand identity
Brand identity

References is a showcase. It collects several editorial brand sites, each with its own identity, built to demonstrate design and front-end range rather than to serve a single client.

Overview

Most portfolios show one look repeated. This one does the opposite: a set of distinct sample sites, each with its own typography, color and motion, sharing only a tasteful baseline. They are demonstrations, not live client engagements.

What it does

  • Several self-contained brand sites spanning photography, hospitality and lifestyle
  • A custom design token system per identity
  • Motion with GSAP and smooth scrolling, plus view transitions between pages
  • Editorial touches: grain, custom cursors and deliberate typography

Highlights

  • Range over repetition: every sample has a different voice, not one theme reskinned.
  • Motion with intent: scroll and page transitions that support the content.
  • Built like production: shared packages for fonts, motion and UI primitives.
  • A talking point: a live link that shows breadth in seconds.

Build something similar?

Related Work

mazzotta.dev cover
InternalLive
2026

mazzotta.dev

The portfolio and lead-gen site you are reading right now. Multilingual case studies, archive, hardened contact form. all under one type-safe content layer.

Next.jsTypeScriptTailwindVeliteMDX
Joleen Güntlisberger cover
ClientLive
2026

Joleen Güntlisberger

Campaign website for Joleen Güntlisberger, a young SVP candidate for the cantonal council of Zug. Biography, positions, news and events, all editable from a CMS.

Next.jsReactTypeScriptTailwindSanity+1
Claude Daily Summary cover
OSS · CommunityLive
2026

Claude Daily Summary

An AI-curated daily briefing on the Anthropic Claude ecosystem. Fifteen sources, three-model pipeline (Haiku, Sonnet, Opus), newsletter, RSS and archive. Free product, lead funnel built in.

Next.jsTypeScriptAnthropicPostgresTailwind