ATLAS

Intent-first travel discovery — a front-end design portfolio piece.

ATLAS is a travel-discovery concept built as a specimen, not a checkbox. Booking sites ask where you are going; ATLAS asks how a place should feel, then records the answer the way a naturalist records a species.

The idea

Ten curated destinations each carry five shared readings: climate, season, cost, walk, crowd. You tick a few intents (quiet, warm, walkable, full of history…) and the field narrows live. Every match is annotated — you see exactly which intent earned it, never a score pulled from nowhere.

That is the whole product: intent in, explained match out.

Design language

An umber-and-sand field guide, not a booking site:

• Palette — dark umber ground, warm sand/paper text, terracotta accent, sage + deep navy-slate chrome. Defined as Tailwind @theme tokens.
• Typography — Fraunces display, Inter body, Spline Sans Mono metadata.
• Fluid canvas — the whole layout scales like one canvas via viewport-based rem sizing, tuned at 420 / 1440 / 1920 breakpoints.
• Motion — scroll-triggered reveals and plate entrance animations, with a full prefers-reduced-motion fallback.

Stack

• React 18
• Tailwind CSS 4 (design tokens, no UI library)
• Vite

No UI libraries, no animation libraries. Icons are hand-built SVG; routing and animation are hand-rolled.

Structure

src/
  App.tsx         home, header, field, filter + sort, case study
  DetailViews.tsx destination + region detail views
  plate.tsx       the "plate" cards (destination entries)
  data.ts         destinations, intents, scoring + ranking
  icons.tsx       hand-built SVG icons
  index.css       @theme tokens, typography, motion
serverless Vite SPA; hash-based client routing.

Features

• Intent matching — filter the field by mood / climate / movement / value / character, with a weighted match score and per-match rationale.
• Sorting — re-order the field by match, name, cost, crowd, or region.
• Detail views — a full destination plate (readings, at-a-glance facts, related places) and region pages, driven by the URL hash.
• Accessibility — focus-visible styles, skip link, aria labels/pressed states, semantic landmarks, reduced-motion support.

Run locally

npm install
npm run dev      # start the dev server
npm run build    # production build
npm run preview  # preview the build

Note

Destinations, match scores, and figures are synthetic demonstration data. Photography by Unsplash contributors.