Client Site Concepts

Local design explorations. Each card links to a standalone demo site.

Fine Artist Portfolio family

Fine Artist Portfolio — v1

Dark charcoal + warm gold. Rotating hero, filterable gallery, purchase modal.

HTML · Tailwind · Vanilla JS

Fine Artist Portfolio — Motion

v1's layout and palette, plus layered hero motion: scroll parallax (background lags, foreground recedes) and a more dramatic rotation transition.

HTML · Tailwind · Vanilla JS

Fine Artist Portfolio — Ocean Dark

Same layout, retheme: deep navy background, bright white type, sharp blue accents.

HTML · Tailwind · Vanilla JS

Fine Artist Portfolio — Ocean Light

Same layout, retheme: bright white background, deep navy ink, sharp blue accents.

HTML · Tailwind · Vanilla JS

SeedPrompts batch — pitch concepts

Five independent design directions built from SeedPrompts/*.md briefs, using real reference paintings from Art/ instead of gradient placeholders.

01 — Design Contrast

Hard-edged near-black/off-white color blocks, one hot accent, clip-path curtain reveals and wipe-transition lightbox.

HTML · Tailwind · Vanilla JS

02 — Soft Transitions, Muted

Quiet putty tones, staggered scroll-reveal gallery, side dot-rail nav instead of a header bar.

HTML · Tailwind · Vanilla JS

03 — Minimal Gallery White

The quiet baseline: flat white, no hero, uniform grid, one 200ms fade — restraint as the whole design statement.

HTML · Tailwind · Vanilla JS

04 — Textured Canvas, Warm

Linen canvas-weave texture, matted framed hero, tilt-on-hover gallery tiles, torn-paper section dividers.

HTML · Tailwind · Vanilla JS

05 — Dark Mode Spotlight

Near-black gallery-at-night mood with a cursor-following radial glow; gallery tiles brighten with a gold hover-glow.

HTML · Tailwind · Vanilla JS

06 — Editorial Magazine

Asymmetric magazine-spread layout, vertical page-number rail, curated non-uniform gallery, click-to-spread instead of a modal.

HTML · Tailwind · Vanilla JS

07 — Split-Screen Bio/Gallery

Pinned dark bio panel on one side, independently-scrolling light gallery on the other — a genuinely different browsing structure.

HTML · Tailwind · Vanilla JS

08 — Masonry Grid

Pinterest-style native-aspect-ratio masonry with animated FLIP re-flow on filter switch and per-tile sampled-color borders.

HTML · Tailwind · Vanilla JS

09 — Full-Bleed Parallax

Sequential full-viewport paintings, one moment at a time, with independent background/foreground parallax per section.

HTML · Tailwind · Vanilla JS

10 — Horizontal Filmstrip

The gallery scrolls sideways — native snap-scroll filmstrip with scale-based depth cueing and a progress bar.

HTML · Tailwind · Vanilla JS

11 — Brushstroke Reveal

Each painting reveals itself through an animated SVG brushstroke mask, as if being painted onto the page.

HTML · Tailwind · Vanilla JS

12 — Duotone Bold Pop

Thumbnails default to a bold navy/coral duotone, crossfading to full color on hover or tap — discovery built into browsing.

HTML · Tailwind · Vanilla JS

13 — Journal / Process Blog

Gallery + a dated studio-journal tab with a drag-to-compare before/after slider on process entries.

HTML · Tailwind · Vanilla JS

14 — Single-Scroll Story

One continuous illustrated essay — paintings appear as the story mentions them, not in a separate gallery grid.

HTML · Tailwind · Vanilla JS

15 — Grid Fullscreen Zoom

Clean uniform grid with native View Transitions zoom: thumbnail grows into a fullscreen view and shrinks back — app-like, no library. Fallback for Firefox.

HTML · Tailwind · Vanilla JS

16 — Pastel Gradient Mesh

Slowly drifting gradient-mesh hero behind soft rounded gallery cards with colored medium pills. Friendly, approachable, warm.

HTML · Tailwind · Vanilla JS

17 — Monochrome Accent Break

Strict grayscale chrome, zero accent — the paintings themselves are the only color on the page. Hover flashes a sampled border pulse per tile.

HTML · Tailwind · Vanilla JS

18 — Vintage Paper Collage

Corkboard scrapbook: rotated photo-corner cards that flutter in on load, torn-edge dividers, typewriter + script type, rust-red stamps.

HTML · Tailwind · Vanilla JS

19 — Bold Typographic Poster

The loud end of the spectrum: oversized Archivo Black headline split behind and in front of the hero painting, visible Swiss rule-line grid, red printed-plate numbers.

HTML · Tailwind · Vanilla JS

20 — Botanical Line Art

Quiet ivory nature-journal mood: single-line sage-green sprigs that draw themselves in on scroll, matted gallery tiles, one accent hairline.

HTML · Tailwind · Vanilla JS

Design Reflected — one palette, six templates

Six of the templates above, retheme'd against a single brand palette to show how far one identity can stretch across different structures. Same layout and interactions as each original — only palette and type change: Deep Navy, Teal, Magenta and Gold, with Cinzel headings and an Alex Brush script accent.

Design Reflected — 15 Grid Fullscreen Zoom

Same uniform grid → fullscreen-zoom interaction as the original. Retheme'd to Soft Cream/Deep Navy with a Teal accent — the brand's own "signature" color.

HTML · Tailwind · Vanilla JS

Design Reflected — Fine Artist Portfolio v1

Same dark rotating-hero layout, filterable gallery, and purchase modal. Kept dark on Deep Navy instead of charcoal, with a Gold accent.

HTML · Tailwind · Vanilla JS

Design Reflected — 12 Duotone Bold Pop

Same navy/magenta duotone-to-color hover crossfade mechanism — the original's navy/coral duotone pair became Deep Navy/Magenta.

HTML · Tailwind · Vanilla JS

Design Reflected — Fine Artist Portfolio, Ocean Dark

The most natural fit of the six — this template's deep-navy background was already close to the brand's own Deep Navy. Blue accent swapped for Teal.

HTML · Tailwind · Vanilla JS

Design Reflected — 19 Bold Typographic Poster

Same oversized poster-headline concept in Cinzel, Magenta + Gold accents. Headline scale was retuned to fit a longer surname without clipping.

HTML · Tailwind · Vanilla JS

Design Reflected — 10 Horizontal Filmstrip

Same snap-scroll filmstrip, depth-cue scaling, and progress bar. Original brick-red accent replaced with Magenta.

HTML · Tailwind · Vanilla JS

Restaurant / hospitality pitch concepts

Design-system mimicry demos, built by sampling a reference site's live palette, type, and layout — content is a fictional placeholder client, not the reference business.

Warm Earth — Thai Restaurant

Playfair Display headlines over Josefin Sans body, deep teal-black ink, amber accent, dotted-line dividers — sampled from a live restaurant site pitch reference.

HTML · Tailwind · Vanilla JS