Department of Logistics
Multi-page web experience built as a dual-encoded institution. On the surface, an elite logistics authority with clearance protocols, operations doctrine, and a recovery division. Underneath, a layered inside joke written entirely in deadpan analogy for a private audience.
- Frontend
- Creative
Tech Stack
React 19 R React Router 
Framer Motion 
Tailwind CSS v4 
Vite 
TypeScript Build Highlights
- 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
Overview
Project overview
Department of Logistics is a premium, multi-page React site designed to read simultaneously as a credible elite logistics organization and as a private coded language for insiders. Every section, heading, and paragraph operates on two registers at once — formal institutional copy on the surface, layered analogy underneath. The site includes six routes covering departmental overview, operational divisions, clearance and authorization, compliance protocols, recovery and enforcement, and an intake system. The creative challenge was to keep both audiences convinced: an outsider should believe it is a real logistics authority, while an insider immediately reads every line as something else entirely.
Problem
What it solves
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.
Build
Implementation details
What I worked on
- Design and engineering
- Conceived and executed the dual-register creative direction — institutional on the surface, 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
Technical implementation
- 01
React 19 with React Router for multi-page navigation and clean URL structure
- 02
Framer Motion for scroll-triggered reveal animations and entrance sequences across all pages
- 03
Tailwind CSS v4 configured via CSS-first approach with custom design tokens for the navy, white, and gray palette
- 04
Custom SVG icon system — no third-party icon library used
- 05
ScrollReveal component as the primary animation primitive for section entrances
- 06
PageLayout with shared header and footer wrapping all six routes
- 07
Cloudflare Pages deployment with SPA redirect rules
Links
Project links
Live Site Preview
https://logistics.kristianhans.com
More Projects
Continue browsing
Previous Project
OwnTheJoke.com
E-commerce platform printing custom humor on apparels, wall hangings, and accessories. Features AI-generated product mockups via Google Gemini, interactive 3D visualization with Three.js, Paystack payments, flash sales, an affiliate system, and a content blog with Tiptap editor.
Next Project
Atote Labs
Marketing and editorial website for Atote Labs, a Nairobi-based startup studio. Covers the studio's identity, its portfolio of ventures, insights and articles, and a contact system. Built with React 19, Vite, Tailwind CSS v4, and a Node.js/Express backend with PostgreSQL.