Nomadian

A cinematic one-page luxury travel app built with SvelteKit, TypeScript, Tailwind CSS, and GSAP.

Overview

Nomadian is a premium travel studio website designed around a single-page storytelling flow. The homepage leads visitors through destinations, curated tours, brand positioning, editorial content, and booking, while dedicated detail pages still exist for destination and tour deep links.

The project focuses on:

• one-page navigation with section-aware active states
• reusable section and card components
• modern motion and interaction polish
• content-driven data from a central site.ts source

Tech Stack

• SvelteKit
• Svelte 5
• TypeScript
• Tailwind CSS v4
• GSAP
• Lucide Svelte

Features

• One-page homepage with anchor-based navigation
• Sticky/detached desktop navigation with active section tracking
• Cinematic hero with layered motion
• Distinct destination, tour, and blog card systems
• Destination carousel
• Animated count-up stats
• Reusable reveal and parallax actions
• Tour and destination detail pages
• SEO component and JSON-LD support
• Responsive layout for desktop and mobile

Project Structure

src/
  lib/
    actions/
      parallax.ts
      reveal.ts
    animations/
      gsap.ts
    components/
      AnimatedStat.svelte
      BlogCard.svelte
      BrandLogo.svelte
      CTASection.svelte
      DestinationCard.svelte
      Footer.svelte
      Hero.svelte
      Modal.svelte
      Navbar.svelte
      Seo.svelte
      TestimonialCard.svelte
      TourCard.svelte
      sections/
        AboutSection.svelte
        BlogSection.svelte
        ContactSection.svelte
        DestinationsSection.svelte
        ToursSection.svelte
    data/
      site.ts
  routes/
    +layout.svelte
    +page.svelte
    about/+page.ts
    blog/+page.ts
    contact/+page.ts
    destinations/+page.ts
    destinations/[slug]/+page.svelte
    tours/+page.ts
    tours/[slug]/+page.svelte
    layout.css
static/
  home.png

Architecture Notes

• src/routes/+page.svelte is the main one-page experience.
• src/lib/data/site.ts holds nav items, destinations, tours, testimonials, blog content, and shared content metadata.
• src/lib/components/sections/* contains the homepage section building blocks.
• src/routes/about/+page.ts, blog/+page.ts, contact/+page.ts, destinations/+page.ts, and tours/+page.ts redirect to homepage anchors.
• src/routes/destinations/[slug] and src/routes/tours/[slug] provide deep-link detail pages.

Getting Started

Prerequisites

• Bun recommended

You can also use npm, but this repo already includes a bun.lock.

Install

bun install

Run the app

bun run dev

Then open the local Vite URL in your browser.

Available Scripts

bun run dev
bun run build
bun run preview
bun run check
bun run check:watch
bun run lint
bun run format

Content Model

Most editable product and marketing content lives in:

src/lib/data/site.ts

That file powers:

• navigation
• destinations
• tours
• blog posts
• testimonials
• FAQs
• site metadata

Build

Create a production build:

bun run build

Preview it locally:

bun run preview

Notes

• The project currently uses @sveltejs/adapter-auto.
• Legacy top-level marketing routes redirect back into the one-page homepage.
• Detail pages remain available for richer destination and tour exploration.