|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>LinkedIn Profile to Website</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--primary: #0a66c2; |
|
--secondary: #004182; |
|
--light: #f3f6f8; |
|
--gray: #e6e9ec; |
|
--dark-gray: #6e6e6e; |
|
--text: #333333; |
|
--white: #ffffff; |
|
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
} |
|
|
|
body { |
|
background-color: var(--light); |
|
color: var(--text); |
|
line-height: 1.6; |
|
} |
|
|
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
header { |
|
background-color: var(--white); |
|
box-shadow: var(--shadow); |
|
padding: 15px 0; |
|
position: sticky; |
|
top: 0; |
|
z-index: 100; |
|
} |
|
|
|
.header-content { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.logo { |
|
display: flex; |
|
align-items: center; |
|
gap: 10px; |
|
font-weight: 600; |
|
color: var(--primary); |
|
} |
|
|
|
.logo i { |
|
font-size: 28px; |
|
} |
|
|
|
.converter-section { |
|
background-color: var(--white); |
|
border-radius: 8px; |
|
padding: 40px; |
|
margin: 40px 0; |
|
box-shadow: var(--shadow); |
|
text-align: center; |
|
} |
|
|
|
h1 { |
|
margin-bottom: 20px; |
|
color: var(--primary); |
|
} |
|
|
|
.description { |
|
margin-bottom: 30px; |
|
color: var(--dark-gray); |
|
max-width: 700px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
|
|
.input-group { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 20px; |
|
max-width: 500px; |
|
margin: 0 auto; |
|
} |
|
|
|
.input-field { |
|
position: relative; |
|
} |
|
|
|
.input-field i { |
|
position: absolute; |
|
left: 15px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
color: var(--dark-gray); |
|
} |
|
|
|
input { |
|
width: 100%; |
|
padding: 12px 15px 12px 45px; |
|
border: 1px solid var(--gray); |
|
border-radius: 4px; |
|
font-size: 16px; |
|
transition: all 0.3s; |
|
} |
|
|
|
input:focus { |
|
outline: none; |
|
border-color: var(--primary); |
|
box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.2); |
|
} |
|
|
|
button { |
|
background-color: var(--primary); |
|
color: white; |
|
border: none; |
|
padding: 12px 24px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
font-size: 16px; |
|
font-weight: 600; |
|
transition: all 0.3s; |
|
} |
|
|
|
button:hover { |
|
background-color: var(--secondary); |
|
} |
|
|
|
.profile-website { |
|
background-color: var(--white); |
|
border-radius: 8px; |
|
margin: 40px 0; |
|
box-shadow: var(--shadow); |
|
display: none; |
|
} |
|
|
|
.website-header { |
|
background-color: var(--primary); |
|
color: white; |
|
padding: 40px; |
|
border-radius: 8px 8px 0 0; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
text-align: center; |
|
position: relative; |
|
} |
|
|
|
.profile-pic { |
|
width: 150px; |
|
height: 150px; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
border: 4px solid white; |
|
margin-bottom: 20px; |
|
box-shadow: var(--shadow); |
|
} |
|
|
|
.personal-info h2 { |
|
font-size: 28px; |
|
margin-bottom: 5px; |
|
} |
|
|
|
.headline { |
|
font-size: 18px; |
|
margin-bottom: 10px; |
|
opacity: 0.9; |
|
} |
|
|
|
.location { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 5px; |
|
font-size: 16px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.contact-info { |
|
position: absolute; |
|
top: 20px; |
|
right: 20px; |
|
background-color: rgba(255, 255, 255, 0.9); |
|
padding: 10px; |
|
border-radius: 4px; |
|
color: var(--text); |
|
} |
|
|
|
.website-body { |
|
padding: 40px; |
|
display: grid; |
|
grid-template-columns: 1fr 2fr; |
|
gap: 30px; |
|
} |
|
|
|
.sidebar { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 30px; |
|
} |
|
|
|
.card { |
|
background-color: var(--light); |
|
border-radius: 8px; |
|
padding: 20px; |
|
} |
|
|
|
.card h3 { |
|
margin-bottom: 15px; |
|
color: var(--primary); |
|
display: flex; |
|
align-items: center; |
|
gap: 10px; |
|
} |
|
|
|
.main-content { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 30px; |
|
} |
|
|
|
.about-section p { |
|
margin-bottom: 15px; |
|
} |
|
|
|
.experience-item, .education-item { |
|
margin-bottom: 20px; |
|
padding-bottom: 20px; |
|
border-bottom: 1px solid var(--gray); |
|
} |
|
|
|
.experience-item:last-child, .education-item:last-child { |
|
margin-bottom: 0; |
|
padding-bottom: 0; |
|
border-bottom: none; |
|
} |
|
|
|
.job-title, .degree { |
|
font-weight: 600; |
|
font-size: 18px; |
|
} |
|
|
|
.company-name, .school-name { |
|
color: var(--primary); |
|
font-weight: 500; |
|
} |
|
|
|
.date-range { |
|
color: var(--dark-gray); |
|
font-size: 14px; |
|
margin: 5px 0; |
|
} |
|
|
|
.skills-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 8px; |
|
} |
|
|
|
.skill-tag { |
|
background-color: var(--gray); |
|
padding: 5px 10px; |
|
border-radius: 20px; |
|
font-size: 14px; |
|
} |
|
|
|
.social-links { |
|
display: flex; |
|
gap: 15px; |
|
} |
|
|
|
.social-links a { |
|
color: var(--text); |
|
font-size: 20px; |
|
transition: all 0.3s; |
|
} |
|
|
|
.social-links a:hover { |
|
color: var(--primary); |
|
} |
|
|
|
.loading { |
|
display: none; |
|
text-align: center; |
|
padding: 20px; |
|
} |
|
|
|
.spinner { |
|
border: 4px solid rgba(0, 0, 0, 0.1); |
|
border-radius: 50%; |
|
border-top: 4px solid var(--primary); |
|
width: 40px; |
|
height: 40px; |
|
animation: spin 1s linear infinite; |
|
margin: 0 auto 15px; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
.error { |
|
color: #ff4444; |
|
margin-top: 10px; |
|
display: none; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.website-body { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.header-content { |
|
flex-direction: column; |
|
gap: 15px; |
|
} |
|
|
|
.converter-section { |
|
padding: 20px; |
|
} |
|
|
|
.website-header { |
|
padding: 30px 15px; |
|
} |
|
|
|
.contact-info { |
|
position: static; |
|
margin-bottom: 20px; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<div class="container header-content"> |
|
<div class="logo"> |
|
<i class="fab fa-linkedin"></i> |
|
<span>LinkedIn to Website</span> |
|
</div> |
|
<div> |
|
<button id="export-btn" style="display: none;"><i class="fas fa-download"></i> Export Website</button> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
<main class="container"> |
|
<section class="converter-section"> |
|
<h1>Turn Your LinkedIn Profile into a Personal Website</h1> |
|
<p class="description"> |
|
Transform your LinkedIn profile into a beautiful, standalone website. Enter your LinkedIn handle and email below to generate your personal portfolio website instantly. |
|
</p> |
|
|
|
<div class="input-group"> |
|
<div class="input-field"> |
|
<i class="fab fa-linkedin"></i> |
|
<input type="text" id="linkedin-handle" placeholder="LinkedIn handle (e.g. johndoe)"> |
|
</div> |
|
|
|
<div class="input-field"> |
|
<i class="fas fa-envelope"></i> |
|
<input type="email" id="user-email" placeholder="Your email address"> |
|
</div> |
|
|
|
<button id="generate-btn"><i class="fas fa-magic"></i> Generate Website</button> |
|
<p class="error" id="error-message">Please enter valid LinkedIn handle and email address</p> |
|
</div> |
|
|
|
<div class="loading" id="loading"> |
|
<div class="spinner"></div> |
|
<p>Generating your website from LinkedIn profile...</p> |
|
</div> |
|
</section> |
|
|
|
<section class="profile-website" id="generated-website"> |
|
<div class="website-header"> |
|
<div class="contact-info"> |
|
<p id="contact-email"></p> |
|
</div> |
|
<img src="https://via.placeholder.com/150" alt="Profile picture" class="profile-pic" id="profile-pic"> |
|
<div class="personal-info"> |
|
<h2 id="full-name">John Doe</h2> |
|
<p class="headline" id="headline">Senior Software Engineer | Web Developer | React Specialist</p> |
|
<p class="location"><i class="fas fa-map-marker-alt"></i> <span id="location">San Francisco, California</span></p> |
|
</div> |
|
</div> |
|
|
|
<div class="website-body"> |
|
<aside class="sidebar"> |
|
<div class="card"> |
|
<h3><i class="fas fa-info-circle"></i> About</h3> |
|
<div id="about-content"> |
|
<p>Experienced software engineer with 8+ years of experience in web development. Specializing in React, Node.js, and modern JavaScript frameworks. Passionate about creating efficient, scalable applications with clean code.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h3><i class="fas fa-bullseye"></i> Skills</h3> |
|
<div class="skills-container" id="skills"> |
|
<span class="skill-tag">JavaScript</span> |
|
<span class="skill-tag">React</span> |
|
<span class="skill-tag">Node.js</span> |
|
<span class="skill-tag">HTML/CSS</span> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h3><i class="fas fa-graduation-cap"></i> Education</h3> |
|
<div id="education-list"> |
|
<div class="education-item"> |
|
<p class="degree">Master of Computer Science</p> |
|
<p class="school-name">Stanford University</p> |
|
<p class="date-range">2010 - 2012</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h3><i class="fas fa-link"></i> Connect</h3> |
|
<div class="social-links"> |
|
<a href="#" id="linkedin-link"><i class="fab fa-linkedin"></i></a> |
|
<a href="#"><i class="fab fa-github"></i></a> |
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
</div> |
|
</div> |
|
</aside> |
|
|
|
<div class="main-content"> |
|
<div class="card"> |
|
<h3><i class="fas fa-briefcase"></i> Experience</h3> |
|
<div id="experience-list"> |
|
<div class="experience-item"> |
|
<p class="job-title">Senior Software Engineer</p> |
|
<p class="company-name">Google</p> |
|
<p class="date-range">Jan 2018 - Present</p> |
|
<p>Led frontend development for Google Drive web application. Implemented new features using React and Redux.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h3><i class="fas fa-medal"></i> Projects</h3> |
|
<div id="projects-list"> |
|
<div class="experience-item"> |
|
<p class="job-title">E-commerce Platform</p> |
|
<p class="date-range">2020</p> |
|
<p>Built a full-stack e-commerce platform with React, Node.js, and MongoDB. Implemented payment processing and inventory management.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<h3><i class="fas fa-certificate"></i> Certifications</h3> |
|
<div id="certifications-list"> |
|
<div class="experience-item"> |
|
<p class="job-title">React - The Complete Guide</p> |
|
<p class="company-name">Udemy</p> |
|
<p class="date-range">Issued 2019</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</main> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const generateBtn = document.getElementById('generate-btn'); |
|
const linkedinHandle = document.getElementById('linkedin-handle'); |
|
const userEmail = document.getElementById('user-email'); |
|
const errorMessage = document.getElementById('error-message'); |
|
const loading = document.getElementById('loading'); |
|
const generatedWebsite = document.getElementById('generated-website'); |
|
const exportBtn = document.getElementById('export-btn'); |
|
|
|
generateBtn.addEventListener('click', function() { |
|
|
|
if (!linkedinHandle.value.trim() || !userEmail.value.trim() || !userEmail.value.includes('@')) { |
|
errorMessage.style.display = 'block'; |
|
return; |
|
} |
|
|
|
errorMessage.style.display = 'none'; |
|
loading.style.display = 'block'; |
|
generatedWebsite.style.display = 'none'; |
|
|
|
|
|
setTimeout(function() { |
|
generateProfileWebsite(linkedinHandle.value.trim(), userEmail.value.trim()); |
|
loading.style.display = 'none'; |
|
generatedWebsite.style.display = 'block'; |
|
exportBtn.style.display = 'block'; |
|
}, 2000); |
|
}); |
|
|
|
exportBtn.addEventListener('click', function() { |
|
|
|
const htmlContent = document.documentElement.outerHTML; |
|
const blob = new Blob([htmlContent], {type: 'text/html'}); |
|
const url = URL.createObjectURL(blob); |
|
|
|
const a = document.createElement('a'); |
|
a.href = url; |
|
a.download = 'my-profile-website.html'; |
|
document.body.appendChild(a); |
|
a.click(); |
|
document.body.removeChild(a); |
|
URL.revokeObjectURL(url); |
|
}); |
|
|
|
function generateProfileWebsite(handle, email) { |
|
|
|
|
|
|
|
|
|
document.getElementById('contact-email').textContent = email; |
|
|
|
|
|
document.getElementById('linkedin-link').href = `https://linkedin.com/in/${handle}`; |
|
|
|
|
|
const names = handle.split(/[-_]/).map(name => |
|
name.charAt(0).toUpperCase() + name.slice(1) |
|
); |
|
|
|
const fullName = names.length >= 2 |
|
? `${names[0]} ${names[1]}` |
|
: `${handle.charAt(0).toUpperCase() + handle.slice(1)} User`; |
|
|
|
const mockCompanies = ['Google', 'Microsoft', 'Amazon', 'Facebook', 'Apple']; |
|
const mockTitles = ['Senior Developer', 'Tech Lead', 'Software Engineer', 'Product Manager']; |
|
const mockSkills = ['JavaScript', 'React', 'Node.js', 'Python', 'HTML', 'CSS', 'TypeScript']; |
|
const mockLocations = ['San Francisco, CA', 'New York, NY', 'Seattle, WA', 'Austin, TX']; |
|
const mockUniversities = ['Stanford', 'MIT', 'Harvard', 'Berkeley']; |
|
|
|
|
|
document.getElementById('full-name').textContent = fullName; |
|
document.getElementById('headline').textContent = `${mockTitles[Math.floor(Math.random() * mockTitles.length)]} | ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} Expert`; |
|
document.getElementById('location').textContent = mockLocations[Math.floor(Math.random() * mockLocations.length)]; |
|
document.getElementById('profile-pic').src = `https://i.pravatar.cc/150?u=${handle}`; |
|
document.getElementById('about-content').innerHTML = ` |
|
<p>${fullName} is a ${Math.floor(Math.random() * 10) + 3}-year experienced professional in ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} development.</p> |
|
<p>Specializing in building scalable web applications and leading development teams to deliver high-quality software solutions.</p> |
|
`; |
|
|
|
|
|
const skillsContainer = document.getElementById('skills'); |
|
skillsContainer.innerHTML = ''; |
|
const numSkills = Math.floor(Math.random() * 5) + 3; |
|
const selectedSkills = new Set(); |
|
|
|
while (selectedSkills.size < numSkills) { |
|
const skill = mockSkills[Math.floor(Math.random() * mockSkills.length)]; |
|
selectedSkills.add(skill); |
|
} |
|
|
|
selectedSkills.forEach(skill => { |
|
const skillTag = document.createElement('span'); |
|
skillTag.className = 'skill-tag'; |
|
skillTag.textContent = skill; |
|
skillsContainer.appendChild(skillTag); |
|
}); |
|
|
|
|
|
const experienceList = document.getElementById('experience-list'); |
|
experienceList.innerHTML = ''; |
|
|
|
const numJobs = Math.floor(Math.random() * 3) + 1; |
|
for (let i = 0; i < numJobs; i++) { |
|
const company = mockCompanies[Math.floor(Math.random() * mockCompanies.length)]; |
|
const title = mockTitles[Math.floor(Math.random() * mockTitles.length)]; |
|
const startYear = 2020 - Math.floor(Math.random() * 5); |
|
const endYear = startYear + Math.floor(Math.random() * 3) + 1; |
|
|
|
const experienceItem = document.createElement('div'); |
|
experienceItem.className = 'experience-item'; |
|
experienceItem.innerHTML = ` |
|
<p class="job-title">${title}</p> |
|
<p class="company-name">${company}</p> |
|
<p class="date-range">${startYear} - ${i === numJobs - 1 ? 'Present' : endYear}</p> |
|
<p>Responsible for ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} development and ${['team leadership', 'product architecture', 'code reviews', 'mentoring'][Math.floor(Math.random() * 4)]}.</p> |
|
`; |
|
experienceList.appendChild(experienceItem); |
|
} |
|
|
|
|
|
const educationList = document.getElementById('education-list'); |
|
educationList.innerHTML = ''; |
|
|
|
const university = mockUniversities[Math.floor(Math.random() * mockUniversities.length)]; |
|
const degree = ['Bachelor', 'Master'][Math.floor(Math.random() * 2)]; |
|
const gradYear = 2010 + Math.floor(Math.random() * 5); |
|
|
|
const educationItem = document.createElement('div'); |
|
educationItem.className = 'education-item'; |
|
educationItem.innerHTML = ` |
|
<p class="degree">${degree} of Science in Computer Science</p> |
|
<p class="school-name">${university} University</p> |
|
<p class="date-range">${gradYear - 4} - ${gradYear}</p> |
|
`; |
|
educationList.appendChild(educationItem); |
|
|
|
|
|
|
|
} |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
</html> |
