An open-source interactive resume template. Clone it, fill in your info, deploy it.
Built with React, TypeScript, Tailwind CSS, and Framer Motion.
- One config file — Edit a single TypeScript file with your info
- Multi-language — Built-in i18n support (add as many languages as you need)
- Dark / Light mode — Auto-detects time of day, with manual toggle
- 6 color presets — minimal, warm, ocean, forest, slate, lilac (or fully custom)
- Responsive — Mobile-first, works on all screen sizes
- Expandable experiences — Click to expand details (inline on desktop, modal on mobile)
- Projects section — Optional portfolio showcase
- PDF download — Optional downloadable resume, one per language
- SEO & ATS ready — Full CV content visible to crawlers at build time (JSON-LD, semantic HTML fallback)
- 3D photo flip — Click the photo for a fun easter egg
You don't need to install anything or write any code. An interactive guide walks you through everything, from creating a GitHub account to sharing your resume link.
📖 Follow the step-by-step guide
Also available in Français
git clone https://github.com/clementbouly/interactive-resume-template.git
cd interactive-resume-template
npm installEdit src/data/resume-config.ts with your personal information. See Customization Guide for details.
Add your photo to public/images/photo.jpg.
npm run devOpen http://localhost:5173 in your browser.
npm run buildThe dist/ folder contains your static site. Deploy it anywhere. See Deployment Guide for step-by-step instructions.
| Preset | Style |
|---|---|
minimal |
Black and white, clean and neutral (default) |
warm |
Wood and earth tones |
ocean |
Deep blue, professional and corporate |
forest |
Sage green, calm and organic |
slate |
Blue-grey, modern and tech |
lilac |
Soft purple, elegant and creative |
Set your preset in the config:
theme: {
preset: 'warm',
}- Vite — Fast build tool
- React 19 — UI framework
- TypeScript — Type safety
- Tailwind CSS v4 — Utility-first CSS
- Framer Motion — Animations
├── vite-plugin-resume-seo.ts # Build-time SEO injection plugin
src/
├── data/
│ ├── resume-config.ts # YOUR CONFIG FILE (edit this!)
│ ├── resume-config.example.ts # Example with comments
│ ├── types.ts # TypeScript types
│ └── presets.ts # Color presets
├── components/
│ └── Resume/ # All resume components
├── lib/
│ ├── i18n/ # Language system
│ ├── theme/ # Dark/light mode
│ └── hooks/ # Custom hooks
└── App.tsx # Entry point
This project includes Agentation — a visual feedback toolbar for AI coding agents. When running in development mode (npm run dev), a small toolbar appears at the bottom-right of the page.
It lets you click on any element, select text, or annotate parts of your resume, then copy a structured description to your clipboard. Paste it directly into your AI agent's chat to give it precise context about what you want changed.
Agentation is only active in development and is automatically stripped from production builds.
See the Agentation documentation for more details.
"Is it ATS-compatible?" — ATS (Applicant Tracking Systems) today primarily parse PDF and DOCX files. This interactive resume is designed as a complement to your PDF, not a replacement.
However, the template does everything possible to make your CV readable by bots and crawlers without JavaScript:
- Build-time SEO injection — A custom Vite plugin reads your config at build time and injects all data directly into the static HTML. Crawlers see the full CV, not an empty
<div id="root"> - JSON-LD structured data — Your name, job title, skills, and links are embedded as schema.org/Person metadata in the
<head>, readable by search engines and modern parsers <noscript>semantic HTML — The complete CV (contact, skills, experiences with tasks, education, projects, hobbies) is rendered as clean HTML inside<noscript>, so non-JS visitors and bots see everything- Static meta tags —
<title>and<meta description>are set from your config at build time - Shareable URL — Send
?lang=endirectly to recruiters for the right language - PDF download — Per-language PDF files for traditional ATS submissions
Recommended workflow: Apply with your PDF, and add the interactive link in your email or LinkedIn message.
Contributions are welcome! See CONTRIBUTING.md for guidelines.
MIT