The Depot: An Interactive Crane Portfolio Website

What if a portfolio didn't scroll, but unloaded? The Depot is an interactive one-page website where a yellow gantry crane lifts shipping containers, swings the doors open and unpacks my work as cargo-label cards. I handled the concept, design, SVG illustration, front-end build and promo videos, all in plain HTML, CSS and JavaScript.

THE CHALLENGE

Most portfolio websites look the same: a hero, a grid of thumbnails and a contact form. Visitors skim them in seconds and forget them just as fast. I wanted a portfolio that people play with, one that shows my design thinking, my illustration skills and my front-end skills before anyone reads a single project title.

The goal: one page, no frameworks, no image files, and an idea memorable enough that people want to click it twice.

THE IDEA

I borrowed the language of a shipping yard. The work is "cargo", each section is a container, and a crane does the unloading.

• WORK container (teal): client and personal projects • SERVICES container (orange): web design, graphic design and video editing • ABOUT container (navy): who I am and where to find me

The metaphor gives every interaction a reason to exist. You don't "open a section", you send the claw in. You don't "close" anything, you pack up.

DESIGN DECISIONS

Colour A warm off-white base with a faint dot grid, like a site plan. Near-black for type and machinery, and safety yellow for the crane and the main call to action. Each container has its own colour, and its cards carry that colour, so visitors always know where a card came from.

Typography Bricolage Grotesque in heavy weights for headlines: bold, friendly and a little quirky. Instrument Serif italic for my name, to add a personal touch. JetBrains Mono for labels and container codes, which echoes stencilled cargo markings.

Details that sell the story • Cards styled like shipping labels, with kraft-paper texture, container code, item number and a barcode • Hazard stripes on the crane beam and the claw • A beacon on the trolley that blinks while the crane works • Keycap buttons that sink and spring back when pressed

HOW IT WORKS

Click a container, the "Unpack my work" button or press Space.

The trolley rolls along the beam with a slight sway, and the claw lowers and grabs the container.

The container lifts, settles and opens its doors.

Cards fly out in an arc, one by one, and land in a clean grid on the dock.

Click any card to open its details. "Pack up" sends every card home and closes the doors.

Every click is queued, so the crane never trips over itself, however fast someone clicks.

BUILDING IT

• The crane, claw and containers are hand-built inline SVG. There are no image files on the page. • The motion is written in vanilla JavaScript with custom easing: the trolley sways, the containers wobble and the cards follow curved flight paths. • The layout adapts from a two-column desktop view to a stacked mobile view, with the crane under the headline and the dock below. • It is accessible by design: full keyboard control (Space, Enter, Esc) and a calmer version for visitors who prefer reduced motion.

WHAT I LEARNED

A strong metaphor does half the design work. Once "the portfolio is a shipping dock" was decided, every choice followed from it: the colours, the type, the card style and even the button labels. It also proved that playful doesn't have to mean messy. The fun lives in the motion, while the content stays clean and easy to read.

Role: Concept, UI design, SVG illustration, front-end development, promo videos Tools: HTML, CSS, JavaScript, SVG