Resume Template 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.
About This Template
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.
What's Included
- 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
Perfect For
- 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.