Premium Resume Maker

A clean, modern, and interactive web application that allows you to build a professional resume in real-time. Created using vanilla HTML, CSS, and JavaScript.

• Split-Screen Design: A side-by-side layout displaying your editing tools on the left and a live A4 preview on the right.
• Real-Time Data Binding: Watch your resume update instantly as you type into the form fields.
• Dynamic Collections: Add or remove multiple entries for your "Experience" and "Education" sections dynamically.
• Smart Skill Tags: Type your skills separated by commas, and they will automatically format into clean chips on your resume.
• High-Quality PDF Export: Download a perfectly scaled, professional PDF of your resume without the editor UI.

• HTML5: Defines the semantic structure of the editor form and the resume preview.
• CSS3 / Variables: Uses CSS variables for an easily customizable theme. It features a modern glassmorphic dark-mode editor, and an independent styling environment for the white resume preview page.
• Vanilla JavaScript: Handles event listeners, dynamic DOM updates, and tracks the array states for dynamically added sections.
• html2pdf.js: A client-side PDF generation library that transforms the HTML DOM snapshot into a downloadable A4 PDF.

• index.html: The core document structure hosting both the Input Form (left) and the Resume Document (right). Holds the CDN link to html2pdf.js.
• index.css (or style.css): Contains all styling. Key sections include:
  • App Base: Dark gradient background and flexbox layouts.
  • Editor Panel: Styled form inputs, buttons, and custom scrollbars.
  • Preview Panel: The A4-sized white background pane.
  • Print Media Queries: Ensure when printing/exporting, only the resume is visible cleanly.
• script.js: Contains all the application logic.
  • DynamicList Class: Handles adding/removing form sections automatically and syncing data with the preview.
  • Export Logic: Hooks up html2pdf format settings.

1. State Management: The app uses vanilla JS input event listeners mapped to specific DOM IDs (mappings object). As you type, the matched preview element's textContent is updated synchronously.
2. Dynamic Components: The DynamicList class acts as a reusable component generator. When you click +, it pushes a new object into an array, renders an input group on the left, and renders the corresponding HTML structure on the right.
3. Array Parsing: The skills section automatically turns a comma-separated string ("React, CSS, HTML") into an array and loops through it to render individual <span> tags.
4. PDF Engine: When "Download PDF" is clicked, html2pdf.js captures a canvas screenshot of the #resume-preview div using html2canvas and wraps it into a JS-generated PDF at exact A4 specifications.

If you decide to modify the font size, margins, or paddings of the resume itself:

• Ensure you respect the A4 dimensions (width: 21cm, min-height: 29.7cm).
• Avoid absolute positioning inside the resume preview if you want it to print flawlessly, as the PDF generation scales the document structurally.

Since this project has no build tools or server requirements:

1. Open the project folder in your file explorer.
2. Double-click index.html to run it automatically in Google Chrome, Edge, or Firefox.
3. Done! Enjoy seamless local resume building without server dependencies.