Portfolio Website Templates

Complete, deployable portfolio sites with the motion already built and tuned. Each one is art-directed for a specific kind of practice rather than being a neutral grid you have to make interesting yourself.

28 templates, 1 free, no build step

Templates Pass

£50

Every current and future premium template. Includes all 81 premium templates available now, plus every future release in this line.

The Vault

£99

All 280 premium items in the Vault library, plus future additions to the library.

084 New 11 pages Pass or Vault

Multi-Page Developer Portfolio

An eleven-page portfolio website template for frontend developers, design engineers, product designers and freelance consultants. Every project has its own case study in its own colour, whole sections turn selected, and every page change runs as a text selection that lands on the next title in the destination's colour.

ScrollTrigger page-transition

078 New 7 pages Pass or Vault

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.

ScrollTrigger scroll-reveal

070 £20

Infinite Scroll Landing Page Template

An endless landing page with full-screen photography, parallax, a hands-on crop study and a persistent project CTA. Built for creative agencies, photographer portfolios, fashion campaigns, product launches and events.

ScrollTrigger infinite-scroll

069 £20

Design Studio Template

An editorial website for design agencies, creative portfolios, architecture studios, publishers and product consultancies. FORME pairs bold typography with interactive identity artwork and expandable project stories.

ScrollTrigger scroll-reveal

065 £20

Kinetic Studio Template

A kinetic design studio website template with a giant folding type sculpture, stacked campaign posters and a hands-on geometric mark. Repoint it for a design agency, creative portfolio, event website, art director or digital studio.

ScrollTrigger 3d-transforms

064 £20

Creative Studio Portfolio

A dark creative studio portfolio website template with a sculptural photo reel, oversized typography and visual project studies. Suits creative agencies, photographers, design studios, architecture practices and filmmakers.

ScrollTrigger webgl-shader

001 £20

Creative Portfolio Template

A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons.

ScrollTriggerSplitText

008 £20

Developer Portfolio Template

A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read.

ScrollTrigger typewriter

011 £20

Photography Portfolio Template

One-page portfolio for any photographer presenting bodies of work: documentary, editorial, landscape, photojournalism. The signature is a loupe, a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears, on a mid-tone gallery-wall ground with print editions and commissions.

ScrollTrigger hover-effect

007 5 palettes £20

Resume Template

A personal CV site that morphs between two layouts: a signature Flip-driven toggle reflows the whole page from a spacious web resume into an A4 document, backed by a real print stylesheet so the site is also the PDF.

ScrollTriggerFlip

005 £20

Architecture Firm Template

One-page site for any practice that shows built or made work: architects, engineers, landscape and interiors. The hero draws a blueprint elevation in linework as you scroll and crossfades into the photograph, over a project index with live preview swaps, count-up stats and a parallax featured project.

ScrollTrigger svg-line-draw

018 5 palettes £20

Podcast Template

One-page site for any audio show that needs a home outside the platforms: podcasts, radio, mixtapes, lecture archives. The signature is a real drag-to-scrub waveform player with chapter markers over an expanding episode index, on a deep wine ground with one hot pink accent.

ScrollTriggerDraggable

023 Free

Link in Bio Template

A free creator profile page whose link cards toss onto the page like stickers landing on a desk, drag anywhere with momentum, and tween back into a neat stack on 'Tidy up' - while a tap always just opens the link.

DraggableInertiaPlugin

037 4 palettes £20

Link Hub Template

An editorial link-in-bio page for a fashion model and lifestyle creator: a Didone contents index whose covers follow the cursor and cross-fade as you move down the list, with a shipping four-palette persona switcher.

ScrollTrigger mouse-follow

028 £20

Magazine Template

Single-issue site for any publication with a contents page worth showing: magazines, zines, journals, newsletters. Set like a broadsheet front page, with a cover headline that typesets itself letter by letter and pull quotes that grow on scroll while the columns re-wrap around them live.

ScrollTriggerSplitText

032 £20

Interior Design Template

One-page site for any business that shows a space before and after its work: interior designers, renovators, stagers, build firms. The signature is a draggable before/after slider that wipes the redesigned room over the bare original, on a warm greige ground with an editorial hero.

