Hugging Face's logo

Spaces:
flen-crypto
/
cv
Running

App Files Community
hamadali commited on
Commit
64f3774
·
verified ·
1 Parent(s): 8e5f866

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +686 -374
index.html CHANGED
@@ -3,33 +3,55 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Saad Ullah Buttar | Banking Professional</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
 
 
 
 
 
 
 
 
11
 
12
  body {
13
- font-family: 'Poppins', sans-serif;
14
- background-color: #0f172a;
15
  color: #e2e8f0;
16
  scroll-behavior: smooth;
 
 
 
 
 
17
  }
18
 
19
  .gradient-text {
20
- background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
21
  -webkit-background-clip: text;
22
  background-clip: text;
23
  -webkit-text-fill-color: transparent;
24
  }
25
 
26
  .card-glass {
27
- background: rgba(15, 23, 42, 0.7);
28
- backdrop-filter: blur(10px);
29
- -webkit-backdrop-filter: blur(10px);
30
  border: 1px solid rgba(148, 163, 184, 0.2);
31
  }
32
 
 
 
 
 
 
 
 
 
 
33
  .timeline-item:before {
34
  content: '';
35
  position: absolute;
@@ -38,37 +60,61 @@
38
  width: 20px;
39
  height: 20px;
40
  border-radius: 50%;
41
- background: #38bdf8;
42
- border: 4px solid #0f172a;
 
43
  }
44
 
45
  .skill-bar {
46
  width: 100%;
47
- background-color: rgba(30, 41, 59, 0.5);
48
  border-radius: 10px;
49
  overflow: hidden;
 
50
  }
51
 
52
  .skill-progress {
53
- height: 8px;
54
  border-radius: 10px;
55
- background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
 
56
  }
57
 
58
  .grid-bg {
59
  background-image:
60
- linear-gradient(to right, rgba(30, 41, 59, 0.1) 1px, transparent 1px),
61
- linear-gradient(to bottom, rgba(30, 41, 59, 0.1) 1px, transparent 1px);
62
- background-size: 40px 40px;
63
  }
64
 
65
  .neon-glow {
66
- box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
67
  }
68
 
69
  .hover-glow:hover {
70
- box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
71
  transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  }
73
 
