| | <!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> |
