Personal project · Web experience
Selvática
The landscape sets the pace.
Selvática explores how typography, imagery and motion can express the identity of a conceptual hospitality destination. A personal design and frontend project inspired by the rainforest and volcanic landscape of Arenal, Costa Rica.
- My contribution
- Frontend development, visual composition and responsive interactions.
- Status
- Project completed · Live demo
- Year
- 2026
The starting point
Communicating a place through a screen.
The experience alternates immersive scenes with quieter reading spaces. Composition, transitions and image loading needed to support that pace and feel natural with both a mouse and a touch screen.
A composition for every screen
Change the journey. Keep the identity.
On desktop, photography accompanies the story from a sticky position. On mobile, image and text follow one another at their own pace.
Decisions that shape the product
Two ways to explore the landscape
On desktop, an image stays visible as the story progresses and changes with the active experience. On mobile, the section becomes a vertical sequence of images and text suited to touch-based reading.
Motion with a purpose
Transitions connect images, content and hierarchy. Motion respects the reduced-motion preference. Static and interactive sections use Next.js Server and Client Components.
An archive to explore
The gallery uses an asymmetric composition and a native dialog viewer. It supports arrow-key navigation, Escape to close and focus restoration to the element that opened the image.
From interest to inquiry
A panel available throughout the page collects arrival, departure and guest count. It uses those details to prepare an availability inquiry that continues through WhatsApp.
Implementation and verification
93
documented mobile performance
100
Lighthouse accessibility
100
Lighthouse best practices and SEO
Scores documented in the project README. Performance depends on measurement conditions; an automated accessibility score does not replace manual checks.
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
Current scope
A conceptual project published as a demo. It does not represent a real accommodation or tourism operator. The form prepares a WhatsApp inquiry; it does not confirm reservations or process payments.
The detail lies in how imagery, reading and interaction work together throughout the experience.
Next project
Obsidian LibraryLet’s build something together.
Get in touch