<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mubarik Osman | Full-Stack Engineer & Creative Strategist</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Outfit', 'sans-serif'],
},
colors: {
brand: {
dark: '#050505',
cardDark: '#0a0a0a',
light: '#f8fafc',
cardLight: '#ffffff',
accent: '#4f46e5', // Indigo
glow: '#8b5cf6', // Violet
teal: '#14b8a6',
pink: '#ec4899'
}
},
animation: {
'blob': 'blob 7s infinite',
'float': 'float 6s ease-in-out infinite',
'space-float': 'spaceFloat 20s infinite alternate',
'bounce-slow': 'bounce 3s infinite',
'spin-slow': 'spin 3s linear infinite',
'heartbeat-x': 'heartbeatX 1.5s ease-in-out infinite',
},
keyframes: {
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
spaceFloat: {
'0%': { transform: 'translate(0, 0) rotate(0deg)' },
'100%': { transform: 'translate(100px, 50px) rotate(20deg)' },
},
heartbeatX: {
'0%, 100%': { transform: 'translateX(0)' },
'50%': { transform: 'translateX(6px)' },
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }
/* Glassmorphism */
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.dark .glass {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-nav {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dark .glass-nav {
background: rgba(5, 5, 5, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- PROJECT CARD STYLES --- */
.project-mask {
mask-image: radial-gradient(circle 40px at 0 0, transparent 0, transparent 40px, black 41px);
-webkit-mask-image: radial-gradient(circle 40px at 0 0, transparent 0, transparent 40px, black 41px);
overflow: hidden;
border-radius: 1.5rem;
}
.scrolling-image-container {
overflow: hidden;
height: 100%;
width: 100%;
}
.scrolling-image {
width: 100%;
height: auto;
min-height: 100%;
object-fit: cover;
object-position: top;
transition: transform 4s ease-in-out;
}
.project-card:hover .scrolling-image {
transform: translateY(calc(-100% + 400px));
}
/* --- SKILL HOVER --- */
.skill-tag { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.skill-tag:hover {
transform: translateY(-8px) scale(1.05);
border-color: #4f46e5;
box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
z-index: 10;
}
/* --- CONNECT HUB GRADIENT BORDER --- */
.gradient-border-card {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 1rem;
z-index: 1;
overflow: hidden;
}
.gradient-border-card::before {
content: "";
position: absolute;
inset: -50%;
z-index: -1;
background: conic-gradient(from 90deg at 50% 50%, #0000 0deg, #0000 50%, #4f46e5 120deg, #14b8a6 160deg, #f472b6 200deg, #0000 280deg);
width: 200%;
height: 200%;
left: -50%;
top: -50%;
opacity: 0;
transition: opacity 0.3s;
}
/* Only spin on hover */
.gradient-border-card:hover::before {
opacity: 1;
animation: spin 1.5s linear infinite;
}
.gradient-border-inner {
background: inherit;
border-radius: 0.9rem;
height: 100%;
width: 100%;
z-index: 2;
position: relative;
}
.dark .gradient-border-inner { background: #0a0a0a; }
.gradient-border-inner { background: #ffffff; }
@keyframes spin {
100% { transform: rotate(360deg); }
}
/* Cursor */
.cursor-dot, .cursor-outline {
position: fixed; top: 0; left: 0;
transform: translate(-50%, -50%);
border-radius: 50%; z-index: 9999; pointer-events: none;
}
.cursor-dot { width: 8px; height: 8px; background-color: #4f46e5; }
.cursor-outline {
width: 40px; height: 40px;
border: 2px solid rgba(79, 70, 229, 0.5);
transition: width 0.2s, height 0.2s, background-color 0.2s;
}
body.hover-active .cursor-outline {
width: 80px; height: 80px;
background-color: rgba(79, 70, 229, 0.1);
border: none;
}
/* Galaxy Background */
.galaxy-bg {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
position: relative;
}
.space-orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.4;
animation: space-float 10s infinite ease-in-out alternate;
}
/* Modern Button Glow */
.modern-btn {
position: relative;
overflow: hidden;
transition: color 0.3s;
}
.modern-btn::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to right, var(--btn-color-from, #4f46e5), var(--btn-color-to, #8b5cf6));
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.modern-btn:hover::before {
transform: translateY(0);
}
/* Heatmap Grid */
.heatmap-grid {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 4px;
}
.heatmap-cell {
width: 100%;
aspect-ratio: 1;
border-radius: 2px;
background-color: rgba(0,0,0,0.05); /* Light mode base */
}
.dark .heatmap-cell { background-color: rgba(255,255,255,0.05); }
.heatmap-cell.active-1 { background-color: #0e4429; }
.heatmap-cell.active-2 { background-color: #006d32; }
.heatmap-cell.active-3 { background-color: #26a641; }
.heatmap-cell.active-4 { background-color: #39d353; box-shadow: 0 0 8px #39d353; }
/* Modal Animation */
.modal-enter { opacity: 0; transform: scale(0.95); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 300ms; }
.modal-exit { opacity: 1; transform: scale(1); }
.modal-exit-active { opacity: 0; transform: scale(0.95); transition: opacity 200ms, transform 200ms; }
</style>
</head>
<body class="bg-brand-light dark:bg-brand-dark text-slate-800 dark:text-slate-100 overflow-x-hidden selection:bg-brand-accent selection:text-white transition-colors duration-300">
<div class="cursor-dot hidden md:block"></div>
<div class="cursor-outline hidden md:block"></div>
<div class="fixed inset-0 z-0 pointer-events-none overflow-hidden">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-brand-accent/20 rounded-full mix-blend-screen filter blur-[100px] animate-blob"></div>
<div class="absolute top-0 right-1/4 w-96 h-96 bg-brand-glow/20 rounded-full mix-blend-screen filter blur-[100px] animate-blob animation-delay-2000"></div>
</div>
<div id="booking-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/60 backdrop-blur-sm opacity-0 transition-opacity duration-300">
<div class="bg-white dark:bg-slate-900 w-full max-w-5xl h-[90vh] md:h-[600px] rounded-3xl relative shadow-2xl border border-white/10 flex flex-col md:flex-row overflow-hidden transform scale-95 transition-transform duration-300" id="modal-content">
<button onclick="toggleModal()" class="absolute top-4 right-4 z-50 w-10 h-10 rounded-full bg-slate-100 dark:bg-white/10 flex items-center justify-center hover:bg-red-500 hover:text-white transition-colors">
<i class="fa-solid fa-xmark"></i>
</button>
<div class="w-full md:w-1/3 bg-slate-50 dark:bg-black/50 p-8 border-r border-slate-200 dark:border-white/10 flex flex-col">
<div class="mb-6">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=200&q=80" alt="Mubarik" class="w-20 h-20 rounded-full mb-4 border-2 border-brand-accent">
<h3 class="text-xl font-bold">Mubarik Osman</h3>
<p class="text-sm text-slate-500">Full-Stack Engineer</p>
</div>
<div class="space-y-4 mb-auto">
<div class="flex items-center gap-3 text-sm">
<i class="fa-regular fa-clock text-brand-accent"></i>
<span>30 Min Discovery Call</span>
</div>
<div class="flex items-center gap-3 text-sm">
<i class="fa-solid fa-video text-brand-accent"></i>
<span>Google Meet / Zoom</span>
</div>
</div>
<p class="text-xs text-slate-400 mt-6">
Let's discuss your project requirements, timeline, and how I can help you build scalable software.
</p>
</div>
<div class="w-full md:w-2/3 p-8 overflow-y-auto bg-white dark:bg-brand-cardDark">
<h2 class="text-2xl font-bold mb-6">Select a Date & Time</h2>
<div class="grid grid-cols-7 gap-2 mb-6 text-center text-sm font-bold text-slate-400">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class="grid grid-cols-7 gap-2 mb-8">
<span class="aspect-square"></span><span class="aspect-square"></span>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400">1</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400">2</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400">3</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400">4</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400">5</button>
<button class="aspect-square rounded-full bg-brand-accent/10 text-brand-accent font-bold hover:bg-brand-accent hover:text-white transition-colors">6</button>
<button class="aspect-square rounded-full bg-brand-accent/10 text-brand-accent font-bold hover:bg-brand-accent hover:text-white transition-colors">7</button>
<button class="aspect-square rounded-full bg-brand-accent/10 text-brand-accent font-bold hover:bg-brand-accent hover:text-white transition-colors">8</button>
<button class="aspect-square rounded-full bg-brand-accent/10 text-brand-accent font-bold hover:bg-brand-accent hover:text-white transition-colors">9</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10">10</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10">11</button>
<button class="aspect-square rounded-full hover:bg-slate-100 dark:hover:bg-white/10">12</button>
</div>
<h3 class="font-bold mb-4">Available Times (GMT+3)</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<button class="py-2 rounded-lg border border-brand-accent text-brand-accent hover:bg-brand-accent hover:text-white transition-all text-sm font-bold">09:00 AM</button>
<button class="py-2 rounded-lg border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent transition-all text-sm">10:30 AM</button>
<button class="py-2 rounded-lg border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent transition-all text-sm">02:00 PM</button>
<button class="py-2 rounded-lg border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent transition-all text-sm">04:30 PM</button>
</div>
</div>
</div>
</div>
<div class="fixed bottom-0 w-full glass p-4 md:hidden z-50 flex justify-between items-center border-t border-white/10">
<span class="font-bold text-sm">Build your vision?</span>
<button onclick="toggleModal()" class="bg-brand-accent text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg shadow-indigo-500/30">Hire Me</button>
</div>
<a href="https://wa.me/252633227084" target="_blank" class="fixed bottom-6 right-6 z-50 flex items-center gap-3 group hover-trigger cursor-pointer hidden md:flex">
<div class="bg-white text-slate-900 px-4 py-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity text-sm font-bold border border-slate-100 whitespace-nowrap">
Let's help you build!
</div>
<div class="w-16 h-16 rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-2xl hover:scale-110 transition-transform animate-bounce hover:animate-none border-2 border-white dark:border-slate-800">
<i class="fa-brands fa-whatsapp text-3xl"></i>
</div>
</a>
<nav class="fixed w-full z-40 glass-nav transition-all duration-300" id="navbar">
<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-shrink-0 cursor-pointer group hover-target" onclick="window.scrollTo(0,0)">
<h1 class="text-2xl font-bold tracking-tighter group-hover:tracking-widest transition-all duration-300">
MUBARIK<span class="text-brand-accent">.</span>
</h1>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#" class="hover-target hover:text-brand-accent transition-colors text-sm font-medium">Home</a>
<a href="#services" class="hover-target hover:text-brand-accent transition-colors text-sm font-medium">Services</a>
<a href="#skills" class="hover-target hover:text-brand-accent transition-colors text-sm font-medium">Expertise</a>
<a href="#portfolio" class="hover-target hover:text-brand-accent transition-colors text-sm font-medium">Projects</a>
<button id="theme-toggle-nav" class="hover-target w-10 h-10 rounded-full bg-slate-100 dark:bg-white/10 flex items-center justify-center hover:bg-slate-200 transition-colors">
<i class="fa-solid fa-sun text-yellow-500 hidden dark:block"></i>
<i class="fa-solid fa-moon text-slate-600 block dark:hidden"></i>
</button>
<button onclick="toggleModal()" class="hover-target px-6 py-2.5 rounded-full bg-brand-accent text-white hover:bg-brand-glow transition-all text-sm font-bold shadow-lg shadow-indigo-500/30">Hire Me</button>
</div>
<div class="md:hidden flex items-center gap-4">
<button id="theme-toggle-mobile" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-white/10 flex items-center justify-center">
<i class="fa-solid fa-sun text-yellow-500 hidden dark:block"></i>
<i class="fa-solid fa-moon text-slate-600 block dark:hidden"></i>
</button>
<button class="text-2xl text-brand-accent"><i class="fa-solid fa-bars"></i></button>
</div>
</div>
</div>
</nav>
<main class="transition-opacity duration-500">
<section id="home" class="relative z-10 min-h-screen flex items-center justify-center pt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 text-center md:text-left" data-aos="fade-right">
<div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-brand-accent text-xs font-bold mb-6 border border-indigo-100 dark:border-indigo-500/30">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-accent opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-accent"></span>
</span>
<span>AVAILABLE FOR NEW PROJECTS</span>
</div>
<h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">
Building Digital <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-brand-glow to-brand-teal">Empires.</span>
</h1>
<div class="h-10 mb-6">
<span class="text-xl md:text-2xl text-slate-500 dark:text-slate-400 font-light">
I am a <span id="scramble-text" class="text-brand-accent font-bold font-mono">Software Engineer</span>
</span>
</div>
<p class="text-slate-600 dark:text-slate-400 max-w-lg mx-auto md:mx-0 mb-10 text-lg leading-relaxed">
I don't just write code; I solve complex business problems. By fusing <strong>Data Intelligence</strong> with <strong>High-End Design</strong>, I create scalable software that drives real growth.
</p>
<div class="flex flex-wrap gap-4 justify-center md:justify-start">
<a href="#portfolio" class="hover-target px-8 py-4 bg-slate-900 dark:bg-white text-white dark:text-black font-bold rounded-full hover:scale-105 transition-transform shadow-xl">View Work</a>
<button onclick="toggleModal()" class="hover-target px-8 py-4 glass text-slate-900 dark:text-white font-bold rounded-full hover:bg-slate-100 dark:hover:bg-white/10 transition-colors border border-slate-200 dark:border-white/20">Book Call</button>
</div>
</div>
<div class="md:w-1/2 mt-16 md:mt-0 relative" data-aos="fade-left">
<div class="relative w-full h-[500px] flex items-center justify-center animate-float">
<div class="absolute w-80 h-80 bg-gradient-to-tr from-brand-accent to-brand-teal rounded-full opacity-20 blur-[80px]"></div>
<div class="relative z-10 w-80 h-96 glass rounded-2xl overflow-hidden border border-white/20 rotate-3 hover:rotate-0 transition-all duration-500 shadow-2xl group hover-target">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=800&q=80" alt="Mubarik Osman" class="w-full h-full object-cover filter grayscale group-hover:grayscale-0 transition-all duration-500">
<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black to-transparent">
<p class="text-white font-bold text-lg">Mubarik Osman</p>
<p class="text-xs text-gray-300">Engineer & Strategist</p>
</div>
</div>
<div id="hero-badge-1" class="absolute top-12 -right-4 glass px-5 py-3 rounded-xl border border-white/20 animate-bounce delay-100 shadow-lg flex items-center gap-3 bg-white/80 dark:bg-black/50 transition-all duration-500"></div>
<div id="hero-badge-2" class="absolute bottom-16 -left-4 glass px-5 py-3 rounded-xl border border-white/20 animate-bounce delay-300 shadow-lg flex items-center gap-3 bg-white/80 dark:bg-black/50 transition-all duration-500"></div>
</div>
</div>
</div>
</section>
<section id="services" class="py-24 relative z-10 border-t border-slate-200 dark:border-white/5">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Strategic <span class="text-brand-accent">Solutions</span></h2>
<p class="text-slate-500 max-w-2xl mx-auto">Tailored engineering services designed to scale your business infrastructure.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div style="--btn-color-from: #4f46e5; --btn-color-to: #6366f1;" class="modern-btn glass p-6 rounded-3xl border border-slate-200 dark:border-white/10 hover:border-brand-accent transition-all duration-300 group hover-target shadow-lg hover:shadow-brand-accent/30 flex flex-col justify-between h-full text-left" data-aos="fade-up" data-aos-delay="0">
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-brand-accent/10 flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-brand-accent transition-colors text-brand-accent text-2xl">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-white transition-colors">Enterprise Software</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6 group-hover:text-white/90 transition-colors">
Robust, scalable web applications utilizing Python & Next.js architectures.
</p>
</div>
<div class="relative z-10">
<i class="fa-solid fa-arrow-right text-brand-accent group-hover:text-white transition-colors"></i>
</div>
</div>
<div style="--btn-color-from: #14b8a6; --btn-color-to: #2dd4bf;" class="modern-btn glass p-6 rounded-3xl border border-slate-200 dark:border-white/10 hover:border-brand-teal transition-all duration-300 group hover-target shadow-lg hover:shadow-brand-teal/30 flex flex-col justify-between h-full text-left" data-aos="fade-up" data-aos-delay="100">
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-brand-teal/10 flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-brand-teal transition-colors text-brand-teal text-2xl">
<i class="fa-solid fa-mobile-screen"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-white transition-colors">Cross-Platform Mobile</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6 group-hover:text-white/90 transition-colors">
Native performance Flutter applications for iOS and Android ecosystems.
</p>
</div>
<div class="relative z-10">
<i class="fa-solid fa-arrow-right text-brand-teal group-hover:text-white transition-colors"></i>
</div>
</div>
<div style="--btn-color-from: #8b5cf6; --btn-color-to: #a855f7;" class="modern-btn glass p-6 rounded-3xl border border-slate-200 dark:border-white/10 hover:border-purple-500 transition-all duration-300 group hover-target shadow-lg hover:shadow-purple-500/30 flex flex-col justify-between h-full text-left" data-aos="fade-up" data-aos-delay="200">
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-purple-600 transition-colors text-purple-500 text-2xl">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-white transition-colors">Product Strategy</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6 group-hover:text-white/90 transition-colors">
Data-driven UI/UX design and market fit analysis for high conversion.
</p>
</div>
<div class="relative z-10">
<i class="fa-solid fa-arrow-right text-purple-500 group-hover:text-white transition-colors"></i>
</div>
</div>
<div style="--btn-color-from: #ec4899; --btn-color-to: #f43f5e;" class="modern-btn glass p-6 rounded-3xl border border-slate-200 dark:border-white/10 hover:border-pink-500 transition-all duration-300 group hover-target shadow-lg hover:shadow-pink-500/30 flex flex-col justify-between h-full text-left" data-aos="fade-up" data-aos-delay="300">
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-pink-600 transition-colors text-pink-500 text-2xl">
<i class="fa-solid fa-bullhorn"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-white transition-colors">Digital Marketing & SEO</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6 group-hover:text-white/90 transition-colors">
Comprehensive SEO campaigns, analytics tracking, and growth marketing.
</p>
</div>
<div class="relative z-10">
<i class="fa-solid fa-arrow-right text-pink-500 group-hover:text-white transition-colors"></i>
</div>
</div>
</div>
<div class="text-center mt-12">
<button onclick="toggleModal()" class="inline-flex items-center gap-3 px-8 py-4 rounded-full border-2 border-brand-accent text-brand-accent font-bold hover:bg-brand-accent hover:text-white transition-all duration-300 hover:shadow-lg hover:shadow-brand-accent/40">
Explore All Services <i class="fa-solid fa-compass animate-spin-slow"></i>
</button>
</div>
</div>
</section>
<section class="py-24 relative z-10">
<div class="max-w-4xl mx-auto px-4" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-2">My <span class="text-brand-accent">Journey</span></h2>
<div class="h-2 w-24 bg-gradient-to-r from-brand-accent via-purple-500 to-brand-teal rounded-full mx-auto"></div>
</div>
<div class="relative border-l-2 border-slate-200 dark:border-white/10 ml-6 space-y-12">
<div class="relative pl-12 group">
<div class="absolute -left-[9px] top-0 w-5 h-5 rounded-full bg-brand-accent group-hover:scale-150 transition-transform shadow-[0_0_20px_rgba(79,70,229,0.5)]"></div>
<span class="text-xs font-bold text-brand-accent uppercase tracking-widest">2023 - Present</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">Senior Full-Stack Engineer</h3>
<p class="text-slate-500 text-sm">Hiigsi Tech</p>
<p class="text-slate-600 dark:text-slate-400 mt-2">Leading development of enterprise financial dashboards and mentoring junior developers.</p>
</div>
<div class="relative pl-12 group">
<div class="absolute -left-[9px] top-0 w-5 h-5 rounded-full bg-brand-teal group-hover:scale-150 transition-transform"></div>
<span class="text-xs font-bold text-brand-teal uppercase tracking-widest">2021 - 2023</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">Lead Mobile Developer</h3>
<p class="text-slate-500 text-sm">Freelance / Contract</p>
<p class="text-slate-600 dark:text-slate-400 mt-2">Deployed 15+ Flutter applications to Play Store & App Store with cumulative 50k+ downloads.</p>
</div>
<div class="relative pl-12 group">
<div class="absolute -left-[9px] top-0 w-5 h-5 rounded-full bg-purple-500 group-hover:scale-150 transition-transform"></div>
<span class="text-xs font-bold text-purple-500 uppercase tracking-widest">2019 - 2021</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">Junior Web Developer</h3>
<p class="text-slate-500 text-sm">StartUp Inc</p>
<p class="text-slate-600 dark:text-slate-400 mt-2">Frontend development using React and Tailwind CSS. Optimization of legacy codebases.</p>
</div>
</div>
</div>
</section>
<section id="counter-section" class="py-10 border-y border-slate-200 dark:border-white/5 bg-white dark:bg-black/30 backdrop-blur-sm relative z-10">
<div class="max-w-7xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div data-aos="fade-up">
<h3 class="text-4xl font-black text-brand-accent counter" data-target="100">0</h3>
<p class="text-slate-500 text-xs uppercase tracking-widest mt-2 font-bold">Certifications</p>
</div>
<div data-aos="fade-up" data-aos-delay="100">
<h3 class="text-4xl font-black text-slate-900 dark:text-white counter" data-target="40">0</h3>
<p class="text-slate-500 text-xs uppercase tracking-widest mt-2 font-bold">Skills</p>
</div>
<div data-aos="fade-up" data-aos-delay="200">
<h3 class="text-4xl font-black text-brand-teal counter" data-target="5">0</h3>
<p class="text-slate-500 text-xs uppercase tracking-widest mt-2 font-bold">Years Experience</p>
</div>
<div data-aos="fade-up" data-aos-delay="300">
<h3 class="text-4xl font-black text-slate-900 dark:text-white"><span class="counter" data-target="100">0</span>%</h3>
<p class="text-slate-500 text-xs uppercase tracking-widest mt-2 font-bold">Project Success</p>
</div>
</div>
</section>
<section id="skills" class="py-24 relative z-10">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-10" data-aos="fade-up">
<h2 class="text-3xl md:text-5xl font-bold mb-4">The <span class="text-brand-accent">Arsenal</span></h2>
<p class="text-slate-500 max-w-2xl mx-auto">A comprehensive toolkit allowing for total control over the development lifecycle.</p>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up">
<button class="filter-btn active px-6 py-2 rounded-full border border-brand-accent bg-brand-accent text-white font-bold text-sm transition-all" data-filter="all">All</button>
<button class="filter-btn px-6 py-2 rounded-full border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent font-bold text-sm transition-all" data-filter="backend">Backend</button>
<button class="filter-btn px-6 py-2 rounded-full border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent font-bold text-sm transition-all" data-filter="frontend">Frontend</button>
<button class="filter-btn px-6 py-2 rounded-full border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent font-bold text-sm transition-all" data-filter="design">Design & Strategy</button>
<button class="filter-btn px-6 py-2 rounded-full border border-slate-200 dark:border-white/10 hover:border-brand-accent hover:text-brand-accent font-bold text-sm transition-all" data-filter="soft">Management & Soft Skills</button>
</div>
<div class="flex flex-wrap justify-center gap-3 md:gap-4" data-aos="fade-up" id="skills-container">
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-brands fa-js text-yellow-400"></i> JavaScript</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-python text-blue-500"></i> Python</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-solid fa-code text-blue-600"></i> TypeScript</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-rust text-orange-700"></i> Rust</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-java text-red-500"></i> Java</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-c text-blue-800"></i> C++</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-brands fa-dart-lang text-blue-400"></i> Dart</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-brands fa-react text-cyan-400"></i> React</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-solid fa-n text-white bg-black px-1 rounded"></i> Next.js</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-brands fa-android text-green-500"></i> Flutter</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-node text-green-600"></i> Node.js</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-brands fa-unity text-black dark:text-white"></i> Unity</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="frontend"><i class="fa-solid fa-wind text-cyan-500"></i> Tailwind CSS</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-aws text-orange-400"></i> AWS Cloud</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-dharmachakra text-blue-500"></i> Kubernetes</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-docker text-blue-600"></i> Docker</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-database text-purple-500"></i> SQL</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-leaf text-green-500"></i> MongoDB</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-circle-nodes text-pink-500"></i> GraphQL</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-solid fa-fire text-orange-500"></i> Firebase</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-linux text-white bg-black px-1 rounded"></i> Linux</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-slate-200 dark:border-white/10 text-sm font-bold flex items-center gap-2" data-category="backend"><i class="fa-brands fa-git-alt text-red-500"></i> Git</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-brands fa-figma text-pink-500"></i> Figma</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-pen-nib text-orange-500"></i> Illustrator</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-image text-blue-500"></i> Photoshop</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-film text-purple-500"></i> Motion Design</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-fingerprint text-teal-500"></i> Brand Identity</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-book-open text-slate-500"></i> Storytelling</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-brand-accent/30 text-sm font-bold flex items-center gap-2 bg-brand-accent/5" data-category="design"><i class="fa-solid fa-compass-drafting text-indigo-500"></i> Creative Direction</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-list-check text-blue-400"></i> Project Management</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-bullhorn text-red-500"></i> Public Speaking</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="design"><i class="fa-solid fa-chart-line text-green-500"></i> Market Research</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="design"><i class="fa-solid fa-vial text-yellow-500"></i> A/B Testing</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-users text-blue-500"></i> CRM Tools</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-magnifying-glass-chart text-purple-500"></i> Data Analysis</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-handshake text-orange-500"></i> Negotiation</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-crown text-yellow-600"></i> Leadership</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-hourglass-half text-teal-500"></i> Time Management</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="soft"><i class="fa-solid fa-puzzle-piece text-red-400"></i> Problem Solving</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="backend"><i class="fa-solid fa-shield-halved text-green-600"></i> Cybersecurity</span>
<span class="skill-tag px-6 py-3 glass rounded-full border border-green-500/30 text-sm font-bold flex items-center gap-2 bg-green-500/5" data-category="design"><i class="fa-brands fa-google text-blue-500"></i> SEO Strategy</span>
</div>
<div class="mt-16 glass p-8 rounded-3xl border border-white/10 overflow-hidden" data-aos="zoom-in">
<h3 class="font-bold mb-6 text-center text-xl">Code Activity <span class="text-brand-accent">(Live)</span></h3>
<div class="w-full flex justify-center">
<div class="heatmap-grid" id="heatmap"></div>
</div>
</div>
</div>
</section>
<section id="portfolio" class="py-24 bg-slate-50 dark:bg-brand-gray/20 relative z-10 overflow-hidden">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-center md:justify-between items-center mb-12 text-center md:text-left" data-aos="fade-up">
<div>
<h2 class="text-4xl md:text-5xl font-bold"><span class="bg-black text-white px-3 py-1 rounded">Featured</span> <span class="text-brand-accent">Projects</span></h2>
<p class="text-slate-500 mt-2">Scalable solutions deployed for real-world impact.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="project-card group hover-target relative h-[500px] w-full bg-slate-900 shadow-2xl transition-all duration-300 hover:shadow-brand-accent/20 cursor-pointer project-mask overflow-hidden">
<div class="scrolling-image-container absolute inset-0 bg-white">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?fit=crop&w=800&q=80" loading="lazy" alt="FinTech" class="scrolling-image">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-80 group-hover:opacity-95 transition-opacity duration-500"></div>
<div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-[85px] group-hover:translate-y-0 transition-transform duration-500 ease-out">
<div class="flex gap-2 mb-3">
<span class="bg-brand-accent text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">React</span>
<span class="bg-slate-700 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Python</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">Enterprise Finance</h3>
<div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<p class="text-gray-300 text-sm mb-4">
A comprehensive dashboard for financial forecasting using predictive analytics.
</p>
<button class="bg-white text-black px-6 py-2 rounded-full font-bold text-sm hover:bg-brand-accent hover:text-white flex items-center gap-2 transition-colors">
Read Case Study <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
</div>
<div class="project-card group hover-target relative h-[500px] w-full bg-slate-900 shadow-2xl transition-all duration-300 hover:shadow-brand-teal/20 cursor-pointer project-mask overflow-hidden">
<div class="scrolling-image-container absolute inset-0 bg-white">
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?fit=crop&w=800&q=80" loading="lazy" alt="Mobile App" class="scrolling-image">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-80 group-hover:opacity-95 transition-opacity duration-500"></div>
<div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-[85px] group-hover:translate-y-0 transition-transform duration-500 ease-out">
<div class="flex gap-2 mb-3">
<span class="bg-brand-teal text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Flutter</span>
<span class="bg-slate-700 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Firebase</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">Secure Crypto Wallet</h3>
<div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<p class="text-gray-300 text-sm mb-4">
Cross-platform mobile application for secure blockchain transactions.
</p>
<button class="bg-white text-black px-6 py-2 rounded-full font-bold text-sm hover:bg-brand-teal hover:text-white flex items-center gap-2 transition-colors">
Read Case Study <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
</div>
<div class="project-card group hover-target relative h-[500px] w-full bg-slate-900 shadow-2xl transition-all duration-300 hover:shadow-purple-500/20 cursor-pointer project-mask overflow-hidden">
<div class="scrolling-image-container absolute inset-0 bg-white">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?fit=crop&w=800&q=80" loading="lazy" alt="AI Tool" class="scrolling-image">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-80 group-hover:opacity-95 transition-opacity duration-500"></div>
<div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-[85px] group-hover:translate-y-0 transition-transform duration-500 ease-out">
<div class="flex gap-2 mb-3">
<span class="bg-purple-600 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">OpenAI</span>
<span class="bg-slate-700 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Next.js</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">AI Content Gen</h3>
<div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<p class="text-gray-300 text-sm mb-4">
SaaS platform integrating large language models for marketing copy.
</p>
<button class="bg-white text-black px-6 py-2 rounded-full font-bold text-sm hover:bg-purple-600 hover:text-white flex items-center gap-2 transition-colors">
Read Case Study <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="hover-target px-10 py-4 bg-transparent border-b-2 border-brand-accent text-brand-accent rounded-none font-bold hover:tracking-widest transition-all duration-300 group flex items-center justify-center mx-auto gap-2">
EXPLORE MORE PROJECTS <i class="fa-solid fa-arrow-right animate-heartbeat-x"></i>
</button>
</div>
</div>
</section>
<section class="py-24 relative z-10 overflow-hidden">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row gap-16 items-center">
<div class="md:w-1/2" data-aos="fade-right">
<h2 class="text-3xl md:text-5xl font-bold mb-6">My Engineering <br><span class="text-brand-accent">Workflow.</span></h2>
<div class="space-y-8">
<div class="flex gap-4" data-aos="fade-up" data-aos-delay="0">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-slate-900 dark:bg-white text-white dark:text-black font-bold flex items-center justify-center">1</div>
<div>
<h4 class="font-bold text-lg">Discovery & Strategy</h4>
<p class="text-sm text-slate-500">We define the scope, user personas, and technical requirements.</p>
</div>
</div>
<div class="flex gap-4" data-aos="fade-up" data-aos-delay="100">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 text-slate-600 dark:text-white font-bold flex items-center justify-center border border-slate-300 dark:border-white/20">2</div>
<div>
<h4 class="font-bold text-lg">Design & Architecture</h4>
<p class="text-sm text-slate-500">High-fidelity prototypes in Figma and database schema design.</p>
</div>
</div>
<div class="flex gap-4" data-aos="fade-up" data-aos-delay="200">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 text-slate-600 dark:text-white font-bold flex items-center justify-center border border-slate-300 dark:border-white/20">3</div>
<div>
<h4 class="font-bold text-lg">Agile Development</h4>
<p class="text-sm text-slate-500">Clean code sprints with regular updates and testing.</p>
</div>
</div>
<div class="flex gap-4" data-aos="fade-up" data-aos-delay="300">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 text-slate-600 dark:text-white font-bold flex items-center justify-center border border-slate-300 dark:border-white/20">4</div>
<div>
<h4 class="font-bold text-lg">Launch & Scale</h4>
<p class="text-sm text-slate-500">Deployment to cloud servers (AWS/Vercel) and SEO optimization.</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 relative" data-aos="fade-left">
<div class="absolute inset-0 bg-brand-accent/20 filter blur-3xl rounded-full"></div>
<div class="glass p-8 rounded-3xl border border-slate-200 dark:border-white/10 relative z-10 rotate-3 hover:rotate-0 transition-all duration-500 animate-float">
<div class="font-mono text-xs text-brand-accent mb-4">terminal@mubarik:~/workflow</div>
<div class="space-y-3 font-mono text-sm">
<div class="flex gap-2" data-aos="fade-in" data-aos-duration="200">
<span class="text-green-500">➜</span>
<span class="text-slate-800 dark:text-slate-300">git init project-alpha</span>
</div>
<div class="flex gap-2" data-aos="fade-in" data-aos-delay="300" data-aos-duration="200">
<span class="text-green-500">➜</span>
<span class="text-slate-800 dark:text-slate-300">npm install scalability</span>
</div>
<div class="flex gap-2" data-aos="fade-in" data-aos-delay="600" data-aos-duration="200">
<span class="text-green-500">➜</span>
<span class="text-slate-800 dark:text-slate-300">running tests... <span class="text-green-500">PASS</span></span>
</div>
<div class="flex gap-2" data-aos="fade-in" data-aos-delay="900" data-aos-duration="200">
<span class="text-green-500">➜</span>
<span class="text-slate-800 dark:text-slate-300">deploying to production...</span>
</div>
<div class="p-4 bg-black/5 dark:bg-white/5 rounded mt-4 border-l-2 border-green-500" data-aos="fade-in" data-aos-delay="1200" data-aos-duration="200">
<p class="text-green-600 dark:text-green-400">Success! Project is live 🚀</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-brand-accent/5 relative z-10 overflow-hidden">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Client <span class="text-brand-accent">Stories</span></h2>
</div>
<div class="max-w-7xl mx-auto px-4 relative">
<div class="overflow-hidden">
<div id="testimonial-track" class="flex transition-transform duration-700 ease-in-out">
<div class="w-full flex-shrink-0 grid grid-cols-1 md:grid-cols-3 gap-6 px-4">
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-brand-accent/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"Mubarik isn't just a developer; he's a partner. He took our complex financial data and built a dashboard that saved us hours."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">Ahmed Hassan</h4><p class="text-[10px] text-slate-500">CEO, FinTech Somali</p></div>
</div>
</div>
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-brand-teal/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"The mobile app Mubarik built for our real estate agency is flawless. The UI is modern, and the backend is rock solid."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">Sarah Jibril</h4><p class="text-[10px] text-slate-500">Founder, GuriUp</p></div>
</div>
</div>
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-brand-accent/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"We doubled our conversions after the site redesign. His strategy is top notch. Highly recommended."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-red-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">Khadra Ali</h4><p class="text-[10px] text-slate-500">Marketing Lead</p></div>
</div>
</div>
</div>
<div class="w-full flex-shrink-0 grid grid-cols-1 md:grid-cols-3 gap-6 px-4">
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-purple-500/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"Our SaaS platform runs smoother than ever. The architecture refactor was worth every penny."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-teal-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">James Carter</h4><p class="text-[10px] text-slate-500">CTO, CloudScale</p></div>
</div>
</div>
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-pink-500/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"Incredible attention to detail on the frontend. The animations are buttery smooth."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-400 to-rose-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">Layla Omar</h4><p class="text-[10px] text-slate-500">Product Manager</p></div>
</div>
</div>
<div class="glass p-8 rounded-2xl border border-slate-200 dark:border-white/5 relative shadow-xl text-center">
<i class="fa-solid fa-quote-right text-4xl text-blue-500/20 mb-6 mx-auto block"></i>
<p class="text-sm text-slate-600 dark:text-slate-300 mb-6 italic">"Helped us launch our MVP in record time. Professional, fast, and reliable."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-blue-600"></div>
<div class="text-left"><h4 class="font-bold text-xs">Omar Yasin</h4><p class="text-[10px] text-slate-500">Founder, StartupX</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-8 gap-2">
<button class="w-3 h-3 rounded-full bg-brand-accent transition-all hover:scale-125 slider-dot" onclick="moveCarousel(0)"></button>
<button class="w-3 h-3 rounded-full bg-slate-300 dark:bg-white/20 transition-all hover:scale-125 slider-dot" onclick="moveCarousel(1)"></button>
</div>
</div>
</section>
<section id="socials" class="py-24 bg-brand-accent/5 relative z-10">
<div class="max-w-7xl mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-12">Connect <span class="text-brand-accent">Hub</span></h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-linkedin text-4xl text-blue-600 mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">LinkedIn</span>
</div>
</a>
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-github text-4xl text-slate-800 dark:text-white mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">GitHub</span>
</div>
</a>
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-instagram text-4xl text-pink-600 mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">Instagram</span>
</div>
</a>
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-facebook text-4xl text-blue-700 mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">Facebook</span>
</div>
</a>
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-behance text-4xl text-blue-500 mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">Behance</span>
</div>
</a>
<a href="#" class="hover-target gradient-border-card p-[2px] group hover:-translate-y-2 transition-transform">
<div class="gradient-border-inner flex flex-col items-center justify-center p-6">
<i class="fa-brands fa-dribbble text-4xl text-pink-500 mb-2 group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm">Dribbble</span>
</div>
</a>
</div>
</div>
</section>
<section id="contact" class="py-24 relative z-10">
<div class="max-w-5xl mx-auto px-4">
<div class="bg-black text-white rounded-[3rem] p-10 md:p-20 relative overflow-hidden shadow-2xl" data-aos="zoom-in-up">
<div class="absolute inset-0 bg-gradient-to-r from-brand-accent via-purple-900 to-brand-teal opacity-30 animate-pulse"></div>
<div class="relative z-10 text-center mb-12">
<h2 class="text-4xl md:text-6xl font-black mb-4 tracking-tight">Ready to <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500">Scale?</span></h2>
<p class="text-gray-300 text-lg">Accepting new enterprise contracts and freelance projects.</p>
</div>
<form class="space-y-6 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<input type="text" class="hover-target w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-5 text-white placeholder-gray-400 focus:bg-white/10 focus:border-brand-accent focus:outline-none transition-all" placeholder="Your Name">
</div>
<div class="group">
<input type="email" class="hover-target w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-5 text-white placeholder-gray-400 focus:bg-white/10 focus:border-brand-accent focus:outline-none transition-all" placeholder="Your Email">
</div>
</div>
<div>
<input type="text" class="hover-target w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-5 text-white placeholder-gray-400 focus:bg-white/10 focus:border-brand-accent focus:outline-none transition-all" placeholder="Project Type (Web, Mobile, Design)">
</div>
<div>
<textarea class="hover-target w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-5 text-white placeholder-gray-400 focus:bg-white/10 focus:border-brand-accent focus:outline-none transition-all h-40 resize-none" placeholder="Tell me about your vision..."></textarea>
</div>
<button type="button" class="hover-target w-full bg-gradient-to-r from-brand-accent to-brand-glow text-white font-black text-xl py-6 rounded-2xl hover:scale-[1.02] active:scale-95 transition-all shadow-lg hover:shadow-indigo-500/50 uppercase">
SEND MESSAGE & START <i class="fa-solid fa-paper-plane ml-2"></i>
</button>
</form>
</div>
</div>
</section>
</main>
<footer class="py-16 bg-slate-100 dark:bg-black relative z-10 transition-colors border-t border-slate-200 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 flex flex-col items-center justify-center text-center">
<h1 class="text-5xl md:text-9xl font-black text-slate-200 dark:text-white/10 tracking-tighter mb-8 select-none pointer-events-none uppercase">
MUBARIK
</h1>
<h1 class="text-sm md:text-lg font-bold text-brand-accent tracking-[0.5em] mb-8 select-none pointer-events-none uppercase">
STRATEGIST | INNOVATOR | BUILDER
</h1>
<div class="grid grid-cols-1 md:grid-cols-3 w-full gap-8 items-center border-t border-slate-300 dark:border-white/10 pt-8">
<div class="text-center md:text-left">
<p class="text-slate-500 text-sm font-medium">
© 2025 Mubarik Osman.<br>All rights reserved.
</p>
</div>
<div class="text-center w-full">
<p class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-4">info@hiigsitech.com</p>
<p class="text-xs font-bold uppercase tracking-widest text-slate-500">+252 63 3227084</p>
</div>
<div class="flex flex-col items-center md:items-end">
<p class="text-slate-500 text-sm">Designed <span class="text-red-500">with love</span></p>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ once: true, offset: 100, duration: 800 });
const htmlElement = document.documentElement;
function toggleTheme() {
htmlElement.classList.toggle('dark');
localStorage.theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
}
document.getElementById('theme-toggle-nav')?.addEventListener('click', toggleTheme);
document.getElementById('theme-toggle-mobile')?.addEventListener('click', toggleTheme);
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlElement.classList.add('dark');
}
/* --- Hacker Scramble Text Effect --- */
const textElement = document.getElementById('scramble-text');
const phrases = ["Software Engineer", "Flutter Expert", "Creative Strategist", "Python Developer"];
let phraseIndex = 0;
const randomChar = () => {
const chars = '!<>-_\\/[]{}—=+*^?#________';
return chars[Math.floor(Math.random() * chars.length)];
};
const setText = (newText) => {
const oldText = textElement.innerText;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => resolve);
let queue = [];
for (let i = 0; i < length; i++) {
const from = oldText[i] || '';
const to = newText[i] || '';
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
queue.push({ from, to, start, end });
}
cancelAnimationFrame(window.scrambleRequest);
let frame = 0;
const update = () => {
let output = '';
let complete = 0;
for (let i = 0, n = queue.length; i < n; i++) {
let { from, to, start, end, char } = queue[i];
if (frame >= end) {
complete++;
output += to;
} else if (frame >= start) {
if (!char || Math.random() < 0.28) {
char = randomChar();
queue[i].char = char;
}
output += `<span class="text-brand-accent/50">${char}</span>`;
} else {
output += from;
}
}
textElement.innerHTML = output;
if (complete === queue.length) {
setTimeout(nextPhrase, 2000);
} else {
window.scrambleRequest = requestAnimationFrame(update);
frame++;
}
};
update();
};
const nextPhrase = () => {
phraseIndex = (phraseIndex + 1) % phrases.length;
setText(phrases[phraseIndex]);
};
setTimeout(nextPhrase, 2000);
/* --- Badges --- */
const badges1 = [
{ icon: 'fa-brands fa-python text-yellow-500', title: 'Python', sub: 'Mastery' },
{ icon: 'fa-brands fa-figma text-pink-500', title: 'Figma', sub: 'Design' },
{ icon: 'fa-solid fa-database text-blue-500', title: 'SQL', sub: 'Data' }
];
const badges2 = [
{ icon: 'fa-brands fa-react text-blue-400', title: 'React', sub: 'Expert' },
{ icon: 'fa-brands fa-aws text-orange-400', title: 'AWS', sub: 'Cloud' },
{ icon: 'fa-solid fa-shield-halved text-green-500', title: 'Security', sub: 'Cyber' }
];
let badgeIndex = 0;
function updateBadges() {
const b1 = document.getElementById('hero-badge-1');
const b2 = document.getElementById('hero-badge-2');
if(b1 && b2) {
const item1 = badges1[badgeIndex % badges1.length];
const item2 = badges2[badgeIndex % badges2.length];
b1.innerHTML = `<i class="${item1.icon} text-2xl"></i><div><p class="text-xs font-bold uppercase text-slate-500">${item1.sub}</p><p class="text-sm font-bold text-slate-900 dark:text-white">${item1.title}</p></div>`;
b2.innerHTML = `<i class="${item2.icon} text-2xl"></i><div><p class="text-xs font-bold uppercase text-slate-500">${item2.sub}</p><p class="text-sm font-bold text-slate-900 dark:text-white">${item2.title}</p></div>`;
badgeIndex++;
}
}
setInterval(updateBadges, 3000);
updateBadges();
/* --- Cursor --- */
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
window.addEventListener('mousemove', (e) => {
const posX = e.clientX;
const posY = e.clientY;
cursorDot.style.left = `${posX}px`;
cursorDot.style.top = `${posY}px`;
cursorOutline.animate({
left: `${posX}px`,
top: `${posY}px`
}, { duration: 500, fill: "forwards" });
});
const hoverTargets = document.querySelectorAll('a, button, .hover-target');
hoverTargets.forEach(el => {
el.addEventListener('mouseenter', () => document.body.classList.add('hover-active'));
el.addEventListener('mouseleave', () => document.body.classList.remove('hover-active'));
});
/* --- Sticky Nav Shadow --- */
window.addEventListener('scroll', () => {
const nav = document.getElementById('navbar');
if (window.scrollY > 50) {
nav.classList.add('shadow-lg');
} else {
nav.classList.remove('shadow-lg');
}
});
/* --- Stats Counter Animation --- */
const counters = document.querySelectorAll('.counter');
const speed = 200;
const animateCounters = () => {
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / speed;
if (count < target) {
counter.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 20);
} else {
counter.innerText = target;
}
};
updateCount();
});
};
let counterSection = document.getElementById('counter-section');
let counterObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
animateCounters();
observer.unobserve(entry.target);
}
})
}, { threshold: 0.5 });
counterObserver.observe(counterSection);
/* --- Skills Filtering --- */
const filterBtns = document.querySelectorAll('.filter-btn');
const skills = document.querySelectorAll('.skill-tag');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class
filterBtns.forEach(b => {
b.classList.remove('bg-brand-accent', 'text-white', 'border-brand-accent');
b.classList.add('border-slate-200', 'dark:border-white/10');
});
// Add active class
btn.classList.add('bg-brand-accent', 'text-white', 'border-brand-accent');
btn.classList.remove('border-slate-200', 'dark:border-white/10');
const filterValue = btn.getAttribute('data-filter');
skills.forEach(skill => {
if (filterValue === 'all' || skill.getAttribute('data-category') === filterValue) {
skill.style.display = 'flex';
} else {
skill.style.display = 'none';
}
});
});
});
/* --- Github Heatmap Simulation --- */
const heatmapContainer = document.getElementById('heatmap');
if(heatmapContainer) {
// Generate 300 squares
for(let i=0; i<300; i++) {
const div = document.createElement('div');
div.classList.add('heatmap-cell');
// Randomly assign active classes
const rand = Math.random();
if(rand > 0.85) div.classList.add('active-1');
else if(rand > 0.92) div.classList.add('active-2');
else if(rand > 0.96) div.classList.add('active-3');
else if(rand > 0.98) div.classList.add('active-4');
heatmapContainer.appendChild(div);
}
}
/* --- Testimonial Carousel (2 Groups of 3) --- */
let currentGroup = 0;
const track = document.getElementById('testimonial-track');
const dots = document.querySelectorAll('.slider-dot');
function moveCarousel(index) {
currentGroup = index;
// 100% translation per group
track.style.transform = `translateX(-${currentGroup * 100}%)`;
// Update dots
dots.forEach(dot => {
dot.classList.remove('bg-brand-accent');
dot.classList.add('bg-slate-300', 'dark:bg-white/20');
});
dots[currentGroup].classList.remove('bg-slate-300', 'dark:bg-white/20');
dots[currentGroup].classList.add('bg-brand-accent');
}
// Auto Slide every 5 seconds
setInterval(() => {
currentGroup = (currentGroup + 1) % 2; // Toggle between 0 and 1
moveCarousel(currentGroup);
}, 5000);
// Init
moveCarousel(0);
/* --- Booking Modal Logic --- */
function toggleModal() {
const modal = document.getElementById('booking-modal');
const content = document.getElementById('modal-content');
if (modal.classList.contains('hidden')) {
// Open
modal.classList.remove('hidden');
// Small delay to allow display:block to apply before opacity transition
setTimeout(() => {
modal.classList.remove('opacity-0');
content.classList.remove('scale-95');
content.classList.add('scale-100');
}, 10);
} else {
// Close
modal.classList.add('opacity-0');
content.classList.remove('scale-100');
content.classList.add('scale-95');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
}
}
// Close modal when clicking outside
document.getElementById('booking-modal').addEventListener('click', function(e) {
if (e.target === this) {
toggleModal();
}
});
</script>
</body>
</html>