| <!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>john.doe@example.com</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>john.doe@example.com</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> |
