# 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.

Canonical: https://gsapvault.com/templates/resume-template
Live demo: https://gsapvault.com/demos/resume-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger, Flip |
| Techniques | flip, layout-morph, text-animation, scroll-reveal, stagger, click-toggle, clipboard |
| Uses Lenis | Yes |

## Overview

A production-ready single-page CV site for engineers, designers, and anyone who needs a personal resume that does not look like a template. The art direction is a document lying on a desk: a deep indigo ground, a warm cream sheet, graphite type, and one highlighter yellow used sparingly to mark the lines that matter. The signature moment is the Web / Resume toggle in the utility bar. Flip records the position of every structural block, one class switch reflows the page from a two-column web layout into a single-column A4 document with every role already expanded and the highlighter turned off, and Flip animates the difference. A matching print stylesheet means the same page prints as a clean one-page CV from either mode, so a buyer's site and their PDF never drift apart. Swap the placeholder name, roles, and dates for your own and deploy anywhere as static files.

## Features

- Complete deployable single-page CV: utility bar, header, contact and skills column, experience, selected work, education, speaking, footer
- Signature Web / Resume layout morph powered by GSAP Flip, animating the reflow between a two-column web page and an A4 document
- Real A4 print stylesheet that emits a clean one-page CV from either mode, so the site is the PDF
- Highlighter marks swept across key lines the first time they scroll into view, and dropped automatically in Resume mode and in print
- Expandable roles with animated heights, forced open in Resume mode and in print so nothing is hidden from a reader
- Chronology spine: a connecting rule and mono date column that encode the run of roles rather than decorate it
- Copy-email control that confirms in place and falls back to showing the address when the clipboard is unavailable
- Masked name reveal on load, one-time scroll reveals throughout
- Lenis smooth scrolling wired in and fully optional
- Accessible: the toggle is a real pressed-state control with a live region, keyboard reaches every interaction, reduced motion gets a complete static page, and the page reads fully without JavaScript

## Use Cases

- Personal CV and resume sites for engineers, designers, and product people
- Freelancers who need one link that also prints as a PDF
- Job seekers who want a resume that stands apart from a document export
- Academic and consulting profiles with long dated histories
- Learning how GSAP Flip animates a genuine layout change rather than a transform

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia, skipping any section it cannot find. The layout morph is the core: Flip.getState records every [data-flip-id] block with its font size, a single class on the body switches the stylesheet between the web grid and the A4 document layout, and Flip.from animates the difference with absolute and nested positioning so blocks can reorder and resize without tearing. Expandable roles animate their own heights, then hand them back to CSS so Resume mode and print can force them open. Highlighter marks are background gradients swept from zero width by ScrollTrigger once each, and are removed entirely in Resume mode and print because a marked-up page is a screen affordance, not a document one. A prefers-reduced-motion branch applies the same layout switch instantly with the highlighters pre-drawn, and without JavaScript the toggle stays hidden while the page reads as a complete document that still prints correctly.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Open `index.html` and replace the placeholder person with your own: name, role line, summary, contact list, roles, work, education, and talks.
2. Update the `<title>` and `<meta name="description">`, and remove `<meta name="robots" content="noindex, nofollow">` when you go live.
3. Change `data-copy="nadia@osei.dev"` on the bar button to your address.
4. Change the palette at the top of `style.css`. The whole page reskins from that one token block; see [Colour](#colour).
5. Or pick one of the five shipped palettes instead of editing tokens by hand: set `data-palette` on the `<html>` tag (see [Palettes](#palettes) below).
6. Deploy the folder anywhere that serves static files.

Fonts load from Google Fonts and GSAP from a CDN. To go fully self-hosted, download both and update the tags in `<head>`.

#### Optional: minify before you go live

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

```bash
bunx terser assets/script.js -c -m -o assets/script.min.js
```

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.

### Accessibility

- The mode toggle is a real pressed-state control (`aria-pressed`) with a live region announcing the change.
- Expandable roles use `aria-expanded` and `aria-controls` on real buttons.
- Every interaction is reachable and operable by keyboard, with a visible focus ring.
- `prefers-reduced-motion` gets the same layouts with no tweens: the mode switch applies instantly and the highlighters are pre-drawn. Nothing is hidden or unreachable.
- Without JavaScript the page reads as a complete document, with every role's detail already open. Only the toggle and the two bar buttons, which need JS, are hidden.

### Dependencies

- GSAP 3.14.2 (core)
- ScrollTrigger
- Flip
- Lenis 1.3.17 (optional)

## 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
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Resume Template](https://gsapvault.com/templates/resume-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](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