About Page Creator

Create a beautiful, professional about page in minutes. Customize your content, choose a template, and get HTML code ready to use on your website.

Your Information

Personal Information

Full Name

Professional Title

Phone

About You

Short Bio

Social Links

Skills

Choose a Template

Modern

Minimal

Preview

Your about page preview will appear here

HTML Code

${previewHtml} `.trim(); document.getElementById('htmlCode').textContent = htmlCode; document.getElementById('codeOutputContainer').classList.remove('hidden'); } // Modern template function generateModernTemplate(name, title, email, phone, bio, socialLinks, skills) { return `

${name}

${title}

${email}

${phone}

${socialLinks.map(link => ` `).join('')}

About Me

${bio}

Skills

${skills.map(skill => ` ${skill} `).join('')}

Get In Touch

Feel free to reach out for collaborations or just a friendly hello!

Contact Me

`; } // Minimal template function generateMinimalTemplate(name, title, email, phone, bio, socialLinks, skills) { return `

${name}

${title}

${socialLinks.map(link => ` `).join('')}

About

${bio}

Skills

${skills.map(skill => ` ${skill} `).join('')}

Contact

${email}

${phone}

`; } // Copy to clipboard function copyToClipboard() { const code = document.getElementById('htmlCode').textContent; navigator.clipboard.writeText(code).then(() => { const button = document.querySelector('#codeOutputContainer button'); button.textContent = 'Copied!'; setTimeout(() => { button.textContent = 'Copy Code'; }, 2000); }); } // Reset form function resetForm() { document.getElementById('name').value = ''; document.getElementById('title').value = ''; document.getElementById('email').value = ''; document.getElementById('phone').value = ''; document.getElementById('bio').value = ''; document.getElementById('socialLinksContainer').innerHTML = ''; document.getElementById('skillsContainer').innerHTML = ''; document.getElementById('newSkill').value = ''; document.querySelectorAll('.template-card').forEach(card => { card.classList.remove('selected'); }); document.querySelector('.template-card').classList.add('selected'); selectedTemplate = 'modern'; document.getElementById('previewContent').innerHTML = `

Your about page preview will appear here

`; document.getElementById('copyCodeBtn').classList.add('hidden'); document.getElementById('codeOutputContainer').classList.add('hidden'); } // Initialize with one social link field window.onload = function() { addSocialLink(); document.querySelector('.template-card').classList.add('selected'); };