Proyecto personal · Experiencia web
Selvática
El paisaje marca el ritmo.
Selvática explora cómo la tipografía, las imágenes y el movimiento pueden transmitir la identidad de un alojamiento conceptual. Una experiencia personal de diseño y desarrollo frontend inspirada en el bosque húmedo y el paisaje volcánico de Arenal, Costa Rica.
- Mi participación
- Desarrollo frontend, composición visual e interacciones responsive.
- Estado
- Proyecto completado · Demo publicada
- Año
- 2026
El punto de partida
Transmitir un lugar a través de una pantalla.
La propuesta alterna escenas inmersivas con espacios de lectura más pausados. La composición, las transiciones y la carga de imágenes debían acompañar ese ritmo y conservar una experiencia natural tanto con ratón como con pantalla táctil.
Una composición para cada pantalla
Cambiar el recorrido, conservar la identidad.
En escritorio, la fotografía acompaña el relato desde una posición fija. En móvil, imagen y texto se suceden con un ritmo propio.
Decisiones que dan forma al producto
Dos maneras de recorrer el paisaje
En escritorio, una imagen permanece visible mientras avanza el relato y cambia con la experiencia activa. En móvil, la sección se convierte en una secuencia vertical de imágenes y textos adaptada a la lectura táctil.
Movimiento con una función
Las transiciones conectan imágenes, contenido y jerarquía. Motion respeta la preferencia de movimiento reducido. Las secciones estáticas e interactivas se componen con Server y Client Components de Next.js.
Un archivo que se puede explorar
La galería usa una composición asimétrica y un visor con dialog nativo. Admite navegación con flechas, cierre con Escape y devolución del foco al elemento que abrió la imagen.
De la intención a la consulta
Un panel accesible desde varias partes de la página reúne llegada, salida y huéspedes. Con esos datos prepara una consulta de disponibilidad que continúa por WhatsApp.
Implementación y verificación
93
rendimiento móvil documentado
100
accesibilidad en Lighthouse
100
buenas prácticas y SEO en Lighthouse
Puntuaciones recogidas en el README del proyecto. El rendimiento depende de las condiciones de medición; el resultado automatizado de accesibilidad no sustituye la comprobación manual.
Tecnologías
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
Alcance actual
Proyecto conceptual publicado como demo. No representa un alojamiento ni un operador turístico real. El formulario prepara una consulta por WhatsApp; no confirma reservas ni procesa pagos.
El detalle está en cómo se relacionan las imágenes, la lectura y las interacciones a lo largo del recorrido.
Siguiente proyecto
Obsidian Library¿Construimos algo juntos?
Hablemos