Gulf of Morbihan · since 2014 · Homepages
Atelier Nord
The adventure starts by the water
Scroll to explore ↓
01 · Gulf of Morbihan · since 2014
Kayak, paddle & guided outings
Full outdoor site — hero, trips, booking.
- 01
Guided outings
Islands, currents, sunsets — max 8 per group, certified guide.
- 02
Rentals
Single / double kayak, paddle, life jackets — from half a day.
- 03
Courses
Weekend intro or current skills — gear included.
01b · Engineering
Technical sheet
Stack, shipping and my role on this build — for recruiters and tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Libraries & tools
- Framer Motion
- next/image
- Deployment
Local /play demo — Next.js front, no business backend
- Role
UI direction · integration · interactions
- Context
Fictional direction (NDA) — same craft level as real missions
02 · Inside the product
One scroll, one screen
Each section locks to the viewport — keep scrolling past the last screen to return to the brief.
Gulf of Morbihan · since 2014
Kayak, paddle & guided outings
Guided outings
Islands, currents, sunsets — max 8 per group, certified guide.
Rentals
Single / double kayak, paddle, life jackets — from half a day.
Courses
Weekend intro or current skills — gear included.
“First time kayaking: the guide explained everything, zero stress, insane view of Île d’Arz.”
Next tide
Book your outing this weekend
Saturday 9am & 2pm slots still open · from €39.
Book nowBack to the brief
You’ve left the demo screens — next: try it, then the craft notes.
03 · Verified reviews
What they remember from the water
“First time kayaking: the guide explained everything, zero stress, insane view of Île d’Arz.”
“We rented two doubles for the family — gear was perfect, on-time start, highly recommend.”
04 · Next tide
Book your outing this weekend
Saturday 9am & 2pm slots still open · from €39.
- →Hero + below-the-fold sections (not just a hook)
- →Visual hierarchy and primary CTA
- →Information density vs readability
05 · Same family
Other directions of the same type — to compare density and mood.
06 · What to look at
- 01Hero + below-the-fold sections (not just a hook)
- 02Visual hierarchy and primary CTA
- 03Information density vs readability
- 04Interactive states (hover, selection, feedback)