01 — Web Design & Development

Donkey Joe.

An animated web experience for a bar & music venue in Ravenna — canvas-rendered animated backgrounds, explosive letter intro animations, and an interactive jukebox system for live event nights.

Role

Designer & Developer

Year

2025

Stack

Vanilla JS, Canvas API, HTML/CSS

Status

Live ↗

GitHub

View Source ↗

Live Site

Open Site ↗

What

Donkey Joe is a full web experience for a bar and music venue at Via Argirocastro 26, Ravenna. The site opens with a cinematic animated intro sequence — the venue name explodes onto screen letter by letter from different directions — before fading into the main navigation UI.

Once the intro completes, users land on a dark, atmospheric interface with three main routes: the food & drink menu, upcoming events, and opening hours & contacts. A jukebox button lets patrons queue their song of the night during live events.

· · · ◆ · · ·

Why

The venue had no digital presence. Standard templates felt generic for a bar with this much identity — striped walls, deep reds, low-lit atmosphere. The site needed to feel like walking through the door, not browsing a listing.

The brief was clear: build something that captures the energy of the place the moment you open it. That meant animation-first design, not an afterthought.

Animated Canvas Background

Vertical striped bands — black, deep red, and antracite grey — are rendered on a Canvas element. Each stripe has independent sinusoidal oscillation: two overlapping frequencies control lateral swing, and a slower pulse controls thickness. Colors are sampled pixel-by-pixel from the venue's real branding imagery.

Explosive Letter Intro

Each letter of "DONKEY JOE" enters from a unique direction — top-left, directly above, top-right — using CSS custom properties set per-letter at runtime. After a short hold, they explode outward in reverse, and the main UI slides in. The whole sequence runs in under 3 seconds with no library dependencies.

· · · ◆ · · ·

Outcome

What shipped

A complete, production-ready site: main landing with animated intro, food & drink menu page, events archive, contacts & hours section, and a Jukebox feature (separate page) where patrons can browse and queue songs live during event nights. Fully responsive — mobile layout collapses to a large-button grid for fast venue-floor use.

What I learned

Recreating brand assets in code demands obsessive precision — I measured stripe proportions and sampled colors directly from the physical venue photography. I also learned that Canvas-based animation has hidden performance traps: clearing the entire canvas each frame at high refresh rates, and replicating stripes 3× to handle wide viewports without seams, required careful profiling.

NEXT PROJECT

Uà Art&Pizza →

↗