ZEN ALEXANDER

Templates

Exploration · /work media treatments

Slick hover boxes, four ways.

Each variation is the same four projects, same accent ribbons, same hover lift — but the media surface is treated differently. Pick a winner (or mix two). All four pass the warm/cool offset rule: cool nocturnal gradients with a single warm spot, never a warm wash behind warm cream type. The placeholder gradients stand in for real stills, art, or album covers — drop a real image into background-image on .media to preview.

A

Cinematic Split

Wide letterbox image on the left (38% of the row), content on the right. On hover, the image gently zooms (1.03), the play icon brightens, and the eyebrow shifts to the project’s bright accent. Feels like a film still that breathes when you approach it. Best for: video / streaming work where each project has one signature image.

Hover any card
Trailer · 02:14

Murder Mystery Experience

A Room That Tells the Story

Live Event · In Development

An immersive, player-driven murder mystery built for live audiences. Every session is different. Every player has a role. The story belongs to the room.

Series · Season 01

Green Dragon Tavern

A Tavern, A Universe

Streaming Series · Produced

A tabletop RPG streaming series built from the ground up — world, characters, systems, and production. Where the Green Dragon Tavern universe began.

B

Contact Sheet

Content on top, a row of four thumbnails beneath. On hover the dimmed thumbs brighten and the lead thumb gently zooms — like the project is “opening” a folder of its own work. Best when a project has a library of artifacts (album tracks, episode stills, art pieces, game screenshots).

Hover any card

Tabletop Game Design

Systems That Disappear

Games · Ongoing

Original tabletop games and ruleset expansions — built around the belief that the best systems disappear into the story and let players do what they came to do: play.

Card · 01
Card · 02
Card · 03
Card · 04

World Building & Lore

The World Exists First

Writing · Ongoing

Deep lore, original settings, and the foundational writing that gives every game and story its backbone. The world exists before the session starts.

Map · North
TheWorld
Map · Coast
WorldBuilding
Sketch · 03
ExistsWriting
Sketch · 04
FirstOngoing

World Building & Lore

The World Exists First

Writing · Ongoing

Deep lore, original settings, and the foundational writing that gives every game and story its backbone. The world exists before the session starts.

Player 1
TRAITOR Player 1
SAFE Player 1
SAFE Player 1
SAFE Player 1
Player 2
SAFE Player 2
TRAITOR Player 2
SAFE Player 2
SAFE Player 2
Player 3
SAFE Player 3
TRAITOR Player 3
SAFE Player 3
SAFE Player 3
Player 4
SAFE Player 4
SAFE Player 4
SAFE Player 4
TRAITOR Player 4
C

Reveal Under Ornament

Full-bleed image is the card itself. A heavy scrim and a Cinzel ✦ glyph sit centered at rest — the card looks like a shut book. On hover the scrim lifts, the glyph fades, the title slides up from the bottom, and the blurb unfolds. The most cinematic of the four. Best for projects where the image is the work — a music video frame, a piece of art, a game’s hero shot.

Hover any card

Murder Mystery Experience

A Room That Tells the Story

An immersive, player-driven murder mystery built for live audiences. Every session is different. The story belongs to the room.

Green Dragon Tavern

A Tavern, A Universe

A tabletop RPG streaming series built from the ground up — world, characters, systems, and production.

D

Polaroid Stack

Content on the left, a stack of three offset cards on the right (tilted slightly, slightly transparent for the ones behind). On hover the stack fans out into a row — like flipping through a folder of artifacts. Feels handmade, archival, and slightly nostalgic. Best for art / mood / behind-the-scenes work where the pieces are siblings, not a sequence.

Hover any card

World Building & Lore

The World Exists First

Writing · Ongoing

Deep lore, original settings, and the foundational writing that gives every game and story its backbone. The world exists before the session starts.

Sketch · 01
Sketch · 02
Sketch · 03

Tabletop Game Design

Systems That Disappear

Games · Ongoing

Original tabletop games and ruleset expansions — built around the belief that the best systems disappear into the story and let players do what they came to do: play.

Prototype · A
Prototype · B
Prototype · C
E

Lightbox Gallery Grid

Thumbnail grid that opens a full-screen dark overlay on click. Images sit in uniform 16:9 cells at rest — clean, low-profile, catalogued. Click any thumbnail and Fancybox 5 takes over: the full-resolution image fills the screen, keyboard and swipe navigation steps through the whole set, and a caption label identifies each piece. A hover caption bar fades up over the thumbnail before you commit. Best for portfolio / production assets where the work needs to be seen large, and where casual right-click saving should be deterred. All images in a gallery share one data-fancybox group key so arrow navigation flows across the entire set. Right-click and drag-save are blocked on both thumbnails and the lightbox image via pointer-events: none, user-select: none, contextmenu interception, and Fancybox’s own protect: true option.

Click any image
F

Native Reel

Zero-dependency scroll carousel built on CSS scroll-snap. Touch and swipe work natively through the browser’s own overflow engine. Prev/next arrows and dot indicators are driven by ~30 lines of vanilla JS listening to the scroll event. No plugin, no Swiper, no CDN. Mobile-first — below 600 px the active slide fills the full container width with no peekthrough. Replaces WP Carousel for video thumbnail reels on the /screen page. Swap any src for a YouTube hqdefault.jpg thumbnail.

← drag · swipe · arrows · dots
GDT — Slot 01
Green Dragon Tavern — Slot 01
GDT — Slot 02
Green Dragon Tavern — Slot 02
GDT — Slot 03
Green Dragon Tavern — Slot 03
GDT — Slot 04
Green Dragon Tavern — Slot 04
GDT — Slot 05
Green Dragon Tavern — Slot 05
GDT — Slot 06
Green Dragon Tavern — Slot 06
G

Contact Form

Fetch-based form handler. No SDK dependency. Name and email required, organisation and note optional. Button disables and reads "Sending →" in flight. On success the form hides and a jade confirmation line appears. On error the button resets and an inline message surfaces. Wired to Formspree.

H

Eight Starter Roles — Flip Cards

Eight starter roles on eight cards, pure-CSS click-to-flip. Each card shows a role name and race; tapping turns it to reveal a one-line hook. No JavaScript — a hidden checkbox per card drives a rotateY flip through the :checked sibling selector, so it degrades gracefully and costs nothing. Lives on /games beneath the Crown Falls section. Classes are vh-* scoped to .v-h. Two rows of four on desktop, two columns on mobile. (“Starter” because expansion packs add more.)

I

Eight Roles, Four Cards — Four-State Flip

The same eight roles compressed onto four cards, four states each. A space-saving variant of Section H: every card carries two roles. Tapping cycles four faces — role A’s name, role A’s hook, role B’s name, role B’s hook — then loops. A corner pip marks whether you’re on the A or B role. Driven by a small click handler that advances a state index and spins the card 180° each tap, swapping the hidden face’s content mid-flip so the change is never seen. Classes are vi-* scoped to .v-i.

A

The Reluctant King

Human

tap to turn
A

The crown grows heavy.

A

The Disgraced Knight

Dwarf

tap to turn
A

Stripped of honor. Still armed.

A

The Oracle

Elf

tap to turn
A

The prophecy came true.

A

The Fool

Halfling

tap to turn
A

Says and hears too much.