Server
Truthful HTML first
Next.js server components establish the story, navigation, public metrics and stable geometry before enhancement.
Product and engineering dossier
Built to feel ambitious. Designed to remain honest.
Been & Bound is a working travel platform, not a static portfolio concept. This dossier explains how the recruiter-facing experience exposes the judgement behind the product without compromising its users, data, or performance.
Designed and engineered by Adrian.
01 · The problem
Travel products often separate memory, narrative and discovery.
A map can prove where. A useful atlas should also preserve why it mattered.
Been & Bound brings personal places, route structure, private notes and public journeys into one product model.
The homepage therefore has two jobs: communicate that model in seconds and let the working product provide the evidence.
02 · Architecture
Progressive enhancement with clear ownership.
Data
Real product signals
Public journey and country activity come from established server services rather than portfolio-only counters.
Client
Isolated interaction
The live atlas and a small observatory motion boundary enhance a complete, readable server-rendered page.
Quality
Constraints made visible
Reduced motion, keyboard focus, narrow reflow, empty data and recoverable map failure are designed states.
03 · Decisions and trade-offs
The polish comes from constraints, not from ignoring them.
01
Make first paint meaningful
- Decision
- The proposition, calls to action, counts and cartographic frame are useful before the interactive atlas finishes loading.
- Trade-off
- This rejects a more theatrical loading reveal in favour of immediate comprehension and stable geometry.
- Result
- Client code enriches the observatory instead of rescuing an otherwise empty hero.
02
Treat privacy as interface architecture
- Decision
- Public country-level activity, private records and small current-location cells are explicitly separated in copy and behavior.
- Trade-off
- Some visual density is spent explaining boundaries that a purely promotional page might hide.
- Result
- Trust becomes inspectable product behavior, with a list alternative beside the public map.
03
Keep motion subordinate to meaning
- Decision
- A tiny fine-pointer layer moves the observatory by only a few pixels; the rest of the composition relies on type, material and hierarchy.
- Trade-off
- The page avoids continuous spectacle and accepts that its craft should reward attention rather than demand it.
- Result
- Reduced-motion and coarse-pointer users receive the same content, order and visual finish without a parallel experience.
04 · Quality practice
Serious craft includes the states nobody puts in a hero shot.
Accessible by construction
Semantic landmarks, one page heading, visible focus, touch-safe controls, list parity and 200% text verification.
Performance-aware
No animation dependency, no page-wide client boundary and no interaction required for meaningful first paint.
Privacy-aware
Existing data services and visibility rules remain the source of truth; the portfolio layer invents no social proof.
Maintainable
The homepage stays composed from focused domain components, with motion isolated from data and authorization.
05 · Reflection
The best visual effect is confidence earned by the details.
The observatory creates a memorable first glance, but the deeper signal is restraint: truthful data, legible failure, accessible alternatives and an implementation that remains comprehensible after the animation is switched off.