Temporada 01 · Bitácora

La serie, capítulo a capítulo.

Cada episodio es una estadía de tres días: cómo fue, qué construimos y los datos nerds detrás de cada sitio. Se lee como un blog, se programa como un proyecto.

EP. 01

El Refugio, donde no había señal (y mejor así)

Foto real del lugar

El último tramo es de ripio y la señal se corta justo cuando aparece la cabaña entre las lengas. Olía a leña antes de bajar del auto. El dueño nos recibió con un mate y una sola consigna: que la web se sintiera como entrar acá.

Tres días de trabajo con el río de fondo. Programábamos de mañana, cuando la luz entra de costado, y a la tarde caminábamos para pensar la estructura. La cabaña no necesitaba diez secciones: necesitaba respirar.

Terminamos con un sitio de una sola pantalla larga, galería que se carga sola a medida que bajás y un calendario de disponibilidad simple. Nada de ruido. Solo el lugar.

// datos nerds
stackAstro + Tailwind
LCP0.8 s
el_trucohero en AVIF, resto del gallery con loading="lazy"
// cero frameworks de más: la cabaña carga antes que el agua del mate
"
Por primera vez la cabaña se ve tan ella misma en una pantalla.
— el anfitrión · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 02

Años 70: una casa que es una cápsula del tiempo

Foto real del lugar

Naranjas, marrones y una lámpara de lava que nadie se anima a apagar. La casa entera es un set de 1974, y la dueña la cuida como tal. El desafío era claro: una web retro que no cayera en lo kitsch.

Trabajamos entre discos de vinilo y un tocadiscos que sonó las tres tardes. Sacamos la paleta directo de la decoración: los mismos naranjas, el mismo grano de las fotos viejas. La tipografía hace la mitad del trabajo.

El detalle que más nos divirtió: al abrir la página, suena un crujido de vinilo bajito. Sutil, opcional, apagable. Nostalgia, pero con buen gusto.

// datos nerds
stackHTML + CSS puro · variable fonts
easter_eggWeb Audio API → crujido de vinilo al entrar
detallegrano retro 100% en CSS
// respeta prefers-reduced-motion: si pedís calma, la página se queda quieta
"
Se rió cuando escuchó el vinilo al abrir su propia página.
— la anfitriona · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 03

Cielo: tres noches mirando estrellas

Foto real del lugar

Un domo geodésico en el medio de la nada, lejos de cualquier luz. De día es un proyecto; de noche, un planetario. La web tenía que sentirse como acostarse a mirar el cielo.

Fondo negro por default, sin discusión. Tipografía clara, mucho aire. Las tres noches las pasamos midiendo cuánto podía moverse la pantalla sin marear: la respuesta fue "poquito, y que titile apenas".

El corazón del sitio es un mapa de constelaciones que parpadea suave, como el cielo real sobre el domo. Hipnótico sin ser pesado.

// datos nerds
stackCanvas + JS vanilla
featureconstelaciones que titilan con requestAnimationFrame
perfcapamos el devicePixelRatio
// para que el cel no termine más caliente que el fogón
"
Es la primera vez que una web me da ganas de apagar la luz.
— el anfitrión · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 04

La Orilla, donde el día empieza antes que el sol

Foto real del lugar

A las cinco de la mañana ya había niebla sobre el agua y alguien armando la caña en el muelle. Esta casa vive de la pesca, y la web tenía que tener el clima y el nivel del agua a mano, sin entrar a tres páginas distintas.

Pasamos los días entendiendo qué mira realmente un pescador antes de reservar: viento, presión, amanecer. Todo eso lo pusimos arriba de todo, en un solo vistazo.

Y como acá se cierra todo por WhatsApp, el botón de reserva ya abre el chat con el mensaje medio escrito. Menos fricción, más reservas.

// datos nerds
stackAstro + Leaflet
featurewidget de clima/viento desde una API, cacheado
el_trucoreserva por WhatsApp con mensaje pre-armado (deep link)
// la API se consulta una vez por hora, no en cada visita
"
Ahora me escriben con la fecha ya puesta. Eso solo ya valió la pena.
— el anfitrión · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 05

La Bodega: un sitio que se cuenta mientras bajás

Foto real del lugar

Hileras de vid hasta donde llega la vista y un atardecer que dura una hora. La quinta tenía historia para contar, así que la web la dejamos que se desplegara despacio, como un recorrido entre las parras.

Tres días entre barricas pensando el ritmo: cada bloque aparece cuando llegás, no antes. La idea era que leer el sitio se pareciera a caminar el viñedo al atardecer.

El bonus que nos pidió la casa: un mini quiz de maridaje. Respondés tres cosas y te sugiere el varietal. Simple, pero la gente se queda jugando.

// datos nerds
stackJS vanilla + SVG
featurelas parras se "dibujan" al scrollear (stroke-dashoffset)
bonusquiz de maridaje: máquina de estados de 80 líneas
// todo con IntersectionObserver, sin una sola librería de animación
"
La web tiene el mismo tiempo que un atardecer acá. No sé cómo lo lograron.
— la anfitriona · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 06

Cumbre: nieve afuera, tres idiomas adentro

Foto real del lugar

Trabajamos con la nieve cayendo del otro lado del vidrio y la chimenea prendida. A esta cabaña de ski llega gente de todos lados, así que la web tenía que hablar español, inglés y portugués sin marearse.

Lo más útil resultó lo más simple: un tablero con el estado de las pistas, arriba de todo. Si abrió, lo ves; si no, también. Tres días de invierno nos recordaron que la info clara gana siempre.

Ah, y sí: cae nieve en la pantalla. Discreta, porque nadie quiere que el cel sufra en la montaña.

// datos nerds
stackAstro + i18n
featurenieve en Canvas + tablero de estado de pistas
detallediccionarios JSON, partículas con tope de FPS
// 3 idiomas, 1 sola base de código
"
Dejé de contestar el mismo mail en inglés diez veces por día.
— el anfitrión · [reemplazá con sus palabras reales]
Ver la web terminada
EP. 07

Marea Alta: una web con arena en la pantalla

Foto real del lugar

Tablas apoyadas en la pared y viento que no para nunca. Esta casa de playa vive del surf, y casi toda su gente entra desde el celular, con las manos llenas de protector solar. Así que: mobile-first, sin excusas.

Los tres días fueron de olas al amanecer y código a la siesta. Probamos la galería en la playa misma, con el sol pegando, para asegurarnos de que se viera y se deslizara bien con el dedo.

El pronóstico de olas quedó arriba de todo, porque es lo único que un surfista mira antes de decidir. Lo demás, abajo, tranquilo.

// datos nerds
stackmobile-first · JS vanilla
featurepronóstico de olas + galería con gestos táctiles
perfolas en SVG animado
// se apagan con prefers-reduced-motion para no marear
"
Funciona perfecto desde el cel, que es justo donde la mira todo el mundo.
— el anfitrión · [reemplazá con sus palabras reales]
Ver la web terminada
El próximo episodio

¿Y si el capítulo 08 es tu casa?

La temporada sigue abierta. Contanos sobre el lugar y veamos si entra.

Postulá tu casa