Folio

About This Template

Folio is a digital editorial magazine template built for independent publishers, creative directors, and fashion studios who want their online presence to feel like a physical Vogue or i-D. Twelve production-ready pages cover stories, lookbook editorials, blog, about, contributors, subscribe, and contact. Three color skins — Ivory Press, Midnight Edition, and Sage & Ink — switchable via a single HTML attribute. The homepage hero features a massive FOLIO logotype that fills the viewport; as you scroll, the letters split apart revealing a full-bleed editorial photograph underneath — like peeling open the cover of a print magazine. GSAP scroll-driven animations on every section, film grain overlay, atmospheric glows, shimmer-border hover effects, and a horizontal-drag lookbook carousel.

Signature

The homepage hero fills the entire viewport with the FOLIO logotype. As you scroll, the letters split apart in real time via GSAP scrub, revealing a full-bleed editorial photograph underneath — like peeling open the cover of a print magazine. It's the kind of interaction that makes visitors stop and scroll again.

Features

• 12 complete pages — Home, Stories, Story Detail, Lookbook, Lookbook Detail, Blog, Blog Post, About, Contributors, Subscribe, Contact, 404
• Cover-reveal hero — logotype letter-spacing splits on scroll via GSAP scrub, revealing a full-bleed editorial photo
• 3 color skins — Ivory Press (warm parchment), Midnight Edition (dark), Sage & Ink (muted green) switchable via data-skin attribute
• Lookbook masonry bento grid with season and photographer labels + full-bleed gallery detail pages
• Horizontal-drag lookbook carousel and contributors strip with GSAP scroll
• 6 Markdown stories with frontmatter schema — title, author, date, category, image, excerpt, reading time
• Film grain overlay, atmospheric glow layers, shimmer-border hover effects, edge fades
• Infinite-scroll text marquee banner
• Subscribe page with pricing tiers (Digital + Print) and FAQ accordion
• Contact form with subject dropdown and styled validation
• Lenis smooth scroll + Astro View Transitions with ClientRouter
• 30 Unsplash-licensed images included — optimized to WebP, ready to ship
• SEO optimized — JSON-LD, Open Graph, Twitter cards, canonical URLs, sitemap, robots.txt with AI crawler directives, llms.txt
• Conditional Google Analytics (GA4) — loads only when env variable is set
• Fully responsive at 375px, 768px, and 1440px breakpoints
• TypeScript strict mode — zero any, zero build warnings

Deployment