Portfolio Gallery Generator Tool
`;
codeOutput.textContent = htmlCode;
}
function resetGallery() {
// Reset to default values
currentGallery = {
layout: 'grid',
width: 1000,
columns: 3,
title: 'My Portfolio',
showFilters: true,
showDescription: true,
showTags: true,
hoverEffect: true,
colors: {
bg: '#f8f9fa',
primary: '#6c5ce7',
text: '#2d3436'
},
fontSize: '16px',
borderRadius: '8px',
fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
projects: [
{
title: 'E-Commerce Website',
description: 'A fully responsive e-commerce website with product catalog, shopping cart, and payment integration.',
tags: ['Web Design', 'E-commerce', 'Responsive'],
link: 'https://example.com',
category: 'mobile'
},
{
title: 'Mobile Banking App',
description: 'A secure mobile banking application with biometric authentication and real-time transaction tracking.',
tags: ['Mobile', 'Finance', 'UX/UI'],
link: 'https://example.com',
category: 'mobile'
},
{
title: 'Brand Identity Design',
description: 'Complete brand identity package including logo, color palette, typography, and brand guidelines.',
tags: ['Branding', 'Logo', 'Identity'],
link: 'https://example.com',
category: 'graphic'
}
]
};
// Update UI controls
galleryWidth.value = 1000;
galleryWidthValue.textContent = '1000px';
columns.value = 3;
columnsValue.textContent = '3';
galleryTitle.value = 'My Portfolio';
showFilters.checked = true;
showDescription.checked = true;
showTags.checked = true;
hoverEffect.checked = true;
bgColor.value = '#f8f9fa';
bgColorHex.value = '#f8f9fa';
bgColorPreview.style.background = '#f8f9fa';
primaryColor.value = '#6c5ce7';
primaryColorHex.value = '#6c5ce7';
primaryColorPreview.style.background = '#6c5ce7';
textColor.value = '#2d3436';
textColorHex.value = '#2d3436';
textColorPreview.style.background = '#2d3436';
fontSize.value = 16;
fontSizeValue.textContent = '16px';
borderRadius.value = 8;
borderRadiusValue.textContent = '8px';
fontFamily.value = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
// Reset layout options
layoutOptions.forEach(option => {
option.classList.remove('selected');
if (option.getAttribute('data-layout') === 'grid') {
option.classList.add('selected');
}
});
// Reset projects
const projectControls = document.querySelector('.project-controls');
projectControls.innerHTML = '';
currentGallery.projects.forEach((project, index) => {
const newProject = document.createElement('div');
newProject.className = 'project-item';
newProject.innerHTML = `
`;
projectControls.appendChild(newProject);
// Add event listeners
newProject.querySelector('.remove-project').addEventListener('click', function() {
newProject.remove();
updateProjects();
});
newProject.querySelectorAll('input, textarea, select').forEach(input => {
input.addEventListener('input', updateProjects);
});
});
// Apply changes
updateGallery();
updateCode();
}
function exportCode() {
const htmlCode = codeOutput.textContent;
const blob = new Blob([htmlCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'portfolio-gallery.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Portfolio gallery code downloaded successfully!');
}
function saveGallery() {
const galleryName = prompt('Enter a name for your portfolio gallery:');
if (galleryName) {
// In a real implementation, this would save to localStorage or a server
alert(`Portfolio gallery "${galleryName}" saved successfully!`);
}
}
});
