|
|
<!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; |
|
|
} |
|
|
|
|
|
|
|
|
@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"> |
|
|
|
|
|
<div class="binary-rain" id="binaryRain"></div> |
|
|
<div class="scanline"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('back-to-top').addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const form = document.querySelector('form'); |
|
|
if (form) { |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
alertDiv.remove(); |
|
|
}, 5000); |
|
|
|
|
|
form.reset(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function createBinaryRain() { |
|
|
const container = document.getElementById('binaryRain'); |
|
|
const digits = ['0', '1', '0', '1', '0', '1', '0', '1']; |
|
|
|
|
|
|
|
|
for (let i = 0; i < 30; i++) { |
|
|
const column = document.createElement('div'); |
|
|
column.className = 'binary-column absolute'; |
|
|
column.style.left = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
createBinaryRain(); |
|
|
|
|
|
|
|
|
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> |