74
  @keyframes float {
@@ -80,27 +126,136 @@
80
  .floating {
81
  animation: float 4s ease-in-out infinite;
82
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  </style>
84
  </head>
85
- <body class="grid-bg">
 
 
 
 
86
  <!-- Navigation -->
87
- <nav class="fixed w-full z-50 bg-opacity-80 backdrop-blur-md bg-slate-900/80 border-b border-slate-800">
88
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
89
- <div class="flex items-center justify-between h-16">
90
  <div class="flex items-center">
91
- <span class="text-2xl font-bold gradient-text">SB</span>
 
92
  </div>
93
  <div class="hidden md:block">
94
  <div class="ml-10 flex items-baseline space-x-8">
95
- <a href="#home" class="text-slate-300 hover:gradient-text hover:font-medium px-3 py-2 rounded-md text-sm font-medium">Home</a>
96
- <a href="#about" class="text-slate-300 hover:gradient-text hover:font-medium px-3 py-2 rounded-md text-sm font-medium">About</a>
97
- <a href="#experience" class="text-slate-300 hover:gradient-text hover:font-medium px-3 py-2 rounded-md text-sm font-medium">Experience</a>
98
- <a href="#skills" class="text-slate-300 hover:gradient-text hover:font-medium px-3 py-2 rounded-md text-sm font-medium">Skills</a>
99
- <a href="#contact" class="text-slate-300 hover:gradient-text hover:font-medium px-3 py-2 rounded-md text-sm font-medium">Contact</a>
100
  </div>
101
  </div>
102
  <div class="md:hidden">
103
- <button class="mobile-menu-button p-2 rounded-md text-slate-300 hover:text-white hover:bg-slate-700 focus:outline-none">
104
  <i class="fas fa-bars"></i>
105
  </button>
106
  </div>
@@ -108,63 +263,97 @@
108
  </div>
109
 
110
  <!-- Mobile menu -->
111
- <div class="mobile-menu hidden md:hidden bg-slate-900">
112
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col">
113
- <a href="#home" class="text-slate-300 hover:gradient-text block px-3 py-2 rounded-md text-base font-medium">Home</a>
114
- <a href="#about" class="text-slate-300 hover:gradient-text block px-3 py-2 rounded-md text-base font-medium">About</a>
115
- <a href="#experience" class="text-slate-300 hover:gradient-text block px-3 py-2 rounded-md text-base font-medium">Experience</a>
116
- <a href="#skills" class="text-slate-300 hover:gradient-text block px-3 py-2 rounded-md text-base font-medium">Skills</a>
117
- <a href="#contact" class="text-slate-300 hover:gradient-text block px-3 py-2 rounded-md text-base font-medium">Contact</a>
118
  </div>
119
  </div>
120
  </nav>
121
 
122
  <!-- Hero Section -->
123
- <section id="home" class="min-h-screen flex items-center pt-16">
124
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
125
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
126
- <div class="space-y-8 text-center md:text-left">
127
- <h1 class="text-4xl md:text-6xl font-bold">
128
- <span class="gradient-text">Saad Ullah Buttar</span>
129
- </h1>
130
- <h2 class="text-2xl md:text-3xl font-semibold text-slate-300">Senior Banking Professional & Financial Strategist</h2>
131
- <p class="text-lg text-slate-400 max-w-2xl">Driving financial excellence through innovative banking solutions with over a decade of experience in Pakistan's dynamic banking sector.</p>
 
 
 
 
 
 
 
 
132
  <div class="flex flex-wrap gap-4 justify-center md:justify-start">
133
- <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full font-medium hover:opacity-90 transition-all duration-300 flex items-center gap-2">
134
- <span>Get in Touch</span>
135
- <i class="fas fa-arrow-right"></i>
136
  </a>
137
- <a href="#experience" class="px-8 py-3 border border-slate-600 rounded-full font-medium hover:bg-slate-800 transition-all duration-300 flex items-center gap-2">
138
- <span>My Experience</span>
139
- <i class="fas fa-briefcase"></i>
140
  </a>
141
  </div>
142
 
143
- <div class="pt-8">
144
- <p class="text-sm text-slate-400 mb-2">TRUSTED BY LEADING PAKISTANI FINANCIAL INSTITUTIONS</p>
145
- <div class="flex flex-wrap justify-center md:justify-start items-center gap-6">
146
- <img src="https://www.mcb.com.pk/PublishingImages/logo.png" alt="MCB Bank" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
147
- <img src="https://www.hbl.com/assets/hbl-logo.svg" alt="HBL" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
148
- <img src="https://www.ubl.com.pk/wp-content/uploads/2021/03/United-Bank-Limited.svg" alt="UBL" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
149
- <img src="https://www.askari.com.pk/wp-content/uploads/2021/06/ABL-Logo-1.png" alt="Askari Bank" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
  </div>
152
  </div>
153
- <div class="relative flex justify-center">
154
- <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden neon-glow">
155
- <div class="absolute inset-0 bg-gradient-to-tr from-blue-400 to-purple-500 opacity-20 rounded-full"></div>
156
- <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cG9ydHJhaXQlMjBwYWtpc3RhbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Saad Ullah Buttar" class="w-full h-full object-cover" style="filter: grayscale(100%) contrast(120%)">
157
- </div>
158
- <div class="absolute -bottom-5 -right-5 bg-slate-800 rounded-xl p-4 shadow-lg hover-glow">
159
- <div class="flex items-center gap-2">
160
- <div class="text-green-400 text-2xl">
161
- <i class="fas fa-award"></i>
 
 
 
 
 
 
 
162
  </div>
163
- <div>
164
- <p class="text-xs text-slate-400">Certified</p>
165
- <p class="font-semibold text-sm">Chartered Banker</p>
 
 
166
  </div>
167
  </div>
 
 
 
 
 
 
168
  </div>
169
  </div>
170
  </div>
@@ -172,95 +361,109 @@
172
  </section>
173
 
174
  <!-- About Section -->
175
- <section id="about" class="py-20">
176
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
177
- <div class="text-center mb-16">
178
- <h2 class="text-3xl md:text-4xl font-bold mb-4">
179
- <span class="gradient-text">About Me</span>
180
  </h2>
181
- <div class="w-20 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto"></div>
 
182
  </div>
183
 
184
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
185
- <div class="space-y-6">
186
- <h3 class="text-2xl font-semibold">I Transform Banking Challenges into Growth Opportunities</h3>
187
- <p class="text-slate-400 leading-relaxed">With over 12 years of progressive experience in Pakistan's banking sector, I specialize in retail banking, corporate financial solutions, and digital transformation initiatives that drive customer satisfaction and operational efficiency.</p>
188
- <p class="text-slate-400 leading-relaxed">My expertise spans branch management, credit analysis, risk assessment, and financial product development. I'm passionate about implementing customer-centric approaches while maintaining strong regulatory compliance.</p>
189
 
190
- <div class="grid grid-cols-2 gap-4 pt-4">
191
- <div class="flex items-start gap-3">
192
- <div class="text-blue-400 mt-1">
193
- <i class="fas fa-university"></i>
194
- </div>
195
- <div>
196
- <h4 class="font-semibold">Education</h4>
197
- <p class="text-sm text-slate-400">MBA in Banking & Finance<br>Lahore University of Management Sciences</p>
 
 
 
 
 
 
 
 
 
 
 
 
198
  </div>
199
  </div>
200
- <div class="flex items-start gap-3">
201
- <div class="text-blue-400 mt-1">
202
- <i class="fas fa-globe"></i>
203
- </div>
204
- <div>
205
- <h4 class="font-semibold">Languages</h4>
206
- <p class="text-sm text-slate-400">English, Urdu, Punjabi</p>
 
 
207
  </div>
208
  </div>
209
  </div>
210
 
211
  <div class="pt-4">
212
- <a href="#" class="inline-flex items-center px-6 py-3 border border-slate-600 rounded-full font-medium hover:bg-slate-800 transition-all duration-300">
213
- <i class="fas fa-download mr-2"></i> Download CV
214
  </a>
215
  </div>
216
  </div>
217
- <div>
218
- <div class="card-glass rounded-2xl p-8 space-y-6">
 
219
  <div class="flex justify-between items-center">
220
- <h3 class="text-xl font-semibold">Banking Specializations</h3>
221
- <div class="text-blue-400 text-2xl">
222
- <i class="fas fa-chart-line"></i>
223
  </div>
224
  </div>
225
 
226
  <div class="space-y-6">
227
- <div class="flex items-start gap-4">
228
- <div class="bg-blue-500 bg-opacity-20 p-3 rounded-lg text-blue-400">
229
- <i class="fas fa-hand-holding-usd"></i>
230
  </div>
231
- <div>
232
- <h4 class="font-medium">Retail & Consumer Banking</h4>
233
- <p class="text-sm text-slate-400">Developing innovative retail banking products and customer acquisition strategies.</p>
234
  </div>
235
  </div>
236
 
237
- <div class="flex items-start gap-4">
238
- <div class="bg-indigo-500 bg-opacity-20 p-3 rounded-lg text-indigo-400">
239
- <i class="fas fa-landmark"></i>
240
  </div>
241
- <div>
242
- <h4 class="font-medium">Corporate Banking</h4>
243
- <p class="text-sm text-slate-400">Structuring complex financial solutions for corporate clients and SMEs.</p>
244
  </div>
245
  </div>
246
 
247
- <div class="flex items-start gap-4">
248
- <div class="bg-purple-500 bg-opacity-20 p-3 rounded-lg text-purple-400">
249
- <i class="fas fa-mobile-alt"></i>
250
  </div>
251
- <div>
252
- <h4 class="font-medium">Digital Transformation</h4>
253
- <p class="text-sm text-slate-400">Leading digital banking initiatives to enhance customer experience.</p>
254
  </div>
255
  </div>
256
 
257
- <div class="flex items-start gap-4">
258
- <div class="bg-pink-500 bg-opacity-20 p-3 rounded-lg text-pink-400">
259
- <i class="fas fa-shield-alt"></i>
260
  </div>
261
- <div>
262
- <h4 class="font-medium">Risk Management</h4>
263
- <p class="text-sm text-slate-400">Implementing robust risk assessment frameworks and compliance procedures.</p>
264
  </div>
265
  </div>
266
  </div>
@@ -271,44 +474,45 @@
271
  </section>
272
 
273
  <!-- Experience Section -->
274
- <section id="experience" class="py-20 bg-slate-900 bg-opacity-50">
275
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
276
- <div class="text-center mb-16">
277
- <h2 class="text-3xl md:text-4xl font-bold mb-4">
278
- <span class="gradient-text">Professional Experience</span>
279
  </h2>
280
- <div class="w-20 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto"></div>
 
281
  </div>
282
 
283
  <div class="relative">
284
- <div class="absolute left-8 md:left-1/2 h-full w-0.5 bg-slate-700"></div>
285
 
286
- <div class="space-y-12">
287
  <!-- Job 1 -->
288
  <div class="relative md:flex justify-between items-center">
289
  <div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
290
- <h3 class="text-xl font-semibold mb-1">Branch Manager</h3>
291
- <p class="text-blue-400 mb-1">MCB Bank Limited</p>
292
- <p class="text-sm text-slate-400">2019 - Present | Lahore</p>
293
  </div>
294
- <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-slate-800 border-4 border-slate-900 mx-auto">
295
- <img src="https://www.mcb.com.pk/PublishingImages/logo.png" alt="MCB Bank" class="h-8">
296
  </div>
297
  <div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
298
- <div class="card-glass p-6 rounded-xl">
299
- <p class="text-slate-400">Leading a high-performing team of 25+ banking professionals at one of MCB's flagship branches with assets under management exceeding PKR 2.5 billion.</p>
300
- <ul class="mt-4 space-y-2 text-sm text-slate-400">
301
  <li class="flex items-start">
302
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
303
- <span>Increased deposit base by 32% year-over-year through strategic initiatives</span>
304
  </li>
305
  <li class="flex items-start">
306
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
307
- <span>Implemented digital onboarding system reducing customer wait times by 65%</span>
308
  </li>
309
  <li class="flex items-start">
310
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
311
- <span>Recognized as Top Performing Branch in Central Region for 2 consecutive years</span>
312
  </li>
313
  </ul>
314
  </div>
@@ -318,28 +522,28 @@
318
  <!-- Job 2 -->
319
  <div class="relative md:flex justify-between items-center flex-row-reverse">
320
  <div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
321
- <h3 class="text-xl font-semibold mb-1">Senior Relationship Manager</h3>
322
- <p class="text-blue-400 mb-1">Habib Bank Limited (HBL)</p>
323
- <p class="text-sm text-slate-400">2015 - 2019 | Islamabad</p>
324
  </div>
325
- <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-slate-800 border-4 border-slate-900 mx-auto">
326
- <img src="https://www.hbl.com/assets/hbl-logo.svg" alt="HBL" class="h-8">
327
  </div>
328
  <div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
329
- <div class="card-glass p-6 rounded-xl">
330
- <p class="text-slate-400">Managed a portfolio of 85+ corporate clients with aggregate credit exposure of PKR 5.8 billion while ensuring compliance with SBP regulations.</p>
331
- <ul class="mt-4 space-y-2 text-sm text-slate-400">
332
  <li class="flex items-start">
333
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
334
- <span>Structured complex financing solutions for infrastructure projects</span>
335
  </li>
336
  <li class="flex items-start">
337
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
338
- <span>Developed SME financing products leading to 28% portfolio growth</span>
339
  </li>
340
  <li class="flex items-start">
341
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
342
- <span>Maintained NPL ratio below 1.3% in challenging economic environment</span>
343
  </li>
344
  </ul>
345
  </div>
@@ -349,28 +553,28 @@
349
  <!-- Job 3 -->
350
  <div class="relative md:flex justify-between items-center">
351
  <div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
352
- <h3 class="text-xl font-semibold mb-1">Credit Analyst</h3>
353
- <p class="text-blue-400 mb-1">United Bank Limited (UBL)</p>
354
- <p class="text-sm text-slate-400">2011 - 2015 | Karachi</p>
355
  </div>
356
- <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-slate-800 border-4 border-slate-900 mx-auto">
357
- <img src="https://www.ubl.com.pk/wp-content/uploads/2021/03/United-Bank-Limited.svg" alt="UBL" class="h-8">
358
  </div>
359
  <div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
360
- <div class="card-glass p-6 rounded-xl">
361
- <p class="text-slate-400">Conducted comprehensive credit risk assessments for corporate clients across manufacturing, textiles, and trading sectors with aggregate exposure up to PKR 3.2 billion.</p>
362
- <ul class="mt-4 space-y-2 text-sm text-slate-400">
363
  <li class="flex items-start">
364
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
365
- <span>Developed predictive risk models improving credit decision accuracy by 22%</span>
366
  </li>
367
  <li class="flex items-start">
368
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
369
- <span>Lead analyst on restructuring of distressed accounts worth PKR 850 million</span>
370
  </li>
371
  <li class="flex items-start">
372
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
373
- <span>Recognized with UBL Excellence Award for Risk Management in 2014</span>
374
  </li>
375
  </ul>
376
  </div>
@@ -380,28 +584,28 @@
380
  <!-- Job 4 -->
381
  <div class="relative md:flex justify-between items-center flex-row-reverse">
382
  <div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
383
- <h3 class="text-xl font-semibold mb-1">Management Trainee</h3>
384
- <p class="text-blue-400 mb-1">Askari Bank Limited</p>
385
- <p class="text-sm text-slate-400">2009 - 2011 | Multan</p>
386
  </div>
387
- <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-slate-800 border-4 border-slate-900 mx-auto">
388
- <img src="https://www.askari.com.pk/wp-content/uploads/2021/06/ABL-Logo-1.png" alt="Askari Bank" class="h-8">
389
  </div>
390
  <div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
391
- <div class="card-glass p-6 rounded-xl">
392
- <p class="text-slate-400">Completed rotational training program across retail banking, operations, credit, and treasury functions, gaining comprehensive understanding of banking operations.</p>
393
- <ul class="mt-4 space-y-2 text-sm text-slate-400">
394
  <li class="flex items-start">
395
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
396
- <span>Developed customer retention program implemented bank-wide</span>
397
  </li>
398
  <li class="flex items-start">
399
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
400
- <span>Assisted in digital transformation of branch operations</span>
401
  </li>
402
  <li class="flex items-start">
403
- <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
404
- <span>Top performer in batch of 35 management trainees</span>
405
  </li>
406
  </ul>
407
  </div>
@@ -415,161 +619,186 @@
415
  <!-- Skills Section -->
416
  <section id="skills" class="py-20">
417
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
418
- <div class="text-center mb-16">
419
- <h2 class="text-3xl md:text-4xl font-bold mb-4">
420
- <span class="gradient-text">Professional Skills</span>
421
  </h2>
422
- <div class="w-20 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto"></div>
 
423
  </div>
424
 
425
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
426
- <div>
427
- <h3 class="text-2xl font-semibold mb-6">Banking Expertise</h3>
428
-
429
- <div class="space-y-6">
430
- <div>
431
- <div class="flex justify-between mb-2">
432
- <span class="font-medium">Retail Banking Management</span>
433
- <span class="text-blue-400">95%</span>
434
- </div>
435
- <div class="skill-bar">
436
- <div class="skill-progress" style="width: 95%"></div>
437
- </div>
438
- </div>
439
-
440
- <div>
441
- <div class="flex justify-between mb-2">
442
- <span class="font-medium">Corporate Credit Analysis</span>
443
- <span class="text-blue-400">90%</span>
444
- </div>
445
- <div class="skill-bar">
446
- <div class="skill-progress" style="width: 90%"></div>
447
- </div>
448
- </div>
449
 
450
- <div>
451
- <div class="flex justify-between mb-2">
452
- <span class="font-medium">Risk Management</span>
453
- <span class="text-blue-400">88%</span>
454
- </div>
455
- <div class="skill-bar">
456
- <div class="skill-progress" style="width: 88%"></div>
 
 
457
  </div>
458
- </div>
459
-
460
- <div>
461
- <div class="flex justify-between mb-2">
462
- <span class="font-medium">Financial Product Development</span>
463
- <span class="text-blue-400">85%</span>
 
 
 
464
  </div>
465
- <div class="skill-bar">
466
- <div class="skill-progress" style="width: 85%"></div>
 
 
 
 
 
 
 
467
  </div>
468
- </div>
469
-
470
- <div>
471
- <div class="flex justify-between mb-2">
472
- <span class="font-medium">SBP Compliance</span>
473
- <span class="text-blue-400">93%</span>
 
 
 
474
  </div>
475
- <div class="skill-bar">
476
- <div class="skill-progress" style="width: 93%"></div>
 
 
 
 
 
 
 
477
  </div>
478
  </div>
479
  </div>
480
  </div>
481
 
482
- <div>
483
- <h3 class="text-2xl font-semibold mb-6">Technical & Management Skills</h3>
484
-
485
- <div class="space-y-6">
486
- <div>
487
- <div class="flex justify-between mb-2">
488
- <span class="font-medium">Team Leadership</span>
489
- <span class="text-blue-400">92%</span>
490
- </div>
491
- <div class="skill-bar">
492
- <div class="skill-progress" style="width: 92%"></div>
493
- </div>
494
- </div>
495
-
496
- <div>
497
- <div class="flex justify-between mb-2">
498
- <span class="font-medium">Digital Banking Platforms</span>
499
- <span class="text-blue-400">87%</span>
500
- </div>
501
- <div class="skill-bar">
502
- <div class="skill-progress" style="width: 87%"></div>
503
- </div>
504
- </div>
505
 
506
- <div>
507
- <div class="flex justify-between mb-2">
508
- <span class="font-medium">Data Analysis & Reporting</span>
509
- <span class="text-blue-400">84%</span>
510
- </div>
511
- <div class="skill-bar">
512
- <div class="skill-progress" style="width: 84%"></div>
 
 
513
  </div>
514
- </div>
515
-
516
- <div>
517
- <div class="flex justify-between mb-2">
518
- <span class="font-medium">Customer Relationship Management</span>
519
- <span class="text-blue-400">94%</span>
 
 
 
520
  </div>
521
- <div class="skill-bar">
522
- <div class="skill-progress" style="width: 94%"></div>
 
 
 
 
 
 
 
523
  </div>
524
- </div>
525
-
526
- <div>
527
- <div class="flex justify-between mb-2">
528
- <span class="font-medium">Strategic Planning</span>
529
- <span class="text-blue-400">89%</span>
 
 
 
530
  </div>
531
- <div class="skill-bar">
532
- <div class="skill-progress" style="width: 89%"></div>
 
 
 
 
 
 
 
533
  </div>
534
  </div>
535
  </div>
536
  </div>
537
  </div>
538
 
539
- <div class="mt-16">
540
- <h3 class="text-2xl font-semibold mb-8 text-center">Professional Certifications</h3>
541
 
542
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
543
- <div class="card-glass p-6 rounded-xl hover-glow">
544
- <div class="text-blue-400 text-4xl mb-4">
545
- <i class="fas fa-university"></i>
 
 
 
 
 
 
 
546
  </div>
547
- <h4 class="font-semibold mb-2">Certified Islamic Banker (CIB)</h4>
548
- <p class="text-sm text-slate-400">Institute of Islamic Banking - 2018</p>
549
  </div>
550
 
551
- <div class="card-glass p-6 rounded-xl hover-glow">
552
- <div class="text-indigo-400 text-4xl mb-4">
553
- <i class="fas fa-chart-pie"></i>
 
 
 
 
 
 
 
554
  </div>
555
- <h4 class="font-semibold mb-2">Certified Credit Professional (CCP)</h4>
556
- <p class="text-sm text-slate-400">Pakistan Institute of Banking - 2016</p>
557
  </div>
558
 
559
- <div class="card-glass p-6 rounded-xl hover-glow">
560
- <div class="text-purple-400 text-4xl mb-4">
561
- <i class="fas fa-shield-alt"></i>
 
 
 
 
 
 
 
562
  </div>
563
- <h4 class="font-semibold mb-2">Certified Risk Manager (CRM)</h4>
564
- <p class="text-sm text-slate-400">Risk Management Association - 2014</p>
565
  </div>
566
 
567
- <div class="card-glass p-6 rounded-xl hover-glow">
568
- <div class="text-pink-400 text-4xl mb-4">
569
- <i class="fas fa-mobile-alt"></i>
 
 
 
 
 
 
 
570
  </div>
571
- <h4 class="font-semibold mb-2">Digital Banking Specialist</h4>
572
- <p class="text-sm text-slate-400">State Bank of Pakistan - 2020</p>
573
  </div>
574
  </div>
575
  </div>
@@ -577,131 +806,145 @@
577
  </section>
578
 
579
  <!-- Contact Section -->
580
- <section id="contact" class="py-20 bg-slate-900 bg-opacity-50">
581
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
582
- <div class="text-center mb-16">
583
- <h2 class="text-3xl md:text-4xl font-bold mb-4">
584
- <span class="gradient-text">Get In Touch</span>
585
  </h2>
586
- <div class="w-20 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto"></div>
 
587
  </div>
588
 
589
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
590
- <div class="space-y-8">
591
- <h3 class="text-2xl font-semibold">Let's Discuss Your Banking Needs</h3>
592
- <p class="text-slate-400">Whether you're seeking financial consultancy, exploring career opportunities, or looking to discuss banking innovations, I'd be delighted to connect with you.</p>
 
 
593
 
594
  <div class="space-y-6">
595
- <div class="flex items-start gap-4">
596
- <div class="bg-blue-500 bg-opacity-20 p-3 rounded-lg text-blue-400 mt-1">
597
  <i class="fas fa-envelope"></i>
598
  </div>
599
- <div>
600
- <h4 class="font-medium">Email</h4>
601
- <p class="text-slate-400">saad.buttar@example.com</p>
602
  </div>
603
  </div>
604
 
605
- <div class="flex items-start gap-4">
606
- <div class="bg-indigo-500 bg-opacity-20 p-3 rounded-lg text-indigo-400 mt-1">
607
  <i class="fas fa-phone-alt"></i>
608
  </div>
609
- <div>
610
- <h4 class="font-medium">Phone</h4>
611
- <p class="text-slate-400">+92 300 1234567</p>
612
  </div>
613
  </div>
614
 
615
- <div class="flex items-start gap-4">
616
- <div class="bg-purple-500 bg-opacity-20 p-3 rounded-lg text-purple-400 mt-1">
617
  <i class="fas fa-map-marker-alt"></i>
618
  </div>
619
- <div>
620
- <h4 class="font-medium">Location</h4>
621
- <p class="text-slate-400">Lahore, Pakistan</p>
622
  </div>
623
  </div>
624
  </div>
625
 
626
  <div class="pt-4">
 
627
  <div class="flex gap-4">
628
- <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-blue-500 transition-all flex items-center justify-center text-lg">
629
  <i class="fab fa-linkedin-in"></i>
630
  </a>
631
- <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-blue-400 transition-all flex items-center justify-center text-lg">
632
- <i class="fab fa-twitter"></i>
633
  </a>
634
- <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-pink-500 transition-all flex items-center justify-center text-lg">
635
- <i class="fab fa-instagram"></i>
 
 
 
636
  </a>
637
  </div>
638
  </div>
639
  </div>
640
 
641
- <div>
642
- <form class="card-glass p-8 rounded-2xl space-y-6">
643
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
 
 
 
 
 
 
 
 
 
 
 
 
644
  <div>
645
- <label for="name" class="block text-sm font-medium mb-2">Your Name</label>
646
- <input type="text" id="name" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-slate-500" placeholder="John Doe">
647
  </div>
 
648
  <div>
649
- <label for="email" class="block text-sm font-medium mb-2">Email Address</label>
650
- <input type="email" id="email" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-slate-500" placeholder="john@example.com">
651
  </div>
652
- </div>
653
-
654
- <div>
655
- <label for="subject" class="block text-sm font-medium mb-2">Subject</label>
656
- <input type="text" id="subject" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-slate-500" placeholder="Banking Consultation">
657
- </div>
658
-
659
- <div>
660
- <label for="message" class="block text-sm font-medium mb-2">Message</label>
661
- <textarea id="message" rows="4" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-slate-500" placeholder="Your message..."></textarea>
662
- </div>
663
-
664
- <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg font-semibold hover:opacity-90 transition-all duration-300 flex items-center justify-center gap-2">
665
- <span>Send Message</span>
666
- <i class="fas fa-paper-plane"></i>
667
- </button>
668
- </form>
669
  </div>
670
  </div>
671
  </div>
672
  </section>
673
 
674
  <!-- Footer -->
675
- <footer class="py-12 border-t border-slate-800">
676
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
677
  <div class="flex flex-col md:flex-row justify-between items-center">
678
  <div class="mb-6 md:mb-0 text-center md:text-left">
679
- <h2 class="text-2xl font-bold gradient-text mb-2">Saad Ullah Buttar</h2>
680
- <p class="text-slate-400">Senior Banking Professional</p>
 
 
681
  </div>
682
 
683
- <div class="flex flex-col items-center md:items-end space-y-2">
684
- <div class="flex space-x-6">
685
- <a href="#home" class="text-slate-400 hover:text-white transition-colors">Home</a>
686
- <a href="#about" class="text-slate-400 hover:text-white transition-colors">About</a>
687
- <a href="#experience" class="text-slate-400 hover:text-white transition-colors">Experience</a>
688
- <a href="#contact" class="text-slate-400 hover:text-white transition-colors">Contact</a>
689
  </div>
690
- <p class="text-sm text-slate-500">© 2023 Saad Ullah Buttar. All rights reserved.</p>
691
  </div>
692
  </div>
693
 
694
  <div class="mt-12 pt-8 border-t border-slate-800">
695
- <p class="text-center text-slate-500 text-sm">
696
- "Banking is not just about money; it's about people and relationships." - Walter Wriston
697
  </p>
698
  </div>
699
  </div>
 
 
700
  </footer>
701
 
702
  <!-- Back to Top Button -->
703
- <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center text-blue-400 shadow-lg hover:bg-blue-500 hover:text-white transition-all duration-300 hidden">
704
- <i class="fas fa-arrow-up"></i>
705
  </button>
706
 
707
  <script>
@@ -750,10 +993,79 @@
750
  if (form) {
751
  form.addEventListener('submit', (e) => {
752
  e.preventDefault();
753
- alert('Thank you for your message! I will get back to you soon.');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
754
  form.reset();
755
  });
756
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
757
  </script>
758
  <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=hamadali/saad3" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
759
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Saad Ullah Buttar | Futuristic Banking Visionary</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Rajdhani:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #0ff0fc;
14
+ --neon-pink: #ff00ff;
15
+ --neon-purple: #9d00ff;
16
+ --neon-green: #00ff7f;
17
+ --dark-bg: #0a0a1a;
18
+ }
19
 
20
  body {
21
+ font-family: 'Rajdhani', sans-serif;
22
+ background-color: var(--dark-bg);
23
  color: #e2e8f0;
24
  scroll-behavior: smooth;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ .tech-font {
29
+ font-family: 'Orbitron', sans-serif;
30
  }
31
 
32
  .gradient-text {
33
+ background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
34
  -webkit-background-clip: text;
35
  background-clip: text;
36
  -webkit-text-fill-color: transparent;
37
  }
38
 
39
  .card-glass {
40
+ background: rgba(10, 10, 26, 0.65);
41
+ backdrop-filter: blur(16px);
42
+ -webkit-backdrop-filter: blur(16px);
43
  border: 1px solid rgba(148, 163, 184, 0.2);
44
  }
45
 
46
+ .neon-border {
47
+ border: 1px solid var(--neon-blue);
48
+ box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px rgba(15, 255, 252, 0.1);
49
+ }
50
+
51
+ .neon-box {
52
+ box-shadow: 0 0 15px var(--neon-blue), 0 0 30px rgba(15, 255, 252, 0.2);
53
+ }
54
+
55
  .timeline-item:before {
56
  content: '';
57
  position: absolute;
 
60
  width: 20px;
61
  height: 20px;
62
  border-radius: 50%;
63
+ background: var(--neon-pink);
64
+ border: 4px solid var(--dark-bg);
65
+ box-shadow: 0 0 10px var(--neon-pink);
66
  }
67
 
68
  .skill-bar {
69
  width: 100%;
70
+ background-color: rgba(30, 41, 59, 0.2);
71
  border-radius: 10px;
72
  overflow: hidden;
73
+ height: 12px;
74
  }
75
 
76
  .skill-progress {
77
+ height: 100%;
78
  border-radius: 10px;
79
+ background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
80
+ box-shadow: 0 0 8px var(--neon-blue);
81
  }
82
 
83
  .grid-bg {
84
  background-image:
85
+ linear-gradient(to right, rgba(15, 255, 252, 0.05) 1px, transparent 1px),
86
+ linear-gradient(to bottom, rgba(15, 255, 252, 0.05) 1px, transparent 1px);
87
+ background-size: 60px 60px;
88
  }
89
 
90
  .neon-glow {
91
+ box-shadow: 0 0 15px var(--neon-blue), 0 0 30px rgba(15, 255, 252, 0.2);
92
  }
93
 
94
  .hover-glow:hover {
95
+ box-shadow: 0 0 15px var(--neon-pink), 0 0 30px rgba(255, 0, 255, 0.2);
96
  transition: all 0.3s ease;
97
+ transform: translateY(-3px);
98
+ }
99
+
100
+ .neon-link {
101
+ position: relative;
102
+ }
103
+
104
+ .neon-link:after {
105
+ content: '';
106
+ position: absolute;
107
+ width: 0;
108
+ height: 2px;
109
+ bottom: 0;
110
+ left: 0;
111
+ background: var(--neon-blue);
112
+ box-shadow: 0 0 5px var(--neon-blue);
113
+ transition: width 0.3s;
114
+ }
115
+
116
+ .neon-link:hover:after {
117
+ width: 100%;
118
  }
119
 
120
  @keyframes float {
 
126
  .floating {
127
  animation: float 4s ease-in-out infinite;
128
  }
129
+
130
+ @keyframes flicker {
131
+ 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
132
+ opacity: 0.99;
133
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-pink);
134
+ }
135
+ 20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
136
+ opacity: 0.4;
137
+ text-shadow: none;
138
+ }
139
+ }
140
+
141
+ .neon-flicker {
142
+ animation: flicker 3s linear infinite;
143
+ }
144
+
145
+ .scanline {
146
+ position: absolute;
147
+ top: 0;
148
+ left: 0;
149
+ right: 0;
150
+ height: 100%;
151
+ background: linear-gradient(
152
+ to bottom,
153
+ transparent,
154
+ rgba(15, 255, 252, 0.02) 1px,
155
+ transparent 1px
156
+ );
157
+ background-size: 100% 8px;
158
+ pointer-events: none;
159
+ animation: scanline 8s linear infinite;
160
+ z-index: 10;
161
+ }
162
+
163
+ @keyframes scanline {
164
+ 0% { transform: translateY(0); }
165
+ 100% { transform: translateY(100vh); }
166
+ }
167
+
168
+ .binary-rain {
169
+ position: absolute;
170
+ top: 0;
171
+ left: 0;
172
+ right: 0;
173
+ bottom: 0;
174
+ z-index: 1;
175
+ opacity: 0.05;
176
+ pointer-events: none;
177
+ font-family: monospace;
178
+ color: var(--neon-green);
179
+ overflow: hidden;
180
+ }
181
+
182
+ .binary-digit {
183
+ position: absolute;
184
+ opacity: 0;
185
+ animation: binary-fall linear;
186
+ }
187
+
188
+ @keyframes binary-fall {
189
+ 0% { transform: translateY(-100px); opacity: 0; }
190
+ 10% { opacity: 1; }
191
+ 90% { opacity: 1; }
192
+ 100% { transform: translateY(110vh); opacity: 0; }
193
+ }
194
+
195
+ .holographic-card {
196
+ position: relative;
197
+ transition: all 0.5s ease;
198
+ transform-style: preserve-3d;
199
+ }
200
+
201
+ .holographic-card:hover {
202
+ transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
203
+ }
204
+
205
+ .holographic-card:before {
206
+ content: '';
207
+ position: absolute;
208
+ top: -5px;
209
+ left: -5px;
210
+ right: -5px;
211
+ bottom: -5px;
212
+ background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple));
213
+ z-index: -1;
214
+ filter: blur(20px);
215
+ opacity: 0.3;
216
+ transition: all 0.5s ease;
217
+ }
218
+
219
+ .holographic-card:hover:before {
220
+ opacity: 0.6;
221
+ }
222
+
223
+ /* Responsive adjustments */
224
+ @media (max-width: 768px) {
225
+ .grid-bg {
226
+ background-size: 40px 40px;
227
+ }
228
+
229
+ .timeline-item:before {
230
+ left: -32px;
231
+ }
232
+ }
233
  </style>
