Roleify

A CV maker where the whole interface changes mood to match your profession, not just an accent color.

Pick Programmer and the workspace turns into a sharp, dark, code editor inspired environment. Pick Educator and it turns into warm paper tones with editorial serif type. Four more roles each get the same full treatment: color, typography, layout rhythm, and motion all shift together, driven by a single CSS variable theming engine. Build your CV in a bento box workspace, watch it assemble itself in a live split screen preview, then export a themed, print ready PDF.

Live demo

cv-maker resume-builder nextjs typescript tailwindcss react framer-motion pdf-export theming

---

Features

• Theme driven workspace. Every theme changes color, typography, radius, shadow, and motion together through a single CSS variable based engine, not a color swap.
• Six role themes. Programmer, Educator, Designer, Business, Healthcare, and Legal & Academic, each with its own font pairing, palette, and layout personality.
• Bento box layout. Each CV section (personal info, experience, education, skills, projects) lives in its own tile, sized and arranged deliberately instead of one long form.
• Live split screen preview. Edits on the left update the CV preview on the right in real time.
• Themed everything, down to the controls. Scrollbars, the role dropdown, the year steppers on Experience/Education, and even the browser tab favicon are custom built or redrawn to match the active theme, not left as unstyled browser defaults.
• Contact links, and repo/demo links per project. Add LinkedIn, X/Twitter, GitHub, Instagram, a portfolio site, or any other platform under Contact, plus a repo link and a live demo link on any project. Each renders as a short clickable word (like "LinkedIn", "Repo", or "Live") instead of a raw URL, in both the live preview and the exported PDF.
• Categorized skills. Group skills under labels like Languages, Frontend, or Backend, shown as plain text lines rather than a flat pile of tags.
• Themed PDF export, plus an ATS safe plain export. Each theme ships its own PDF template so the export matches the workspace's identity. A separate plain export drops the styling entirely: single column, no icons, visible URLs, for Applicant Tracking Systems that parse poorly otherwise.
• Multiple CV profiles. Keep a separate saved CV per role (a Programmer CV and a Business CV, say), each remembers its own theme. Switch, rename, duplicate, or delete profiles from the header.
• Reorderable, hideable sections. Drag Summary, Experience, Education, Skills, and Projects into any order, or hide the ones you do not want shown, right from the workspace.
• Layout presets. Choose a single stacked column, or a sidebar layout with Skills and Education set apart from the rest, on screen and in every PDF export.
• Export and import your data. Download a profile's CV data as JSON and load it back in later or in another browser, independent of the PDF exports.
• A sample CV for every role. Load Sample fills the workspace with a fully fleshed out example matching the active theme's persona (a teacher, a nurse, a designer, and so on), not one generic engineer resume regardless of role.
• No account required. CV data is saved to your browser's local storage.

Tech stack

• Next.js 16 (App Router) with TypeScript
• Tailwind CSS v4, CSS first configuration
• Framer Motion for micro interactions and theme transitions
• @react-pdf/renderer for client side PDF export
• react-icons for social platform icons
• Deployed on Vercel

Getting started

Requires Node.js 20.9 or later.

npm install
npm run dev

Open http://localhost:3000 to see the landing page, or go straight to http://localhost:3000/builder to start building.

Available scripts

Command	Description
npm run dev	Start the development server
npm run build	Build for production
npm run start	Run the production build
npm run lint	Lint the project

Themes

Theme	Mood
Programmer	Dark background, monospace type, terminal inspired section markers, snappy motion
Educator	Warm paper background, serif headings, editorial rule lines, softer motion
Designer	Bold color blocks, playful geometry, large pill shaped corners
Business	Navy and brass, minimal color, sharp structured corners
Healthcare	Clean clinical palette, calm teal, soft rounded corners
Legal & Academic	Deep chambers tones, formal serif, antique gold accent

More themes can be added by defining a new token set in lib/themes/. See CLAUDE.md for the full architecture notes.

Project structure

app/            Routes: landing page and the /builder workspace, plus the app icon
components/
  ui/           Shared themed primitives (Tile, Button, Input, Dropdown, NumberStepper,
                Logo, Modal, ConfirmDialog, PromptModal, ...)
  bento/        One tile per CV section (including Links), the theme switcher, and the
                drag to reorder/hide section order tile
  preview/      Live CV preview
  pdf/          Per theme PDF export templates plus the ATS safe plain template, the
                Export menu, and shared pdf-icons for social links
  workspace/    Builder page header, the profile switcher, and the overflow menu for
                Load Sample/Import/Reset
lib/
  themes/       Theme token definitions, one file per theme
  theme-engine.ts, theme-context.tsx   The theming system
  cv-schema.ts, cv-context.tsx, storage.ts   CV data model and persistence
  profiles.ts      Multiple saved CV profiles, each with its own theme
  sample-data.ts   One bespoke sample CV per role, used by Load Sample
  favicon.ts       Redraws the browser tab icon to match the active theme
  link-icons.tsx   Contact platform icon and display word lookup for the web preview
  url.ts           Normalizes stored bare URLs into real hrefs
  layout.ts        Splits sections into aside/main columns for the sidebar layout presets

License

MIT, see LICENSE.