|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>My Professional CV</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background-color: #f8fafc; |
|
} |
|
|
|
.timeline-item:not(:last-child)::after { |
|
content: ''; |
|
position: absolute; |
|
left: 16px; |
|
top: 32px; |
|
height: calc(100% - 32px); |
|
width: 2px; |
|
background-color: #e2e8f0; |
|
} |
|
|
|
.skill-bar { |
|
height: 8px; |
|
border-radius: 4px; |
|
background-color: #e2e8f0; |
|
} |
|
|
|
.skill-progress { |
|
height: 100%; |
|
border-radius: 4px; |
|
background-color: #3b82f6; |
|
transition: width 1s ease-in-out; |
|
} |
|
|
|
.dark-mode { |
|
background-color: #1e293b; |
|
color: #f8fafc; |
|
} |
|
|
|
.dark-mode .card { |
|
background-color: #334155; |
|
border-color: #475569; |
|
} |
|
|
|
.dark-mode .timeline-item:not(:last-child)::after { |
|
background-color: #475569; |
|
} |
|
|
|
.dark-mode .skill-bar { |
|
background-color: #475569; |
|
} |
|
|
|
.print-only { |
|
display: none; |
|
} |
|
|
|
@media print { |
|
.no-print { |
|
display: none; |
|
} |
|
.print-only { |
|
display: block; |
|
} |
|
body { |
|
background-color: white !important; |
|
color: black !important; |
|
font-size: 12pt; |
|
} |
|
.card { |
|
box-shadow: none !important; |
|
border: none !important; |
|
page-break-inside: avoid; |
|
} |
|
.container { |
|
max-width: 100% !important; |
|
padding: 0 !important; |
|
} |
|
.section { |
|
margin-bottom: 20px !important; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="text-gray-800 transition-colors duration-300"> |
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
<header class="flex justify-between items-center mb-8 no-print"> |
|
<h1 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">MY CV</h1> |
|
<button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> |
|
<i class="fas fa-moon dark:hidden"></i> |
|
<i class="fas fa-sun hidden dark:inline"></i> |
|
</button> |
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200 transition-all hover:shadow-lg"> |
|
<div class="flex flex-col items-center"> |
|
<div class="w-32 h-32 rounded-full overflow-hidden border-4 border-blue-100 mb-4"> |
|
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80" |
|
alt="Profile Picture" class="w-full h-full object-cover"> |
|
</div> |
|
<h2 class="text-2xl font-bold text-center">John Doe</h2> |
|
<p class="text-blue-600 font-medium">Senior Web Developer</p> |
|
|
|
<div class="flex space-x-4 mt-4"> |
|
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"> |
|
<i class="fab fa-linkedin text-xl"></i> |
|
</a> |
|
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"> |
|
<i class="fab fa-github text-xl"></i> |
|
</a> |
|
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"> |
|
<i class="fab fa-twitter text-xl"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 pt-6 border-t border-gray-200"> |
|
<div class="flex items-center mb-3"> |
|
<i class="fas fa-envelope text-blue-500 mr-3"></i> |
|
<span>[email protected]</span> |
|
</div> |
|
<div class="flex items-center mb-3"> |
|
<i class="fas fa-phone text-blue-500 mr-3"></i> |
|
<span>+1 (555) 123-4567</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-map-marker-alt text-blue-500 mr-3"></i> |
|
<span>San Francisco, CA</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-code text-blue-500 mr-2"></i> |
|
Technical Skills |
|
</h3> |
|
|
|
<div class="space-y-4"> |
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>JavaScript/TypeScript</span> |
|
<span>90%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 90%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>React.js</span> |
|
<span>85%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 85%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>Node.js</span> |
|
<span>80%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 80%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>HTML/CSS</span> |
|
<span>95%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 95%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>Python</span> |
|
<span>75%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 75%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-language text-blue-500 mr-2"></i> |
|
Languages |
|
</h3> |
|
|
|
<div class="space-y-3"> |
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>English</span> |
|
<span>Native</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 100%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>Spanish</span> |
|
<span>Professional</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 70%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-1"> |
|
<span>French</span> |
|
<span>Intermediate</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 50%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<button id="printButton" class="no-print w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors flex items-center justify-center"> |
|
<i class="fas fa-print mr-2"></i> |
|
Print CV |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-user text-blue-500 mr-2"></i> |
|
About Me |
|
</h3> |
|
<p class="text-gray-700"> |
|
Passionate web developer with 8+ years of experience building responsive, user-friendly web applications. |
|
Specialized in JavaScript frameworks with a strong focus on React.js and Node.js. |
|
Proven track record of delivering high-quality software solutions that drive business growth and improve user experience. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-briefcase text-blue-500 mr-2"></i> |
|
Work Experience |
|
</h3> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="timeline-item relative pl-8"> |
|
<div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div> |
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-1"> |
|
<h4 class="font-bold text-lg">Senior Frontend Developer</h4> |
|
<span class="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">2020 - Present</span> |
|
</div> |
|
<div class="text-blue-600 font-medium mb-2">TechSolutions Inc.</div> |
|
<p class="text-gray-700"> |
|
Lead a team of 5 developers to build a SaaS platform with React.js and Node.js. |
|
Improved application performance by 40% through code optimization and implementing lazy loading. |
|
Mentored junior developers and established coding standards. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="timeline-item relative pl-8"> |
|
<div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div> |
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-1"> |
|
<h4 class="font-bold text-lg">Web Developer</h4> |
|
<span class="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">2017 - 2020</span> |
|
</div> |
|
<div class="text-blue-600 font-medium mb-2">Digital Creations LLC</div> |
|
<p class="text-gray-700"> |
|
Developed and maintained 15+ client websites using WordPress and custom solutions. |
|
Implemented responsive designs that increased mobile traffic by 35%. |
|
Automated deployment processes reducing release time by 60%. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="timeline-item relative pl-8"> |
|
<div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div> |
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-1"> |
|
<h4 class="font-bold text-lg">Junior Developer</h4> |
|
<span class="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">2015 - 2017</span> |
|
</div> |
|
<div class="text-blue-600 font-medium mb-2">StartUp Ventures</div> |
|
<p class="text-gray-700"> |
|
Assisted in developing an e-commerce platform with AngularJS. |
|
Fixed 200+ bugs and implemented new features that increased conversion rate by 15%. |
|
Participated in agile development processes and code reviews. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-graduation-cap text-blue-500 mr-2"></i> |
|
Education |
|
</h3> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="timeline-item relative pl-8"> |
|
<div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div> |
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-1"> |
|
<h4 class="font-bold text-lg">MSc in Computer Science</h4> |
|
<span class="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">2013 - 2015</span> |
|
</div> |
|
<div class="text-blue-600 font-medium mb-2">Stanford University</div> |
|
<p class="text-gray-700"> |
|
Specialized in Artificial Intelligence and Web Technologies. |
|
Thesis on "Optimizing Web Applications Using Machine Learning" awarded distinction. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="timeline-item relative pl-8"> |
|
<div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div> |
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-1"> |
|
<h4 class="font-bold text-lg">BSc in Software Engineering</h4> |
|
<span class="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">2009 - 2013</span> |
|
</div> |
|
<div class="text-blue-600 font-medium mb-2">University of California</div> |
|
<p class="text-gray-700"> |
|
Graduated with honors. President of Computer Science Club. |
|
Developed campus event management system as capstone project. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-project-diagram text-blue-500 mr-2"></i> |
|
Notable Projects |
|
</h3> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
<h4 class="font-bold mb-2">E-commerce Platform</h4> |
|
<p class="text-sm text-gray-600 mb-2">React, Node.js, MongoDB</p> |
|
<p class="text-gray-700 text-sm"> |
|
Built a full-featured e-commerce platform with payment integration, product management, and analytics dashboard. |
|
</p> |
|
<a href="#" class="text-blue-500 text-sm mt-2 inline-block hover:underline">View Project →</a> |
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
<h4 class="font-bold mb-2">Task Management App</h4> |
|
<p class="text-sm text-gray-600 mb-2">Vue.js, Firebase</p> |
|
<p class="text-gray-700 text-sm"> |
|
Developed a collaborative task management application with real-time updates and team features. |
|
</p> |
|
<a href="#" class="text-blue-500 text-sm mt-2 inline-block hover:underline">View Project →</a> |
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
<h4 class="font-bold mb-2">Health Analytics Dashboard</h4> |
|
<p class="text-sm text-gray-600 mb-2">D3.js, Python, Flask</p> |
|
<p class="text-gray-700 text-sm"> |
|
Created interactive data visualizations for healthcare metrics with filtering and export capabilities. |
|
</p> |
|
<a href="#" class="text-blue-500 text-sm mt-2 inline-block hover:underline">View Project →</a> |
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
<h4 class="font-bold mb-2">Mobile Game</h4> |
|
<p class="text-sm text-gray-600 mb-2">Unity, C#</p> |
|
<p class="text-gray-700 text-sm"> |
|
Designed and developed a puzzle game with 50,000+ downloads on app stores. |
|
</p> |
|
<a href="#" class="text-blue-500 text-sm mt-2 inline-block hover:underline">View Project →</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card bg-white rounded-xl shadow-md p-6 border border-gray-200"> |
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
<i class="fas fa-certificate text-blue-500 mr-2"></i> |
|
Certifications |
|
</h3> |
|
|
|
<div class="space-y-4"> |
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-lg mr-4"> |
|
<i class="fas fa-award text-blue-500 text-xl"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">AWS Certified Developer</h4> |
|
<p class="text-gray-600 text-sm">Amazon Web Services - 2022</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-lg mr-4"> |
|
<i class="fas fa-award text-blue-500 text-xl"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Google Professional Data Engineer</h4> |
|
<p class="text-gray-600 text-sm">Google Cloud - 2021</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-lg mr-4"> |
|
<i class="fas fa-award text-blue-500 text-xl"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">React.js Certification</h4> |
|
<p class="text-gray-600 text-sm">Meta (Facebook) - 2020</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="print-only text-center mb-8"> |
|
<h1 class="text-3xl font-bold mb-2">John Doe</h1> |
|
<p class="text-xl text-blue-600 font-medium">Senior Web Developer</p> |
|
<div class="flex justify-center space-x-4 mt-2"> |
|
<span>[email protected]</span> |
|
<span>•</span> |
|
<span>+1 (555) 123-4567</span> |
|
<span>•</span> |
|
<span>San Francisco, CA</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
const html = document.documentElement; |
|
|
|
|
|
const savedTheme = localStorage.getItem('theme') || |
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); |
|
|
|
|
|
if (savedTheme === 'dark') { |
|
html.classList.add('dark-mode'); |
|
} |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
html.classList.toggle('dark-mode'); |
|
|
|
|
|
const currentTheme = html.classList.contains('dark-mode') ? 'dark' : 'light'; |
|
localStorage.setItem('theme', currentTheme); |
|
}); |
|
|
|
|
|
const printButton = document.getElementById('printButton'); |
|
printButton.addEventListener('click', () => { |
|
window.print(); |
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
const skillBars = document.querySelectorAll('.skill-progress'); |
|
skillBars.forEach(bar => { |
|
const width = bar.style.width; |
|
bar.style.width = '0'; |
|
setTimeout(() => { |
|
bar.style.width = width; |
|
}, 100); |
|
}); |
|
}); |
|
</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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=huathedev/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