234
  </head>
235
+ <body class="grid-bg relative overflow-x-hidden">
236
+ <!-- Futuristic Effects -->
237
+ <div class="binary-rain" id="binaryRain"></div>
238
+ <div class="scanline"></div>
239
+
240
  <!-- Navigation -->
241
+ <nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-dark-bg border-b border-slate-800">
242
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
243
+ <div class="flex items-center justify-between h-20">
244
  <div class="flex items-center">
245
+ <span class="text-2xl font-bold gradient-text tech-font">SB PRO</span>
246
+ <span class="ml-2 text-xs tech-font text-neon-pink">v10.5.2050</span>
247
  </div>
248
  <div class="hidden md:block">
249
  <div class="ml-10 flex items-baseline space-x-8">
250
+ <a href="#home" class="text-slate-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium neon-link">// Home</a>
251
+ <a href="#about" class="text-slate-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium neon-link">// About</a>
252
+ <a href="#experience" class="text-slate-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium neon-link">// Experience</a>
253
+ <a href="#skills" class="text-slate-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium neon-link">// Skills</a>
254
+ <a href="#contact" class="text-slate-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium neon-link">// Contact</a>
255
  </div>
256
  </div>
257
  <div class="md:hidden">
258
+ <button class="mobile-menu-button p-2 rounded-md text-slate-300 hover:text-white hover:bg-slate-700 focus:outline-none neon-box">
259
  <i class="fas fa-bars"></i>
