Folio

Sobre Este Template

Folio es una plantilla de revista editorial digital para publicadores independientes, directores creativos y estudios de moda que quieren que su presencia online se sienta como una Vogue o i-D física. Doce páginas listas para producción cubren historias, lookbook editorial, blog, about, colaboradores, suscripción y contacto. Tres skins de color — Ivory Press, Midnight Edition y Sage & Ink — intercambiables con un solo atributo HTML. El hero de la portada presenta un logotipo FOLIO masivo que llena el viewport; al hacer scroll, las letras se separan revelando una fotografía editorial a sangre completa — como abrir la portada de una revista impresa. Animaciones GSAP de scroll en cada sección, overlay de grano fílmico, resplandores atmosféricos, efectos shimmer-border en hover y un carrusel de lookbook con arrastre horizontal.

Firma

El hero de la portada llena todo el viewport con el logotipo FOLIO. Al hacer scroll, las letras se separan en tiempo real vía GSAP scrub, revelando una fotografía editorial a sangre completa — como abrir la portada de una revista impresa. Es el tipo de interacción que hace que los visitantes se detengan y vuelvan a hacer scroll.

Características

• 12 páginas completas — Inicio, Stories, Detalle de Story, Lookbook, Detalle de Lookbook, Blog, Post de Blog, About, Colaboradores, Suscripción, Contacto, 404
• Hero de revelado de portada — el logotipo se separa con letter-spacing en scroll vía GSAP scrub, revelando una foto editorial a sangre completa
• 3 skins de color — Ivory Press (pergamino cálido), Midnight Edition (oscuro), Sage & Ink (verde apagado) intercambiables vía atributo data-skin
• Grilla masonry bento del lookbook con etiquetas de temporada y fotógrafo + páginas de detalle con galería a sangre completa
• Carrusel de lookbook con arrastre horizontal y tira de colaboradores con scroll GSAP
• 6 historias en Markdown con esquema frontmatter — título, autor, fecha, categoría, imagen, extracto, tiempo de lectura
• Overlay de grano fílmico, capas de resplandor atmosférico, efectos shimmer-border en hover, desvanecimiento en bordes
• Banner de marquesina de texto con scroll infinito
• Página de suscripción con niveles de precios (Digital + Print) y acordeón de FAQ
• Formulario de contacto con menú desplegable de asunto y validación estilizada
• Smooth scroll con Lenis + View Transitions de Astro con ClientRouter
• 30 imágenes con licencia Unsplash incluidas — optimizadas a WebP, listo para publicar
• SEO optimizado — JSON-LD, Open Graph, Twitter cards, URLs canónicas, sitemap, robots.txt con directivas para crawlers IA, llms.txt
• Google Analytics condicional (GA4) — se carga solo cuando la variable de entorno está configurada
• Totalmente responsive en breakpoints de 375px, 768px y 1440px
• TypeScript en modo estricto — cero any, cero warnings de build

Despliegue