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.
16 templates · 1 free · no build step
Unlock everything for £39
All 108 premium effects and templates, plus every future effect and template we release. That's £0.36 per item.
Buy individually now: up to £10 comes off the Vault later
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.
- 01
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.
- 02
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.
- 03
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.
- 04
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.
:root {
--ground: #0b1a4a; /* page background */
--ink: #f4f1ea; /* body text */
--accent: #ff4d1f; /* links, buttons, markers */
--measure: 68ch; /* reading width */
}Portfolio & personal at a glance
| Template | What it does | Built with | Tone |
|---|---|---|---|
| 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 | A complete one-page photographer's portfolio on a mid-tone gallery-wall ground, with a signature loupe: a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears. | 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 Studio Template | A complete one-page site for an architecture practice: a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and crossfades into the finished photograph, plus a project index with live preview swaps, count-up stats, and a parallax featured project. | ScrollTrigger | Light |
| Podcast Show Template | A complete one-page site for a podcast or audio show, built on a deep wine ground with one hot pink accent, and a real drag-to-scrub waveform player with chapter markers as its signature. | 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 |
| Indie Magazine Template | A complete single-issue site for an independent print magazine, set like a broadsheet front page: a cover headline that typesets itself letter by letter, and pull quotes that grow on scroll while the newspaper columns re-wrap around them live. | ScrollTrigger, SplitText | Light |
| Interior Design Studio Template | A complete one-page site for a boutique interior design studio on a warm greige ground, with a draggable before/after slider that wipes a redesigned room over the bare original as its signature. | 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 |
| Investigative Story Template | A one-page investigation for a news publication: a full-bleed lead clip under the headline, three scroll-locked stages where a pinned media column crossfades photograph to photograph as three steps of reporting scroll past it, redacted documents whose bars wipe off as you read, and a right-of-reply statement block. | 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 Studio Template | An editorial one-page site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia and numbered notes. | ScrollTrigger, Draggable, InertiaPlugin, CustomEase | Light |
| Advertising Agency Template | A one-page site for a full-service ad agency, opening on a hero whose background is a pinned, scroll-scrubbed reel of location photography, before a capabilities marquee that skews in proportion to how fast the visitor is scrolling right now, tracked live with the GSAP Observer plugin. | ScrollTrigger, SplitText, Observer, CustomEase | Dark |
Related Guides
54 animated website templates built with GSAP (2026)
54 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.
66 GSAP animation examples with code (2026)
66 production-ready GSAP animation examples with code: scroll, text, cursor, and canvas effects. Eight are completely free with copy-paste snippets below.
GSAP scroll animations: a practical ScrollTrigger guide
How to animate on scroll with GSAP ScrollTrigger: reveals, staggers, scrubbing, pinning and reduced motion, plus when CSS scroll-driven animation is enough.
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.