Hugging Face's logo

Spaces:
flen-crypto
/
cv
Running

App Files Community
cv / index.html
hamadali's picture
hamadali
Add 1 files
64f3774 verified
raw
history blame contribute delete
61.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saad Ullah Buttar | Futuristic Banking Visionary</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Rajdhani:wght@300;400;500;600;700&display=swap');
:root {
--neon-blue: #0ff0fc;
--neon-pink: #ff00ff;
--neon-purple: #9d00ff;
--neon-green: #00ff7f;
--dark-bg: #0a0a1a;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: var(--dark-bg);
color: #e2e8f0;
scroll-behavior: smooth;
overflow-x: hidden;
}
.tech-font {
font-family: 'Orbitron', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-glass {
background: rgba(10, 10, 26, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.neon-border {
border: 1px solid var(--neon-blue);
box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px rgba(15, 255, 252, 0.1);
}
.neon-box {
box-shadow: 0 0 15px var(--neon-blue), 0 0 30px rgba(15, 255, 252, 0.2);
}
.timeline-item:before {
content: '';
position: absolute;
left: -45px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--neon-pink);
border: 4px solid var(--dark-bg);
box-shadow: 0 0 10px var(--neon-pink);
}
.skill-bar {
width: 100%;
background-color: rgba(30, 41, 59, 0.2);
border-radius: 10px;
overflow: hidden;
height: 12px;
}
.skill-progress {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
box-shadow: 0 0 8px var(--neon-blue);
}
.grid-bg {
background-image:
linear-gradient(to right, rgba(15, 255, 252, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(15, 255, 252, 0.05) 1px, transparent 1px);
background-size: 60px 60px;
}
.neon-glow {
box-shadow: 0 0 15px var(--neon-blue), 0 0 30px rgba(15, 255, 252, 0.2);
}
.hover-glow:hover {
box-shadow: 0 0 15px var(--neon-pink), 0 0 30px rgba(255, 0, 255, 0.2);
transition: all 0.3s ease;
transform: translateY(-3px);
}
.neon-link {
position: relative;
}
.neon-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background: var(--neon-blue);
box-shadow: 0 0 5px var(--neon-blue);
transition: width 0.3s;
}
.neon-link:hover:after {
width: 100%;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 4s ease-in-out infinite;
}
@keyframes flicker {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 0.99;
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-pink);
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow: none;
}
}
.neon-flicker {
animation: flicker 3s linear infinite;
}
.scanline {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(
to bottom,
transparent,
rgba(15, 255, 252, 0.02) 1px,
transparent 1px
);
background-size: 100% 8px;
pointer-events: none;
animation: scanline 8s linear infinite;
z-index: 10;
}
@keyframes scanline {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
.binary-rain {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0.05;
pointer-events: none;
font-family: monospace;
color: var(--neon-green);
overflow: hidden;
}
.binary-digit {
position: absolute;
opacity: 0;
animation: binary-fall linear;
}
@keyframes binary-fall {
0% { transform: translateY(-100px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(110vh); opacity: 0; }
}
.holographic-card {
position: relative;
transition: all 0.5s ease;
transform-style: preserve-3d;
}
.holographic-card:hover {
transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
}
.holographic-card:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple));
z-index: -1;
filter: blur(20px);
opacity: 0.3;
transition: all 0.5s ease;
}
.holographic-card:hover:before {
opacity: 0.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.grid-bg {
background-size: 40px 40px;
}
.timeline-item:before {
left: -32px;
}
}
</style>
</head>
<body class="grid-bg relative overflow-x-hidden">
<!-- Futuristic Effects -->
<div class="binary-rain" id="binaryRain"></div>
<div class="scanline"></div>
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-dark-bg border-b border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<span class="text-2xl font-bold gradient-text tech-font">SB PRO</span>
<span class="ml-2 text-xs tech-font text-neon-pink">v10.5.2050</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-slate-300 hover:text-white hover:bg-slate-700 focus:outline-none neon-box">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu hidden md:hidden bg-dark-bg neon-box">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="min-h-screen flex items-center pt-20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<div class="space-y-10 text-center md:text-left relative z-10">
<div>
<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>
<h1 class="text-5xl md:text-7xl font-bold tech-font neon-flicker mb-4">
<span class="gradient-text">SAAD ULLAH BUTTAR</span>
</h1>
<h2 class="text-2xl md:text-3xl font-semibold text-slate-300 tech-font">// SENIOR BANKING <span class="gradient-text">AI STRATEGIST</span></h2>
<div class="my-6 relative">
<div class="absolute inset-0 bg-neon-blue blur-lg opacity-20 rounded-full"></div>
<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>
</div>
</div>
<div class="flex flex-wrap gap-4 justify-center md:justify-start">
<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">
<span>CONNECT NOW</span>
<i class="fas fa-plug"></i>
</a>
<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">
<span>NEURAL CV</span>
<i class="fas fa-brain"></i>
</a>
</div>
<div class="pt-12">
<p class="text-sm text-slate-400 mb-4 tech-font">// TRUSTED BY FUTURE BANKING CONSORTIUM</p>
<div class="flex flex-wrap justify-center md:justify-start items-center gap-8">
<div class="bg-dark-bg p-3 rounded-xl neon-box">
<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">
</div>
<div class="bg-dark-bg p-3 rounded-xl neon-box">
<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">
</div>
<div class="bg-dark-bg p-3 rounded-xl neon-box">
<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">
</div>
<div class="bg-dark-bg p-3 rounded-xl neon-box">
<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">
</div>
<div class="bg-dark-bg p-3 rounded-xl neon-box">
<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">
</div>
</div>
</div>
</div>
<div class="relative flex justify-center z-10">
<div class="relative w-72 h-72 md:w-96 md:h-96 rounded-2xl overflow-hidden neon-glow floating holographic-card">
<div class="absolute inset-0 bg-gradient-to-tr from-neon-blue to-neon-purple opacity-30 rounded-2xl"></div>
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/digital-grid-line-mesh-background_53876-117525.jpg')] opacity-20"></div>
<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)">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark-bg to-transparent h-1/3"></div>
<div class="absolute -bottom-5 -right-5 bg-dark-bg rounded-xl p-4 shadow-lg neon-box hover-glow">
<div class="flex items-center gap-3">
<div class="text-neon-green text-2xl">
<i class="fas fa-certificate"></i>
</div>
<div>
<p class="text-xs text-slate-400 tech-font">NEURO-CERTIFIED</p>
<p class="font-bold text-sm tech-font">AI BANKING SPECIALIST</p>
</div>
</div>
</div>
<div class="absolute top-4 left-4">
<div class="bg-dark-bg text-neon-pink px-3 py-1 rounded-full text-xs tech-font neon-box">
<i class="fas fa-globe-asia mr-1"></i> PAKISTAN 2050
</div>
</div>
<div class="absolute top-4 right-4 flex space-x-2">
<div class="w-3 h-3 rounded-full bg-neon-blue"></div>
<div class="w-3 h-3 rounded-full bg-neon-green"></div>
<div class="w-3 h-3 rounded-full bg-neon-pink"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 relative">
<h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
<span class="gradient-text">ABOUT PROFILE</span>
</h2>
<div class="w-32 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto neon-box"></div>
<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>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8 relative">
<div class="absolute -top-10 -left-10 w-64 h-64 bg-neon-purple rounded-full filter blur-3xl opacity-10"></div>
<h3 class="text-3xl font-bold tech-font">I TRANSFORM <span class="gradient-text">BANKING DNA</span> FOR THE QUANTUM AGE</h3>
<div class="card-glass p-6 rounded-xl neon-box">
<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>
</div>
<div class="card-glass p-6 rounded-xl neon-box">
<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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4">
<div class="card-glass p-5 rounded-xl neon-border hover-glow">
<div class="flex items-start gap-4">
<div class="text-neon-blue text-2xl">
<i class="fas fa-graduation-cap"></i>
</div>
<div>
<h4 class="font-bold tech-font">EDUCATION</h4>
<p class="text-sm text-slate-400">Neural Finance Doctorate<br>Quantum Business School Dubai</p>
</div>
</div>
</div>
<div class="card-glass p-5 rounded-xl neon-border hover-glow">
<div class="flex items-start gap-4">
<div class="text-neon-pink text-2xl">
<i class="fas fa-language"></i>
</div>
<div>
<h4 class="font-bold tech-font">LANGUAGES</h4>
<p class="text-sm text-slate-400">English, Urdu, Punjabi, Python, QuantumScript</p>
</div>
</div>
</div>
</div>
<div class="pt-4">
<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">
<i class="fas fa-cloud-download-alt mr-2"></i> DOWNLOAD NEURAL PROFILE
</a>
</div>
</div>
<div class="holographic-card">
<div class="card-glass rounded-2xl p-8 space-y-8 neon-box h-full">
<div class="flex justify-between items-center">
<h3 class="text-2xl font-semibold tech-font">QUANTUM <span class="gradient-text">BANKING</span> SPECIALIZATIONS</h3>
<div class="text-neon-blue text-3xl">
<i class="fas fa-atom"></i>
</div>
</div>
<div class="space-y-6">
<div class="flex items-start gap-5">
<div class="flex-shrink-0 text-neon-blue text-3xl mt-1">
<i class="fas fa-brain"></i>
</div>
<div class="card-glass p-4 rounded-xl neon-border hover-glow">
<h4 class="font-bold text-lg tech-font">NEURO-BANKING INTERFACES</h4>
<p class="text-sm text-slate-400">Developing thought-responsive financial products with direct synaptic connections.</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="flex-shrink-0 text-neon-green text-3xl mt-1">
<i class="fas fa-coins"></i>
</div>
<div class="card-glass p-4 rounded-xl neon-border hover-glow">
<h4 class="font-bold text-lg tech-font">QUANTUM FINANCE SYSTEMS</h4>
<p class="text-sm text-slate-400">Implementing multi-dimensional investment algorithms across parallel financial universes.</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="flex-shrink-0 text-neon-purple text-3xl mt-1">
<i class="fas fa-robot"></i>
</div>
<div class="card-glass p-4 rounded-xl neon-border hover-glow">
<h4 class="font-bold text-lg tech-font">AUTONOMOUS BANKING AI</h4>
<p class="text-sm text-slate-400">Self-governing financial agents that negotiate optimal terms using predictive market analytics.</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="flex-shrink-0 text-neon-pink text-3xl mt-1">
<i class="fas fa-user-shield"></i>
</div>
<div class="card-glass p-4 rounded-xl neon-border hover-glow">
<h4 class="font-bold text-lg tech-font">NEURAL SECURITY</h4>
<p class="text-sm text-slate-400">Biometric memory encryption and blockchain neural networks for unhackable transactions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 bg-opacity-50 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 relative">
<h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
<span class="gradient-text">NEURAL TIMELINE</span>
</h2>
<div class="w-32 h-1 bg-gradient-to-r from-neon-pink to-neon-purple mx-auto neon-box"></div>
<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>
</div>
<div class="relative">
<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>
<div class="space-y-16">
<!-- Job 1 -->
<div class="relative md:flex justify-between items-center">
<div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
<h3 class="text-2xl font-semibold mb-1 tech-font">QUANTUM BANKING DIRECTOR</h3>
<p class="text-neon-blue mb-1">MCB BANK NEO</p>
<p class="text-sm text-slate-400 tech-font">2045 - PRESENT | LAHORE QUANTUM DISTRICT</p>
</div>
<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">
<img src="https://upload.wikimedia.org/wikipedia/en/1/1e/MCB_bank_logo.png" alt="MCB Bank" class="h-8">
</div>
<div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
<div class="card-glass p-6 rounded-xl neon-box hover-glow">
<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>
<ul class="mt-4 space-y-3 text-sm text-slate-400">
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
<span>Pioneered thought-activated loan approvals (0.3sec response time)</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
<span>Implemented holographic branch networks with 98.9% customer satisfaction</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-blue mt-1 mr-3 animate-spin"></i>
<span>Quantum Shield™ security recognized by World FinTech Council</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Job 2 -->
<div class="relative md:flex justify-between items-center flex-row-reverse">
<div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
<h3 class="text-2xl font-semibold mb-1 tech-font">NEURO-FINANCE STRATEGIST</h3>
<p class="text-neon-pink mb-1">HBL METAVERSE</p>
<p class="text-sm text-slate-400 tech-font">2040 - 2045 | ISLAMABAD DIGITAL ZONE</p>
</div>
<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">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Habib_Bank_logo.svg" alt="HBL" class="h-8">
</div>
<div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
<div class="card-glass p-6 rounded-xl neon-box hover-glow">
<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>
<ul class="mt-4 space-y-3 text-sm text-slate-400">
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
<span>Developed emotional AI that adjusts interest rates by customer mood</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
<span>NFT collateralization system adopted by State Bank of Metaverse</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-pink mt-1 mr-3 animate-spin"></i>
<span>Hologram assistants reduced operational costs by 72%</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Job 3 -->
<div class="relative md:flex justify-between items-center">
<div class="md:w-5/12 md:pr-12 text-right mb-8 md:mb-0">
<h3 class="text-2xl font-semibold mb-1 tech-font">BLOCKCHAIN BANKING LEAD</h3>
<p class="text-neon-purple mb-1">UBL QUANTUM</p>
<p class="text-sm text-slate-400 tech-font">2035 - 2040 | KARACHI CRYPTO HUB</p>
</div>
<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">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/United_Bank_Limited_logo.svg" alt="UBL" class="h-8">
</div>
<div class="timeline-item md:w-5/12 md:pl-12 pt-1 relative pl-12 md:pl-0">
<div class="card-glass p-6 rounded-xl neon-box hover-glow">
<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>
<ul class="mt-4 space-y-3 text-sm text-slate-400">
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
<span>Designed AI-driven compliance that processed 850K smart contracts</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
<span>Tokenized real estate platform handled $3.2B in transactions</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-purple mt-1 mr-3 animate-spin"></i>
<span>Quantum Key Distribution network for interbank crypto transfers</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Job 4 -->
<div class="relative md:flex justify-between items-center flex-row-reverse">
<div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
<h3 class="text-2xl font-semibold mb-1 tech-font">AI BANKING PIONEER</h3>
<p class="text-neon-green mb-1">ASKARI FUTURE BANK</p>
<p class="text-sm text-slate-400 tech-font">2032 - 2035 | MULTAN TECH CORRIDOR</p>
</div>
<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">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Askari_Bank_logo.svg" alt="Askari Bank" class="h-8">
</div>
<div class="timeline-item md:w-5/12 md:pr-12 pt-1 relative pl-12 md:pl-0">
<div class="card-glass p-6 rounded-xl neon-box hover-glow">
<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>
<ul class="mt-4 space-y-3 text-sm text-slate-400">
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
<span>Neural risk assessment reduced NPLs to 0.17% industry record</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
<span>Emotion-recognition ATMs improved accessibility by 89%</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle-notch text-neon-green mt-1 mr-3 animate-spin"></i>
<span>Self-learning chatbots resolved 98.3% of queries without humans</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 relative">
<h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
<span class="gradient-text">NEURAL ARCHITECTURE</span>
</h2>
<div class="w-32 h-1 bg-gradient-to-r from-neon-green to-neon-blue mx-auto neon-box"></div>
<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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<div class="holographic-card">
<div class="card-glass p-8 rounded-2xl neon-box">
<h3 class="text-2xl font-bold tech-font mb-8">QUANTUM <span class="gradient-text">BANKING</span> CORE</h3>
<div class="space-y-8">
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">NEURO-FINANCIAL INTERFACES</span>
<span class="text-neon-blue tech-font">98%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 98%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">MULTI-VERSE ASSET MANAGEMENT</span>
<span class="text-neon-blue tech-font">95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">QUANTUM RISK SIMULATION</span>
<span class="text-neon-blue tech-font">93%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 93%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">NEURAL CREDIT ALGORITHMS</span>
<span class="text-neon-blue tech-font">97%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 97%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">SENTIENT COMPLIANCE</span>
<span class="text-neon-blue tech-font">99%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 99%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="holographic-card">
<div class="card-glass p-8 rounded-2xl neon-box">
<h3 class="text-2xl font-bold tech-font mb-8">CYBER-FINANCIAL <span class="gradient-text">TECHNOLOGIES</span></h3>
<div class="space-y-8">
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">AUTONOMOUS BANKING AI</span>
<span class="text-neon-blue tech-font">96%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 96%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">QUANTUM BLOCKCHAIN</span>
<span class="text-neon-blue tech-font">94%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 94%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">NEURAL DATA ANALYSIS</span>
<span class="text-neon-blue tech-font">92%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 92%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">HOLO-CUSTOMER RELATIONS</span>
<span class="text-neon-blue tech-font">98%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 98%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-3">
<span class="font-bold tech-font">METAVERSE STRATEGY</span>
<span class="text-neon-blue tech-font">97%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 97%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-20">
<h3 class="text-3xl font-bold tech-font mb-12 text-center gradient-text">NEURO-CERTIFICATIONS</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="holographic-card">
<div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
<div class="text-neon-blue text-4xl mb-4">
<i class="fas fa-brain"></i>
</div>
<h4 class="font-bold text-xl tech-font mb-2">NEURO-BANKING ARCHITECT</h4>
<p class="text-sm text-slate-400">World NeuroFinance Institute - 2047</p>
<div class="mt-4 pt-4 border-t border-slate-700">
<span class="text-xs text-neon-green tech-font">#QSNG-4892-XP3</span>
</div>
</div>
</div>
<div class="holographic-card">
<div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
<div class="text-neon-purple text-4xl mb-4">
<i class="fas fa-atom"></i>
</div>
<h4 class="font-bold text-xl tech-font mb-2">QUANTUM FINANCE SPECIALIST</h4>
<p class="text-sm text-slate-400">MIT Quantum Lab - 2044</p>
<div class="mt-4 pt-4 border-t border-slate-700">
<span class="text-xs text-neon-green tech-font">#8A2Q-9B3P-1L</span>
</div>
</div>
</div>
<div class="holographic-card">
<div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
<div class="text-neon-pink text-4xl mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h4 class="font-bold text-xl tech-font mb-2">NEURAL SECURITY ENGINEER</h4>
<p class="text-sm text-slate-400">Blockchain Security Alliance - 2041</p>
<div class="mt-4 pt-4 border-t border-slate-700">
<span class="text-xs text-neon-green tech-font">#Z4K9-B2M8-C7</span>
</div>
</div>
</div>
<div class="holographic-card">
<div class="card-glass p-6 rounded-xl neon-box hover-glow h-full">
<div class="text-neon-green text-4xl mb-4">
<i class="fas fa-robot"></i>
</div>
<h4 class="font-bold text-xl tech-font mb-2">SENTIENT AI OPERATOR</h4>
<p class="text-sm text-slate-400">Singularity University - 2039</p>
<div class="mt-4 pt-4 border-t border-slate-700">
<span class="text-xs text-neon-green tech-font">#XJ3K-9P2L-6H</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-opacity-50 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 relative">
<h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font">
<span class="gradient-text">NEURAL CONNECT</span>
</h2>
<div class="w-32 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto neon-box"></div>
<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>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-10">
<h3 class="text-3xl font-bold tech-font">INITIATE <span class="gradient-text">QUANTUM LINK</span></h3>
<div class="card-glass p-6 rounded-xl neon-box">
<p class="text-slate-400">For quantum-secure consultations about Pakistan's financial future, connect through neural networks or traditional communication channels.</p>
</div>
<div class="space-y-6">
<div class="flex items-start gap-5">
<div class="bg-neon-blue bg-opacity-20 p-4 rounded-xl text-neon-blue text-xl neon-box">
<i class="fas fa-envelope"></i>
</div>
<div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
<h4 class="font-bold tech-font">QUANTUM MAIL</h4>
<p class="text-slate-400">neuro.saad@mcb-quantum.pk</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="bg-neon-pink bg-opacity-20 p-4 rounded-xl text-neon-pink text-xl neon-box">
<i class="fas fa-phone-alt"></i>
</div>
<div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
<h4 class="font-bold tech-font">NEURAL FREQUENCY</h4>
<p class="text-slate-400">+92 300 QNTM247</p>
</div>
</div>
<div class="flex items-start gap-5">
<div class="bg-neon-purple bg-opacity-20 p-4 rounded-xl text-neon-purple text-xl neon-box">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="card-glass p-5 rounded-xl neon-border hover-glow flex-1">
<h4 class="font-bold tech-font">HOLO-LOCATION</h4>
<p class="text-slate-400">Quantum Finance District, Lahore Neuro-City</p>
</div>
</div>
</div>
<div class="pt-4">
<h4 class="font-bold tech-font mb-4">NEURAL NETWORKS</h4>
<div class="flex gap-4">
<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">
<i class="fab fa-linkedin-in"></i>
</a>
<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">
<i class="fab fa-neos"></i>
</a>
<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">
<i class="fas fa-atom"></i>
</a>
<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">
<i class="fab fa-ethereum"></i>
</a>
</div>
</div>
</div>
<div class="holographic-card">
<div class="card-glass p-8 rounded-2xl neon-box">
<h3 class="text-2xl font-bold tech-font mb-6 gradient-text">DIRECT NEURAL INPUT</h3>
<form class="space-y-6">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-bold mb-2 tech-font">YOUR NEURAL ID</label>
<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">
</div>
<div>
<label for="email" class="block text-sm font-bold mb-2 tech-font">QUANTUM MAIL</label>
<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">
</div>
</div>
<div>
<label for="subject" class="block text-sm font-bold mb-2 tech-font">NEURAL FREQUENCY</label>
<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">
</div>
<div>
<label for="message" class="block text-sm font-bold mb-2 tech-font">QUANTUM MESSAGE</label>
<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>
</div>
<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">
<span>INITIATE QUANTUM LINK</span>
<i class="fas fa-satellite-dish"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-slate-800 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0 text-center md:text-left">
<h2 class="text-2xl font-bold tech-font mb-2">
<span class="gradient-text">SAAD ULLAH BUTTAR</span> <span class="text-neon-pink tech-font">// 2050</span>
</h2>
<p class="text-slate-400 tech-font">Quantum Banking Architect</p>
</div>
<div class="flex flex-col items-center md:items-end space-y-4">
<div class="flex space-x-8">
<a href="#home" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// HOME</a>
<a href="#about" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// ABOUT</a>
<a href="#experience" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// TIMELINE</a>
<a href="#contact" class="text-slate-400 hover:text-neon-blue transition-colors tech-font">// CONNECT</a>
</div>
<p class="text-sm text-slate-500 tech-font">CRYPTO-SECURED © 2050 NEURAL PROFILE. QUANTUM ENCRYPTED.</p>
</div>
</div>
<div class="mt-12 pt-8 border-t border-slate-800">
<p class="text-center text-slate-500 text-sm tech-font">
"In 2050, banks won't be places you go, but intelligences that grow with you." - S.U. Buttar
</p>
</div>
</div>
<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>
</footer>
<!-- Back to Top Button -->
<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">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<script>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
mobileMenu.classList.add('hidden');
});
});
// Show/hide back to top button
window.addEventListener('scroll', () => {
const backToTopButton = document.getElementById('back-to-top');
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
// Back to top functionality
document.getElementById('back-to-top').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Form submission
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
// Create futuristic alert
const alertDiv = document.createElement('div');
alertDiv.className = 'fixed top-10 left-1/2 transform -translate-x-1/2 z-50';
alertDiv.innerHTML = `
<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">
<i class="fas fa-check-circle mr-3"></i>
<span>NEURAL TRANSMISSION INITIATED - QUANTUM LINK ESTABLISHED</span>
</div>
`;
document.body.appendChild(alertDiv);
// Remove after some time
setTimeout(() => {
alertDiv.remove();
}, 5000);
form.reset();
});
}
// Create binary rain effect
function createBinaryRain() {
const container = document.getElementById('binaryRain');
const digits = ['0', '1', '0', '1', '0', '1', '0', '1'];
// Create multiple columns of binary digits
for (let i = 0; i < 30; i++) {
const column = document.createElement('div');
column.className = 'binary-column absolute';
column.style.left = `${Math.random() * 100}%`;
// Create multiple digits in each column
for (let j = 0; j < 20; j++) {
const digit = document.createElement('div');
digit.className = 'binary-digit';
digit.textContent = digits[Math.floor(Math.random() * digits.length)];
digit.style.left = '0';
digit.style.top = `${-Math.random() * 100}px`;
digit.style.opacity = Math.random();
digit.style.animationDuration = `${5 + Math.random() * 10}s`;
digit.style.animationDelay = `${Math.random() * 5}s`;
column.appendChild(digit);
}
container.appendChild(column);
}
}
// Initialize effects when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
createBinaryRain();
// Add hover effect to all holographic cards
document.querySelectorAll('.holographic-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const x = e.clientX - card.getBoundingClientRect().left;
const y = e.clientY - card.getBoundingClientRect().top;
const centerX = card.offsetWidth / 2;
const centerY = card.offsetHeight / 2;
const angleY = (x - centerX) / 20;
const angleX = (centerY - y) / 20;
card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
});
});
</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=hamadali/saad3" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>