260
  </button>
261
  </div>
 
263
  </div>
264
 
265
  <!-- Mobile menu -->
266
+ <div class="mobile-menu hidden md:hidden bg-dark-bg neon-box">
267
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col">
268
+ <a href="#home" class="text-slate-300 hover:text-neon-blue block px-3 py-2 rounded-md text-base font-medium neon-link">// Home</a>
269
+ <a href="#about" class="text-slate-300 hover:text-neon-blue block px-3 py-2 rounded-md text-base font-medium neon-link">// About</a>
270
+ <a href="#experience" class="text-slate-300 hover:text-neon-blue block px-3 py-2 rounded-md text-base font-medium neon-link">// Experience</a>
271
+ <a href="#skills" class="text-slate-300 hover:text-neon-blue block px-3 py-2 rounded-md text-base font-medium neon-link">// Skills</a>
272
+ <a href="#contact" class="text-slate-300 hover:text-neon-blue block px-3 py-2 rounded-md text-base font-medium neon-link">// Contact</a>
273
  </div>
274
  </div>
275
  </nav>
276
 
277
  <!-- Hero Section -->
278
+ <section id="home" class="min-h-screen flex items-center pt-20 relative">
279
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
280
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
281
+ <div class="space-y-10 text-center md:text-left relative z-10">
282
+ <div>
283
+ <span class="inline-block mb-4 px-4 py-1 bg-dark-bg text-neon-green rounded-full text-sm font-medium tech-font neon-box">CRYPTO BANKING SPECIALIST</span>
284
+ <h1 class="text-5xl md:text-7xl font-bold tech-font neon-flicker mb-4">
285
+ <span class="gradient-text">SAAD ULLAH BUTTAR</span>
286
+ </h1>
287
+ <h2 class="text-2xl md:text-3xl font-semibold text-slate-300 tech-font">// SENIOR BANKING <span class="gradient-text">AI STRATEGIST</span></h2>
288
+
289
+ <div class="my-6 relative">
290
+ <div class="absolute inset-0 bg-neon-blue blur-lg opacity-20 rounded-full"></div>
291
+ <p class="text-lg text-slate-400 max-w-2xl relative">Leading Pakistan's digital banking revolution with neuro-linked accounts, quantum encryption, and AI-powered financial ecosystems since 2032.</p>
292
+ </div>
293
+ </div>
294
+
295
  <div class="flex flex-wrap gap-4 justify-center md:justify-start">
