Creative Portfolio Template

What's Included

Code snippet omitted: it ships with the download.

Quick Start

1. Open index.html in a browser. The template is fully self-contained; GSAP, SplitText, and Lenis load from CDN.

2. Make it yours:

• Replace the text content in index.html (studio name, projects, stats, contact details)
• Swap the placeholder client logos: the .client-logo spans in the marquee are styled text wordmarks. Replace them with your clients' names, or drop in <img>/inline SVG logos (keep both .marquee-group copies identical so the loop stays seamless)
• Swap the poster placeholder artwork: the .poster--klein, .poster--clay, .poster--moss, .poster--ink, .poster--stone, and .poster--bone figures are stand-ins. Replace them with background-image or drop <img> tags inside the .work-thumb / .panel-visual elements
• Change the palette by editing the custom properties at the top of assets/style.css: --klein (the hero slab and accent), --ink, --bone, plus the poster colours --clay, --moss, --stone

3. Deploy. Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server.

Optional: minify before you go live

assets/script.js is the readable source and is what index.html loads. It is around 14KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:

Code snippet omitted: it ships with the download.

Then point the last <script> tag in index.html at assets/script.min.js. Keep script.js as the file you edit and re-run the command after each change, otherwise the two quietly drift apart.

Sections & Options

Every section is driven by data attributes and can be removed independently; the script skips anything it doesn't find.

Hero ([data-hero-reveal])

The headline splits into masked characters that rise in after fonts load. Elements marked [data-fade-up] follow with a stagger.

Marquee ([data-marquee])

Attribute	Values	Default	Description
data-marquee-speed	Any number	20	Seconds per loop (higher = slower)
data-marquee-reverse	present/absent	absent	Reverses direction

The track holds two identical .marquee-group copies (the second is aria-hidden); keep them identical when editing content so the loop stays seamless.

Work Grid ([data-reveal-grid])

Cards marked [data-reveal-item] wipe in with a grid-aware stagger when the section enters the viewport. Add or remove cards freely; the grid stagger adapts automatically.

Case Studies ([data-hscroll])

The section pins and scrolls horizontally through .hscroll-panel elements, with a progress bar ([data-hscroll-progress]). Add panels by duplicating one; the travel distance is measured from the track. Tabbing into an off-screen panel scrolls it into view.

Stats ([data-count-stagger])

Attribute	Values	Default	Description
data-count-stagger	Any number	0.15	Delay between stats (seconds)
data-count-to	Any number	0	Target value
data-count-duration	Any number	2	Count duration (seconds)
data-count-prefix	Any string	none	e.g. £
data-count-suffix	Any string	none	e.g. % or +

Magnetic Elements ([data-magnetic])

Attribute	Values	Default	Description
data-magnetic-strength	Any number	24	Pull distance in pixels

Only active on fine-pointer devices; keyboard focus gets a subtle lift instead.

Smooth Scrolling

Lenis is included and optional. To remove it, delete the Lenis <script> tag from index.html; the template detects its absence and falls back to native scrolling.

Accessibility

• Reduced motion: prefers-reduced-motion: reduce renders the entire page static; the horizontal case-study section stacks vertically, stats show final values, and all content is immediately visible
• Keyboard navigation: focus mirrors hover on nav links, buttons, and cards; tabbing through case-study panels scrolls the pinned section to keep focus visible
• Semantic HTML: nav/main/section/article/footer landmarks, real <a> elements for all interactions
• Screen readers: the duplicated marquee copy is aria-hidden, placeholder artwork carries role="img" labels

Customisation Notes

• Fonts: Fraunces (display serif), Instrument Sans (body), Space Mono (labels) load from Google Fonts. Swap the <link> in index.html and the --font-display / --font-body / --font-mono variables in style.css to rebrand
• Section order: sections are independent; reorder them in index.html without touching the script
• Adding pages: the script is idempotent per page; include the same style.css/script.js on inner pages and only the sections present will animate

Dependencies

Required:

• GSAP 3.12+
• ScrollTrigger plugin
• SplitText plugin

Optional:

• Lenis (smooth scroll, included by default)