1<!DOCTYPE html><!--kY5nmS7cEL0zSbA1Ts9DG--><html lang="en" class="__variable_ed3508 __variable_646807 __variable_3c557b scroll-smooth dark"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"/><link rel="preload" href="/_next/static/media/636a5ac981f94f8b-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/bb3ef058b751a6ad-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/images/hero_weather_promo.png"/><link rel="stylesheet" href="/_next/static/css/1504d0721ddb1070.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-3582bbb415f3203d.js"/>
1<script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script>
1<script src="/_next/static/chunks/255-87552e6e05b8e3aa.js" async=""></script>
1<script src="/_next/static/chunks/main-app-cf09abcc00004be7.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-ac9b24dd3eef1645.js" async=""></script>
1<script src="/_next/static/chunks/485-ec78bbdc266cb781.js" async=""></script>
1<script src="/_next/static/chunks/app/template-0126e635985fc54a.js" async=""></script>
1<script src="/_next/static/chunks/3-47d0bb1049fb7489.js" async=""></script>
1<script src="/_next/static/chunks/551-9a1c568009c54913.js" async=""></script>
1<script src="/_next/static/chunks/app/not-found-e1bfa50270f27c6a.js" async=""></script>
1<script src="/_next/static/chunks/app/global-error-9cf872faad716065.js" async=""></script>
1<script src="/_next/static/chunks/app/page-0697807abbb07d52.js" async=""></script>
1<meta name="next-size-adjust" content=""/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#090a12"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8fafc"/><title>Subhan Haider</title><meta name="description" content="Personal portfolio and platform for Android apps, web experiences, open-source projects, and experiments by Subhan Haider."/><link rel="author" href="https://github.com/Subhan-Haider"/><meta name="author" content="Subhan Haider"/><meta name="keywords" content="Subhan Haider,Android Developer,Kotlin,Jetpack Compose,Next.js,React,Portfolio,Student Developer"/><meta name="robots" content="index, follow"/><meta property="og:title" content="Subhan Haider"/><meta property="og:description" content="Turning ideas into Android apps, websites, experiments, and digital experiences."/><meta property="og:url" content="https://subhan.tech"/><meta property="og:site_name" content="Subhan Haider Portfolio"/><meta property="og:locale" content="en_US"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Subhan Haider"/><meta name="twitter:description" content="Turning ideas into Android apps, websites, experiments, and digital experiences."/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon"/>
1<script> 2 try { 3 const saved = localStorage.getItem('theme'); 4 let theme = saved; 5 if (theme !== 'light' && theme !== 'dark') { 6 theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; 7 } 8 document.documentElement.classList.remove('light', 'dark'); 9 document.documentElement.classList.add(theme); 10 document.documentElement.setAttribute('data-theme', theme); 11 document.documentElement.style.colorScheme = theme; 12 } catch (e) {} 13 </script>
13<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
13</head><body class="bg-[var(--bg-main)] text-[var(--text-primary)] antialiased selection:bg-[#34d399]/25 selection:text-[#059669] dark:selection:text-[#34d399] font-sans transition-colors duration-300"><div hidden=""><!--$--><!--/$--></div><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gradient-to-b from-[#6366f1]/15 via-[#34d399]/8 to-transparent blur-3xl rounded-full opacity-70 dark:opacity-100"></div><div class="absolute top-[35%] -left-64 w-[600px] h-[600px] bg-[#6366f1]/10 blur-3xl rounded-full opacity-60 dark:opacity-100"></div><div class="absolute top-[65%] -right-64 w-[600px] h-[600px] bg-[#34d399]/8 blur-3xl rounded-full opacity-60 dark:opacity-100"></div></div><div class="relative z-10"><div style="opacity:0;transform:translateY(16px)"><main class="relative min-h-screen bg-[var(--bg-main)] text-[var(--text-primary)] transition-colors duration-300 overflow-hidden"><div aria-hidden="true" class="fixed inset-x-0 top-0 z-50 h-[2.5px] origin-left bg-gradient-to-r from-[#6366f1] via-[#38bdf8] to-[#34d399] shadow-[0_0_12px_rgba(52,211,153,0.6)]" style="transform:scaleX(0)"></div><header class="fixed z-40 top-3 sm:top-4 left-1/2 -translate-x-1/2 w-[calc(100%-1.25rem)] sm:w-[calc(100%-2rem)] max-w-6xl transition-all duration-300"><div class="flex h-14 sm:h-16 items-center justify-between rounded-full px-4 sm:px-6 md:px-7 transition-all duration-300 bg-[var(--header-bg)]/80 backdrop-blur-md border border-[var(--header-border)]"><a class="flex items-center gap-2 sm:gap-2.5 font-display text-base sm:text-lg font-bold tracking-tight text-[var(--text-primary)] group" href="/"><div class="w-7 h-7 sm:w-8 h-8 rounded-full bg-gradient-to-tr from-[#6366f1] to-[#34d399] p-[1px] flex items-center justify-center"><div class="w-full h-full bg-[var(--bg-surface)] rounded-full flex items-center justify-center text-xs font-mono font-bold text-[var(--accent-emerald)] group-hover:scale-110 transition-transform">S</div></div><span class="tracking-tighter">SUBHAN<span class="text-[var(--accent-emerald)]">.</span></span></a><nav class="hidden md:flex items-center gap-1 bg-black/[0.03] dark:bg-white/[0.03] px-3 py-1.5 rounded-full border border-black/5 dark:border-white/5 text-xs text-[var(--text-secondary)]"><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/">Home</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/#work">Work</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/#android">Android</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/#stack">Stack</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/#journey">Journey</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/resume">Resume</a><a class="px-3.5 py-1.5 rounded-full transition-all duration-200 hover:text-[var(--text-primary)] hover:bg-black/[0.05] dark:hover:bg-white/[0.08]" href="/contact">Contact</a></nav><div class="hidden md:flex items-center gap-3"><div class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center " aria-hidden="true"></div><a class="flex items-center gap-1.5 rounded-full bg-[var(--text-primary)] text-[var(--bg-main)] px-4 py-2 text-xs font-bold shadow-sm hover:opacity-90 hover:scale-[1.02] transition-all" href="/contact">Let's Connect <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div><div class="flex md:hidden items-center gap-2"><div class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center " aria-hidden="true"></div><button aria-label="Toggle menu" class="flex w-9 h-9 sm:w-10 sm:h-10 rounded-full items-center justify-center bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 text-[var(--text-primary)] min-w-[36px] min-h-[36px] active:scale-95 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button></div></div></header><section class="relative min-h-[90vh] pt-28 sm:pt-32 pb-16 sm:pb-20 px-4 sm:px-6 md:px-12 flex flex-col justify-center grid-pattern"><div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-[#6366f1]/10 rounded-full blur-[120px] pointer-events-none"></div><div class="absolute top-1/3 right-1/4 w-[450px] h-[450px] bg-[#34d399]/10 rounded-full blur-[120px] pointer-events-none"></div><div class="mx-auto max-w-7xl w-full grid gap-10 lg:gap-12 lg:grid-cols-[1.1fr_0.9fr]
13items-center"><div><h1 class="display-title text-3xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tight break-words" style="opacity:0;transform:translateY(35px)">I BUILD <br/><span class="gradient-text-mint">APPS, WEBSITES</span> <br/>& IDEAS<span class="text-[#34d399]">.</span></h1><p class="mt-6 max-w-xl text-base sm:text-xl text-[var(--text-secondary)] leading-relaxed" style="opacity:0;transform:translateY(25px)">Hi, I'm <span class="text-[var(--text-primary)] font-bold">Subhan Haider</span>. A high school student turning curiosity into functional Android applications, clean web experiences, and open-source experiments.</p><div class="mt-8 flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full sm:w-auto" style="opacity:0;transform:translateY(20px)"><a href="#work" class="flex items-center justify-center gap-2 rounded-full bg-slate-900 text-white dark:bg-gradient-to-r dark:from-white dark:via-[#f1f5f9] dark:to-[#e2e8f0] dark:text-[#090a12] px-6 py-3.5 text-sm font-bold shadow-md hover:scale-105 active:scale-98 transition-all text-center min-h-[44px]"><span>Explore My Work</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="flex items-center justify-center gap-2 rounded-full border border-[var(--border-medium)] bg-[var(--bg-surface)] px-6 py-3.5 text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-surface-elevated)] hover:border-[var(--border-active)] active:scale-98 transition-all text-center min-h-[44px] shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg><span>GitHub Profile</span></a><a class="flex items-center justify-center gap-2 rounded-full border border-[var(--border-medium)] bg-[var(--bg-surface)] px-5 py-3.5 text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-surface-elevated)] hover:border-[var(--border-active)] active:scale-98 transition-all text-center min-h-[44px] shadow-sm" href="/resume"><span>Resume</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div><div class="mt-10 sm:mt-12 grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 pt-8 border-t border-[var(--border-subtle)]" style="opacity:0;transform:translateY(20px)"></div></div><div class="relative lg:h-[480px] flex items-center justify-center w-full my-4 lg:my-0" style="opacity:0;transform:translateY(30px) scale(0.92)"><div class="relative flex flex-col items-center justify-center group"><div class="relative mx-auto w-full max-w-[200px] sm:max-w-[240px] md:max-w-[260px] aspect-[460/1024] rounded-2xl bg-[var(--bg-surface-elevated)] shadow-[0_20px_50px_rgba(0,0,0,0.85)] border border-white/10 overflow-hidden flex flex-col justify-between"><button aria-label="Previous screenshot" class="absolute left-2 top-1/2 -translate-y-1/2 z-30 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-black/60 border border-white/20 text-white flex items-center justify-center backdrop-blur-md opacity-90 sm:opacity-0 sm:group-hover:opacity-100 hover:bg-[#34d399] hover:text-[#090a12] active:scale-95 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"></path></svg></button><button aria-label="Next screenshot" class="absolute right-2 top-1/2 -translate-y-1/2 z-30 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-black/60 border border-white/20 text-white flex items-center justify-center backdrop-blur-md opacity-90 sm:opacity-0 sm:group-hover:opacity-100 hover:bg-[#34d399] hover:text-[#090a12] active:scale-95 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></button><div class="relative w-full h-full overflow-hidden"><img src="/images/hero_weather_promo.png" alt="Real-Time Updates" class="w-full h-full object-cover object-top transition-opacity duration-300 select-none pointer-events-none"/><div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/[0.03] to-transparent pointer-events-none"></div></div></div><div class="mt-4 flex items-center gap-1.5"><button aria-label="Slide 1" class="rounded-full transition-all w-5 h-1.5 bg-[#34d399] shadow-[0_0_8px_rgba(52,211,153,0.6)]"></button><button aria-label="Slide 2" class="rounded-full transition-all w-1.5 h-1.5 bg-white/25 hover:bg-white/45"></button><button aria-label="Slide 3" class="rounded-full transition-all w-1.5 h-1.5 bg-white/25 hover:bg-white/45"></button><button aria-label="Slide 4" class="rounded-full transition-all w-1.5 h-1.5 bg-white/25 hover:bg-white/45"></button><button aria-label="Slide 5" class="rounded-full transition-all w-1.5 h-1.5 bg-white/25 hover:bg-white/45"></button></div></div></div></div><div class="hidden md:flex absolute bottom-6 left-1/2 -translate-x-1/2 items-center gap-2 text-xs font-mono text-[#64748b] tracking-wider animate-bounce"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg><span>SCROLL TO EXPLORE</span></div></section><section class="relative border-y border-[var(--border-subtle)] bg-[var(--bg-surface-elevated)] px-6 py-24 md:px-12"><div class="mx-auto max-w-6xl"><div class="" style="opacity:0;transform:translateX(-45px)"><h2 class="display-title mt-4 text-4xl sm:text-6xl lg:text-7xl font-extrabold text-[var(--text-primary)]">I LEARN BEST <br/><span class="gradient-text-mint">BY BUILDING REAL THINGS.</span></h2><p class="mt-6 max-w-2xl text-lg text-[var(--text-secondary)] leading-relaxed">Instead of getting stuck in endless tutorial loops, I learn by building actual applications. Every project is an opportunity to explore software architecture, database design, animations, and real-world problem solving.</p></div><div class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"><div class="" style="opacity:0;transform:translateY(45px) scale(0.94)"><div class="h-full rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 backdrop-blur-sm shadow-sm dark:shadow-none hover:border-[var(--accent-emerald)]/50 transition-all group"><div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-[#34d399] flex items-center justify-center mb-5 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></div><h3 class="font-display text-lg font-bold text-[var(--text-primary)]">Android Native</h3><p class="mt-2 text-sm text-[var(--text-secondary)] leading-relaxed">Crafting native Android experiences with Kotlin, Jetpack Compose, Room, and modern MVVM patterns.</p></div></div><div class="" style="opacity:0;transform:translateY(45px) scale(0.94)"><div class="h-full rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 backdrop-blur-sm shadow-sm dark:shadow-none hover:border-[var(--accent-indigo)]/50 transition-all group"><div class="w-10 h-10 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-[#818cf8] flex items-center justify-center mb-5 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg></div><h3 class="font-display text-lg font-bold text-[var(--text-primary)]">Modern Web</h3><p class="mt-2 text-sm text-[var(--text-secondary)] leading-relaxed">Building responsive, high-performance web applications using React, Next.js, and TypeScript.</p></div></div><div class="" style="opacity:0;transform:translateY(45px) scale(0.94)"><div class="h-full rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 backdrop-blur-sm shadow-sm dark:shadow-none hover:border-[var(--accent-sky)]/50 transition-all group"><div class="w-10 h-10 rounded-xl bg-sky-500/10 text-sky-600 dark:text-[#38bdf8] flex items-center justify-center mb-5 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></div><h3 class="font-display text-lg font-bold text-[var(--text-primary)]">Offline & Private</h3><p class="mt-2 text-sm text-[var(--text-secondary)] leading-relaxed">Designing offline-first systems where user data stays private, encrypted, and accessible at lightspeed.</p></div></div><div class="" style="opacity:0;transform:translateY(45px) scale(0.94)"><div class="h-full rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 backdrop-blur-sm shadow-sm dark:shadow-none hover:border-pink-500/50 transition-all group"><div class="w-10 h-10 rounded-xl bg-pink-500/10 text-pink-600 dark:text-[#ec4899] flex items-center justify-center mb-5 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"></path><circle cx="13" cy="12" r="2"></circle><path d="M18 19c-2.8 0-5-2.2-5-5v8"></path><circle cx="20" cy="19" r="2"></circle></svg></div><h3 class="font-display text-lg font-bold text-[var(--text-primary)]">Open Source</h3><p class="mt-2 text-sm text-[var(--text-secondary)] leading-relaxed">
13Sharing templates, modules, and code publicly on GitHub to support and collaborate with the developer community.</p></div></div></div></div></section><section id="work" class="relative px-6 py-28 md:px-12"><div class="mx-auto max-w-7xl"><div class="" style="opacity:0;transform:translateX(45px)"><div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-12 border-b border-[var(--border-subtle)]"><div><h2 class="display-title mt-4 text-4xl sm:text-6xl font-extrabold text-[var(--text-primary)]">SELECTED WORK<span class="text-[#34d399]">.</span></h2></div><a class="flex items-center gap-1.5 text-sm font-mono text-emerald-600 dark:text-[#34d399] hover:underline font-medium" href="/projects"><span>View Full Project Archive</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div><div class="mt-12 space-y-8"></div></div></section><section id="android" class="relative border-y border-[var(--border-subtle)] bg-[var(--bg-surface-elevated)] px-6 py-28 md:px-12 overflow-hidden"><div class="absolute -right-32 top-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[#34d399]/10 rounded-full blur-[140px] pointer-events-none"></div><div class="mx-auto max-w-7xl grid gap-12 lg:grid-cols-[1fr_1.1fr] items-center"><div class="" style="opacity:0;transform:translateX(-45px)"><h2 class="display-title mt-4 text-4xl sm:text-6xl font-extrabold text-[var(--text-primary)]">BUILT FOR <br/><span class="gradient-text-mint">THE ANDROID OS.</span></h2><p class="mt-6 text-lg text-[var(--text-secondary)] leading-relaxed">Android development is where my passion for software engineering truly began. I focus on creating fluid, native applications leveraging the full power of modern Android toolchains.</p><div class="mt-8 space-y-4"><div class="flex items-start gap-3.5"><div class="mt-1 w-5 h-5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-[#34d399] flex items-center justify-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div><div><h4 class="text-sm font-bold text-[var(--text-primary)]">Declarative UI with Jetpack Compose</h4><p class="text-xs text-[var(--text-secondary)] mt-0.5">100% reactive state management, seamless dark/light Material 3 theming, and hardware-accelerated animations.</p></div></div><div class="flex items-start gap-3.5"><div class="mt-1 w-5 h-5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-[#34d399] flex items-center justify-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div><div><h4 class="text-sm font-bold text-[var(--text-primary)]">Clean Architecture & MVVM</h4><p class="text-xs text-[var(--text-secondary)] mt-0.5">Separation of concerns across UI layer, domain use cases, and repository data sources with Kotlin Flows.</p></div></div><div class="flex items-start gap-3.5"><div class="mt-1 w-5 h-5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-[#34d399] flex items-center justify-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div><div><h4 class="text-sm font-bold text-[var(--text-primary)]">Offline-First Room SQLite Database</h4><p class="text-xs text-[var(--text-secondary)] mt-0.5">Fast, secure, on-device data persistence ensuring zero network latency and complete user privacy.</p></div></div></div><div class="mt-10"><a href="https://tester.subhan.tech/" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-700 text-white dark:bg-[#34d399] dark:text-[#090a12] dark:hover:bg-[#6ee7b7] px-6 py-3 text-xs font-bold shadow-lg hover:scale-105 transition-all"><span>Visit Android Tester Hub</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div><div class="" style="opacity:0;transform:translateX(45px)"><div class="rounded-3xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 sm:p-8 backdrop-blur-xl shadow-lg dark:shadow-2xl font-mono"><div class="flex items-center justify-between pb-4 mb-4 border-b border-[var(--border-subtle)] text-xs"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal text-emerald-600 dark:text-[#34d399]"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg><span class="text-[var(--text-primary)] font-bold">DailyFinanceViewModel.kt</span></div><span class="text-[var(--text-muted)]">Kotlin 2.0</span></div><div class="space-y-1.5 text-xs text-[var(--text-secondary)] leading-relaxed overflow-x-auto"><p><span class="text-indigo-600 dark:text-[#818cf8] font-bold">class</span> <span class="text-sky-600 dark:text-[#38bdf8] font-bold">FinanceViewModel</span>(</p><p class="pl-4"><span class="text-indigo-600 dark:text-[#818cf8] font-bold">private val</span> repository: FinanceRepository</p><p>) : ViewModel() {</p><p class="pl-4 text-[var(--text-muted)]">// Reactive UI state stream</p><p class="pl-4"><span class="text-indigo-600 dark:text-[#818cf8] font-bold">val</span> uiState: StateFlow<FinanceUiState> =</p><p class="pl-8">repository.observeTransactions()</p><p class="pl-8">.map { list -> FinanceUiState.Success(list) }</p><p class="pl-8">
13.stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), Loading)</p><p class="mt-2 pl-4"><span class="text-indigo-600 dark:text-[#818cf8] font-bold">fun</span> <span class="text-emerald-600 dark:text-[#34d399] font-bold">addTransaction</span>(entry: Transaction) =</p><p class="pl-8">viewModelScope.launch(Dispatchers.IO) {</p><p class="pl-12">repository.insert(entry)</p><p class="pl-8">}</p><p>}</p></div><div class="mt-6 pt-4 border-t border-[var(--border-subtle)] flex items-center justify-between text-xs text-[var(--text-muted)]"><span>â Verified Type Safe</span><span class="text-emerald-600 dark:text-[#34d399] font-medium">60 FPS Compose Rendering</span></div></div></div></div></section><section id="stack" class="px-6 py-28 md:px-12"><div class="mx-auto max-w-7xl"><div class="" style="opacity:0;transform:translateY(-45px)"><div class="text-center max-w-3xl mx-auto"><h2 class="display-title mt-4 text-4xl sm:text-6xl font-extrabold text-white">TOOLS I USE <br/><span class="gradient-text-mint">TO BRING IDEAS TO LIFE.</span></h2><p class="mt-4 text-base text-[#94a3b8]">A versatile stack covering native mobile programming, modern web frameworks, databases, and design.</p></div></div><div class="mt-14 overflow-hidden border-y border-white/[0.08] py-4 bg-white/[0.01]"><div class="marquee-track flex gap-3"></div></div><div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"></div></div></section><section class="border-t border-[var(--border-subtle)] bg-[var(--bg-surface-elevated)] px-6 py-24 md:px-12"><div class="mx-auto max-w-7xl"><div class="" style="opacity:0;transform:translateX(-45px)"><div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-10 border-b border-[var(--border-subtle)]"><div><h2 class="display-title mt-4 text-3xl sm:text-5xl font-extrabold text-[var(--text-primary)]">FEATURED EXTENSIONS<span class="text-emerald-600 dark:text-[#34d399]">.</span></h2><p class="mt-4 max-w-lg text-base text-[var(--text-secondary)] leading-relaxed">Cross-browser tools and apps published on the Chrome Web Store, Edge Add-ons, Firefox AMO, and Microsoft Store.</p></div><a href="https://chromewebstore.google.com/u/0/search/Subhan%20Haider" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 text-xs font-mono text-emerald-600 dark:text-[#34d399] hover:underline whitespace-nowrap font-medium"><span>View on Chrome Store</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div><div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div></div></section><section class="border-t border-[var(--border-subtle)] bg-[var(--bg-surface)] px-6 py-24 md:px-12"><div class="mx-auto max-w-7xl"><div class="" style="opacity:0;transform:translateX(45px)"><div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-10 border-b border-[var(--border-subtle)]"><div><h2 class="display-title mt-4 text-3xl sm:text-5xl font-extrabold text-[var(--text-primary)]">LIVE GITHUB ACTIVITY<span class="text-emerald-600 dark:text-[#34d399]">.</span></h2></div><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 text-xs font-mono text-emerald-600 dark:text-[#34d399] hover:underline font-medium"><span>github.com/Subhan-Haider</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div><div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"><div class="" style="opacity:0;transform:translateY(45px)"><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="group flex h-full flex-col justify-between rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-5 backdrop-blur-md hover:border-[var(--border-active)] hover:shadow-md shadow-sm dark:shadow-none transition-all"><div><div class="flex items-center justify-between text-[#64748b]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
13ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"></path><circle cx="13" cy="12" r="2"></circle><path d="M18 19c-2.8 0-5-2.2-5-5v8"></path><circle cx="20" cy="19" r="2"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><h4 class="mt-3 font-display font-bold text-[var(--text-primary)] text-base">Daily-Finance-Android</h4><p class="mt-2 text-xs text-[var(--text-secondary)] leading-relaxed">Native Jetpack Compose finance manager.</p></div><div class="mt-6 flex items-center justify-between pt-4 border-t border-[var(--border-subtle)] text-[11px] font-mono text-[#64748b]"><span class="text-emerald-600 dark:text-[#34d399] font-medium">Kotlin</span><span>Open Source</span></div></a></div><div class="" style="opacity:0;transform:translateY(45px)"><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="group flex h-full flex-col justify-between rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-5 backdrop-blur-md hover:border-[var(--border-active)] hover:shadow-md shadow-sm dark:shadow-none transition-all"><div><div class="flex items-center justify-between text-[#64748b]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"></path><circle cx="13" cy="12" r="2"></circle><path d="M18 19c-2.8 0-5-2.2-5-5v8"></path><circle cx="20" cy="19" r="2"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><h4 class="mt-3 font-display font-bold text-[var(--text-primary)] text-base">app-tester-platform</h4><p class="mt-2 text-xs text-[var(--text-secondary)] leading-relaxed">Web platform for Android APK distribution.</p></div><div class="mt-6 flex items-center justify-between pt-4 border-t border-[var(--border-subtle)] text-[11px] font-mono text-[#64748b]"><span class="text-emerald-600 dark:text-[#34d399] font-medium">TypeScript</span><span>Open Source</span></div></a></div><div class="" style="opacity:0;transform:translateY(45px)"><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="group flex h-full flex-col justify-between rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-5 backdrop-blur-md hover:border-[var(--border-active)] hover:shadow-md shadow-sm dark:shadow-none transition-all"><div><div class="flex items-center justify-between text-[#64748b]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"></path><circle cx="13" cy="12" r="2"></circle><path d="M18 19c-2.8 0-5-2.2-5-5v8"></path><circle cx="20" cy="19" r="2"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><h4 class="mt-3 font-display font-bold text-[var(--text-primary)] text-base">android-compose-canvas</h4><p class="mt-2 text-xs text-[var(--text-secondary)] leading-relaxed">Custom reactive graphing components.</p></div><div class="mt-6 flex items-center justify-between pt-4 border-t border-[var(--border-subtle)] text-[11px] font-mono text-[#64748b]"><span class="text-emerald-600 dark:text-[#34d399] font-medium">Kotlin</span><span>Open Source</span></div></a></div><div class="" style="opacity:0;transform:translateY(45px)"><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="group flex h-full flex-col justify-between rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-5 backdrop-blur-md hover:border-[var(--border-active)] hover:shadow-md shadow-sm dark:shadow-none transition-all"><div><div class="flex items-center justify-between text-[#64748b]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
13ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"></path><circle cx="13" cy="12" r="2"></circle><path d="M18 19c-2.8 0-5-2.2-5-5v8"></path><circle cx="20" cy="19" r="2"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><h4 class="mt-3 font-display font-bold text-[var(--text-primary)] text-base">subhan-portfolio</h4><p class="mt-2 text-xs text-[var(--text-secondary)] leading-relaxed">Next.js 15 personal developer platform.</p></div><div class="mt-6 flex items-center justify-between pt-4 border-t border-[var(--border-subtle)] text-[11px] font-mono text-[#64748b]"><span class="text-emerald-600 dark:text-[#34d399] font-medium">TypeScript</span><span>Open Source</span></div></a></div></div></div></section><section id="journey" class="border-t border-white/[0.08] bg-[var(--bg-surface-elevated)] px-6 py-28 md:px-12"><div class="mx-auto max-w-5xl"><div class="" style="opacity:0;transform:translateY(-45px)"><div class="text-center max-w-2xl mx-auto mb-16"><h2 class="display-title mt-4 text-4xl sm:text-6xl font-extrabold text-white">THE JOURNEY SO FAR<span class="text-[#34d399]">.</span></h2><p class="mt-4 text-base text-[#94a3b8]">From early curiosity in high school to building full-fledged mobile and web products.</p></div></div><div class="relative pl-6 sm:pl-8 border-l border-white/10 space-y-12"></div></div></section><section class="px-6 py-24 md:px-12 relative overflow-hidden"><div class="mx-auto max-w-7xl"><div class="relative rounded-3xl border border-[var(--border-subtle)] bg-gradient-to-br from-emerald-50/60 via-[var(--bg-surface)] to-indigo-50/60 dark:from-[#171b33] dark:via-[#0f111e] dark:to-[#122320] p-8 sm:p-14 backdrop-blur-2xl shadow-xl dark:shadow-2xl overflow-hidden"><div class="absolute top-0 right-0 w-80 h-80 bg-[#34d399]/15 blur-3xl rounded-full pointer-events-none"></div><div class="absolute bottom-0 left-0 w-80 h-80 bg-[#6366f1]/15 blur-3xl rounded-full pointer-events-none"></div><div class="relative z-10 grid gap-10 lg:grid-cols-[1.3fr_0.7fr] items-center"><div><h2 class="display-title mt-4 text-4xl sm:text-6xl font-extrabold text-[var(--text-primary)]">LET'S BUILD <br/><span class="gradient-text-mint">SOMETHING IMPACTFUL.</span></h2><p class="mt-5 text-base sm:text-lg text-[var(--text-secondary)] max-w-xl leading-relaxed">Whether you have an idea for an Android app, want to collaborate on open-source projects, or simply want to connect, my inbox is always open.</p><div class="mt-8 flex flex-col sm:flex-row items-stretch sm:items-center gap-3.5 w-full sm:w-auto"><a class="flex items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-700 text-white dark:bg-[#34d399] dark:text-[#090a12] dark:hover:bg-[#6ee7b7] px-6 py-3.5 text-sm font-bold shadow-lg hover:scale-105 active:scale-98 transition-all text-center min-h-[44px]" href="/contact"><span>Get in Touch</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a><a class="flex items-center justify-center gap-2 rounded-full border border-[var(--border-medium)] bg-[var(--bg-surface)] px-6 py-3.5 text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-surface-elevated)] active:scale-98 transition-all text-center min-h-[44px] shadow-sm" href="/resume"><span>View Complete Resume</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div><div class="rounded-2xl border border-[var(--border-subtle)] bg-[var(--bg-surface)] dark:bg-[var(--bg-surface-elevated)] p-6 backdrop-blur-xl shadow-md dark:shadow-none"><div class="text-xs font-mono text-[var(--text-muted)] uppercase tracking-wider">Quick Info</div><div class="mt-4 space-y-3 text-sm"><div><span class="text-[var(--text-muted)] block text-xs">
13Role</span><span class="text-[var(--text-primary)] font-medium">Student & Software Developer</span></div><div><span class="text-[var(--text-muted)] block text-xs">Core Focus</span><span class="text-emerald-600 dark:text-[#34d399] font-medium">Android (Kotlin/Compose) & Web</span></div><div><span class="text-[var(--text-muted)] block text-xs">Profiles</span><div class="mt-1 flex gap-3 text-xs text-[var(--text-secondary)]"><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="hover:text-emerald-600 dark:hover:text-[#34d399] underline flex items-center gap-1 font-medium">GitHub <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a><a href="https://tester.subhan.tech/" target="_blank" rel="noreferrer" class="hover:text-emerald-600 dark:hover:text-[#34d399] underline flex items-center gap-1 font-medium">App Tester <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
13ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></div></div></div></div></div></div></section><footer class="relative border-t border-[var(--border-subtle)] bg-[var(--bg-surface-elevated)] px-5 sm:px-6 pt-20 pb-12 md:px-12 overflow-hidden transition-colors duration-300"><div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-[#6366f1]/5 blur-3xl pointer-events-none rounded-full"></div><div class="mx-auto max-w-7xl relative z-10"><div class="grid gap-12 lg:grid-cols-[1.4fr_1fr] items-start pb-16 border-b border-[var(--border-subtle)]"><div><div class="font-display text-4xl sm:text-7xl lg:text-8xl font-black tracking-tighter text-[var(--text-primary)] mt-2 break-words">SUBHAN<span class="text-[var(--accent-emerald)]">.</span></div><p class="mt-5 max-w-md text-sm sm:text-base leading-relaxed text-[var(--text-secondary)]">High school student, Android developer, and builder passionate about creating clean, functional software and learning through hands-on development.</p></div><div class="grid grid-cols-2 sm:grid-cols-3 gap-6 sm:gap-8"><div><p class="font-mono text-xs text-[var(--text-muted)] uppercase tracking-wider mb-4">Navigation</p><ul class="space-y-2.5 text-sm text-[var(--text-secondary)]"><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/">Home</a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/projects">All Projects</a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/resume">Resume</a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/contact">Contact</a></li></ul></div><div><p class="font-mono text-xs text-[var(--text-muted)] uppercase tracking-wider mb-4">Projects</p><ul class="space-y-2.5 text-sm text-[var(--text-secondary)]"><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/projects/daily-finance">Daily Finance</a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/projects/app-tester">App Tester</a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/projects/open-source">Open Source</a></li></ul></div><div><p class="font-mono text-xs text-[var(--text-muted)] uppercase tracking-wider mb-4">Connect</p><ul class="space-y-2.5 text-sm text-[var(--text-secondary)]"><li><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 hover:text-[var(--accent-emerald)] transition-colors">GitHub <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></li><li><a href="https://www.linkedin.com/in/subhan-haider" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 hover:text-[var(--accent-emerald)] transition-colors">LinkedIn <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></li><li><a href="https://discord.gg/MmRfqXqvC2" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 hover:text-[var(--accent-emerald)] transition-colors">Discord Server <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></li><li><a href="https://www.instagram.com/subhan_haid" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 hover:text-[var(--accent-emerald)] transition-colors">Instagram <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></li><li><a class="hover:text-[var(--accent-emerald)] transition-colors" href="/contact">Send Message</a></li></ul></div></div></div><div class="mt-10 pt-8 border-t border-[var(--border-subtle)]"><p class="font-mono text-xs text-[var(--text-muted)] uppercase tracking-wider mb-5 text-center">Find me everywhere</p><div class="flex flex-wrap items-center justify-center gap-3"><a href="https://subhan.tech" target="_blank" rel="noreferrer" aria-label="Portfolio" title="Portfolio" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span>Portfolio</span></a><a href="https://github.com/Subhan-Haider" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></span><span>GitHub</span></a><a href="https://www.linkedin.com/in/subhan-haider" target="_blank" rel="noreferrer" aria-label="LinkedIn" title="LinkedIn" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle></svg></span><span>LinkedIn</span></a><a href="https://discordapp.com/users/subhan_haid" target="_blank" rel="noreferrer" aria-label="Discord" title="Discord" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18
131.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"></path></svg></span><span>Discord</span></a><a href="https://discord.gg/MmRfqXqvC2" target="_blank" rel="noreferrer" aria-label="Discord Server" title="Discord Server" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"></path></svg></span><span>Discord Server</span></a><a href="https://www.instagram.com/subhan_haid" target="_blank" rel="noreferrer" aria-label="Instagram" title="Instagram" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"></path></svg></span><span>Instagram</span></a><a href="https://www.tiktok.com/@s.subhan.haider" target="_blank" rel="noreferrer" aria-label="TikTok" title="TikTok" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.22 8.22 0 004.81 1.55V6.79a4.85 4.85 0 01-1.04-.1z"></path></svg></span><span>TikTok</span></a><a href="https://x.com/Subhan_haide" target="_blank" rel="noreferrer" aria-label="X / Twitter" title="X / Twitter" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.23
131H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></span><span>X / Twitter</span></a><a href="https://www.youtube.com/@ImgConvertPro" target="_blank" rel="noreferrer" aria-label="YouTube" title="YouTube" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg></span><span>YouTube</span></a><a href="https://paypal.me/Subhanhaide" target="_blank" rel="noreferrer" aria-label="PayPal" title="PayPal" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 01-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 00-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 00-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 00.554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 01.923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"></path></svg></span><span>PayPal</span></a><a href="/cdn-cgi/l/email-protection#583b37362c393b2c182b2d3a303936762c3d3b30" rel="noreferrer" aria-label="Email" title="Email" class="group flex items-center gap-2 px-3.5 py-2 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--border-medium)] hover:text-[var(--text-primary)] hover:shadow-sm transition-all text-xs font-mono"><span class="transition-colors" style="color:inherit"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>Email</span></a></div></div><div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between text-xs text-[var(--text-muted)]"><span>© <!-- -->2026<!-- --> Subhan Haider. All rights reserved.</span>
13<button class="self-start sm:self-auto flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--bg-surface)] border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-medium)] transition-all"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></footer></main><!--$--><!--/$--></div></div>
vendor: 108 bytes, line 13
13<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
13<script src="/_next/static/chunks/webpack-3582bbb415f3203d.js" id="_R_" async=""></script>
13<script>(self.__next_f=self.__next_f||[]).push([0])</script>
13<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1901,[\"177\",\"static/chunks/app/layout-ac9b24dd3eef1645.js\"],\"ThemeProvider\"]\n3:I[9766,[],\"\"]\n4:I[5833,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"397\",\"static/chunks/app/template-0126e635985fc54a.js\"],\"default\"]\n5:I[8924,[],\"\"]\n6:I[4551,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"3\",\"static/chunks/3-47d0bb1049fb7489.js\",\"551\",\"static/chunks/551-9a1c568009c54913.js\",\"345\",\"static/chunks/app/not-found-e1bfa50270f27c6a.js\"],\"Nav\"]\n7:I[4551,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"3\",\"static/chunks/3-47d0bb1049fb7489.js\",\"551\",\"static/chunks/551-9a1c568009c54913.js\",\"345\",\"static/chunks/app/not-found-e1bfa50270f27c6a.js\"],\"GlowBadge\"]\n8:I[2619,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"3\",\"static/chunks/3-47d0bb1049fb7489.js\",\"551\",\"static/chunks/551-9a1c568009c54913.js\",\"345\",\"static/chunks/app/not-found-e1bfa50270f27c6a.js\"],\"\"]\ne:I[441,[\"219\",\"static/chunks/app/global-error-9cf872faad716065.js\"],\"default\"]\n:HL[\"/_next/static/media/636a5ac981f94f8b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/bb3ef058b751a6ad-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/1504d0721ddb1070.css\",\"style\"]\n"])</script>
13<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"kY5nmS7cEL0zSbA1Ts9DG\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1504d0721ddb1070.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"__variable_ed3508 __variable_646807 __variable_3c557b scroll-smooth dark\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n try {\\n const saved = localStorage.getItem('theme');\\n let theme = saved;\\n if (theme !== 'light' \u0026\u0026 theme !== 'dark') {\\n theme = window.matchMedia \u0026\u0026 window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';\\n }\\n document.documentElement.classList.remove('light', 'dark');\\n document.documentElement.classList.add(theme);\\n document.documentElement.setAttribute('data-theme', theme);\\n document.documentElement.style.colorScheme = theme;\\n } catch (e) {}\\n \"}}]}],[\"$\",\"body\",null,{\"className\":\"bg-[var(--bg-main)] text-[var(--text-primary)] antialiased selection:bg-[#34d399]/25 selection:text-[#059669] dark:selection:text-[#34d399] font-sans transition-colors duration-300\",\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-0 pointer-events-none z-0 overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gradient-to-b from-[#6366f1]/15 via-[#34d399]/8 to-transparent blur-3xl rounded-full opacity-70 dark:opacity-100\"}],[\"$\",\"div\",null,{\"className\":\"absolute top-[35%] -left-64 w-[600px] h-[600px] bg-[#6366f1]/10 blur-3xl rounded-full opacity-60 dark:opacity-100\"}],[\"$\",\"div\",null,{\"className\":\"absolute top-[65%] -right-64 w-[600px] h-[600px] bg-[#34d399]/8 blur-3xl rounded-full opacity-60 dark:opacity-100\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative z-10\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{}]}],\"templateStyles\":[],\"templateScripts\":[],\"notFound\":[[\"$\",\"main\",null,{\"className\":\"relative min-h-screen bg-[var(--bg-surface)] text-[#f8fafc] overflow-hidden flex flex-col\",\"children\":[[\"$\",\"$L6\",null,{}],[\"$\",\"section\",null,{\"className\":\"relative flex-1 flex flex-col items-center justify-center px-6 py-40 text-center z-10 grid-pattern\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px] bg-[#34d399]/10 rounded-full blur-[140px] pointer-events-none\"}],[\"$\",\"$L7\",null,{\"variant\":\"emerald\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":14,\"height\":14,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-triangle-alert mr-1\",\"children\":[[\"$\",\"path\",\"wmoenq\",{\"d\":\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"}],[\"$\",\"path\",\"juzpu7\",{\"d\":\"M12 9v4\"}],[\"$\",\"path\",\"p32p05\",{\"d\":\"M12 17h.01\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"PAGE NOT FOUND\"}]]}],[\"$\",\"h1\",null,{\"className\":\"display-title mt-8 text-7xl sm:text-9xl font-extrabold text-white\",\"children\":[\"$\",\"span\",null,{\"className\":\"gradient-text-mint\",\"children\":\"404\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-6 text-lg sm:text-xl text-[#94a3b8] max-w-lg mx-auto leading-relaxed\",\"children\":\"The page you're looking for seems to have drifted into the digital void. Let's get you back to familiar territory.\"}],[\"$\",\"div\",null,{\"className\":\"mt-10\",\"children\":[\"$\",\"$L8\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center gap-2 rounded-full bg-[#34d399] px-8 py-4 text-sm font-bold text-[#090a12] shadow-[0_0_30px_rgba(52,211,153,0.3)] hover:bg-[#6ee7b7] transition-all hover:-translate-y-1\",\"children\":[\"$L9\",\"$La\"]}]}]]}],\"$Lb\"]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]]}]]}],{\"children\":[\"__PAGE__\",\"$Lc\",{}
13,null,false]},null,false],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"s\":false,\"S\":true}\n"])</script>
13<script>self.__next_f.push([1,"f:I[4551,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"3\",\"static/chunks/3-47d0bb1049fb7489.js\",\"551\",\"static/chunks/551-9a1c568009c54913.js\",\"345\",\"static/chunks/app/not-found-e1bfa50270f27c6a.js\"],\"Footer\"]\n10:I[1959,[],\"ClientPageRoot\"]\n11:I[6612,[\"485\",\"static/chunks/485-ec78bbdc266cb781.js\",\"3\",\"static/chunks/3-47d0bb1049fb7489.js\",\"551\",\"static/chunks/551-9a1c568009c54913.js\",\"974\",\"static/chunks/app/page-0697807abbb07d52.js\"],\"default\"]\n14:I[4431,[],\"OutletBoundary\"]\n16:I[5278,[],\"AsyncMetadataOutlet\"]\n18:I[4431,[],\"ViewportBoundary\"]\n1a:I[4431,[],\"MetadataBoundary\"]\n1b:\"$Sreact.suspense\"\n9:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":16,\"height\":16,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-left\",\"children\":[[\"$\",\"path\",\"1l729n\",{\"d\":\"m12 19-7-7 7-7\"}],[\"$\",\"path\",\"x3x0zl\",{\"d\":\"M19 12H5\"}],\"$undefined\"]}]\na:[\"$\",\"span\",null,{\"children\":\"Return to Base\"}]\nb:[\"$\",\"$Lf\",null,{}]\nc:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L10\",null,{\"Component\":\"$11\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@12\",\"$@13\"]}],null,[\"$\",\"$L14\",null,{\"children\":[\"$L15\",[\"$\",\"$L16\",null,{\"promise\":\"$@17\"}]]}]]}]\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L18\",null,{\"children\":\"$L19\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L1a\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$1b\",null,{\"fallback\":null,\"children\":\"$L1c\"}]}]}]]}]\n"])</script>
13<script>self.__next_f.push([1,"12:{}\n13:\"$c:props:children:0:props:params\"\n"])</script>
13<script>self.__next_f.push([1,"19:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#090a12\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#f8fafc\"}]]\n15:null\n"])</script>
13<script>self.__next_f.push([1,"1d:I[622,[],\"IconMark\"]\n"])</script>
13<script>self.__next_f.push([1,"17:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Subhan Haider\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Personal portfolio and platform for Android apps, web experiences, open-source projects, and experiments by Subhan Haider.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://github.com/Subhan-Haider\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Subhan Haider\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Subhan Haider,Android Developer,Kotlin,Jetpack Compose,Next.js,React,Portfolio,Student Developer\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Subhan Haider\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Turning ideas into Android apps, websites, experiments, and digital experiences.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://subhan.tech\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"Subhan Haider Portfolio\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:title\",\"content\":\"Subhan Haider\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:description\",\"content\":\"Turning ideas into Android apps, websites, experiments, and digital experiences.\"}],[\"$\",\"link\",\"15\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"16\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon\"}],[\"$\",\"$L1d\",\"17\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
13<script>self.__next_f.push([1,"1c:\"$17:metadata\"\n"])</script>
13<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"08917fd007d84cadbe550211aa697dd7","r":1,"spa":2}' crossorigin="anonymous"></script>
13 14</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.