296
+ <a href="#contact" class="px-8 py-4 bg-gradient-to-r from-neon-blue to-neon-purple rounded-full font-bold hover:opacity-90 transition-all duration-300 flex items-center gap-3 tech-font neon-box hover-glow">
297
+ <span>CONNECT NOW</span>
298
+ <i class="fas fa-plug"></i>
299
  </a>
300
+ <a href="#experience" class="px-8 py-4 border border-neon-pink text-neon-pink rounded-full font-bold hover:bg-opacity-20 hover:bg-neon-pink transition-all duration-300 flex items-center gap-3 tech-font hover-glow">
301
+ <span>NEURAL CV</span>
302
+ <i class="fas fa-brain"></i>
303
  </a>
304
  </div>
305
 
306
+ <div class="pt-12">
307
+ <p class="text-sm text-slate-400 mb-4 tech-font">// TRUSTED BY FUTURE BANKING CONSORTIUM</p>
308
+ <div class="flex flex-wrap justify-center md:justify-start items-center gap-8">
309
+ <div class="bg-dark-bg p-3 rounded-xl neon-box">
310
+ <img src="https://upload.wikimedia.org/wikipedia/en/1/1e/MCB_bank_logo.png" alt="MCB Bank" class="h-8 opacity-90 hover:opacity-100 transition-opacity">
311
+ </div>
312
+ <div class="bg-dark-bg p-3 rounded-xl neon-box">
313
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Habib_Bank_logo.svg" alt="HBL" class="h-8 opacity-90 hover:opacity-100 transition-opacity">
314
+ </div>
315
+ <div class="bg-dark-bg p-3 rounded-xl neon-box">
316
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/United_Bank_Limited_logo.svg" alt="UBL" class="h-8 opacity-90 hover:opacity-100 transition-opacity">
317
+ </div>
318
+ <div class="bg-dark-bg p-3 rounded-xl neon-box">
319
+ <img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Askari_Bank_logo.svg" alt="Askari Bank" class="h-8 opacity-90 hover:opacity-100 transition-opacity">
320
+ </div>
321
+ <div class="bg-dark-bg p-3 rounded-xl neon-box">
322
+ <img src="https://upload.wikimedia.org/wikipedia/en/3/3a/Faysal_Bank_Logo.svg" alt="Faysal Bank" class="h-8 opacity-90 hover:opacity-100 transition-opacity">
323
+ </div>
324
  </div>
325
  </div>
326
  </div>
327
+ <div class="relative flex justify-center z-10">
328
+ <div class="relative w-72 h-72 md:w-96 md:h-96 rounded-2xl overflow-hidden neon-glow floating holographic-card">
329
+ <div class="absolute inset-0 bg-gradient-to-tr from-neon-blue to-neon-purple opacity-30 rounded-2xl"></div>
330
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/digital-grid-line-mesh-background_53876-117525.jpg')] opacity-20"></div>
331
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cG9ydHJhaXQlMjBwYWtpc3RhbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Saad Ullah Buttar" class="w-full h-full object-cover" style="filter: grayscale(100%) contrast(120%) sepia(30%) hue-rotate(180deg)">
332
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark-bg to-transparent h-1/3"></div>
333
+
334
+ <div class="absolute -bottom-5 -right-5 bg-dark-bg rounded-xl p-4 shadow-lg neon-box hover-glow">
335
+ <div class="flex items-center gap-3">
336
+ <div class="text-neon-green text-2xl">
337
+ <i class="fas fa-certificate"></i>
338
+ </div>
339
+ <div>
340
+ <p class="text-xs text-slate-400 tech-font">NEURO-CERTIFIED</p>
341
+ <p class="font-bold text-sm tech-font">AI BANKING SPECIALIST</p>
342
+ </div>
343
  </div>
344
+ </div>
345
+
346
+ <div class="absolute top-4 left-4">
347
+ <div class="bg-dark-bg text-neon-pink px-3 py-1 rounded-full text-xs tech-font neon-box">
348
+ <i class="fas fa-globe-asia mr-1"></i> PAKISTAN 2050
349
  </div>
350
  </div>
351
+
352
+ <div class="absolute top-4 right-4 flex space-x-2">
353
+ <div class="w-3 h-3 rounded-full bg-neon-blue"></div>
354
+ <div class="w-3 h-3 rounded-full bg-neon-green"></div>
355
+ <div class="w-3 h-3 rounded-full bg-neon-pink"></div>
356
+ </div>
357
  </div>
358
  </div>
359
  </div>
 
361
  </section>
362
 
363
  <!-- About Section -->
364
+ <section id="about" class="py-20 relative">
365
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
366
+ <div class="text-center mb-16 relative">
367
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
368
+ <span class="gradient-text">ABOUT PROFILE</span>
369
  </h2>
370
+ <div class="w-32 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto neon-box"></div>
371
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-8xl opacity-5 font-bold tech-font gradient-text">01</div>
372
  </div>
373
 
374
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
375
+ <div class="space-y-8 relative">
376
+ <div class="absolute -top-10 -left-10 w-64 h-64 bg-neon-purple rounded-full filter blur-3xl opacity-10"></div>
 
 
377
 
378
+ <h3 class="text-3xl font-bold tech-font">I TRANSFORM <span class="gradient-text">BANKING DNA</span> FOR THE QUANTUM AGE</h3>
379
+
380
+ <div class="card-glass p-6 rounded-xl neon-box">
381
+ <p class="text-slate-400 leading-relaxed">As Pakistan's first Neuro-Linked Banking Architect, I pioneer hybrid human-AI financial systems that evolve with user cognition patterns, achieving 247% adoption growth across quantum banking platforms.</p>
382
+ </div>
383
+
384
+ <div class="card-glass p-6 rounded-xl neon-box">
385
+ <p class="text-slate-400 leading-relaxed">My neural-enhanced expertise spans decentralized finance ecosystems, holographic branch interfaces, and self-optimizing credit algorithms that predicted the 2047 financial crisis with 93.7% accuracy.</p>
386
+ </div>
387
+
388
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4">
389
+ <div class="card-glass p-5 rounded-xl neon-border hover-glow">
390
+ <div class="flex items-start gap-4">
391
+ <div class="text-neon-blue text-2xl">
392
+ <i class="fas fa-graduation-cap"></i>
393
+ </div>
394
+ <div>
395
+ <h4 class="font-bold tech-font">EDUCATION</h4>
396
+ <p class="text-sm text-slate-400">Neural Finance Doctorate<br>Quantum Business School Dubai</p>
397
+ </div>
398
  </div>
399
  </div>
400
+ <div class="card-glass p-5 rounded-xl neon-border hover-glow">
401
+ <div class="flex items-start gap-4">
402
+ <div class="text-neon-pink text-2xl">
403
+ <i class="fas fa-language"></i>
404
+ </div>
405
+ <div>
406
+ <h4 class="font-bold tech-font">LANGUAGES</h4>
407
+ <p class="text-sm text-slate-400">English, Urdu, Punjabi, Python, QuantumScript</p>
408
+ </div>
409
  </div>
