Yardline

Yardline is a portfolio you explore like a strategy game. Your work lives in a small 3D district: every case study is its own building, and a truck drives the roads to whichever project a visitor picks.

Click a building, a map label or a nav item and the truck sets off. It keeps to its lane, waits for traffic and backs into its bay, and the case-study card opens when it arrives. Forklifts, robots and city traffic keep moving in the background, and every vehicle, rack and silo can be picked to show a small info card. Drag to pan, scroll to zoom, rotate the view or jump back to the whole district.

The inner pages switch to a calm editorial layout: Instrument Serif headlines, tight Inter text, one ultramarine ink on near-white, grey nav pills and a full-blue footer with a giant serif name.

Pages

• Home — the interactive 3D district

• Work — case-study grid (CMS)

• Case study detail (CMS)

• About — intro, experience and recognition

• Contact — direct lines and a project form

• 404

CMS collections

• Case studies — cover, gallery, facts, story and three result metrics

Features

• Interactive 3D map: six sites, live traffic, pickable objects, smooth RTS camera (drag, zoom, rotate, home, overview)

• Truck that drives to the chosen project, follows right-hand traffic rules and keeps its distance

• Glass HUD: name card, nav, live local-time clock and "Hire me"

• Branded loader that waits for the map to load

• Physics pill boxes: tags drop in when they scroll into view and can be thrown around

• Pill buttons with an animated arrow, soft hover states

• Fully responsive — desktop, tablet and phone

3D and physics: three.js and matter-js (MIT), loaded from a CDN.