Professional Skillset Summary Generator
Preview your skill summary below. Use the "Skill Configuration" tab to edit data.
Professional Skills Summary
Comprehensive Overview of Competencies
No skills added yet.
Add New Skill
Your Skill List
No skills added yet.
'; return; } let html = ''; // 1. Technical Skills (Progress Bars) const techSkills = skills.filter(s => s.cat === 'tech'); if (techSkills.length > 0) { html += `${categories['tech'].label}
`;
html += ``;
}
// 2. Soft Skills (Tags)
const softSkills = skills.filter(s => s.cat === 'soft');
if (softSkills.length > 0) {
html += `${categories['soft'].label}
`;
html += ``;
}
// 3. Tools (List)
const toolSkills = skills.filter(s => s.cat === 'tool');
if (toolSkills.length > 0) {
html += `${categories['tool'].label}
`;
html += ``;
html += toolSkills.map(s => s.name).join(', ');
html += `
`;
}
// 4. Languages (List with level)
const langSkills = skills.filter(s => s.cat === 'lang');
if (langSkills.length > 0) {
html += `${categories['lang'].label}
`;
html += ``;
html += langSkills.map(s => {
let lvlText = 'Basic';
if(s.level >= 100) lvlText = 'Native/Bilingual';
else if(s.level >= 85) lvlText = 'Fluent';
else if(s.level >= 70) lvlText = 'Proficient';
return `${s.name} (${lvlText})`;
}).join(' • ');
html += `
`;
}
previewContent.innerHTML = html;
}
// Expose remove function globally
window.removeSsgSkill = function(index) {
skills.splice(index, 1);
renderManageList();
renderPreview();
};
// --- Event Listeners ---
// Add Skill
document.getElementById('ssg-btn-add').addEventListener('click', () => {
const name = inputName.value.trim();
if (!name) {
alert("Please enter a skill name.");
return;
}
skills.push({
name: name,
cat: inputCat.value,
level: parseInt(inputLevel.value)
});
inputName.value = ''; // Reset input
renderManageList();
renderPreview();
});
// Clear All
document.getElementById('ssg-btn-clear').addEventListener('click', () => {
if(confirm("Delete all skills?")) {
skills = [];
renderManageList();
renderPreview();
}
});
// Load Sample Data (USA Context)
document.getElementById('ssg-btn-sample').addEventListener('click', () => {
skills = [
{ name: "Strategic Planning", cat: "tech", level: 100 },
{ name: "Data Analysis (SQL/Python)", cat: "tech", level: 85 },
{ name: "Financial Modeling", cat: "tech", level: 70 },
{ name: "Leadership & Mentoring", cat: "soft", level: 100 },
{ name: "Cross-Functional Collaboration", cat: "soft", level: 100 },
{ name: "Public Speaking", cat: "soft", level: 85 },
{ name: "Critical Thinking", cat: "soft", level: 100 },
{ name: "Jira / Confluence", cat: "tool", level: 85 },
{ name: "Salesforce CRM", cat: "tool", level: 70 },
{ name: "Microsoft Office 365", cat: "tool", level: 100 },
{ name: "Tableau", cat: "tool", level: 70 },
{ name: "English", cat: "lang", level: 100 },
{ name: "Spanish", cat: "lang", level: 70 }
];
renderManageList();
renderPreview();
// Switch to dashboard to show effect
showTab(0);
});
// PDF Download
document.getElementById('ssg-download-pdf').addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const element = document.getElementById('ssg-preview-area');
html2canvas(element, {
scale: 2,
useCORS: true,
backgroundColor: '#ffffff' // Ensure white background
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgProps = pdf.getImageProperties(imgData);
const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
// Margin
const margin = 15;
const contentWidth = pdfWidth - (margin * 2);
const contentHeight = (imgProps.height * contentWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, contentHeight);
pdf.save('Professional_Skillset_Summary.pdf');
});
});
// --- Tab Logic ---
let currentTab = 0;
function showTab(index) {
tabs.forEach((t, i) => {
if (i === index) {
t.classList.add('active');
contents[i].classList.add('active');
} else {
t.classList.remove('active');
contents[i].classList.remove('active');
}
});
currentTab = index;
prevBtn.disabled = currentTab === 0;
nextBtn.disabled = currentTab === tabs.length - 1;
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => showTab(index));
});
prevBtn.addEventListener('click', () => {
if (currentTab > 0) showTab(currentTab - 1);
});
nextBtn.addEventListener('click', () => {
if (currentTab < tabs.length - 1) showTab(currentTab + 1);
});
// Init
renderManageList();
renderPreview();
});