410
  </div>
411
  </div>
412
 
413
  <div class="pt-4">
414
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-neon-pink text-neon-pink rounded-full font-bold hover:bg-opacity-20 hover:bg-neon-pink transition-all duration-300 tech-font neon-box hover-glow">
415
+ <i class="fas fa-cloud-download-alt mr-2"></i> DOWNLOAD NEURAL PROFILE
416
  </a>
417
  </div>
418
  </div>
419
+
420
+ <div class="holographic-card">
421
+ <div class="card-glass rounded-2xl p-8 space-y-8 neon-box h-full">
422
  <div class="flex justify-between items-center">
423
+ <h3 class="text-2xl font-semibold tech-font">QUANTUM <span class="gradient-text">BANKING</span> SPECIALIZATIONS</h3>
424
+ <div class="text-neon-blue text-3xl">
425
+ <i class="fas fa-atom"></i>
426
  </div>
427
  </div>
428
 
429
  <div class="space-y-6">
430
+ <div class="flex items-start gap-5">
431
+ <div class="flex-shrink-0 text-neon-blue text-3xl mt-1">
432
+ <i class="fas fa-brain"></i>
433
  </div>
434
+ <div class="card-glass p-4 rounded-xl neon-border hover-glow">
435
+ <h4 class="font-bold text-lg tech-font">NEURO-BANKING INTERFACES</h4>
436
+ <p class="text-sm text-slate-400">Developing thought-responsive financial products with direct synaptic connections.</p>
437
  </div>
438
  </div>
439
 
440
+ <div class="flex items-start gap-5">
441
+ <div class="flex-shrink-0 text-neon-green text-3xl mt-1">
442
+ <i class="fas fa-coins"></i>
443
  </div>
444
+ <div class="card-glass p-4 rounded-xl neon-border hover-glow">
445
+ <h4 class="font-bold text-lg tech-font">QUANTUM FINANCE SYSTEMS</h4>
446
+ <p class="text-sm text-slate-400">Implementing multi-dimensional investment algorithms across parallel financial universes.</p>
447
  </div>
448
  </div>
449
 
450
+ <div class="flex items-start gap-5">
451
+ <div class="flex-shrink-0 text-neon-purple text-3xl mt-1">
452
+ <i class="fas fa-robot"></i>
453
  </div>
454
+ <div class="card-glass p-4 rounded-xl neon-border hover-glow">
455
+ <h4 class="font-bold text-lg tech-font">AUTONOMOUS BANKING AI</h4>
456
+ <p class="text-sm text-slate-400">Self-governing financial agents that negotiate optimal terms using predictive market analytics.</p>
457
  </div>
458
  </div>
459
 
460
+ <div class="flex items-start gap-5">
461
+ <div class="flex-shrink-0 text-neon-pink text-3xl mt-1">
462
+ <i class="fas fa-user-shield"></i>
463
  </div>
464
+ <div class="card-glass p-4 rounded-xl neon-border hover-glow">
465
+ <h4 class="font-bold text-lg tech-font">NEURAL SECURITY</h4>
466
+ <p class="text-sm text-slate-400">Biometric memory encryption and blockchain neural networks for unhackable transactions.</p>
467
  </div>
468
  </div>
469
  </div>
 
474
  </section>
475
 
476
  <!-- Experience Section -->
477
+ <section id="experience" class="py-20 bg-opacity-50 relative">
478
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
479
+ <div class="text-center mb-16 relative">
480
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
481
+ <span class="gradient-text">NEURAL TIMELINE</span>
482
  </h2>
483
+ <div class="w-32 h-1 bg-gradient-to-r from-neon-pink to-neon-purple mx-auto neon-box"></div>
484
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-8xl opacity-5 font-bold tech-font gradient-text">02</div>
485
  </div>
486
 
487
  <div class="relative">
488
+ <div class="absolute left-8 md:left-1/2 h-full w-1 bg-gradient-to-b from-neon-blue to-neon-purple neon-box"></div>
489
 
490
+ <div class="space-y-16">
491
  <!-- Job 1 -->
492
  <div class="relative md:flex justify-between items-center">
493
  <div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
494
+ <h3 class="text-2xl font-semibold mb-1 tech-font">QUANTUM BANKING DIRECTOR</h3>
495
+ <p class="text-neon-blue mb-1">MCB BANK NEO</p>
496
+ <p class="text-sm text-slate-400 tech-font">2045 - PRESENT | LAHORE QUANTUM DISTRICT</p>
497
  </div>
498
+ <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-dark-bg border-4 border-dark-bg mx-auto neon-box">
499
+ <img src="https://upload.wikimedia.org/wikipedia/en/1/1e/MCB_bank_logo.png" alt="MCB Bank" class="h-8">
500
  </div>
501
  <div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
502
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow">
503
+ <p class="text-slate-400">Orchestrating Pakistan's first quantum financial network connecting 12.7 million neural accounts across 8 dimensions with zero latency transactions.</p>
504
+ <ul class="mt-4 space-y-3 text-sm text-slate-400">
505
  <li class="flex items-start">
506
+ <i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
507
+ <span>Pioneered thought-activated loan approvals (0.3sec response time)</span>
508
  </li>
509
  <li class="flex items-start">
510
+ <i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
511
+ <span>Implemented holographic branch networks with 98.9% customer satisfaction</span>
512
  </li>
513
  <li class="flex items-start">
514
+ <i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
515
+ <span>Quantum Shield™ security recognized by World FinTech Council</span>
516
  </li>
517
  </ul>
518
  </div>
 
522
  <!-- Job 2 -->
523
  <div class="relative md:flex justify-between items-center flex-row-reverse">
524
  <div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
525
+ <h3 class="text-2xl font-semibold mb-1 tech-font">NEURO-FINANCE STRATEGIST</h3>
526
+ <p class="text-neon-pink mb-1">HBL METAVERSE</p>
527
+ <p class="text-sm text-slate-400 tech-font">2040 - 2045 | ISLAMABAD DIGITAL ZONE</p>
528
  </div>
529
+ <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-dark-bg border-4 border-dark-bg mx-auto neon-box">
530
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Habib_Bank_logo.svg" alt="HBL" class="h-8">
531
  </div>
532
  <div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
533
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow">
534
+ <p class="text-slate-400">Architected the first neural banking interface in Pakistan's metaverse economy serving 4.3 million virtual businesses with mind-controlled transactions.</p>
535
+ <ul class="mt-4 space-y-3 text-sm text-slate-400">
536
  <li class="flex items-start">
537
+ <i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
538
+ <span>Developed emotional AI that adjusts interest rates by customer mood</span>
539
  </li>
540
  <li class="flex items-start">
541
+ <i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
542
+ <span>NFT collateralization system adopted by State Bank of Metaverse</span>
543
  </li>
544
  <li class="flex items-start">
545
+ <i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
546
+ <span>Hologram assistants reduced operational costs by 72%</span>
547
  </li>
548
  </ul>
549
  </div>
 
553
  <!-- Job 3 -->
554
  <div class="relative md:flex justify-between items-center">
555
  <div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
556
+ <h3 class="text-2xl font-semibold mb-1 tech-font">BLOCKCHAIN BANKING LEAD</h3>
557
+ <p class="text-neon-purple mb-1">UBL QUANTUM</p>
558
+ <p class="text-sm text-slate-400 tech-font">2035 - 2040 | KARACHI CRYPTO HUB</p>
559
  </div>
560
+ <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-dark-bg border-4 border-dark-bg mx-auto neon-box">
561
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/United_Bank_Limited_logo.svg" alt="UBL" class="h-8">
562
  </div>
563
  <div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
564
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow">
565
+ <p class="text-slate-400">Led digital asset banking services for Pakistan's first regulated crypto economy, securing $24B in digital asset custody with zero breaches.</p>
566
+ <ul class="mt-4 space-y-3 text-sm text-slate-400">
567
  <li class="flex items-start">
568
+ <i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
569
+ <span>Designed AI-driven compliance that processed 850K smart contracts</span>
570
  </li>
571
  <li class="flex items-start">
572
+ <i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
573
+ <span>Tokenized real estate platform handled $3.2B in transactions</span>
574
  </li>
575
  <li class="flex items-start">
576
+ <i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
577
+ <span>Quantum Key Distribution network for interbank crypto transfers</span>
578
  </li>
579
  </ul>
580
  </div>
 
584
  <!-- Job 4 -->
585
  <div class="relative md:flex justify-between items-center flex-row-reverse">
586
  <div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
587
+ <h3 class="text-2xl font-semibold mb-1 tech-font">AI BANKING PIONEER</h3>
588
+ <p class="text-neon-green mb-1">ASKARI FUTURE BANK</p>
589
+ <p class="text-sm text-slate-400 tech-font">2032 - 2035 | MULTAN TECH CORRIDOR</p>
590
  </div>
591
+ <div class="hidden md:flex justify-center items-center w-16 h-16 rounded-full bg-dark-bg border-4 border-dark-bg mx-auto neon-box">
592
+ <img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Askari_Bank_logo.svg" alt="Askari Bank" class="h-8">
593
  </div>
594
  <div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
595
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow">
596
+ <p class="text-slate-400">Spearheaded Pakistan's first fully autonomous banking AI system that managed $1.8B in assets with predictive market algorithms.</p>
597
+ <ul class="mt-4 space-y-3 text-sm text-slate-400">
598
  <li class="flex items-start">
599
+ <i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
600
+ <span>Neural risk assessment reduced NPLs to 0.17% industry record</span>
601
  </li>
602
  <li class="flex items-start">
