A customizable CV/Resume generator built with React. This project provides a set of reusable components to design and render resumes directly in React, with support for PDF export, skill ratings, project timelines, and more.
- 📄 React-based CV layout – flexible component structure
- 🖼️ Reusable components for sections, skills, education, work experience, and projects
- 📊 Skill & expertise visualization with progress bars and icons
- 🎨 Customizable styles via Tailwind and component props
- 🧩 Extensible structure – add or modify sections to fit your needs
- 📥 Export to PDF using the integrated
PDFContainer
src/
├── components/ # Core reusable components (Sections, Work, Education, Project, etc.)
├── icons/ # Icons for skills & technologies
├── img/ # Logos and project images
├── ExampleCV.jsx # Example CV template
├── YourCV.jsx # Advanced private CV example (not shared publicly)
└── CV.jsx # Base CV layout
git clone https://github.com/Felippo001/React-CV.git
cd React-CV
npm install
npm run dev
This will start a local development server (usually at http://localhost:5173).
You can use the provided ExampleCV.jsx as a starting point for your own resume.
import React from "react";
import ExampleCV from "./ExampleCV";
function App() {
return <ExampleCV />;
}
export default App;
- Copy
ExampleCV.jsx→YourCV.jsx - Adjust the sections, skills, projects, and personal details
- Replace the
<ExampleCV />component inApp.jswith<MyCV />
<Name />– Displays your name, position, and a short description<SectionTitle />– Section headers (e.g., Education, Skills)<Education />– Academic history entries<Work />– Work experience entries<Project />– Projects with timeline, description, and logo<SkillLevel />– Technical skill visualization with progress bars/icons<LanguageSkillLevel />– Language proficiency<Expertise />– Expertise fields with percentage levels<Activity />– Hobbies and extracurricular activities<PDFContainer />– Wrapper to render and export CV as PDF
Wrap your CV inside the PDFContainer to allow exporting:
Use the Chrome print function and export the Document as PDF.
import PDFContainer from "./components/PDFContainer";
import MyCV from "./MyCV";
function App() {
return ( <PDFContainer> <MyCV /> </PDFContainer>
);
}
- Update icons in
src/iconsor import fromreact-icons - Replace logos/images in
src/img - Adjust styles using Tailwind classes in component props
ExampleCV.jsx→ Minimal template with placeholders
Contributions are welcome! If you have ideas for new sections, better PDF handling, or improved design components, feel free to open an issue or PR.
This project is licensed under the MIT License.
Would you like me to also create a "Live Preview" section in the README with a Netlify/Vercel deploy badge so people can test the CV online?