ImpactCV is a modern, intuitive, and user-friendly web application designed to empower you to create professional and impactful resumes (CVs) with ease. Whether you're just starting your career or looking to make a change, ImpactCV provides the tools and flexibility you need to showcase your skills and experience effectively.
Forget tedious formatting and generic templates. ImpactCV offers a streamlined experience with real-time previews, customizable themes, and even AI-powered job tailoring to optimize your resume for both recruiters and Applicant Tracking Systems (ATS) to help you easily land your dream role.
- Real-Time Preview: Instantly visualize changes.
- Drag-and-Drop Sections: Customize your CV layout effortlessly.
- Editable Section Titles: Personalize headings to match your unique style.
- Basic Information: Name, role, location, contact details, and social links.
- Professional Summary: Craft compelling professional summaries.
- Experience & Education: Clearly structure professional history and educational background.
- Skills & Projects: Highlight expertise and showcase impactful projects.
- "Tailor for Job Description" Button: Let OpenAI automatically optimize your CV content based on specific job roles, ensuring maximum compatibility with ATS and increased recruiter visibility.
- Choose from 20 unique themes including Basic, Casual, Professional, Creative, Modern, Business, and many more, each transforming your CV into a visually compelling document.
- Optional profile photo upload feature dynamically adjusts your CV layout.
- JSON Import/Export: Quickly import or export your CV configuration.
- HTML Export: Self-contained HTML file ready to host or share.
- PDF Export: Simple, high-quality print or PDF generation.
- Frontend: React, TypeScript, Vite, Tailwind CSS
- Components: Radix UI, Lucide Icons
- Utilities: Date-fns, UUID, clsx, Sonner
- AI Integration: OpenAI API
ImpactCV follows a modern frontend architecture, primarily built with React components. The application is structured with:
- Left Sidebar Panel: Houses all the configuration options, organized into logical sections using Radix UI Accordion components for a clean and collapsible interface. Each section contains React forms managed by React Hook Form for efficient data handling.
- Main Preview Area: A dedicated React component that dynamically renders the CV based on the configuration state. It updates in real-time as users modify the input fields in the sidebar.
- Theming System: Implemented using
next-themes
, allowing users to switch between different visual themes. Each theme likely defines a set of CSS variables or Tailwind CSS configurations. - State Management: React's built-in state management (likely using
useState
anduseContext
or potentially a more advanced state management solution if the application grows significantly) is used to manage the CV data and UI state. - AI Integration: The "Tailor for Job Description" feature interacts with the OpenAI API through an asynchronous function call. The API response (in JSON format) is then used to update the application's state, effectively modifying the CV content.
- Import/Export Logic: Functions are implemented to handle the reading and writing of CV data in JSON format. The HTML export functionality likely involves dynamically generating HTML markup based on the current CV data and embedding the necessary CSS inline. PDF export leverages the browser's print functionality.
To run ImpactCV locally, follow these steps:
-
Clone the repository:
git clone https://github.com/asfand-dev/impact-cv.git cd impact-cv
-
Install dependencies:
npm install # or yarn install # or pnpm install
-
Start the development server:
npm run dev # or yarn dev # or pnpm dev
This will start the application on a local development server (
http://localhost:3000
).
Here are some screenshots showcasing the ImpactCV interface and its features:
![]() Main Layout 1 |
![]() Main Layout 2 |
![]() Main Layout 3 |
![]() Configure Sections |
![]() Add Section |
![]() Tailor for Job Description |
![]() Basic |
![]() Gradient |
![]() Professional |
![]() Creative |
![]() Artistic |
![]() Business |
![]() Digital |
![]() Elegant |
![]() Technical |
![]() Vibrant |
![]() Nordic |
![]() Blueprint |
![]() Casual |
![]() Retro |
![]() Academic |
![]() Corporate |
![]() Modern |
![]() Classic |
![]() Minimal |
![]() Futuristic |
![]() Without Photo |
- Navigate the Left Sidebar: Use the clearly separated sections in the left sidebar to input your information.
- Real-time Preview: Observe the main preview area to see your CV take shape as you type.
- Configure Sections: Customize section titles, toggle visibility, and reorder sections using the "Configure Sections" panel.
- Upload Photo (Optional): Add a professional touch by uploading your profile photo.
- Choose a Theme: Select from a variety of visually appealing themes to match your style.
- Tailor for Job: Utilize the AI-powered job tailoring feature to optimize your CV for specific job applications.
- Import/Export: Import existing configurations or export your current CV data as JSON.
- Download: Export your finalized CV as an HTML file or generate a PDF for sharing and applying.
We welcome contributions from the community! If you'd like to contribute to ImpactCV, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and ensure proper testing.
- Submit a pull request with a clear description of your changes.
Please adhere to the project's coding standards and best practices.
If you encounter any issues or have suggestions for improvement, please feel free to:
- Open an issue on GitHub: https://github.com/asfand-dev/impact-cv/issues
- Reach out via asfand.dev@gmail.com
This project is licensed under the MIT License. Feel free to use, modify, and distribute it as per the terms of the license.