barlev commited on
Commit
4b56e9c
·
verified ·
1 Parent(s): 8d1f08a

put every thing in the page here - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +292 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Start Ybl
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: start-ybl
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,292 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Yariv Bar-Lev - Head of Customer Success</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary-900: #0f172a;
13
+ --primary-800: #1e293b;
14
+ --accent-500: #06b6d4;
15
+ }
16
+
17
+ body {
18
+ overflow-x: hidden;
19
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
20
+ }
21
+
22
+ .hero-bg {
23
+ background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.1) 0%, transparent 70%),
24
+ linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
25
+ }
26
+
27
+ .glow {
28
+ box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
29
+ }
30
+
31
+ .text-gradient {
32
+ background: linear-gradient(135deg, #06b6d4, #8b5cf6);
33
+ -webkit-background-clip: text;
34
+ -webkit-text-fill-color: transparent;
35
+ background-clip: text;
36
+ }
37
+
38
+ .card-hover {
39
+ transition: all 0.3s ease;
40
+ }
41
+
42
+ .card-hover:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
45
+ }
46
+
47
+ .typing-effect {
48
+ border-right: 2px solid #06b6d4;
49
+ animation: blink 1s infinite;
50
+ }
51
+
52
+ @keyframes blink {
53
+ 0%, 50% { border-color: #06b6d4; }
54
+ 51%, 100% { border-color: transparent; }
55
+ }
56
+
57
+ .skill-bar {
58
+ width: 0%;
59
+ transition: width 1s ease-in-out;
60
+ }
61
+
62
+ .parallax-bg {
63
+ transform: translateY(0px);
64
+ transition: transform 0.1s ease-out;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body class="bg-slate-900 text-white">
69
+ <!-- Navigation -->
70
+ <nav class="fixed top-0 w-full bg-slate-900/80 backdrop-blur-md z-50 border-b border-slate-700">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="flex justify-between items-center h-16">
73
+ <div class="text-xl font-bold text-cyan-400">Yariv Bar-Lev</div>
74
+
75
+ <!-- Mobile Menu -->
76
+ <div class="hidden md:hidden bg-slate-800" id="mobile-menu">
77
+ <div class="px-2 pt-2 pb-3 space-y-1">
78
+ <a href="#about" class="block px-3 py-2 hover:text-cyan-400">About</a>
79
+ <a href="#experience" class="block px-3 py-2 hover:text-cyan-400">Experience</a>
80
+ <a href="#skills" class="block px-3 py-2 hover:text-cyan-400">Skills</a>
81
+ <a href="#contact" class="block px-3 py-2 hover:text-cyan-400">Contact</a>
82
+ </div>
83
+ </div>
84
+ </nav>
85
+
86
+ <!-- Hero Section -->
87
+ <section class="hero-bg min-h-screen relative overflow-hidden">
88
+ <div class="parallax-bg absolute inset-0 opacity-10">
89
+ <div class="absolute top-20 left-20 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div>
90
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div>
91
+ </div>
92
+
93
+ <div class="absolute top-20 left-4 sm:left-8 lg:left-12 z-10">
94
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">
95
+ <span class="text-gradient">Yariv Bar-Lev</span>
96
+ </h1>
97
+ <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">
98
+ Download CV
99
+ </a>
100
+ <p class="text-slate-300 mb-6 leading-relaxed hovered-element max-w-md mt-4">
101
+ Strategic Customer Success leader proven in building and scaling global teams
102
+ to drive enterprise outcomes, retention, and revenue growth. Successfully delivered
103
+ $100M+ global projects and led transformation initiatives across 50+ countries.
104
+ </p>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Key Achievements -->
109
+ <section class="py-20 bg-slate-800">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <h2 class="text-4xl font-bold text-center mb-12">Key Achievements</h2>
112
+ <div class="grid md:grid-cols-3 gap-8">
113
+ <div class="text-center p-6 bg-slate-700 rounded-lg card-hover">
114
+ <div class="text-5xl font-bold text-cyan-400 mb-2">$100M+</div>
115
+ <h3 class="text-xl font-semibold mb-2">Global Projects Delivered</h3>
116
+ <p class="text-slate-300">Successfully managed and delivered large-scale enterprise projects across 50+ countries</p>
117
+ </div>
118
+ <div class="text-center p-6 bg-slate-700 rounded-lg card-hover">
119
+ <div class="text-5xl font-bold text-cyan-400 mb-2">28+</div>
120
+ <h3 class="text-xl font-semibold mb-2">Years Experience</h3>
121
+ <p class="text-slate-300">Extensive experience in customer success, strategic leadership and team building</p>
122
+ </div>
123
+ <div class="text-center p-6 bg-slate-700 rounded-lg card-hover">
124
+ <div class="text-5xl font-bold text-cyan-400 mb-2">Global</div>
125
+ <h3 class="text-xl font-semibold mb-2">Team Leadership</h3>
126
+ <p class="text-slate-300">Built and scaled high-performing customer success teams worldwide</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- About Section -->
133
+ <section id="about" class="py-20 bg-slate-900">
134
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
135
+ <div class="grid md:grid-cols-2 gap-12 items-center">
136
+ <div>
137
+ <h2 class="text-4xl font-bold mb-6">About Me</h2>
138
+ <p class="text-slate-300 mb-6 leading-relaxed">
139
+ Strategic Customer Success leader proven in building and scaling global teams
140
+ to drive enterprise outcomes, retention, and revenue growth. Successfully delivered
141
+ $100M+ global projects and led transformation initiatives across 50+ countries.
142
+ </p>
143
+ <div class="grid grid-cols-2 gap-4">
144
+ <div class="text-center p-4 bg-slate-700 rounded-lg">
145
+ <div class="text-3xl font-bold text-cyan-400">28+</div>
146
+ <div class="text-slate-300">Years Experience</div>
147
+ </div>
148
+ <div class="text-center p-4 bg-slate-700 rounded-lg">
149
+ <div class="text-3xl font-bold text-cyan-400">$100M+</div>
150
+ <div class="text-slate-300">Projects Delivered</div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="relative">
155
+ <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>
156
+ <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"
157
+ alt="Yariv Bar-Lev"
158
+ class="w-80 h-80 mx-auto rounded-full relative z-10 card-hover">
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+
165
+ <!-- Contact Section -->
166
+ <section id="contact" class="py-20">
167
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
168
+ <h2 class="text-4xl font-bold text-center mb-12">Get In Touch</h2>
169
+ <div class="max-w-2xl mx-auto">
170
+ <div class="text-center space-y-4">
171
+ <div class="flex items-center justify-center space-x-2 text-slate-300">
172
+ <i class="fas fa-phone text-cyan-400"></i>
173
+ <a href="tel:052-3964247" class="hover:text-cyan-400">052-3964247</a>
174
+ </div>
175
+ <div class="flex items-center justify-center space-x-2 text-slate-300">
176
+ <i class="fas fa-envelope text-cyan-400"></i>
177
+ <a href="mailto:yariv.barlev@gmail.com" class="hover:text-cyan-400">yariv.barlev@gmail.com</a>
178
+ </div>
179
+ <div class="flex items-center justify-center space-x-2 text-slate-300">
180
+ <i class="fab fa-linkedin text-cyan-400"></i>
181
+ <a href="https://www.linkedin.com/in/yariv-barlev/" target="_blank" class="hover:text-cyan-400">LinkedIn Profile</a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Footer -->
189
+ <footer class="bg-slate-900 border-t border-slate-700 py-8">
190
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
191
+ <div class="flex justify-center space-x-6 mb-4">
192
+ <a href="https://www.linkedin.com/in/yariv-barlev/" target="_blank" class="text-slate-400 hover:text-cyan-400 transition-colors">
193
+ <i class="fab fa-linkedin text-2xl"></i>
194
+ </a>
195
+ <a href="mailto:yariv.barlev@gmail.com" class="text-slate-400 hover:text-cyan-400 transition-colors">
196
+ <i class="fas fa-envelope text-2xl"></i>
197
+ </a>
198
+ <a href="tel:052-3964247" class="text-slate-400 hover:text-cyan-400 transition-colors">
199
+ <i class="fas fa-phone text-2xl"></i>
200
+ </a>
201
+ </div>
202
+ <p class="text-slate-400">&copy; 2024 Yariv Bar-Lev. All rights reserved.</p>
203
+ </div>
204
+ </footer>
205
+
206
+ <script>
207
+ // Mobile menu toggle
208
+ document.getElementById('mobile-menu-btn').addEventListener('click', function() {
209
+ const menu = document.getElementById('mobile-menu');
210
+ menu.classList.toggle('hidden');
211
+ });
212
+
213
+ // Typewriter effect
214
+ const texts = ['Head of Customer Success', 'Strategic Leader', 'Global Team Builder'];
215
+ let textIndex = 0;
216
+ let charIndex = 0;
217
+ let isDeleting = false;
218
+ const typewriterElement = document.getElementById('typewriter');
219
+
220
+ function typeWriter() {
221
+ const currentText = texts[textIndex];
222
+
223
+ if (isDeleting) {
224
+ typewriterElement.textContent = currentText.substring(0, charIndex - 1);
225
+ charIndex--;
226
+ } else {
227
+ typewriterElement.textContent = currentText.substring(0, charIndex + 1);
228
+ charIndex++;
229
+ }
230
+
231
+ if (!isDeleting && charIndex === currentText.length) {
232
+ setTimeout(() => isDeleting = true, 2000);
233
+ } else if (isDeleting && charIndex === 0) {
234
+ isDeleting = false;
235
+ textIndex = (textIndex + 1) % texts.length;
236
+ }
237
+
238
+ setTimeout(typeWriter, isDeleting ? 100 : 200);
239
+ }
240
+
241
+ // Animate skill bars on scroll
242
+ const observerOptions = {
243
+ threshold: 0.5,
244
+ rootMargin: '0px 0px -100px 0px'
245
+ };
246
+
247
+ const observer = new IntersectionObserver((entries) => {
248
+ entries.forEach(entry => {
249
+ if (entry.isIntersecting) {
250
+ const skillBars = entry.target.querySelectorAll('.skill-bar');
251
+ skillBars.forEach(bar => {
252
+ const width = bar.getAttribute('data-width');
253
+ bar.style.width = width + '%';
254
+ });
255
+ }
256
+ });
257
+ }, observerOptions);
258
+
259
+ document.querySelector('#skills').addEventListener('DOMContentLoaded', () => {
260
+ observer.observe(document.querySelector('#skills'));
261
+ });
262
+
263
+ // Smooth scrolling
264
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
265
+ anchor.addEventListener('click', function (e) {
266
+ e.preventDefault();
267
+ const target = document.querySelector(this.getAttribute('href'));
268
+ if (target) {
269
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
270
+ }
271
+ });
272
+ });
273
+
274
+ // Parallax effect
275
+ window.addEventListener('scroll', () => {
276
+ const scrolled = window.pageYOffset;
277
+ const parallax = document.querySelector('.parallax-bg');
278
+ if (parallax) {
279
+ parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
280
+ }
281
+ });
282
+
283
+ // GSAP animations
284
+ gsap.from('h1', { duration: 1, y: 50, opacity: 0, ease: 'power3.out' });
285
+ gsap.from('p', { duration: 1, y: 30, opacity: 0, ease: 'power3.out', delay: 0.2 });
286
+ gsap.from('button', { duration: 1, y: 30, opacity: 0, ease: 'power3.out', delay: 0.4 });
287
+
288
+ // Start typewriter
289
+ typeWriter();
290
+ </script>
291
+ <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>
292
+ </html>