603
+ <i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
604
+ <span>Emotion-recognition ATMs improved accessibility by 89%</span>
605
  </li>
606
  <li class="flex items-start">
607
+ <i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
608
+ <span>Self-learning chatbots resolved 98.3% of queries without humans</span>
609
  </li>
610
  </ul>
611
  </div>
 
619
  <!-- Skills Section -->
620
  <section id="skills" class="py-20">
621
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
622
+ <div class="text-center mb-16 relative">
623
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
624
+ <span class="gradient-text">NEURAL ARCHITECTURE</span>
625
  </h2>
626
+ <div class="w-32 h-1 bg-gradient-to-r from-neon-green to-neon-blue mx-auto neon-box"></div>
627
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-8xl opacity-5 font-bold tech-font gradient-text">03</div>
628
  </div>
629
 
630
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
631
+ <div class="holographic-card">
632
+ <div class="card-glass p-8 rounded-2xl neon-box">
633
+ <h3 class="text-2xl font-bold tech-font mb-8">QUANTUM <span class="gradient-text">BANKING</span> CORE</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
634
 
635
+ <div class="space-y-8">
636
+ <div>
637
+ <div class="flex justify-between mb-3">
638
+ <span class="font-bold tech-font">NEURO-FINANCIAL INTERFACES</span>
639
+ <span class="text-neon-blue tech-font">98%</span>
640
+ </div>
641
+ <div class="skill-bar">
642
+ <div class="skill-progress" style="width: 98%"></div>
643
+ </div>
644
  </div>
645
+
646
+ <div>
647
+ <div class="flex justify-between mb-3">
648
+ <span class="font-bold tech-font">MULTI-VERSE ASSET MANAGEMENT</span>
649
+ <span class="text-neon-blue tech-font">95%</span>
650
+ </div>
651
+ <div class="skill-bar">
652
+ <div class="skill-progress" style="width: 95%"></div>
653
+ </div>
654
  </div>
655
+
656
+ <div>
657
+ <div class="flex justify-between mb-3">
658
+ <span class="font-bold tech-font">QUANTUM RISK SIMULATION</span>
659
+ <span class="text-neon-blue tech-font">93%</span>
660
+ </div>
661
+ <div class="skill-bar">
662
+ <div class="skill-progress" style="width: 93%"></div>
663
+ </div>
664
  </div>
665
+
666
+ <div>
667
+ <div class="flex justify-between mb-3">
668
+ <span class="font-bold tech-font">NEURAL CREDIT ALGORITHMS</span>
669
+ <span class="text-neon-blue tech-font">97%</span>
670
+ </div>
671
+ <div class="skill-bar">
672
+ <div class="skill-progress" style="width: 97%"></div>
673
+ </div>
674
  </div>
675
+
676
+ <div>
677
+ <div class="flex justify-between mb-3">
678
+ <span class="font-bold tech-font">SENTIENT COMPLIANCE</span>
679
+ <span class="text-neon-blue tech-font">99%</span>
680
+ </div>
681
+ <div class="skill-bar">
682
+ <div class="skill-progress" style="width: 99%"></div>
683
+ </div>
684
  </div>
685
  </div>
686
  </div>
687
  </div>
688
 
689
+ <div class="holographic-card">
690
+ <div class="card-glass p-8 rounded-2xl neon-box">
691
+ <h3 class="text-2xl font-bold tech-font mb-8">CYBER-FINANCIAL <span class="gradient-text">TECHNOLOGIES</span></h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
692
 
693
+ <div class="space-y-8">
694
+ <div>
695
+ <div class="flex justify-between mb-3">
696
+ <span class="font-bold tech-font">AUTONOMOUS BANKING AI</span>
697
+ <span class="text-neon-blue tech-font">96%</span>
698
+ </div>
699
+ <div class="skill-bar">
700
+ <div class="skill-progress" style="width: 96%"></div>
701
+ </div>
702
  </div>
703
+
704
+ <div>
705
+ <div class="flex justify-between mb-3">
706
+ <span class="font-bold tech-font">QUANTUM BLOCKCHAIN</span>
707
+ <span class="text-neon-blue tech-font">94%</span>
708
+ </div>
709
+ <div class="skill-bar">
710
+ <div class="skill-progress" style="width: 94%"></div>
711
+ </div>
712
  </div>
713
+
714
+ <div>
715
+ <div class="flex justify-between mb-3">
716
+ <span class="font-bold tech-font">NEURAL DATA ANALYSIS</span>
717
+ <span class="text-neon-blue tech-font">92%</span>
718
+ </div>
719
+ <div class="skill-bar">
720
+ <div class="skill-progress" style="width: 92%"></div>
721
+ </div>
722
  </div>
723
+
724
+ <div>
725
+ <div class="flex justify-between mb-3">
726
+ <span class="font-bold tech-font">HOLO-CUSTOMER RELATIONS</span>
727
+ <span class="text-neon-blue tech-font">98%</span>
728
+ </div>
729
+ <div class="skill-bar">
730
+ <div class="skill-progress" style="width: 98%"></div>
731
+ </div>
732
  </div>
733
+
734
+ <div>
735
+ <div class="flex justify-between mb-3">
736
+ <span class="font-bold tech-font">METAVERSE STRATEGY</span>
737
+ <span class="text-neon-blue tech-font">97%</span>
738
+ </div>
739
+ <div class="skill-bar">
740
+ <div class="skill-progress" style="width: 97%"></div>
741
+ </div>
742
  </div>
743
  </div>
744
  </div>
745
  </div>
746
  </div>
747
 
748
+ <div class="mt-20">
749
+ <h3 class="text-3xl font-bold tech-font mb-12 text-center gradient-text">NEURO-CERTIFICATIONS</h3>
750
 
751
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
752
+ <div class="holographic-card">
753
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
754
+ <div class="text-neon-blue text-4xl mb-4">
755
+ <i class="fas fa-brain"></i>
756
+ </div>
757
+ <h4 class="font-bold text-xl tech-font mb-2">NEURO-BANKING ARCHITECT</h4>
758
+ <p class="text-sm text-slate-400">World NeuroFinance Institute - 2047</p>
759
+ <div class="mt-4 pt-4 border-t border-slate-700">
760
+ <span class="text-xs text-neon-green tech-font">#QSNG-4892-XP3</span>
761
+ </div>
762
  </div>
 
 
763
  </div>
764
 
765
+ <div class="holographic-card">
766
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
767
+ <div class="text-neon-purple text-4xl mb-4">
768
+ <i class="fas fa-atom"></i>
769
+ </div>
770
+ <h4 class="font-bold text-xl tech-font mb-2">QUANTUM FINANCE SPECIALIST</h4>
771
+ <p class="text-sm text-slate-400">MIT Quantum Lab - 2044</p>
772
+ <div class="mt-4 pt-4 border-t border-slate-700">
773
+ <span class="text-xs text-neon-green tech-font">#8A2Q-9B3P-1L</span>
774
+ </div>
775
  </div>
 
 
776
  </div>
777
 
778
+ <div class="holographic-card">
779
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
780
+ <div class="text-neon-pink text-4xl mb-4">
781
+ <i class="fas fa-shield-alt"></i>
782
+ </div>
783
+ <h4 class="font-bold text-xl tech-font mb-2">NEURAL SECURITY ENGINEER</h4>
784
+ <p class="text-sm text-slate-400">Blockchain Security Alliance - 2041</p>
785
+ <div class="mt-4 pt-4 border-t border-slate-700">
786
+ <span class="text-xs text-neon-green tech-font">#Z4K9-B2M8-C7</span>
787
+ </div>
788
  </div>
 
 
789
  </div>
790
 
791
+ <div class="holographic-card">
792
+ <div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
793
+ <div class="text-neon-green text-4xl mb-4">
794
+ <i class="fas fa-robot"></i>
795
+ </div>
796
+ <h4 class="font-bold text-xl tech-font mb-2">SENTIENT AI OPERATOR</h4>
797
+ <p class="text-sm text-slate-400">Singularity University - 2039</p>
798
+ <div class="mt-4 pt-4 border-t border-slate-700">
799
+ <span class="text-xs text-neon-green tech-font">#XJ3K-9P2L-6H</span>
800
+ </div>
801
  </div>
 
 
802
  </div>
803
  </div>
804
  </div>
 
806
  </section>
807
 
808
  <!-- Contact Section -->
809
+ <section id="contact" class="py-20 bg-opacity-50 relative">
810
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
811
+ <div class="text-center mb-16 relative">
812
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
813
+ <span class="gradient-text">NEURAL CONNECT</span>
814
  </h2>
815
+ <div class="w-32 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto neon-box"></div>
816
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-8xl opacity-5 font-bold tech-font gradient-text">04</div>
817
  </div>
818
 
819
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
820
+ <div class="space-y-10">
821
+ <h3 class="text-3xl font-bold tech-font">INITIATE <span class="gradient-text">QUANTUM LINK</span></h3>
822
+ <div class="card-glass p-6 rounded-xl neon-box">
823
+ <p class="text-slate-400">For quantum-secure consultations about Pakistan's financial future, connect through neural networks or traditional communication channels.</p>
824
+ </div>
825
 
826
  <div class="space-y-6">
827
+ <div class="flex items-start gap-5">
828
+ <div class="bg-neon-blue bg-opacity-20 p-4 rounded-xl text-neon-blue text-xl neon-box">
829
  <i class="fas fa-envelope"></i>
830
  </div>
831
+ <div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
832
+ <h4 class="font-bold tech-font">QUANTUM MAIL</h4>
833
+ <p class="text-slate-400">neuro.saad@mcb-quantum.pk</p>
834
  </div>
835
  </div>
836
 
