The brief

The ADV Crew is a community of motorcycle riders who chase Himalayan expeditions — Spiti, Ladakh, Arunachal, the high passes most people only see in photos. Their reputation lives in stories, photos, and routes they've ridden together.

They wanted a website that felt like that — not a generic "we organize rides" landing page. Premium, atmospheric, dark, and visual-first. Something that made you want to scroll, not skim.

The problem

Adventure motorcycle communities have a specific design problem: their content is naturally cinematic — landscapes, machinery, weather, scale — but most community websites flatten it into uniform cards on a white background. The brand evaporates.

Beyond aesthetics, the site had to do real work:

  • Showcase 5,000+ km of documented expeditions in a way someone could browse for hours
  • Serve as the public face when prospective riders wanted to vet the crew before joining
  • Work on a phone in a Spiti valley with three bars of EDGE

What I built

A single, high-density Next.js site designed around the photography:

  • Masonry gallery as the centerpiece. Photos from expeditions sized by aspect ratio, not crammed into a grid. Hover/tap reveals route metadata — distance, altitude, dates.
  • Cinematic dark theme. Custom palette tuned for OLED phones, with intentional contrast for outdoor light. Type set in a heavy display weight for headers; tight monospace for metadata.
  • Smooth, restrained animations. Scroll-driven reveals using Framer Motion, sequenced so the page feels alive without being noisy. Nothing bounces or wiggles — adventure motorcycling isn't playful.
  • Responsive without compromise. The same density on desktop and mobile, just reflowed. Images served as next/image with explicit sizing so phones don't pull desktop-resolution assets.
  • Content-led architecture. Routes, expeditions, and rider stories are content entries — adding a new ride is a content change, not a code change.

Stack and decisions

  • Next.js (App Router) + TypeScript with static generation everywhere possible.
  • Tailwind for the custom design system. No UI kit — every component drawn for this site.
  • Framer Motion for the scroll animations and gallery transitions.
  • next/image for every asset, with bandwidth-conscious defaults — important for the actual user, who's often on mobile data in the mountains.
  • Vercel for hosting and previews.

The hardest design decision was restraint. The brief invited maximalism — animated topographic maps, hero videos, parallax everywhere. Most of those got cut. What survived is the masonry gallery and a few quiet motion accents. The photography does the heavy lifting; the chrome stays out of its way.

What this proved

This was the design-led project — the kind where the win or loss is whether the site feels right, not whether it functions. It ships fast, looks distinctive, runs well on weak networks, and reads as a place a community lives, not a brochure.

If you've seen the site, you'll notice there's no carousel of testimonials, no gradient hero, no "Join now" interruption stack. That was the point.

If you have a brief like this

Design-forward Next.js sites — single-page or multi-page — are something I take on when the brief has visual ambition and a clear creative direction. If you're sitting on photography or a brand world that deserves better than a Webflow template, the contact form is the place to start.

→ Tell me about your project