Margin Notes Folio

Margin Notes treats your portfolio like a well-set monograph. Large serif display type, a strict margin column for numbers, years and captions, and generous whitespace let the work speak first, while small editorial details (figure captions, footnote markers, a pulled quote) give it a voice of its own.

The home page opens with a statement headline, then leads into a numbered index of selected work with a pinned cover preview that crossfades as you move from row to row (and follows your scroll on touch screens). Services arrive as cards that stack as you scroll, client quotes sit over full-width photography in a swipeable slider, and the Work page adds category filtering with shareable URLs. Every project gets its own CMS case study with client details, story, gallery and a "next project" link.

It's built to be made your own in an afternoon. Every color and text layer uses shared styles with light and dark values, the persona and projects live in the CMS, and a Read Me page inside the project walks you through every step. Dark mode follows each visitor's system setting, with a toggle that remembers their choice.

Features

• 6 pages: Home, Work, Project (CMS), About, Contact, 404

• Project index with a sticky cover preview

• Category filtering with shareable filtered URLs

• CMS case studies, services, testimonials, experience and awards

• Stacking service cards and a cinematic testimonial slider (swipe, arrows, keyboard)

• Light and dark mode from 12 color styles, with a remembered theme toggle

• 14 responsive text styles: Newsreader, Geist and Geist Mono

• One shared availability line you edit once for the whole site

• Working contact form with loading, success and error states

• Accessible: semantic headings, alt text, keyboard-friendly menu, filters and slider, visible focus states

• Clean layer names and an in-project Read Me

Persona, clients and projects are fictional. Demo photography is from Unsplash.