👤
Live Preview
Fill out the form to see your portfolio preview
Portfolio Builder | Created with HTML, CSS & JavaScript
`;
// Create download
const blob = new Blob([portfolioHTML], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${name.replace(/\s+/g, '-').toLowerCase()}-portfolio-${timestamp}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}function resetForm() {
if (confirm('Are you sure you want to reset all fields? This cannot be undone.')) {
localStorage.removeItem('portfolioData');
localStorage.removeItem('portfolioPhoto');
// Reset form fields
elements.name.value = '';
elements.profession.value = '';
elements.bio.value = '';
elements.email.value = '';
elements.phone.value = '';
elements.website.value = '';
elements.photoUpload.value = '';
// Reset image preview
elements.imagePreview.innerHTML = '👤
';
// Clear dynamic fields
elements.skillsContainer.innerHTML = '';
elements.projectsContainer.innerHTML = '';
// Add one empty field for skills and projects
addSkillField();
addProjectField();
updatePreview();
}
}function saveToLocalStorage() {
const formData = getFormData();
// Don't save the actual image data to localStorage as it can be too large
const dataToSave = {
...formData,
photo: null // We'll handle the photo separately
};
localStorage.setItem('portfolioData', JSON.stringify(dataToSave));
// Save photo separately if it exists
if (formData.photo) {
localStorage.setItem('portfolioPhoto', formData.photo);
} else {
localStorage.removeItem('portfolioPhoto');
}
}function loadFromLocalStorage() {
const savedData = localStorage.getItem('portfolioData');
const savedPhoto = localStorage.getItem('portfolioPhoto');
if (savedData) {
const portfolioData = JSON.parse(savedData);
// Set basic fields
elements.name.value = portfolioData.name || '';
elements.profession.value = portfolioData.profession || '';
elements.bio.value = portfolioData.bio || '';
elements.email.value = portfolioData.email || '';
elements.phone.value = portfolioData.phone || '';
elements.website.value = portfolioData.website || '';
// Set photo if exists
if (savedPhoto) {
elements.imagePreview.innerHTML = '';
const img = document.createElement('img');
img.src = savedPhoto;
img.alt = 'Profile Photo';
elements.imagePreview.appendChild(img);
} else {
elements.imagePreview.innerHTML = '👤
';
}
// Clear containers
elements.skillsContainer.innerHTML = '';
elements.projectsContainer.innerHTML = '';
// Add skills
if (portfolioData.skills && portfolioData.skills.length > 0) {
portfolioData.skills.forEach(skill => addSkillField(skill));
} else {
addSkillField();
}
// Add projects
if (portfolioData.projects && portfolioData.projects.length > 0) {
portfolioData.projects.forEach(project => addProjectField(project));
} else {
addProjectField();
}
} else {
// Initialize with empty fields
addSkillField();
addProjectField();
}
}
});