Make CV Online Free

Make CV Online Free Resume builder online /* Scoped Wrapper to prevent conflicts with Jannah Theme */ #resume-builder-wrapper { font-family: 'Roboto', sans-serif; background-color: #f4f7f6; color: #333; transition: background-color 0.3s, color 0.3s; padding: 20px; border-radius: 8px; } /* Renamed .header to .rb-header to avoid theme conflict */ #resume-builder-wrapper .rb-header { background-color: #ffffff; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 20px; border-radius: 5px; } #resume-builder-wrapper .rb-header h1 { margin: 0; font-size: 1.8rem; font-weight: 700; color: #333; } #resume-builder-wrapper .theme-selector label { margin-right: 10px; font-weight: 500; } #resume-builder-wrapper .theme-selector select { padding: 5px; border-radius: 5px; border: 1px solid #ccc; } /* Renamed .container to .rb-container */ #resume-builder-wrapper .rb-container { display: flex; flex-wrap: wrap; width: 100%; gap: 20px; } #resume-builder-wrapper .input-form { flex: 1; min-width: 300px; background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-sizing: border-box; } #resume-builder-wrapper .form-section { margin-bottom: 20px; } #resume-builder-wrapper .form-section h2 { border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 15px; font-size: 1.5rem; color: #007bff; } #resume-builder-wrapper .form-group { margin-bottom: 15px; } #resume-builder-wrapper label { display: block; margin-bottom: 5px; font-weight: 600; } #resume-builder-wrapper input[type="text"], #resume-builder-wrapper input[type="email"], #resume-builder-wrapper input[type="tel"], #resume-builder-wrapper input[type="number"], #resume-builder-wrapper textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; box-sizing: border-box; margin-bottom: 5px; } #resume-builder-wrapper .table-responsive { overflow-x: auto; } #resume-builder-wrapper #educationTable { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; } #resume-builder-wrapper #educationTable th, #resume-builder-wrapper #educationTable td { border: 1px solid #ddd; padding: 8px; text-align: left; } #resume-builder-wrapper #addEducation { margin-top: 10px; padding: 10px 15px; background-color: #28a745; color: #fff; border: none; border-radius: 5px; cursor: pointer; } /* Resume Preview Styling */ #resume-builder-wrapper .resume-preview { flex: 2; min-width: 400px; background-color: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); line-height: 1.6; box-sizing: border-box; } #resumeTemplate { width: 100%; } #resume-builder-wrapper .header-section { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; } #resume-builder-wrapper .header-content { flex: 1; } #resume-builder-wrapper .full-name { font-size: 2.5rem; font-weight: 700; margin: 0; color: #007bff; line-height: 1.2; } #resume-builder-wrapper .contact-info { text-align: right; font-size: 0.9rem; } #resume-builder-wrapper .contact-info p { margin: 0; } #resume-builder-wrapper .profile-pic { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid #ccc; margin-left: 20px; flex-shrink: 0; } #resume-builder-wrapper .profile-pic.hidden { display: none; } #resume-builder-wrapper .section { margin-top: 25px; } #resume-builder-wrapper .section h3 { font-size: 1.2rem; font-weight: 700; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 10px; color: #333; } #resume-builder-wrapper .education-output-table { width: 100%; border-collapse: collapse; } #resume-builder-wrapper .education-output-table th, #resume-builder-wrapper .education-output-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } #resume-builder-wrapper .skills-list, #resume-builder-wrapper .achievements-list { list-style-type: disc; padding-left: 20px; margin-top: 0; } /* Export Buttons */ #resume-builder-wrapper .export-buttons { text-align: center; margin-top: 20px; margin-bottom: 40px; width: 100%; } #resume-builder-wrapper .export-buttons button { padding: 12px 25px; font-size: 1rem; font-weight: 600; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin: 5px; } #resume-builder-wrapper #exportPdf { background-color: #dc3545; } #resume-builder-wrapper #exportDocx { background-color: #007bff; } /* Responsive */ @media (max-width: 768px) { #resume-builder-wrapper .rb-container { flex-direction: column; } #resume-builder-wrapper .resume-preview { padding: 20px; min-width: 100%; } } /* Dark Theme Scoped */ #resume-builder-wrapper.dark { background-color: #2c2f33; color: #fff; } #resume-builder-wrapper.dark .rb-header, #resume-builder-wrapper.dark .input-form, #resume-builder-wrapper.dark .resume-preview { background-color: #36393f; } #resume-builder-wrapper.dark input, #resume-builder-wrapper.dark textarea { background-color: #424549; color: #fff; border: 1px solid #555; } #resume-builder-wrapper.dark .section h3 { color: #fff; } Professional Resume Builder Theme: Light Dark Blue Personal Information Full Name Father’s Name Email Address Address Cell Number Profile Picture Education Degree Institute Marks Total Add Education Skills Experience Achievements References Full Name Father's Name Education Degree Institute % Grade Skills Experience Achievements References Export as PDF Export as DOCX document.addEventListener('DOMContentLoaded', () => { // Wrapper selector to ensure we only target this tool const wrapper = document.getElementById('resume-builder-wrapper'); const updateResume = () => { wrapper.querySelector('.full-name').textContent = wrapper.querySelector('#fullName').value || 'Full Name'; wrapper.querySelector('.father-name').textContent = wrapper.querySelector('#fatherName').value || ''; wrapper.querySelector('.email-info').textContent = wrapper.querySelector('#email').value; wrapper.querySelector('.address-info').textContent = wrapper.querySelector('#address').value; wrapper.querySelector('.cell-info').textContent = wrapper.querySelector('#cellNumber').value; // Skills const skillsList = wrapper.querySelector('.skills-list'); skillsList.innerHTML = ''; const skillsVal = wrapper.querySelector('#skills').value; if (skillsVal) { skillsVal.split('\n').forEach(sk => { if(sk.trim()){ const li = document.createElement('li'); li.textContent = sk.trim(); skillsList.appendChild(li); } }); } // Experience const expVal = wrapper.querySelector('#experience').value; wrapper.querySelector('.experience-content').innerHTML = expVal ? expVal.split('\n').map(line => `${line}`).join('') : ''; // Achievements const achList = wrapper.querySelector('.achievements-list'); achList.innerHTML = ''; const achVal = wrapper.querySelector('#achievements').value; if (achVal) { achVal.split('\n').forEach(a => { if(a.trim()){ const li = document.createElement('li'); li.textContent = a.trim(); achList.appendChild(li); } }); } // Reference wrapper.querySelector('.reference-content').textContent = wrapper.querySelector('#reference').value; updateEducationTable(); }; const updateEducationTable = () => { const rows = wrapper.querySelectorAll('#educationTable tbody tr'); const outputBody = wrapper.querySelector('.education-output-table tbody'); outputBody.innerHTML = ''; rows.forEach(row => { const degree = row.querySelector('.degreeName').value; const uni = row.querySelector('.universityName').value; const obt = parseFloat(row.querySelector('.obtainedMarks').value); const tot = parseFloat(row.querySelector('.totalMarks').value); if (degree && uni && !isNaN(obt) && !isNaN(tot) && tot > 0) { const perc = ((obt / tot) * 100).toFixed(2); let grade = 'F'; if(perc >= 90) grade = 'A+'; else if(perc >= 80) grade = 'A'; else if(perc >= 70) grade = 'B'; else if(perc >= 50) grade = 'C'; const newRow = document.createElement('tr'); newRow.innerHTML = `${degree}${uni}${perc}%${grade}`; outputBody.appendChild(newRow); } }); }; const addEducationRow = () => { const tbody = wrapper.querySelector('#educationTable tbody'); const newRow = document.createElement('tr'); newRow.innerHTML = ` `; tbody.appendChild(newRow); newRow.querySelectorAll('input').forEach(inp => inp.addEventListener('input', updateResume)); }; // Event Listeners wrapper.querySelectorAll('input, textarea').forEach(el => el.addEventListener('input', updateResume)); wrapper.querySelector('#addEducation').addEventListener('click', addEducationRow); wrapper.querySelector('#theme').addEventListener('change', (e) => { wrapper.className = e.target.value; }); wrapper.querySelector('#profilePicture').addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (ev) => { const img = wrapper.querySelector('#previewImage'); img.src = ev.target.result; img.classList.remove('hidden'); }; reader.readAsDataURL(file); } }); // PDF Export wrapper.querySelector('#exportPdf').addEventListener('click', () => { const element = wrapper.querySelector('#resumeTemplate'); // Hide elements not needed for PDF temporarily // Note: We use html2canvas which captures the visual DOM html2canvas(element, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/jpeg', 1.0); const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = 210; const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight); pdf.save('resume.pdf'); }); }); // DOCX Export (Simplified for stability) wrapper.querySelector('#exportDocx').addEventListener('click', async () => { if(!window.docx) return alert('DOCX library not loaded yet'); const { Document, Packer, Paragraph, TextRun } = window.docx; const doc = new Document({ sections: [{ children: [ new Paragraph({ children: [new TextRun({ text: wrapper.querySelector('#fullName').value, bold: true, size: 40 })] }), new Paragraph({ text: wrapper.querySelector('#email').value }), new Paragraph({ text: wrapper.querySelector('#cellNumber').value }), new Paragraph({ text: "\nExperience:\n" + wrapper.querySelector('#experience').value }), ], }], }); const blob = await Packer.toBlob(doc); saveAs(blob, "resume.docx"); }); });

Make CV Online Free

Make CV Online Free

Professional Resume Builder

Personal Information

Education

Skills

Experience

Achievements

References

Full Name

Father’s Name

Education

Skills

Experience

Achievements

References

Majid Farooq

Leave a Reply Cancel reply

Make CV Online Free

Professional Resume Builder

Personal Information

Education

Skills

Experience

Achievements

References

Full Name

Father’s Name

Education

Skills

Experience

Achievements

References

Majid Farooq

Related Articles

Micro Business Tax Deduction Calculator 2026

IVF Calculator

Virtual Event ROI Calculator 2026

Adsense Approval Checker Tool

Percentage Difference Visualizer

Online Image Resize Free

Leave a Reply Cancel reply