# Multi-Page Portfolio

> A seven-page portfolio website template for architecture studios, creative agencies, interior designers, landscape designers and photographers. Seamless animated page transitions connect its project browser, filterable work index, case studies and local enquiry draft.

Canonical: https://gsapvault.com/templates/multi-page-portfolio-template
Live demo: https://gsapvault.com/demos/multi-page-portfolio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | Not sold singly; comes with the Templates Pass or the Vault |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, clip-path, click-toggle, filter, keyboard-navigation, focus-management, page-transition, soft-navigation, directional-transition |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (7 pages, lowest score shown), 3 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A portfolio needs somewhere for the work to go. This seven-page website gives a studio or independent creative a home, a project index, three individual case studies, a studio page and a contact page. Stillform, a fictional architecture practice, supplies the worked example; the same structure suits a creative agency, interior designer, landscape designer or photographer.

Oversized type, pale butter grounds and forest-green ink frame real architectural photographs. The home page lets visitors choose a featured study, the project index offers category and layout choices, and the case studies give images and explanations room to breathe. Seamless page transitions turn navigation into a photographic handoff: forest-green panels sweep across the view, the destination name appears at display scale and a floating photograph settles into the next page. Shared styling stays loaded during normal navigation, with browser history and direct entry to every page.

Replace the practice identity, photographs and project stories with your own. The contact page prepares an explicitly unsent enquiry draft for review and copying; connect your own submission service when you want to receive enquiries. The bundled HTML, CSS, JavaScript and image derivatives need no buyer build step.

## Features

- Seven standalone HTML pages: home, projects, studio, contact and three project case studies
- Seamless GSAP page transitions with directional forest panels, large destination titles and a photograph that carries into the next page without a full document reload
- Browser Back/Forward support, scroll restoration and destination focus, with ordinary page navigation as the fallback
- Photographic home project browser with three choices, synchronized captions and a short image wipe
- Projects index with Homes and Interiors filters, a live result count and grid/list views
- Three case studies with project facts, descriptive image captions and next-project links
- Image viewer with previous/next controls, arrow-key navigation, Escape dismissal and return focus
- Studio page with working principles and native service disclosures
- Contact form collecting name, email, project type and brief, producing a local unsent draft with a copy control
- Responsive butter-and-forest palette, restrained entrances and scroll reveals, and native scrolling
- Readable pages and ordinary links without JavaScript; functional controls without the animation CDN; instant local controls and same-document navigation under reduced motion
- Seven bundled, graded WebP photographs with source credits and replacement guidance

## Use Cases

- Architecture studios presenting residential projects and spatial studies
- Creative agencies building a project-led portfolio with separate case studies
- Interior and landscape designers showing materials, places and their practice
- Photographers who want a visual index and a page for each series

## Questions about this template

### What kinds of portfolio can the Stillform example become?

The seven-page structure suits architecture studios, creative agencies, interior designers, landscape designers and photographers. Stillform is a fictional example, so replace its identity, Bristol references and illustrative design studies with your own work. The project index and individual case studies give each commission or series a clear destination.

### Can I add more than the three included project studies?

Yes. Each included study has its own standalone page, project facts, photographs and next-project link. Use one as the starting point for another study, then add its entry to the work index and any featured positions you want on the home page. The three home choices can remain a curated selection.

### Will the enquiry form send messages to my studio?

It is an unwired static front end. It collects name, email address, project type and a brief, then displays a local, unsent draft that the visitor can copy. Nothing is saved or delivered by the template. Connect Formspree, Netlify Forms or your CRM and update the visible draft wording before accepting real enquiries.

### Can I replace Homes and Interiors with my own project categories?

Yes. The included work index has Homes and Interiors filters, a result count and grid/list controls. Rename those categories to suit your work, such as Branding and Digital or Gardens and Public Spaces, and assign each project to its matching category. Individual case-study pages remain directly accessible from their links.

### Do the photographs show actual Stillform commissions?

No. Stillform is fictional, and the real stock photographs illustrate design studies rather than claimed client commissions. The download includes graded WebP derivatives and original Pexels credits. Replace them with your licensed project photography, update captions and alternative text, and remove the fictional-practice disclosure once your own content is in place.

### Can visitors inspect images beyond the project thumbnails?

The case studies include an image viewer with descriptive captions, previous and next buttons, arrow-key navigation and Escape to close. Focus returns to the photograph that opened it. The images also remain in the page itself, so the project story is readable when the optional viewer cannot run.

### Do the page transitions work on ordinary static hosting?

Yes, when the files are served over HTTP or HTTPS on a static host. Normal links between the included pages move through the photographic handoff without a full document reload, and browser history remains usable. Reduced motion changes pages instantly once fetched, retaining styles and fonts. Opening files directly or losing the animation libraries uses ordinary page navigation.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### A complete portfolio, page by page

Home, projects, studio and contact sit alongside three separate case studies. Normal navigation keeps the shared site assets loaded while moving between pages, and visitors can still arrive directly at any page or return through browser history.

### A photographic page handoff

Forest-green panels sweep over the current view while a photograph lifts into the foreground. The destination name appears, the image changes to introduce the next place, and the panels withdraw as the photograph settles into its new position. Shared styling remains in place throughout the transition.

### Browse before opening a project

The home photograph and caption change together when a visitor chooses a study. On the work index, category filters narrow the selection and a layout control switches between image-led grid and compact list views.

### Give the details their own space

Each study includes project facts, a written introduction and illustrative photographs. The image viewer offers larger views, captions and keyboard controls, returning focus to the selected photograph when closed.

### An honest enquiry draft

The contact form reviews a visitor’s name, email, project type and brief on the page. Nothing is sent or saved by the template; the visitor can copy the draft, and the buyer can connect a real enquiry destination.

### Motion follows the visitor

The page handoff and quieter scroll reveals leave native scrolling intact. Reduced-motion preferences use immediate local controls and an instant change to the fetched page, keeping shared styles and fonts loaded. Missing animation dependencies retain readable content and ordinary page links.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Upload the extracted folder to a static host and open `index.html`. Keep the seven HTML files alongside `assets/` so relative links continue to work. No build step, framework or package installation is required. Serve the files over HTTP or HTTPS to enable seamless page transitions. Use a local HTTP server while editing. Opening an HTML file directly uses ordinary page navigation as a fallback.

The site loads GSAP and ScrollTrigger from a CDN and fonts from Google Fonts. All project images, styling and application JavaScript are bundled locally. An internet connection supplies animation libraries and fonts; readable content and system-font fallbacks remain when those services are unavailable.

### Using It With Your Own Design

Start with the identity, page titles and descriptions, navigation, footer and project copy in the HTML files. Replace Stillform’s Bristol references and the fictional-practice disclosure with truthful information about your business. Keep navigation and footer links consistent across all seven pages.

The shared `assets/style.css` controls every page. Keep the project browser’s positioned image area, image clipping and responsive layout when restyling its transitions. Reveal wrappers own their entrance transforms; their child images carry hover styling. Retain the synchronous `has-js` gate and its no-JavaScript/reduced-motion fallbacks together if you keep reveals.

The contact form is a local demonstration: it sends and stores nothing. Connect your own enquiry service and revise its visible disclosures before putting it into service.

### Pages and Configuration

| File | Content and controls |
| --- | --- |
| `index.html` | Home, three featured project choices, selected places and studio introduction |
| `projects.html` | Three project cards, Homes/Interiors category filters, grid/list views and live count |
| `woodland-house.html` | Woodland House study, facts, photographs and image viewer |
| `garden-house.html` | Garden Pavilion study and next-project link |
| `timber-court.html` | Courtyard Rooms study and next-project link |
| `studio.html` | Practice introduction, principles and native service disclosures |
| `contact.html` | Name, email, project type and brief fields; local review and optional copy |

Featured selectors use matching `data-project-select` and `data-project-panel` numbers, beginning at zero. Project cards carry `data-category`; filter buttons carry the corresponding `data-filter` value, with `all` showing every card. `data-view="grid"` and `data-view="list"` choose the index layout. Update the static filter totals when the collection changes.