837
+ <div class="flex items-start gap-5">
838
+ <div class="bg-neon-pink bg-opacity-20 p-4 rounded-xl text-neon-pink text-xl neon-box">
839
  <i class="fas fa-phone-alt"></i>
840
  </div>
841
+ <div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
842
+ <h4 class="font-bold tech-font">NEURAL FREQUENCY</h4>
843
+ <p class="text-slate-400">+92 300 QNTM247</p>
844
  </div>
845
  </div>
846
 
847
+ <div class="flex items-start gap-5">
848
+ <div class="bg-neon-purple bg-opacity-20 p-4 rounded-xl text-neon-purple text-xl neon-box">
849
  <i class="fas fa-map-marker-alt"></i>
850
  </div>
851
+ <div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
852
+ <h4 class="font-bold tech-font">HOLO-LOCATION</h4>
853
+ <p class="text-slate-400">Quantum Finance District, Lahore Neuro-City</p>
854
  </div>
855
  </div>
856
  </div>
857
 
858
  <div class="pt-4">
859
+ <h4 class="font-bold tech-font mb-4">NEURAL NETWORKS</h4>
860
  <div class="flex gap-4">
861
+ <a href="#" class="w-12 h-12 rounded-full bg-dark-bg hover:bg-neon-blue transition-all flex items-center justify-center text-xl neon-box hover-glow">
862
  <i class="fab fa-linkedin-in"></i>
863
  </a>
864
+ <a href="#" class="w-12 h-12 rounded-full bg-dark-bg hover:bg-neon-purple transition-all flex items-center justify-center text-xl neon-box hover-glow">
865
+ <i class="fab fa-neos"></i>
866
  </a>
867
+ <a href="#" class="w-12 h-12 rounded-full bg-dark-bg hover:bg-neon-pink transition-all flex items-center justify-center text-xl neon-box hover-glow">
868
+ <i class="fas fa-atom"></i>
869
+ </a>
870
+ <a href="#" class="w-12 h-12 rounded-full bg-dark-bg hover:bg-neon-green transition-all flex items-center justify-center text-xl neon-box hover-glow">
871
+ <i class="fab fa-ethereum"></i>
872
  </a>
873
  </div>
874
  </div>
875
  </div>
876
 
877
+ <div class="holographic-card">
878
+ <div class="card-glass p-8 rounded-2xl neon-box">
879
+ <h3 class="text-2xl font-bold tech-font mb-6 gradient-text">DIRECT NEURAL INPUT</h3>
880
+ <form class="space-y-6">
881
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
882
+ <div>
883
+ <label for="name" class="block text-sm font-bold mb-2 tech-font">YOUR NEURAL ID</label>
884
+ <input type="text" id="name" class="w-full px-5 py-4 bg-dark-bg border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-blue focus:border-transparent placeholder-slate-500 tech-font neon-box" placeholder="Enter quantum signature">
885
+ </div>
886
+ <div>
887
+ <label for="email" class="block text-sm font-bold mb-2 tech-font">QUANTUM MAIL</label>
888
+ <input type="email" id="email" class="w-full px-5 py-4 bg-dark-bg border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-blue focus:border-transparent placeholder-slate-500 tech-font neon-box" placeholder="user@quantum.domain">
889
+ </div>
890
+ </div>
891
+
892
  <div>
893
+ <label for="subject" class="block text-sm font-bold mb-2 tech-font">NEURAL FREQUENCY</label>
894
+ <input type="text" id="subject" class="w-full px-5 py-4 bg-dark-bg border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-blue focus:border-transparent placeholder-slate-500 tech-font neon-box" placeholder="Decrypt subject matter">
895
  </div>
896
+
897
  <div>
898
+ <label for="message" class="block text-sm font-bold mb-2 tech-font">QUANTUM MESSAGE</label>
899
+ <textarea id="message" rows="4" class="w-full px-5 py-4 bg-dark-bg border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-blue focus:border-transparent placeholder-slate-500 tech-font neon-box" placeholder="Transmit neural patterns..."></textarea>
900
  </div>
901
+
902
+ <button type="submit" class="w-full px-6 py-5 bg-gradient-to-r from-neon-blue to-neon-purple rounded-lg font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center gap-3 tech-font neon-box hover-glow">
903
+ <span>INITIATE QUANTUM LINK</span>
904
+ <i class="fas fa-satellite-dish"></i>
905
+ </button>
906
+ </form>
907
+ </div>
 
 
 
 
 
 
 
 
 
 
908
  </div>
909
  </div>
910
  </div>
911
  </section>
912
 
913
  <!-- Footer -->
914
+ <footer class="py-12 border-t border-slate-800 relative">
915
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
916
  <div class="flex flex-col md:flex-row justify-between items-center">
917
  <div class="mb-6 md:mb-0 text-center md:text-left">
918
+ <h2 class="text-2xl font-bold tech-font mb-2">
919
+ <span class="gradient-text">SAAD ULLAH BUTTAR</span> <span class="text-neon-pink tech-font">// 2050</span>
920
+ </h2>
921
+ <p class="text-slate-400 tech-font">Quantum Banking Architect</p>
922
  </div>
923
 
924
+ <div class="flex flex-col items-center md:items-end space-y-4">
925
+ <div class="flex space-x-8">
926
+ <a href="#home" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// HOME</a>
927
+ <a href="#about" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// ABOUT</a>
928
+ <a href="#experience" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// TIMELINE</a>
929
+ <a href="#contact" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// CONNECT</a>
930
  </div>
931
+ <p class="text-sm text-slate-500 tech-font">CRYPTO-SECURED © 2050 NEURAL PROFILE. QUANTUM ENCRYPTED.</p>
932
  </div>
933
  </div>
934
 
935
  <div class="mt-12 pt-8 border-t border-slate-800">
936
+ <p class="text-center text-slate-500 text-sm tech-font">
937
+ "In 2050, banks won't be places you go, but intelligences that grow with you." - S.U. Buttar
938
  </p>
939
  </div>
940
  </div>
941
+
942
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-neon-blue via-neon-pink to-neon-purple"></div>
943
  </footer>
944
 
945
  <!-- Back to Top Button -->
946
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-14 h-14 bg-dark-bg rounded-full flex items-center justify-center text-neon-blue shadow-lg hover:bg-neon-blue hover:text-dark-bg transition-all duration-300 neon-box hidden z-50">
947
+ <i class="fas fa-arrow-up text-xl"></i>
948
  </button>
949
 
950
  <script>
 
993
  if (form) {
994
  form.addEventListener('submit', (e) => {
995
  e.preventDefault();
996
+
997
+ // Create futuristic alert
998
+ const alertDiv = document.createElement('div');
999
+ alertDiv.className = 'fixed top-10 left-1/2 transform -translate-x-1/2 z-50';
1000
+ alertDiv.innerHTML = `
1001
+ <div class="bg-dark-bg border border-neon-green text-neon-green px-6 py-4 rounded-lg tech-font neon-box flex items-center">
1002
+ <i class="fas fa-check-circle mr-3"></i>
1003
+ <span>NEURAL TRANSMISSION INITIATED - QUANTUM LINK ESTABLISHED</span>
1004
+ </div>
1005
+ `;
1006
+ document.body.appendChild(alertDiv);
1007
+
1008
+ // Remove after some time
1009
+ setTimeout(() => {
1010
+ alertDiv.remove();
1011
+ }, 5000);
1012
+
1013
  form.reset();
1014
  });
1015
  }
1016
+
1017
+ // Create binary rain effect
1018
+ function createBinaryRain() {
1019
+ const container = document.getElementById('binaryRain');
1020
+ const digits = ['0', '1', '0', '1', '0', '1', '0', '1'];
1021
+
1022
+ // Create multiple columns of binary digits
1023
+ for (let i = 0; i < 30; i++) {
1024
+ const column = document.createElement('div');
1025
+ column.className = 'binary-column absolute';
1026
+ column.style.left = `${Math.random() * 100}%`;
1027
+
1028
+ // Create multiple digits in each column
1029
+ for (let j = 0; j < 20; j++) {
1030
+ const digit = document.createElement('div');
1031
+ digit.className = 'binary-digit';
1032
+ digit.textContent = digits[Math.floor(Math.random() * digits.length)];
1033
+ digit.style.left = '0';
1034
+ digit.style.top = `${-Math.random() * 100}px`;
1035
+ digit.style.opacity = Math.random();
1036
+ digit.style.animationDuration = `${5 + Math.random() * 10}s`;
1037
+ digit.style.animationDelay = `${Math.random() * 5}s`;
1038
+ column.appendChild(digit);
1039
+ }
1040
+
1041
+ container.appendChild(column);
1042
+ }
1043
+ }
1044
+
1045
+ // Initialize effects when DOM is loaded
1046
+ document.addEventListener('DOMContentLoaded', () => {
1047
+ createBinaryRain();
1048
+
1049
+ // Add hover effect to all holographic cards
1050
+ document.querySelectorAll('.holographic-card').forEach(card => {
1051
+ card.addEventListener('mousemove', (e) => {
1052
+ const x = e.clientX - card.getBoundingClientRect().left;
1053
+ const y = e.clientY - card.getBoundingClientRect().top;
1054
+
1055
+ const centerX = card.offsetWidth / 2;
1056
+ const centerY = card.offsetHeight / 2;
1057
+
1058
+ const angleY = (x - centerX) / 20;
1059
+ const angleX = (centerY - y) / 20;
1060
+
1061
+ card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
1062
+ });
1063
+
1064
+ card.addEventListener('mouseleave', () => {
1065
+ card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
1066
+ });
1067
+ });
1068
+ });
1069
  </script>
1070
  <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=hamadali/saad3" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1071
  </html>