chenoaventuras.com

Sitio estático de Chenoaventuras — marca de contenido de viajes en Instagram. Sin framework ni paso de build: HTML + CSS + un JS pequeño. Se sirve tal cual (desplegado en Vercel).

Estructura

index.html          Inicio (hero + curiosidades + destacados + equipo + descuentos + últimas publicaciones + newsletter)
servicios.html      Servicios + #dron (certificación A1/A3) + #descuentos
equipo.html         Equipo con el que viaja
contacto.html       "Soy Cheno" + cifras + formulario (demo) — unifica Sobre mí y Contacto
vercel.json         Redirecciones 301 de las URLs antiguas (/destinos, /blog, /sobre-mi)
assets/
  css/styles.css    Toda la hoja de estilos (tokens de color y tipografía arriba)
  js/main.js         Menú, "¿Sabías que…?", últimas publicaciones IG, reveal, año
  fonts/             Inter Black + Poppins self-host (ver su README)
  img/               Imágenes PROVISIONALES (ver assets/img/README.md)
  img/edges/         Divisores SVG de "papel rasgado"
  img/instagram/     Miniaturas descargadas por la GitHub Action (se crea sola)
  data/instagram.json  Últimas 3 publicaciones (la actualiza la Action a diario)
scripts/fetch-instagram.mjs         Descarga las publicaciones vía API de Instagram
.github/workflows/instagram.yml     Cron diario que ejecuta el script y hace push

Menú

Inicio · Aventuras · Curiosidades · Servicios · Equipo · Contacto. Arriba, iconos de Instagram y TikTok; en el pie, los cuatro: Instagram, YouTube, TikTok y Facebook.

Curiosidades del hero ("¿Sabías que…?")

assets/js/main.js tiene un array CURIOSIDADES (ciudades españolas, cultura, fauna, pueblos, demografía). Cada día se eligen 3 de forma determinista según la fecha (día local) y la barra va alternando entre ellas. Añadir/editar frases en ese array. Justo bajo la barra "¿Sabías que…?" del hero hay un cronómetro ([data-curios-clock]) que cuenta hasta la próxima medianoche local, cuando entra el nuevo trío.

Últimas publicaciones de Instagram (automático)

.github/workflows/instagram.yml corre cada día: llama a la API de Instagram, descarga las 3 últimas publicaciones y sus miniaturas, escribe assets/data/instagram.json y hace git push si hay cambios. Vercel redespliega.

Los reels nuevos NO salen solos en la inicio. El listado completo se actualiza solo, pero la inicio (carrusel y «Lo último») solo muestra los reels de la lista cerrada SHOW_ON_HOME de scripts/fetch-instagram.mjs. Para poner uno, añade su código corto (instagram.com/reel/<CÓDIGO>/) a esa lista y a assets/data/instagram.json ("home": true).

Falta configurar (en Settings → Secrets and variables → Actions del repo):

Secret	Qué es
IG_ACCESS_TOKEN	Long-lived access token de la API de Instagram con Instagram Login (cuenta profesional). Caduca a los ~60 días → hay que refrescarlo.
IG_USER_ID	(opcional) ID del usuario de Instagram; por defecto me.

Sin el secret, la Action no falla: simplemente no toca nada y la web muestra los 3 posts de ejemplo de instagram.json.

Pendiente (marcado como placeholder en el propio sitio)

• Fotos y logo reales. Todo assets/img/ son recortes temporales de las maquetas de Figma. Mapa en assets/img/README.md.
• Descuentos: ya con códigos reales (Holafly CHENOAVENTURAS, GetYourGuide CHENOAVENTURAS5, Insta360 INRSG28LBE2) y el enlace de afiliado de DiscoverCars. Cada tarjeta es un <details> que se despliega al pulsar; el botón "Copiar" lo maneja main.js. Editar en index.html y servicios.html (mismo bloque en ambos).
• Formularios. Newsletter y contacto solo muestran "¡Vamos a la aventura!"; todavía no guardan el correo ni avisan. Pendiente elegir servicio/backend.
• Contenido real de aventuras, equipo, biografía y cifras.
• Refresco del token de Instagram cada ~50 días (o automatizarlo).

SEO / que salga en Google

Ya incluido en el repo:

• robots.txt + sitemap.xml (todas las páginas).
• Por página: <title> con la marca delante, meta description, canonical, Open Graph + Twitter Card (assets/img/og-portada.jpg, provisional) y favicon (foto de Cheno recortada — assets/img/favicon-16/32/180/512.png; fuente en assets/img/cheno-perfil.jpg).
• index.html lleva datos estructurados JSON-LD (WebSite + Person con sameAs a Instagram/YouTube/TikTok/Facebook) para que Google asocie la marca a los perfiles y no la confunda con "chocoaventuras".

Falta hacerlo a mano (esto es lo que hace que aparezca):

1. Google Search Console — https://search.google.com/search-console
   • Añadir la propiedad chenoaventuras.com (verificación por DNS TXT en Vercel, o pegando aquí el <meta name="google-site-verification"> que dé Google).
   • Sitemaps → enviar sitemap.xml.
   • Inspección de URLs → pegar https://www.chenoaventuras.com/ → Solicitar indexación.
2. Confirmar en Vercel que el dominio chenoaventuras.com (y www) apunta al proyecto y que uno redirige al otro (dominio principal único).
3. Enlazar la web desde las biografías de Instagram, YouTube, TikTok y Facebook: es el factor nº 1 para un dominio nuevo.
4. Paciencia: un dominio nuevo suele tardar 1–4 semanas en indexarse.
5. Opcional: Bing Webmaster Tools (mismo proceso, y cubre también a otros).

Diseño

Basado en la "Opción 2" del Figma. Paleta: verde oliva #77854f, papel #efece7, verde-azulado profundo en fotos, footer #20261f.

Tipografías de marca (las de @chenoaventuras): Inter Black 900 para titulares y el wordmark, Poppins (600 subtítulos/menú/botones, 400/500 cuerpo). Inter y Poppins 600/500‑ital self-hosted en assets/fonts/; Poppins 400/500 rectos desde Google Fonts.