Case-study viewer buttons carry `data-viewer-open`, a local image path in `data-full` and their caption in `data-caption`. Keep captions and image alternative text specific to the visible subject. The included interior and detail photographs are illustrative material studies, not additional documented views of the featured houses.

Service disclosures use native `details` and `summary` elements. Remove an entire content section when unnecessary and repair any links pointing to it. Individual project pages can be added or removed independently; update the index, featured choices and next-project links accordingly.

### Page Transitions

Normal same-origin links between sibling HTML pages use a seamless photographic handoff. Forest-green panels sweep over the departing page while the next page is fetched underneath (links prefetch on hover and focus), a floating image and large destination title introduce the next view, and the photograph settles into the arriving page as the panels withdraw. Shared CSS, fonts and JavaScript remain loaded, avoiding an unstyled intermediate document during successful enhanced navigation.

Keep pages at the same directory level, with the shared stylesheet and scripts. Every page loads `assets/page-router.js` before `assets/script.js`; keep that order on a new page. `assets/page-router.js` is the small page router underneath the handoff (link handling, fetching, history, scroll and focus) and should not need editing. The handoff itself is the `leave`, `hold`, `enter` and `reset` functions passed to `PageRouter.create` at the end of `assets/script.js`; the header comment of `assets/page-router.js` lists everything they receive. Each destination needs `main#main` carrying `data-page-label`, alongside `.site-header` and `.site-footer`. Use `data-page-number` on the main element for its route number and optional `data-transition-title` for the display title; `|` separates title lines. The first suitable page image supplies its photographic handoff. Pages without a usable image retain the panel and title transition.

The document keeps one router while outgoing page interactions and animation contexts are removed and incoming ones initialized. Header, main, footer and optional viewer are replaced; the page title and description update. Fetched scripts are not evaluated, so put new page behavior in the shared initialization function rather than a script inside the incoming page. Keep shared head assets consistent across all destinations.

Add `data-native-navigation` to a link or an ancestor to use native navigation. Downloads, external destinations, new-tab/modifier clicks, same-page anchors and routes outside the sibling HTML folder also retain normal browser behavior. New navigation scrolls to the top or a linked fragment and focuses the arriving heading; Back/Forward restores recorded scroll positions. The latest click wins: a link chosen while the panels are still closing goes straight to that page from the covered screen, and one chosen while the destination is being revealed lets that reveal finish quickly and then moves on. Back or Forward mid-transition settles on the page the browser asked for.

Transition timing lives in the navigation timelines in `assets/script.js`: approximately 0.61 seconds to cover, 0.39 seconds to introduce the destination, and 0.70 seconds to reveal it. The shared `PACE` (1.55) applied to each phase controls the pace of all three phases together, giving about 1.7 seconds of motion overall. Fetch and image readiness can extend the covered interval. Reduced motion keeps the shared styles and fonts loaded and swaps to the fetched destination instantly without the animated handoff. Missing GSAP, direct file opening and failed page fetching use native navigation. A resize or newly enabled reduced-motion preference finishes the active phase quickly.

### Contact Form

The fields are named `name`, `email`, `type` and `brief`. Browser validation checks required fields and email format. Reviewing an enquiry displays its contents locally and moves focus to the draft heading. The message explicitly remains unsent and unsaved. Copy uses the Clipboard API in a secure context; if unavailable, the draft is selected for the visitor’s own Copy command.

For Formspree, Netlify Forms or your CRM, configure the receiving endpoint and required field names, then replace the local review submission handler with your real delivery flow. The demo uses `method="dialog"` to prevent native form delivery when JavaScript is disabled; change it to your destination’s required submission method. Simply adding an `action` does not enable delivery while the existing handler prevents submission. Provide truthful sent/error feedback only after your service confirms the result. Without JavaScript, the local review control is unavailable and an explanation appears; no delivery service is configured.

### Palette

One light palette is included. Edit the semantic tokens at the top of `assets/style.css` and their matching RGB triples:

| Token | Default | Purpose |
| --- | --- | --- |
| `--ground` | `#f0eedb` | Butter page ground |
| `--surface` | `#e5e2cb` | Quiet secondary surface |
| `--ink` | `#263e35` | Forest text and dark panels |
| `--ink-dim` | `#536258` | Secondary text |
| `--accent` | `#be4d2e` | Decorative terracotta marks |
| `--white` | `#ffffff` | Neutral white |

Terracotta is decorative rather than body-text colour. Retest text contrast when changing colours. DM Sans supplies body and display text; Instrument Serif italic provides occasional contrast. Update Google Fonts links in each page as well as CSS font tokens when changing typefaces. The favicon is `assets/favicon.svg`.

### Accessibility and Fallbacks

Navigation uses real page links, enhanced by the seamless page router when available, and native scrolling. The site includes a skip link, visible focus states, labelled form controls and image descriptions. Project selection, filters and layout choices use buttons with pressed states. The result count announces changes. The native modal viewer supports its buttons, arrow keys and Escape, and restores focus on close.

Without JavaScript, content, project links and service disclosures remain available; enhanced filters, selection controls, draft review and viewer interactions are unavailable. The homepage initially presents Woodland House, with the other studies reachable through the selected work section and project index. If the animation CDN fails while local JavaScript loads, interactions use immediate changes and all reveal content becomes visible. Reduced motion removes animated entrances, reveals and the project wipe while retaining local controls, and replaces the page handoff with an instant same-document change once the destination is fetched. The template uses no Lenis, pinned scrolling or automatic project rotation.

### Dependencies

The demo is pinned to **GSAP 3.15.0**, including ScrollTrigger. Compatibility floor: **GSAP 3.12+**; use matching core and plugin versions. The only animation plugin used is ScrollTrigger. DM Sans and Instrument Serif are supplied through Google Fonts with system fallbacks. There is no backend, CMS or payment integration.

### Images and Credits

The download contains seven cropped, graded WebP derivatives in `assets/img/`. Photography is licensed through [Pexels](https://www.pexels.com/license/), which permits use in website templates. These images illustrate a fictional portfolio. Retain your own image licences when replacing them.

| Bundled file | Original source | Visible subject |
| --- | --- | --- |
| `woodland-house.webp` | [Pexels 7598365](https://www.pexels.com/photo/modern-architecture-house-and-yard-7598365/) | Brick and glass house among trees |
| `garden-house.webp` | [Pexels 7587878](https://www.pexels.com/photo/house-with-lawn-7587878/) | Dark single-storey building beside a lawn |
| `timber-court.webp` | [Pexels 4969867](https://www.pexels.com/photo/contemporary-residential-house-with-green-backyard-in-sunlight-4969867/) | Timber buildings and mature tree |
| `dining-room.webp` | [Pexels 20548025](https://www.pexels.com/photo/20548025/) | Oak dining furniture, arch doorway and daylight |
| `gallery.webp` | [Pexels 13340354](https://www.pexels.com/photo/brown-brick-wall-beside-white-wall-13340354/) | Brick gallery with diagonal window light |
| `timber-detail.webp` | [Pexels 9329002](https://www.pexels.com/photo/brown-wooden-wall-with-light-9329002/) | Perforated timber panels and warm light |
| `studio-materials.webp` | [Pexels 6568679](https://www.pexels.com/photo/architects-discussing-wood-samples-6568679/) | Hands comparing wood samples and reference images |

Replace a bundled WebP with your licensed photograph using the same filename, then update intrinsic dimensions, alternative text and captions wherever it appears. For different filenames, update the HTML and viewer paths together. Avoid upscaling small sources or forcing a portrait into a wide crop that removes its subject.

The Vault authoring source includes `assets/img-manifest.json`, with original URLs, crop sizes and grade values. In the Vault source checkout, edit it and regenerate with `bun scripts/build-template-assets.ts multi-page-portfolio-template --force`. The manifest, untouched source photographs and bake tool are internal authoring inputs and are not included in the buyer download. Buyers can replace the bundled derivatives directly; their site needs no build step.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template, not sold individually: it comes with the Templates Pass or the Vault. The standard licence covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Templates Pass (£50 one-time): every current and future premium template](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt