Skip to content

Create stunning resumes (CVs) effortlessly! Features include 20+ themes, drag & drop, real-time preview, AI job tailoring, and HTML/PDF export. Built with React, TypeScript, and Tailwind CSS.

Notifications You must be signed in to change notification settings

asfand-dev/impact-cv

Repository files navigation

πŸš€ ImpactCV - Create Resumes That Make an Impact

GitHub Stars GitHub Forks License PRs Welcome Built with Vite TypeScript Tailwind CSS Radix UI

✨ Overview

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.

βš™οΈ Key Features

Intuitive Interface

  • 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.

Comprehensive Configuration

  • 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.

AI-Powered Job Tailoring πŸ€–

  • "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.

Beautiful & Distinctive Themes 🎨

  • Choose from 20 unique themes including Basic, Casual, Professional, Creative, Modern, Business, and many more, each transforming your CV into a visually compelling document.

Photo Integration πŸ“Έ

  • Optional profile photo upload feature dynamically adjusts your CV layout.

Import & Export Options πŸ“

  • 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.

πŸš€ Technology Stack

  • Frontend: React, TypeScript, Vite, Tailwind CSS
  • Components: Radix UI, Lucide Icons
  • Utilities: Date-fns, UUID, clsx, Sonner
  • AI Integration: OpenAI API

πŸ—οΈ Architecture

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 and useContext 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.

πŸš€ Getting Started

To run ImpactCV locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/asfand-dev/impact-cv.git
    cd impact-cv
  2. Install dependencies:

    npm install
    # or
    yarn install
    # or
    pnpm install
  3. 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).

πŸ“Έ Screenshots

Here are some screenshots showcasing the ImpactCV interface and its features:

Main Layout 1

Main Layout 1

Main Layout 2

Main Layout 2

Main Layout 3

Main Layout 3

Configure Sections

Configure Sections

Add Section

Add Section

Tailor for Job Description

Tailor for Job Description

🎨 Supported Themes

Basic

Gradient

Professional

Creative

Artistic

Business

Digital

Elegant

Technical

Vibrant

Nordic

Blueprint

Casual

Retro

Academic

Corporate

Modern

Classic

Minimal

Futuristic

Without Photo

✍️ Usage

  1. Navigate the Left Sidebar: Use the clearly separated sections in the left sidebar to input your information.
  2. Real-time Preview: Observe the main preview area to see your CV take shape as you type.
  3. Configure Sections: Customize section titles, toggle visibility, and reorder sections using the "Configure Sections" panel.
  4. Upload Photo (Optional): Add a professional touch by uploading your profile photo.
  5. Choose a Theme: Select from a variety of visually appealing themes to match your style.
  6. Tailor for Job: Utilize the AI-powered job tailoring feature to optimize your CV for specific job applications.
  7. Import/Export: Import existing configurations or export your current CV data as JSON.
  8. Download: Export your finalized CV as an HTML file or generate a PDF for sharing and applying.

πŸ’‘ Contributing

We welcome contributions from the community! If you'd like to contribute to ImpactCV, please follow these guidelines:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and ensure proper testing.
  4. Submit a pull request with a clear description of your changes.

Please adhere to the project's coding standards and best practices.

πŸ’¬ Support

If you encounter any issues or have suggestions for improvement, please feel free to:

πŸ“„ License

This project is licensed under the MIT License. Feel free to use, modify, and distribute it as per the terms of the license.

About

Create stunning resumes (CVs) effortlessly! Features include 20+ themes, drag & drop, real-time preview, AI job tailoring, and HTML/PDF export. Built with React, TypeScript, and Tailwind CSS.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages