Gatefold Documentation 1.1

Overview

Welcome

Gatefold is a two-page HTML portfolio template. It ships as plain files — no build step, no framework, no package manager. Open index.html in a browser and it runs.

The weight of this template is in its JavaScript rather than in CSS breadth: a full-bleed carousel, a detail overlay for every slide, and prev/next navigation that steps between those overlays without closing the panel. Those three systems have a page each in this documentation.

What’s Inside

Pages

  • index.html — header, hero wordmark, carousel, one overlay per slide;
  • about.html — a reading column with two pull-out figures, smooth scroll and a footer;

Your code

  • assets/js/nav.js — the header menu: dropdowns and the phone panel;
  • assets/js/smooth-scroll.js — smooth scroll on the About page;
  • assets/js/main.js — carousel, hover panel, carousel/overlay sync;
  • assets/js/overlay.js — the overlay itself;
  • assets/js/overlay-nav.js — stepping between overlays;
  • style.css — compiled from the Sass in Source/;

Third party

  • assets/js/gsap.js, swiper.js, lenis.js, lucide.js — see Credits & Licences;
  • assets/fonts/inter/ — self-hosted, licence file included;

Where to Start

  1. Open index.html and confirm the carousel and overlays work as delivered.
  2. Replace the images in assets/images/demo/portfolio/ with your own — each picture comes in three widths (640, 1024 and 1600px, 4:5); keep the file names and nothing in the markup has to change.
  3. Edit the slide and overlay markup in index.html — the JavaScript reads it, it does not generate it.
  4. Retheme from the tokens rather than by hunting hex values — and note that changing them means recompiling the Sass. See Building the Stylesheet.

The carousel is configured from markup, through data-cel-* attributes, so you can change how it behaves without opening a .js file. Motion and overlay settings live in a short defaults object at the top of each script.

Scope

Gatefold is deliberately small. It has no multi-skin system, no light/dark theming, no form kit, no tables and no megamenu. What it has is documented here in full.