ScrollTrigger scroll-reveal

038 £20

Editorial One Page Template

A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along.

ScrollTriggerSplitText

039 4 palettes £20

Draggable Dashboard Template

A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.

ScrollTriggerFlip

044 2 palettes £20

Scrollytelling Template

Scrollytelling page for any long-form piece that argues from evidence: journalism, research, policy, campaign reports. Three scroll-locked stages pin a media column that crossfades photograph to photograph as the reporting scrolls past, documents whose redaction bars wipe off as you read, and a right-of-reply block.

ScrollTrigger pinning

045 4 palettes £20

Web Design Agency Template

A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines, and the whole page is keyed to one brand colour you swap.

ScrollTriggerSplitText

046 4 palettes £20

Branding Agency Template

Editorial one-page site for any studio whose work is typographic rather than photographic: identity, packaging, print. A contents index of plates you throw sideways, headings in a variable serif that set themselves as they arrive, a featured project laid out as an article, and four measured palettes.

ScrollTriggerDraggable

047 £20

Creative Agency Template

One-page agency site for any studio that sells campaigns, film or brand work. A pinned, scroll-scrubbed reel of sixty photographs is the hero, a capabilities marquee skews with scroll speed, and six case studies with results sit under a CSS-only discipline filter. Shown as an ad agency.

ScrollTriggerSplitText

055 £20

Split Screen Template

A one-page site for an independent industrial design studio, built as two committed full-height fields — an ochre one and a near-black one — divided by a seam the visitor can actually drag. Scroll sends the two fields in opposite directions, the headline straddling the divide is knocked out correctly on both grounds, project plates are dealt out from the seam in a pinned sequence, and a second seam further down bends toward the cursor.

ScrollTriggerDraggable

057 £20

Layered Depth Template

A spatial and exhibition design studio site with a photographic depth corridor, a cursor-tilted cluster, and project images that open to full bleed. Suits architecture, interiors, photography portfolios and arts venues.

ScrollTriggerFlip

056 £20

Poster Grid Template

A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.

ScrollTriggerFlip

061 £20

Horizontal Scroll Template

A horizontal scroll website template written as a furniture workshop's showroom: a headline at display scale running into a photograph, then six plates on one pinned rail that vertical scroll pans sideways, with a timber picker that recolours its plate and a table whose sizes draw over the photograph. Re-points to a furniture maker, a lighting studio, a ceramicist, an interiors shop, a product designer's portfolio or a gallery.

ScrollTrigger horizontal-scroll

063 £20

Photo Gallery Template

One-page gallery site for anyone who sells on full-bleed photography: photographers, hotels, holiday lets, travel, interiors. Six frames in a sideways run driven by scroll, a dark wall of ten prints to scroll, drag and zoom through, a print basket and a commission table that prices itself as you choose. Cool Nordic paper, one tight grotesk.

ScrollTrigger pinning

075 New £20

Interactive Map

A studio portfolio drawn as one engraved sea chart: scroll flies a camera from a world view down to each project island, where the case study opens in place. Suits creative studios, architects, agencies, destination brands and any collective with four to six places to show.

ScrollTrigger pinning

Browse all 85 templates

What makes a portfolio template worth using

A portfolio has one job that most templates get wrong: it has to look like it belongs to somebody. Generic grids of rounded cards fail at that immediately, because every visitor has seen the same layout on a hundred other sites that week. The templates here each commit to a point of view, from a Klein blue hero slab with editorial serif type to a mid-tone gallery wall where the only colour on the page comes from the photographs.

The second thing they get right is having one interaction worth remembering. A photographer gets a loupe that tracks the cursor across a desaturated contact sheet. A developer gets a workbench panel that types out a snippet and then runs it. A CV morphs between a spacious web layout and an A4 document with a real print stylesheet behind it, so the site is also the PDF. That signature is chosen for the work being shown, which is the part you cannot bolt on afterwards.

Everything else is deliberately ordinary in the best sense. The markup is semantic HTML, the styling is CSS custom properties you can retune in one block, and the animation is GSAP loaded from a CDN. There is no build step, no bundler and no framework to adopt, so editing the site means opening the HTML file and changing the words.

