# Why your CV should be a website (and still print as a PDF)

> A CV website gives you one link you can update after you send it. Here's what it fixes, where it falls down, and what a good one has to get right.

Published 2026-08-22 by Jake. Canonical: https://gsapvault.com/blog/cv-website-instead-of-pdf

---
The default is still a file. You export a PDF, name it something like `CV_final_v3.pdf`, attach it to an email, and lose all control of it the moment you hit send.

That file is a dead artifact. It cannot be corrected, it does not know what job it was sent for, and the version sitting in someone's downloads folder in six months will still say you work somewhere you left. A URL fixes all three. Here's the honest case for making your CV a website, including where the idea falls down.

## What a link does that a file cannot

**You can update it after you send it.** This is the whole argument in one line. You spot a typo an hour after applying, or you ship something worth adding mid-process, and the page everyone was sent is already correct.

**It goes everywhere as one line of text.** Email signature, LinkedIn, GitHub profile, conference bio, a reply to a recruiter on your phone. There is no version to attach and no file to find.

**It shows work instead of describing it.** "Rebuilt the checkout flow" is a claim. A link, a screenshot, or a working demo underneath it is evidence. A PDF can carry a URL, but the reader has to leave the document to follow it, and most do not.

**Your name becomes a search result you own.** People look you up. A site at your own domain competes with, and usually beats, whatever else surfaces under your name, and it is the one result where you decide what it says.

**It works on a phone.** A lot of first reads happen on a phone, on the move. A two-column A4 PDF on a 390px screen is a pinch-and-zoom exercise, and plenty of readers give up rather than do it.

## Where the idea falls down

This is the part most posts on the subject skip, and it is the part that decides whether a CV site actually helps you.

**Applicant tracking systems parse files, not URLs.** If an application form wants a document upload, a link will not do. ATS software reads the file to pre-fill fields, and there is no equivalent for a website.

**Internal forwarding is done by attachment.** A hiring manager passing you along to two colleagues usually forwards a file. If you only have a link, you are relying on everyone in that chain to click it.

**Some people print.** Panel interviews still happen with paper on the table, and a web page printed without thought produces four pages with a navigation bar on page one and a cut-off table on page three.

**A neglected site is worse than no site.** A dated history that stops two years ago says something you did not intend to say.

The conclusion is not "don't bother". It is that a CV website which cannot produce the file is only half a solution, and you end up maintaining two documents that quietly drift apart. The version that works is one page that is both: a site to send, and a clean one-page PDF when it is printed.

## What a good one has to get right

Assume the reader is busy, sceptical, and possibly on a train.

- **The essentials above the fold.** Name, current role, one line on what you do, and how to reach you. Do not make someone scroll to find out who they are reading about.
- **Contact without a form.** A visible email address. Nobody chasing a candidate wants to fill in a contact form and hope.
- **A dated history.** Roles, dates, in order. This is the part people actually scan, and it is the part most creative CV sites bury under art direction.
- **It reads without JavaScript.** If the content only appears after a script runs, then a script that fails to load takes your career history with it.
- **It prints to one page.** Test this properly: print your own site to PDF and look at the result. If it needs an apology, fix it before anyone sees it.
- **It is legible on a phone.** Real font sizes, real contrast, no hover-only interactions.
- **Restraint with motion.** One considered moment reads as craft. A page that animates every line as you scroll reads as a theme, and it slows down the person trying to find your last job title.

## Why not LinkedIn, or a Google Doc

Fair question, and for a lot of people the answer is that those are enough.

LinkedIn has reach and everyone knows how to read it, but you are one profile in a template, competing for attention with a feed, and you do not control the presentation. A Google Doc or Notion page is quick, updates live, and is genuinely fine, though it looks like what it is: a document someone shared with you, on someone else's domain, usually with their chrome around it.

The reason to own the page is the same reason to own the domain. It is yours, it says exactly what you decide, and it does not change under you when a platform redesigns.

## A template that is both

The [Resume Template](/templates/resume-template) is built around exactly this problem. It is a complete single-page CV site, and it has a Web / Résumé toggle in the bar at the top: the same content, reflowed from a spacious two-column web page into a single-column A4 document, with the layout change animated rather than cut.

[Live interactive demo](https://gsapvault.com/demos/resume-template/index.html)

The toggle is not the point on its own. The point is that a real A4 print stylesheet sits underneath it, so printing the page from either mode gives you the clean one-page CV you upload to the application form. Your site and your PDF come from the same file and cannot fall out of step.

The rest is built for the checklist above:

- **Everything a CV needs, already structured**: header, contact and skills column, dated experience with a chronology spine, selected work, education, and speaking
- **Expandable roles** that hold detail for anyone who wants it, and are forced open in document mode and in print so nothing is hidden from a reader or a printer
- **Highlighter marks** to mark two or three lines that matter, dropped automatically in document mode and in print, because a marked-up page is a screen affordance and not a document one
- **A copy-email control** that confirms in place, with the address in the contact list regardless
- **Five palettes**, switched with one attribute, or your own from a single token block at the top of the stylesheet
- **Reads without JavaScript, prints correctly, and gives reduced-motion readers the complete static page**

The art direction is a document lying on a desk: deep indigo ground, a warm cream sheet, graphite type, one highlighter yellow. It is deliberately not a portfolio site with a CV bolted on.

It is plain HTML, CSS and JavaScript with no build step. Replace the placeholder person with yourself, change the palette if you want to, and deploy the folder anywhere that serves static files.

## How the morph is built

Worth a short detour if you are the kind of person who wants to know before you buy, or you want to build the toggle yourself.

The morph uses [GSAP's Flip plugin](https://gsap.com/docs/v3/Plugins/Flip/), which animates a genuine layout change rather than faking one with a transform. The name is the technique: First, Last, Invert, Play. Flip measures where everything is, you change the layout however you like, and Flip inverts the difference and plays it back to zero.

```javascript
const state = Flip.getState(targets, { props: 'fontSize' }); // First: measure
document.body.classList.toggle('mode-paper');                // Last: change the layout
Flip.from(state, { duration: 0.7, absolute: true, nested: true }); // Invert + Play
```

The consequence worth understanding is that the second layout is just CSS:

```css
body {
  display: grid;
  grid-template-columns: 20rem 1fr;
  max-width: 72rem;
}

body.mode-paper {
  grid-template-columns: 1fr;
  max-width: 210mm; /* A4 */
  font-size: 0.84em;
}
```

Nothing in there knows about animation. Toggle the class with JavaScript off and the page still changes layout, it just changes instantly, which is exactly the fallback you want on a document someone's career depends on.

Three details do most of the work in `Flip.from`. `absolute: true` takes the moving blocks out of flow so the rest of the page holds still instead of snapping to the new layout on frame one. `nested: true` stops a block that sits inside another moving block from travelling twice as far. And `props: 'fontSize'` records a property Flip does not track by default, without which type jumps to its new size immediately while only position animates.

The gotcha that catches people is inline styles: the expandable roles set their own heights while animating, and an inline height beats the mode stylesheet, so those have to be handed back to CSS before the state is measured. Under reduced motion the class switch still happens with no tween at all, because the mode is the feature and the animation is not.


[View the Resume Template →](/templates/resume-template)

---

*Building a personal site rather than a CV? The [developer portfolio](/templates/developer-portfolio-template) and [creative portfolio](/templates/creative-portfolio-template) templates cover the work-first version, and the [link hub](/templates/link-hub-template) covers the one-link-in-bio version.*