| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Yariv Bar-Lev - Head of Customer Success</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-900: #0f172a; |
| --primary-800: #1e293b; |
| --accent-500: #06b6d4; |
| } |
| |
| body { |
| overflow-x: hidden; |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| } |
| |
| .hero-bg { |
| background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.1) 0%, transparent 70%), |
| linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| } |
| |
| .glow { |
| box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); |
| } |
| |
| .text-gradient { |
| background: linear-gradient(135deg, #06b6d4, #8b5cf6); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2); |
| } |
| |
| .typing-effect { |
| border-right: 2px solid #06b6d4; |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 50% { border-color: #06b6d4; } |
| 51%, 100% { border-color: transparent; } |
| } |
| |
| .skill-bar { |
| width: 0%; |
| transition: width 1s ease-in-out; |
| } |
| |
| .parallax-bg { |
| transform: translateY(0px); |
| transition: transform 0.1s ease-out; |
| } |
| </style> |
| </head> |
| <body class="bg-slate-900 text-white"> |
| |
| <nav class="fixed top-0 w-full bg-slate-900/80 backdrop-blur-md z-50 border-b border-slate-700"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="text-xl font-bold text-cyan-400">Yariv Bar-Lev</div> |
| |
| |
| <div class="hidden md:hidden bg-slate-800" id="mobile-menu"> |
| <div class="px-2 pt-2 pb-3 space-y-1"> |
| <a href="#about" class="block px-3 py-2 hover:text-cyan-400">About</a> |
| <a href="#experience" class="block px-3 py-2 hover:text-cyan-400">Experience</a> |
| <a href="#skills" class="block px-3 py-2 hover:text-cyan-400">Skills</a> |
| <a href="#contact" class="block px-3 py-2 hover:text-cyan-400">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-bg min-h-screen relative overflow-hidden"> |
| <div class="parallax-bg absolute inset-0 opacity-10"> |
| <div class="absolute top-20 left-20 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div> |
| <div class="absolute bottom-20 right-20 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div> |
| </div> |
| |
| <div class="absolute top-20 left-4 sm:left-8 lg:left-12 z-10"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-gradient">Yariv Bar-Lev</span> |
| </h1> |
| <a href="/path-to-cv.pdf" download class="px-6 py-2 bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition-colors glow inline-block"> |
| Download CV |
| </a> |
| <p class="text-slate-300 mb-6 leading-relaxed hovered-element max-w-md mt-4"> |
| Strategic Customer Success leader proven in building and scaling global teams |
| to drive enterprise outcomes, retention, and revenue growth. Successfully delivered |
| $100M+ global projects and led transformation initiatives across 50+ countries. |
| </p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-slate-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-4xl font-bold text-center mb-12">Key Achievements</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="text-center p-6 bg-slate-700 rounded-lg card-hover"> |
| <div class="text-5xl font-bold text-cyan-400 mb-2">$100M+</div> |
| <h3 class="text-xl font-semibold mb-2">Global Projects Delivered</h3> |
| <p class="text-slate-300">Successfully managed and delivered large-scale enterprise projects across 50+ countries</p> |
| </div> |
| <div class="text-center p-6 bg-slate-700 rounded-lg card-hover"> |
| <div class="text-5xl font-bold text-cyan-400 mb-2">28+</div> |
| <h3 class="text-xl font-semibold mb-2">Years Experience</h3> |
| <p class="text-slate-300">Extensive experience in customer success, strategic leadership and team building</p> |
| </div> |
| <div class="text-center p-6 bg-slate-700 rounded-lg card-hover"> |
| <div class="text-5xl font-bold text-cyan-400 mb-2">Global</div> |
| <h3 class="text-xl font-semibold mb-2">Team Leadership</h3> |
| <p class="text-slate-300">Built and scaled high-performing customer success teams worldwide</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-slate-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-4xl font-bold mb-6">About Me</h2> |
| <p class="text-slate-300 mb-6 leading-relaxed"> |
| Strategic Customer Success leader proven in building and scaling global teams |
| to drive enterprise outcomes, retention, and revenue growth. Successfully delivered |
| $100M+ global projects and led transformation initiatives across 50+ countries. |
| </p> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="text-center p-4 bg-slate-700 rounded-lg"> |
| <div class="text-3xl font-bold text-cyan-400">28+</div> |
| <div class="text-slate-300">Years Experience</div> |
| </div> |
| <div class="text-center p-4 bg-slate-700 rounded-lg"> |
| <div class="text-3xl font-bold text-cyan-400">$100M+</div> |
| <div class="text-slate-300">Projects Delivered</div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="w-80 h-80 mx-auto bg-gradient-to-br from-cyan-500 to-purple-600 rounded-full opacity-20 absolute inset-0 blur-3xl"></div> |
| <img src="https://media.licdn.com/dms/image/v2/D4D03AQHfBGW_-vJKKw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1695648299812?e=1738800000&v=beta&t=J9V8Xz8zXzK3a6XfJ9V8Xz8zXzK3a6XfJ9V8Xz8zXzK3" |
| alt="Yariv Bar-Lev" |
| class="w-80 h-80 mx-auto rounded-full relative z-10 card-hover"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| |
| <section id="contact" class="py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-4xl font-bold text-center mb-12">Get In Touch</h2> |
| <div class="max-w-2xl mx-auto"> |
| <div class="text-center space-y-4"> |
| <div class="flex items-center justify-center space-x-2 text-slate-300"> |
| <i class="fas fa-phone text-cyan-400"></i> |
| <a href="tel:052-3964247" class="hover:text-cyan-400">052-3964247</a> |
| </div> |
| <div class="flex items-center justify-center space-x-2 text-slate-300"> |
| <i class="fas fa-envelope text-cyan-400"></i> |
| <a href="mailto:yariv.barlev@gmail.com" class="hover:text-cyan-400">yariv.barlev@gmail.com</a> |
| </div> |
| <div class="flex items-center justify-center space-x-2 text-slate-300"> |
| <i class="fab fa-linkedin text-cyan-400"></i> |
| <a href="https://www.linkedin.com/in/yariv-barlev/" target="_blank" class="hover:text-cyan-400">LinkedIn Profile</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-slate-900 border-t border-slate-700 py-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="flex justify-center space-x-6 mb-4"> |
| <a href="https://www.linkedin.com/in/yariv-barlev/" target="_blank" class="text-slate-400 hover:text-cyan-400 transition-colors"> |
| <i class="fab fa-linkedin text-2xl"></i> |
| </a> |
| <a href="mailto:yariv.barlev@gmail.com" class="text-slate-400 hover:text-cyan-400 transition-colors"> |
| <i class="fas fa-envelope text-2xl"></i> |
| </a> |
| <a href="tel:052-3964247" class="text-slate-400 hover:text-cyan-400 transition-colors"> |
| <i class="fas fa-phone text-2xl"></i> |
| </a> |
| </div> |
| <p class="text-slate-400">© 2024 Yariv Bar-Lev. All rights reserved.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-btn').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const texts = ['Head of Customer Success', 'Strategic Leader', 'Global Team Builder']; |
| let textIndex = 0; |
| let charIndex = 0; |
| let isDeleting = false; |
| const typewriterElement = document.getElementById('typewriter'); |
| |
| function typeWriter() { |
| const currentText = texts[textIndex]; |
| |
| if (isDeleting) { |
| typewriterElement.textContent = currentText.substring(0, charIndex - 1); |
| charIndex--; |
| } else { |
| typewriterElement.textContent = currentText.substring(0, charIndex + 1); |
| charIndex++; |
| } |
| |
| if (!isDeleting && charIndex === currentText.length) { |
| setTimeout(() => isDeleting = true, 2000); |
| } else if (isDeleting && charIndex === 0) { |
| isDeleting = false; |
| textIndex = (textIndex + 1) % texts.length; |
| } |
| |
| setTimeout(typeWriter, isDeleting ? 100 : 200); |
| } |
| |
| |
| const observerOptions = { |
| threshold: 0.5, |
| rootMargin: '0px 0px -100px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const skillBars = entry.target.querySelectorAll('.skill-bar'); |
| skillBars.forEach(bar => { |
| const width = bar.getAttribute('data-width'); |
| bar.style.width = width + '%'; |
| }); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelector('#skills').addEventListener('DOMContentLoaded', () => { |
| observer.observe(document.querySelector('#skills')); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const scrolled = window.pageYOffset; |
| const parallax = document.querySelector('.parallax-bg'); |
| if (parallax) { |
| parallax.style.transform = `translateY(${scrolled * 0.5}px)`; |
| } |
| }); |
| |
| |
| gsap.from('h1', { duration: 1, y: 50, opacity: 0, ease: 'power3.out' }); |
| gsap.from('p', { duration: 1, y: 30, opacity: 0, ease: 'power3.out', delay: 0.2 }); |
| gsap.from('button', { duration: 1, y: 30, opacity: 0, ease: 'power3.out', delay: 0.4 }); |
| |
| |
| typeWriter(); |
| </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=barlev/start-ybl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