All of them handle reduced motion with a complete static fallback rather than a broken half-animated page, keep focus states mirroring hover, and stay readable with JavaScript switched off. That matters more on a portfolio than most places, because the people evaluating you include the ones who will read your source.

How to make a portfolio template your own

Every template in this group is static files. Customising one is a content pass and a colour pass, in that order, with no tooling involved.

1

Replace the copy first

Open index.html and work top to bottom, swapping headings, project names, and the about text. Doing this before you touch the design tells you quickly whether the structure fits the work you actually have.
2

Swap the images for your own

Photography ships as bundled WebP with the grade baked into the pixels. Drop your own files in at the same dimensions and the layout holds; nothing hotlinks to a stock library that could expire.
3

Retune the palette in one block

Colours, type scale and spacing are CSS custom properties declared once at the top of the stylesheet. Change them there rather than hunting for hex codes further down.
4

Deploy the folder

Upload the files to Netlify, Vercel, GitHub Pages or any web server. GSAP loads from a CDN, so the host only has to serve static files.

The palette block you edit

:root {
  --ground: #0b1a4a;   /* page background */
  --ink: #f4f1ea;      /* body text */
  --accent: #ff4d1f;   /* links, buttons, markers */
  --measure: 68ch;     /* reading width */
}

Portfolio & personal at a glance

Compare the 28 templates in this category by what they do, what they are built with, and whether they run light or dark.
Template	What it does	Built with	Tone
Multi-Page Developer Portfolio	An eleven-page portfolio website template for frontend developers, design engineers, product designers and freelance consultants.	ScrollTrigger	Mixed
Multi-Page Portfolio	A seven-page portfolio website template for architecture studios, creative agencies, interior designers, landscape designers and photographers.	ScrollTrigger	Light
Infinite Scroll Landing Page Template	An endless landing page with full-screen photography, parallax, a hands-on crop study and a persistent project CTA.	ScrollTrigger	Mixed
Design Studio Template	An editorial website for design agencies, creative portfolios, architecture studios, publishers and product consultancies.	ScrollTrigger	Light
Kinetic Studio Template	A kinetic design studio website template with a giant folding type sculpture, stacked campaign posters and a hands-on geometric mark.	ScrollTrigger	Light
Creative Studio Portfolio	A dark creative studio portfolio website template with a sculptural photo reel, oversized typography and visual project studies.	ScrollTrigger	Dark
Creative Portfolio Template	A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons.	ScrollTrigger, SplitText	Light
Developer Portfolio Template	A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read.	ScrollTrigger	Dark
Photography Portfolio Template	One-page portfolio for any photographer presenting bodies of work: documentary, editorial, landscape, photojournalism.	ScrollTrigger	Mixed
Resume Template	A personal CV site that morphs between two layouts: a signature Flip-driven toggle reflows the whole page from a spacious web resume into an A4 document, backed by a real print stylesheet so the site is also the PDF.	ScrollTrigger, Flip	Dark
Architecture Firm Template	One-page site for any practice that shows built or made work: architects, engineers, landscape and interiors.	ScrollTrigger	Light
Podcast Template	One-page site for any audio show that needs a home outside the platforms: podcasts, radio, mixtapes, lecture archives.	ScrollTrigger, Draggable	Dark
Link in Bio Template	A free creator profile page whose link cards toss onto the page like stickers landing on a desk, drag anywhere with momentum, and tween back into a neat stack on 'Tidy up' - while a tap always just opens the link.	Draggable, InertiaPlugin	Light
Link Hub Template	An editorial link-in-bio page for a fashion model and lifestyle creator: a Didone contents index whose covers follow the cursor and cross-fade as you move down the list, with a shipping four-palette persona switcher.	ScrollTrigger	Dark
Magazine Template	Single-issue site for any publication with a contents page worth showing: magazines, zines, journals, newsletters.	ScrollTrigger, SplitText	Light
Interior Design Template	One-page site for any business that shows a space before and after its work: interior designers, renovators, stagers, build firms.	ScrollTrigger	Light
Editorial One Page Template	A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along.	ScrollTrigger, SplitText	Light
Draggable Dashboard Template	A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.	ScrollTrigger, Flip, Draggable	Dark
Scrollytelling Template	Scrollytelling page for any long-form piece that argues from evidence: journalism, research, policy, campaign reports.	ScrollTrigger	Dark
Web Design Agency Template	A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing.	ScrollTrigger, SplitText, DrawSVG, Flip	Light
Branding Agency Template	Editorial one-page site for any studio whose work is typographic rather than photographic: identity, packaging, print.	ScrollTrigger, Draggable, InertiaPlugin, CustomEase	Light
Creative Agency Template	One-page agency site for any studio that sells campaigns, film or brand work.	ScrollTrigger, SplitText, Observer, CustomEase	Dark
Split Screen Template	A one-page site for an independent industrial design studio, built as two committed full-height fields — an ochre one and a near-black one — divided by a seam the visitor can actually drag.	ScrollTrigger, Draggable	Mixed
Layered Depth Template	A spatial and exhibition design studio site with a photographic depth corridor, a cursor-tilted cluster, and project images that open to full bleed.	ScrollTrigger, Flip	Dark
Poster Grid Template	A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.	ScrollTrigger, Flip	Light
Horizontal Scroll Template	A horizontal scroll website template written as a furniture workshop's showroom: a headline at display scale running into a photograph, then six plates on one pinned rail that vertical scroll pans sideways, with a timber picker that recolours its plate and a table whose sizes draw over the photograph.	ScrollTrigger	Light
Photo Gallery Template	One-page gallery site for anyone who sells on full-bleed photography: photographers, hotels, holiday lets, travel, interiors.	ScrollTrigger	Dark
Interactive Map	A studio portfolio drawn as one engraved sea chart: scroll flies a camera from a world view down to each project island, where the case study opens in place.	ScrollTrigger	Mixed

Related guides

85 animated website templates built with GSAP (2026)

85 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.

123 GSAP animation examples and demos with code (2026)

123 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

Animate on scroll with GSAP ScrollTrigger (2026 examples)

Animate on scroll with GSAP ScrollTrigger: copy-paste CDN setup, reveals, scrubbed timelines, pinning with anticipatePin, WordPress tips and live examples.

Frequently asked questions

Do I need to know GSAP to use a portfolio template?

No. The animation is already written and wired up. You edit HTML content and CSS custom properties, and the motion keeps working. Knowing GSAP helps if you want to change the animation itself, and the code is commented with that in mind.

Can I use one of these for a client project?

Yes. The standard license covers unlimited personal and commercial projects, including client work. The only restrictions are that you cannot redistribute the template itself or use it to build a competing product.

Will a portfolio template work with React or Astro?

The templates ship as plain HTML, CSS and JavaScript, which is deliberate: there is no framework to fight. Moving one into a React or Astro project is a matter of porting the markup into components and calling the same GSAP code from an effect hook. Nothing in the animation depends on the page being static.

How do I keep the animation from hurting my page speed?

GSAP loads from a CDN and is small enough that it is rarely the bottleneck; images almost always are. Every template already ships its photography as sized WebP, defers offscreen work to ScrollTrigger, and animates transform and opacity so the compositor does the work.

Browse all templates What a GSAP template is

Portfolio Website Templates

Browse templates

Multi-Page Developer Portfolio

Multi-Page Portfolio

Infinite Scroll Landing Page Template

Design Studio Template

Kinetic Studio Template

Creative Studio Portfolio

Creative Portfolio Template

Developer Portfolio Template

Photography Portfolio Template

Resume Template

Architecture Firm Template

Podcast Template

Link in Bio Template

Link Hub Template

Magazine Template

Interior Design Template

Editorial One Page Template

Draggable Dashboard Template

Scrollytelling Template

Web Design Agency Template

Branding Agency Template

Creative Agency Template

Split Screen Template

Layered Depth Template

Poster Grid Template

Horizontal Scroll Template

Photo Gallery Template

Interactive Map

What makes a portfolio template worth using

How to make a portfolio template your own

Replace the copy first

Swap the images for your own

Retune the palette in one block

Deploy the folder

Portfolio & personal at a glance

Related guides

85 animated website templates built with GSAP (2026)

123 GSAP animation examples and demos with code (2026)

Animate on scroll with GSAP ScrollTrigger (2026 examples)

Frequently asked questions