Department of Logistics
A fictional logistics authority presented with complete institutional detail, built as a polished multi-page web experience with a deadpan second meaning.
React 19 · React Router · Framer Motion · Tailwind CSS v4 · Vite · TypeScript
Live Site
01 Product overview
What the product does
Department of Logistics is a multi-page React site written in two registers. It presents a fictional logistics authority on the surface while carrying a second meaning for its intended audience. Six routes cover the department, operations, clearance, protocols, recovery, and intake.
02 Problem and context
What it needed to solve
The site could not look like a joke. It needed to be executed with enough discipline and production quality that the comedy only emerged from how convincingly the analogy held. Any section that broke tone would collapse the entire conceit. The design, copy, layout, and component system all had to serve a single vision without leaking the premise.
03 My contribution
What I worked on
- Conceived and executed the dual-register creative direction, with institutional language on the surface and a layered analogy underneath
- Built the full component system from scratch including custom SVG iconography, a scroll reveal system, and page-level layout components
- Designed the cinematic hero with background image overlay and motion entrance sequences using Framer Motion
- Wrote all copy maintaining deadpan institutional tone throughout all six routes
- Configured Cloudflare Pages deployment with continuous deployment from GitHub
05 Engineering and outcomes
Implementation details
System
- React 19 with React Router for multi-page navigation and clean URL structure
- Framer Motion for scroll-triggered reveal animations and entrance sequences across all pages
- Tailwind CSS v4 configured via CSS-first approach with custom design tokens for the navy, white, and gray palette
- Custom SVG icon system with no third-party icon library
- ScrollReveal component as the primary animation primitive for section entrances
- PageLayout with shared header and footer wrapping all six routes
- Cloudflare Pages deployment with SPA redirect rules
Verified results
- Six-Route ArchitectureHome, Operations, Clearance, Protocols, Recovery, and Intake, each with a distinct layout and tone.
- Custom Component SystemCustom SVG icons, scroll reveals, a cinematic hero, sticky navigation, and page-level layout components, built without a UI library.
- Dual-Register CopyThe copy maintains an institutional surface while preserving the coded analogy for its intended audience.
Lessons
- Tone is a design constraint. The moment any component, copy line, or section breaks the institutional voice, the premise falls apart. Every decision had to serve the conceit.
- Tailwind v4's CSS-first configuration approach is cleaner for custom design systems. Defining tokens directly in CSS keeps the design language centralized and consistent.
- Framer Motion scroll animations need careful performance tuning on mobile. Stagger delays that feel elegant on desktop can feel sluggish on lower-end phones.