| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ResumeBuilder Pro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| .resume-container { |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| transition: all 0.3s ease; |
| } |
| .resume-container:hover { |
| box-shadow: 0 15px 35px rgba(0,0,0,0.15); |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .template-selection img { |
| transition: all 0.3s ease; |
| } |
| .template-selection img:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
| } |
| .slide-in { |
| animation: slideIn 0.5s forwards; |
| } |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| .fade-in { |
| animation: fadeIn 0.5s forwards; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="gradient-bg text-white rounded-2xl p-6 mb-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h1 class="text-3xl md:text-4xl font-bold">ResumeBuilder Pro</h1> |
| <p class="text-blue-100 mt-2">Create professional resumes in minutes</p> |
| </div> |
| <div class="flex space-x-4"> |
| <button id="newResumeBtn" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition"> |
| <i class="fas fa-plus mr-2"></i>New Resume |
| </button> |
| <button id="templatesBtn" class="bg-blue-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition"> |
| <i class="fas fa-images mr-2"></i>Templates |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <section id="templatesSection" class="hidden mb-12 slide-in"> |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Choose a Template</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="template-selection"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Template 1" class="w-full h-64 object-cover rounded-lg cursor-pointer border-2 hover:border-blue-500" data-template="1"> |
| <div class="mt-2 flex justify-between items-center"> |
| <span class="font-medium">Modern</span> |
| <button class="select-template bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition" data-template="1">Select</button> |
| </div> |
| </div> |
| |
| |
| <div class="template-selection"> |
| <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Template 2" class="w-full h-64 object-cover rounded-lg cursor-pointer border-2 hover:border-blue-500" data-template="2"> |
| <div class="mt-2 flex justify-between items-center"> |
| <span class="font-medium">Creative</span> |
| <button class="select-template bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition" data-template="2">Select</button> |
| </div> |
| </div> |
| |
| |
| <div class="template-selection"> |
| <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Template 3" class="w-full h-64 object-cover rounded-lg cursor-pointer border-2 hover:border-blue-500" data-template="3"> |
| <div class="mt-2 flex justify-between items-center"> |
| <span class="font-medium">Minimal</span> |
| <button class="select-template bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition" data-template="3">Select</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="formSection" class="hidden mb-12 slide-in"> |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Tell Us About Yourself</h2> |
| <form id="resumeForm"> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">Personal Information</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">First Name</label> |
| <input type="text" name="firstName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Last Name</label> |
| <input type="text" name="lastName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Email</label> |
| <input type="email" name="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Phone</label> |
| <input type="tel" name="phone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Address</label> |
| <input type="text" name="address" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">LinkedIn URL</label> |
| <input type="url" name="linkedin" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Summary</label> |
| <textarea name="summary" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">Work Experience</h3> |
| <div id="experienceContainer"> |
| <div class="experience-entry bg-gray-50 p-4 rounded-lg mb-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Job Title</label> |
| <input type="text" name="jobTitle[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Company</label> |
| <input type="text" name="company[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Start Date</label> |
| <input type="month" name="startDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">End Date (or leave blank if current)</label> |
| <input type="month" name="endDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <label class="block text-gray-700 mb-2">Description</label> |
| <textarea name="jobDescription[]" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required></textarea> |
| </div> |
| </div> |
| </div> |
| <button type="button" id="addExperienceBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i class="fas fa-plus mr-2"></i>Add Another Job |
| </button> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">Education</h3> |
| <div id="educationContainer"> |
| <div class="education-entry bg-gray-50 p-4 rounded-lg mb-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Institution</label> |
| <input type="text" name="institution[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Degree</label> |
| <input type="text" name="degree[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Field of Study</label> |
| <input type="text" name="fieldOfStudy[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Graduation Year</label> |
| <input type="month" name="graduationYear[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| </div> |
| </div> |
| </div> |
| <button type="button" id="addEducationBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i class="fas fa-plus mr-2"></i>Add Another Education |
| </button> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">Skills</h3> |
| <div id="skillsContainer"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Skill</label> |
| <input type="text" name="skillName[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Proficiency</label> |
| <select name="skillLevel[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <option value="Beginner">Beginner</option> |
| <option value="Intermediate">Intermediate</option> |
| <option value="Advanced">Advanced</option> |
| <option value="Expert">Expert</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <button type="button" id="addSkillBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg mt-4 hover:bg-gray-300 transition"> |
| <i class="fas fa-plus mr-2"></i>Add Another Skill |
| </button> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">Certifications</h3> |
| <div id="certificationsContainer"> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Certification Name</label> |
| <input type="text" name="certificationName[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Issuing Organization</label> |
| <input type="text" name="issuingOrg[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Date Earned</label> |
| <input type="month" name="certDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <button type="button" id="addCertificationBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i class="fas fa-plus mr-2"></i>Add Another Certification |
| </button> |
| </div> |
|
|
| <div class="flex justify-between mt-8"> |
| <button type="button" id="backToTemplatesBtn" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i class="fas fa-arrow-left mr-2"></i>Back to Templates |
| </button> |
| <button type="submit" class="gradient-bg text-white px-6 py-2 rounded-lg hover:opacity-90 transition"> |
| <i class="fas fa-file-alt mr-2"></i>Generate Resume |
| </button> |
| </div> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <section id="previewSection" class="hidden mb-12"> |
| <div class="flex flex-col md:flex-row gap-6"> |
| |
| <div class="flex-1"> |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Your Resume Preview</h2> |
| <div class="flex space-x-4"> |
| <button id="editResumeBtn" class="bg-blue-100 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-200 transition"> |
| <i class="fas fa-edit mr-2"></i>Edit |
| </button> |
| <button id="downloadPdfBtn" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition"> |
| <i class="fas fa-download mr-2"></i>Download PDF |
| </button> |
| </div> |
| </div> |
| <div id="resumePreview" class="resume-container bg-white border rounded-lg overflow-hidden"> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:w-1/3 bg-blue-50 rounded-2xl p-6"> |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Resume Tips</h3> |
| <div class="space-y-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600"></i> |
| </div> |
| <p class="text-gray-700">Keep your resume concise - ideally 1 page for most job applications.</p> |
| </div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600"></i> |
| </div> |
| <p class="text-gray-700">Use action verbs to describe your responsibilities (e.g., "Led", "Developed", "Managed").</p> |
| </div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600"></i> |
| </div> |
| <p class="text-gray-700">Customize your resume for each job application by matching keywords from the job description.</p> |
| </div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600"></i> |
| </div> |
| <p class="text-gray-700">Quantify achievements when possible (e.g., "Increased sales by 25%").</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="welcomeSection" class="flex flex-col items-center justify-center py-12 fade-in"> |
| <div class="text-center max-w-3xl"> |
| <div class="gradient-bg text-white p-6 rounded-2xl inline-block"> |
| <i class="fas fa-file-alt text-5xl"></i> |
| </div> |
| <h2 class="text-3xl font-bold mt-6 mb-4 text-gray-800">Build Your Perfect Resume</h2> |
| <p class="text-gray-600 mb-8 text-lg">Create a professional resume that stands out with our easy-to-use builder. Choose from multiple templates, customize your content, and download in PDF format.</p> |
| <button id="getStartedBtn" class="gradient-bg text-white px-8 py-3 rounded-xl text-lg font-semibold hover:opacity-90 transition"> |
| Get Started Now <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script> |
| // Wait for DOM to load |
| document.addEventListener('DOMContentLoaded', function() { |
| // Elements we'll need to manipulate |
| const welcomeSection = document.getElementById('welcomeSection'); |
| const templatesSection = document.getElementById('templatesSection'); |
| const formSection = document.getElementById('formSection'); |
| const previewSection = document.getElementById('previewSection'); |
| const resumePreview = document.getElementById('resumePreview'); |
| |
| // Button elements |
| const getStartedBtn = document.getElementById('getStartedBtn'); |
| const newResumeBtn = document.getElementById('newResumeBtn'); |
| const templatesBtn = document.getElementById('templatesBtn'); |
| const backToTemplatesBtn = document.getElementById('backToTemplatesBtn'); |
| const editResumeBtn = document.getElementById('editResumeBtn'); |
| const downloadPdfBtn = document.getElementById('downloadPdfBtn'); |
| |
| // Template select buttons |
| const templateSelectBtns = document.querySelectorAll('.select-template'); |
| |
| // Form elements |
| const addExperienceBtn = document.getElementById('addExperienceBtn'); |
| const experienceContainer = document.getElementById('experienceContainer'); |
| const addEducationBtn = document.getElementById('addEducationBtn'); |
| const educationContainer = document.getElementById('educationContainer'); |
| const addSkillBtn = document.getElementById('addSkillBtn'); |
| const skillsContainer = document.getElementById('skillsContainer'); |
| const addCertificationBtn = document.getElementById('addCertificationBtn'); |
| const certificationsContainer = document.getElementById('certificationsContainer'); |
| const resumeForm = document.getElementById('resumeForm'); |
| |
| // Variables to track state |
| let selectedTemplate = null; |
| |
| // Event listeners |
| getStartedBtn.addEventListener('click', () => { |
| welcomeSection.classList.add('hidden'); |
| templatesSection.classList.remove('hidden'); |
| templatesSection.classList.add('slide-in'); |
| }); |
| |
| newResumeBtn.addEventListener('click', () => { |
| previewSection.classList.add('hidden'); |
| welcomeSection.classList.add('hidden'); |
| templatesSection.classList.remove('hidden'); |
| templatesSection.classList.add('slide-in'); |
| }); |
| |
| templatesBtn.addEventListener('click', () => { |
| previewSection.classList.add('hidden'); |
| formSection.classList.add('hidden'); |
| welcomeSection.classList.add('hidden'); |
| templatesSection.classList.remove('hidden'); |
| templatesSection.classList.add('slide-in'); |
| }); |
| |
| backToTemplatesBtn.addEventListener('click', () => { |
| formSection.classList.add('hidden'); |
| templatesSection.classList.remove('hidden'); |
| templatesSection.classList.add('slide-in'); |
| }); |
| |
| editResumeBtn.addEventListener('click', () => { |
| previewSection.classList.add('hidden'); |
| formSection.classList.remove('hidden'); |
| formSection.classList.add('slide-in'); |
| }); |
| |
| // Template selection |
| templateSelectBtns.forEach(btn => { |
| btn.addEventListener('click', function() { |
| selectedTemplate = this.getAttribute('data-template'); |
| templatesSection.classList.add('hidden'); |
| formSection.classList.remove('hidden'); |
| formSection.classList.add('slide-in'); |
| }); |
| }); |
| |
| // Add form fields dynamically |
| addExperienceBtn.addEventListener('click', function() { |
| const newExperience = document.createElement('div'); |
| newExperience.className = 'experience-entry bg-gray-50 p-4 rounded-lg mb-4'; |
| newExperience.innerHTML = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Job Title</label> |
| <input type="text" name="jobTitle[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Company</label> |
| <input type="text" name="company[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Start Date</label> |
| <input type="month" name="startDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">End Date (or leave blank if current)</label> |
| <input type="month" name="endDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <label class="block text-gray-700 mb-2">Description</label> |
| <textarea name="jobDescription[]" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required></textarea> |
| </div> |
| <button type="button" class="remove-experience bg-red-100 text-red-600 px-3 py-1 rounded text-sm mt-2 hover:bg-red-200 transition"> |
| <i class="fas fa-trash mr-1"></i>Remove |
| </button> |
| `; |
| experienceContainer.appendChild(newExperience); |
| |
| // Add event listener to the remove button |
| const removeBtn = newExperience.querySelector('.remove-experience'); |
| removeBtn.addEventListener('click', function() { |
| if(experienceContainer.children.length > 1) { |
| experienceContainer.removeChild(newExperience); |
| } else { |
| alert("You must have at least one work experience entry."); |
| } |
| }); |
| }); |
| |
| addEducationBtn.addEventListener('click', function() { |
| const newEducation = document.createElement('div'); |
| newEducation.className = 'education-entry bg-gray-50 p-4 rounded-lg mb-4'; |
| newEducation.innerHTML = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Institution</label> |
| <input type="text" name="institution[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Degree</label> |
| <input type="text" name="degree[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Field of Study</label> |
| <input type="text" name="fieldOfStudy[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Graduation Year</label> |
| <input type="month" name="graduationYear[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| </div> |
| <button type="button" class="remove-education bg-red-100 text-red-600 px-3 py-1 rounded text-sm mt-2 hover:bg-red-200 transition"> |
| <i class="fas fa-trash mr-1"></i>Remove |
| </button> |
| `; |
| educationContainer.appendChild(newEducation); |
| |
| // Add event listener to the remove button |
| const removeBtn = newEducation.querySelector('.remove-education'); |
| removeBtn.addEventListener('click', function() { |
| if(educationContainer.children.length > 1) { |
| educationContainer.removeChild(newEducation); |
| } else { |
| alert("You must have at least one education entry."); |
| } |
| }); |
| }); |
| |
| addSkillBtn.addEventListener('click', function() { |
| const newSkill = document.createElement('div'); |
| newSkill.className = 'grid grid-cols-1 md:grid-cols-3 gap-6 mb-4'; |
| newSkill.innerHTML = ` |
| <div> |
| <label class="block text-gray-700 mb-2">Skill</label> |
| <input type="text" name="skillName[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Proficiency</label> |
| <select name="skillLevel[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <option value="Beginner">Beginner</option> |
| <option value="Intermediate">Intermediate</option> |
| <option value="Advanced">Advanced</option> |
| <option value="Expert">Expert</option> |
| </select> |
| </div> |
| <div class="flex items-end"> |
| <button type="button" class="remove-skill bg-red-100 text-red-600 px-3 py-2 rounded text-sm hover:bg-red-200 transition"> |
| <i class="fas fa-trash mr-1"></i>Remove |
| </button> |
| </div> |
| `; |
| skillsContainer.appendChild(newSkill); |
| |
| // Add event listener to the remove button |
| const removeBtn = newSkill.querySelector('.remove-skill'); |
| removeBtn.addEventListener('click', function() { |
| if(skillsContainer.children.length > 1) { |
| skillsContainer.removeChild(newSkill); |
| } else { |
| alert("You must have at least one skill."); |
| } |
| }); |
| }); |
| |
| addCertificationBtn.addEventListener('click', function() { |
| const newCertification = document.createElement('div'); |
| newCertification.className = 'bg-gray-50 p-4 rounded-lg mb-4'; |
| newCertification.innerHTML = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Certification Name</label> |
| <input type="text" name="certificationName[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Issuing Organization</label> |
| <input type="text" name="issuingOrg[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Date Earned</label> |
| <input type="month" name="certDate[]" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| </div> |
| <button type="button" class="remove-certification bg-red-100 text-red-600 px-3 py-1 rounded text-sm mt-2 hover:bg-red-200 transition"> |
| <i class="fas fa-trash mr-1"></i>Remove |
| </button> |
| `; |
| certificationsContainer.appendChild(newCertification); |
| |
| // Add event listener to the remove button |
| const removeBtn = newCertification.querySelector('.remove-certification'); |
| removeBtn.addEventListener('click', function() { |
| certificationsContainer.removeChild(newCertification); |
| }); |
| }); |
| |
| // Form submission |
| resumeForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| // Gather form data |
| const formData = new FormData(this); |
| const data = {}; |
| |
| // Convert form data to JSON |
| for (let [key, value] of formData.entries()) { |
| // Handle arrays |
| if (key.includes('[]')) { |
| const cleanKey = key.replace('[]', ''); |
| if (!data[cleanKey]) { |
| data[cleanKey] = []; |
| } |
| data[cleanKey].push(value); |
| } else { |
| data[key] = value; |
| } |
| } |
| |
| // Generate the resume preview based on selected template |
| generateResumePreview(selectedTemplate, data); |
| |
| // Show preview section |
| formSection.classList.add('hidden'); |
| previewSection.classList.remove('hidden'); |
| previewSection.classList.add('fade-in'); |
| }); |
| |
| // Download PDF functionality |
| downloadPdfBtn.addEventListener('click', function() { |
| html2canvas(resumePreview, { |
| scale: 2, |
| logging: false, |
| useCORS: true |
| }).then(canvas => { |
| const imgData = canvas.toDataURL('image/png'); |
| const pdf = new jsPDF('p', 'mm', 'a4'); |
| const imgWidth = 210; // A4 width in mm |
| const pageHeight = 295; // A4 height in mm |
| const imgHeight = canvas.height * imgWidth / canvas.width; |
| let heightLeft = imgHeight; |
| let position = 0; |
| |
| pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); |
| heightLeft -= pageHeight; |
| |
| while (heightLeft >= 0) { |
| position = heightLeft - imgHeight; |
| pdf.addPage(); |
| pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); |
| heightLeft -= pageHeight; |
| } |
| |
| pdf.save('resume.pdf'); |
| }); |
| }); |
| |
| // Function to generate resume preview based on template |
| function generateResumePreview(template, data) { |
| // Clear previous content |
| resumePreview.innerHTML = ''; |
| |
| // Generate HTML based on selected template |
| let resumeHTML = ''; |
| |
| switch(template) { |
| case '1': // Modern template |
| resumeHTML = generateModernTemplate(data); |
| break; |
| case '2': // Creative template |
| resumeHTML = generateCreativeTemplate(data); |
| break; |
| case '3': // Minimal template |
| resumeHTML = generateMinimalTemplate(data); |
| break; |
| default: |
| resumeHTML = generateModernTemplate(data); |
| } |
| |
| resumePreview.innerHTML = resumeHTML; |
| } |
| |
| // Template generators |
| function generateModernTemplate(data) { |
| return ` |
| <div class="bg-gray-50 p-8"> |
| <div class="flex flex-col md:flex-row mb-8"> |
| <div class="md:w-1/3 mb-6 md:mb-0"> |
| <div class="gradient-bg p-4 rounded-lg text-white"> |
| <h1 class="text-3xl font-bold mb-1">${data.firstName} ${data.lastName}</h1> |
| <p class="text-blueTerracotta-100">${data.jobTitle[0] || 'Professional'}</p> |
| </div> |
| <div class="mt-4"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Contact</h2> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-blue-500"></i> |
| <span>${data.email || 'N/A'}</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2 text-blue-500"></i> |
| <span>${data.phone || 'N/A'}</span> |
| </li> |
| ${data.address ? ` |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> |
| <span>${data.address}</span> |
| </li> |
| ` : ''} |
| ${data.linkedin ? ` |
| <li class="flex items-center"> |
| <i class="fab fa-linkedin mr-2 text-blue-500"></i> |
| <span>${data.linkedin}</span> |
| </li> |
| ` : ''} |
| </ul> |
| </div> |
| <div class="mt-6"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Skills</h2> |
| <ul class="grid grid-cols-1 gap-2"> |
| ${data.skillName ? data.skillName.map((skill, i) => ` |
| <li class="flex justify-between"> |
| <span class="font-medium">${skill}</span> |
| <span class="text-gray-500">${data.skillLevel[i]}</span> |
| </li> |
| `).join('') : '<li>No skills listed</li>'} |
| </ul> |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pl-8"> |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Summary</h2> |
| <p class="text-gray-700">${data.summary || 'No summary provided.'}</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Work Experience</h2> |
| <div class="space-y-4"> |
| ${data.jobTitle ? data.jobTitle.map((job, i) => ` |
| <div class="border-l-4 border-blue-500 pl-4"> |
| <h3 class="font-bold text-gray-800">${job}</h3> |
| <p class="text-gray-600 mb-1">${data.company[i] || ''} | ${formatDate(data.startDate[i])} - ${data.endDate[i] ? formatDate(data.endDate[i]) : 'Present'}</p> |
| <p class="text-gray-700">${data.jobDescription[i] || ''}</p> |
| </div> |
| `).join('') : '<p>No work experience listed.</p>'} |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Education</h2> |
| <div class="space-y-4"> |
| ${data.institution ? data.institution.map((inst, i) => ` |
| <div> |
| <h3 class="font-bold text-gray-800">${inst}</h3> |
| <p class="text-gray-600 mb-1">${data.degree[i] || ''} | ${data.fieldOfStudy[i] ? data.fieldOfStudy[i] + ' | ' : ''}${formatDate(data.graduationYear[i], true)}</p> |
| </div> |
| `).join('') : '<p>No education listed.</p>'} |
| </div> |
| </div> |
| |
| ${data.certificationName && data.certificationName[0] ? ` |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-2 text-gray-800 border-b pb-1">Certifications</h2> |
| <ul class="list-disc list-inside space-y-1"> |
| ${data.certificationName.map((cert, i) => ` |
| <li class="text-gray-700"> |
| <span class="font-medium">${cert}</span> - ${data.issuingOrg[i]} (${formatDate(data.certDate[i], true)}) |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| ` : ''} |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| |
| function generateCreativeTemplate(data) { |
| return ` |
| <div class="gradient-bg p-8 text-white"> |
| <div class="text-center mb-8"> |
| <h1 class="text-4xl font-bold mb-2">${data.firstName} ${data.lastName}</h1> |
| <p class="text-xl">${data.jobTitle[0] || 'Professional'}</p> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-lg p-6 text-gray-800"> |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">About Me</h2> |
| <p class="text-gray-700">${data.summary || 'No summary provided.'}</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">Work Experience</h2> |
| <div class="space-y-6"> |
| ${data.jobTitle ? data.jobTitle.map((job, i) => ` |
| <div> |
| <div class="flex justify-between items-baseline mb-1"> |
| <h3 class="font-bold text-lg text-gray-800">${job}</h3> |
| <span class="text-sm text-blue-600">${formatDate(data.startDate[i])} - ${data.endDate[i] ? formatDate(data.endDate[i]) : 'Present'}</span> |
| </div> |
| <p class="text-gray-600 mb-2">${data.company[i] || ''}</p> |
| <p class="text-gray-700">${data.jobDescription[i] || ''}</p> |
| </div> |
| `).join('') : '<p>No work experience listed.</p>'} |
| </div> |
| </div> |
| |
| <div> |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">Education</h2> |
| <div class="space-y-4"> |
| ${data.institution ? data.institution.map((inst, i) => ` |
| <div> |
| <h3 class="font-bold text-gray-800">${inst}</h3> |
| <p class="text-gray-600 mb-1">${data.degree[i] || ''} | ${data.fieldOfStudy[i] ? data.fieldOfStudy[i] + ' | ' : ''}${formatDate(data.graduationYear[i], true)}</p> |
| </div> |
| `).join('') : '<p>No education listed.</p>'} |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">Skills</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| ${data.skillName ? data.skillName.map((skill, i) => ` |
| <div> |
| <span class="font-medium">${skill}</span> |
| <div class="h-2 bg-gray-200 rounded-full mt-1"> |
| <div class="h-full bg-blue-600 rounded-full" style="width: ${getProficiencyWidth(data.skillLevel[i])}%"></div> |
| </div> |
| </div> |
| `).join('') : '<p>No skills listed</p>'} |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| ${data.certificationName && data.certificationName[0] ? ` |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">Certifications</h2> |
| <ul class="space-y-2"> |
| ${data.certificationName.map((cert, i) => ` |
| <li class="text-gray-700"> |
| <span class="font-medium">${cert}</span><br> |
| <span class="text-sm text-blue-600">${data.issuingOrg[i]} (${formatDate(data.certDate[i], true)})</span> |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| ` : ''} |
| |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-blue-800">Contact</h2> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-blue-500"></i> |
| <span>${data.email || 'N/A'}</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2 text-blue-500"></i> |
| <span>${data.phone || 'N/A'}</span> |
| </li> |
| ${data.address ? ` |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> |
| <span>${data.address}</span> |
| </li> |
| ` : ''} |
| ${data.linkedin ? ` |
| <li class="flex items-center"> |
| <i class="fab fa-linkedin mr-2 text-blue-500"></i> |
| <span>${data.linkedin}</span> |
| </li> |
| ` : ''} |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| |
| function generateMinimalTemplate(data) { |
| return ` |
| <div class="p-8"> |
| <div class="text-center mb-8"> |
| <h1 class="text-4xl font-bold mb-1">${data.firstName} ${data.lastName}</h1> |
| <p class="text-xl text-gray-600">${data.jobTitle[0] || 'Professional'}</p> |
| <div class="flex flex-wrap justify-center gap-4 mt-4 text-sm text-gray-500"> |
| ${data.email ? `<span class="flex items-center"><i class="fas fa-envelope mr-1"></i> ${data.email}</span>` : ''} |
| ${data.phone ? `<span class="flex items-center"><i class="fas fa-phone-alt mr-1"></i> ${data.phone}</span>` : ''} |
| ${data.address ? `<span class="flex items-center"><i class="fas fa-map-marker-alt mr-1"></i> ${data.address}</span>` : ''} |
| ${data.linkedin ? `<span class="flex items-center"><i class="fab fa-linkedin mr-1"></i> ${data.linkedin}</span>` : ''} |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold mb-4 text-gray-800 border-b">Profile</h2> |
| <p class="text-gray-700">${data.summary || 'No summary provided.'}</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-gray-800 border-b">Experience</h2> |
| <div class="space-y-6"> |
| ${data.jobTitle ? data.jobTitle.map((job, i) => ` |
| <div> |
| <h3 class="font-bold text-gray-800">${job}</h3> |
| <p class="text-gray-600 mb-1">${data.company[i]} | ${formatDate(data.startDate[i])} - ${data.endDate[i] ? formatDate(data.endDate[i]) : 'Present'}</p> |
| <p class="text-gray-700">${data.jobDescription[i]}</p> |
| </div> |
| `).join('') : '<p>No work experience listed.</p>'} |
| </div> |
| </div> |
| |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-gray-800 border-b">Education</h2> |
| <div class="space-y-4"> |
| ${data.institution ? data.institution.map((inst, i) => ` |
| <div> |
| <h3 class="font-bold text-gray-800">${inst}</h3> |
| <p class="text-gray-600 mb-1">${data.degree[i]} ${data.fieldOfStudy[i] ? '(' + data.fieldOfStudy[i] + ')' : ''}</p> |
| <p class="text-gray-700">${formatDate(data.graduationYear[i], true)}</p> |
| </div> |
| `).join('') : '<p>No education listed.</p>'} |
| </div> |
| </div> |
| |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-gray-800 border-b">Skills</h2> |
| <ul class="flex flex-wrap gap-2"> |
| ${data.skillName ? data.skillName.map((skill, i) => ` |
| <li class="bg-gray-100 px-3 py-1 rounded-full text-gray-700">${skill}</li> |
| `).join('') : '<p>No skills listed.</p>'} |
| </ul> |
| </div> |
| |
| ${data.certificationName && data.certificationName[0] ? ` |
| <div> |
| <h2 class="text-xl font-bold mb-4 text-gray-800 border-b">Certifications</h2> |
| <ul class="space-y-2"> |
| ${data.certificationName.map((cert, i) => ` |
| <li class="text-gray-700"> |
| <span class="font-medium">${cert}</span> (${data.issuingOrg[i]}, ${formatDate(data.certDate[i], true)}) |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| ` : ''} |
| </div> |
| </div> |
| `; |
| } |
| |
| // Helper functions |
| function formatDate(dateString, yearOnly = false) { |
| if (!dateString) return ''; |
| const date = new Date(dateString); |
| if (yearOnly) { |
| return date.getFullYear(); |
| } |
| const monthNames = ["January", "February", "March", "April", "May", "June", |
| "July", "August", "September", "October", "November", "December"]; |
| return `${monthNames[date.getMonth()]} ${date.getFullYear()}`; |
| } |
| |
| function getProficiencyWidth(level) { |
| switch(level) { |
| case 'Beginner': return 25; |
| case 'Intermediate': return 50; |
| case 'Advanced': return 75; |
| case 'Expert': return 100; |
| default: return 25; |
| } |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=miiann/resume-creator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
