1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 4-5
4 5<script async src="https://www.googletagmanager.com/gtag/js?id=
5G-2CHFGRLTJ7
vendor: 13 bytes, line 5
5"></script>
6<script> 7
vendor: 138 bytes, lines 7-11
7window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', '
11G-2CHFGRLTJ7
vendor: 5 bytes, line 11
11');
12</script>
12 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 15 <title>Royal Scents Bar â E-Commerce Perfume Store | Badar Bukhari</title> 16 17 <!-- Primary Meta Tags --> 18 <meta name="title" content="Badar Bukhari â Full-Stack Web & AI Developer"> 19 <meta name="description" content="Portfolio of Badar Bukhari, a Full-Stack Web & App Developer and AI Specialist. Explore high-performance projects, innovative AI solutions, and professional web development services."> 20 21 <!-- Open Graph / Facebook --> 22 <meta property="og:type" content="website"> 23 <meta property="og:url" content="https://www.badarbukhari.me"> 24 <meta property="og:title" content="Badar Bukhari â Full-Stack Web & AI Developer"> 25 <meta property="og:description" content="Expert Full-Stack Developer specializing in AI integration and premium web applications. View my work and case studies."> 26 <meta property="og:image" content="https://www.badarbukhari.me/admin/uploads/og-image.avif"> 27 <meta property="og:image:type" content="image/avif"> 28 <meta property="og:image:width" content="1200"> 29 <meta property="og:image:height" content="630"> 30 <meta property="og:image:alt" content="Badar Bukhari - Full-Stack Web & AI Developer Portfolio - High Performance AI Solutions"> 31 32 <!-- Twitter --> 33 <meta property="twitter:card" content="summary_large_image"> 34 <meta property="twitter:url" content="https://www.badarbukhari.me"> 35 <meta property="twitter:title" content="Badar Bukhari â Full-Stack Web & AI Developer"> 36 <meta property="twitter:description" content="Specializing in premium web apps and AI-driven growth. Explore the portfolio of Badar Bukhari."> 37 <meta property="twitter:image" content="https://www.badarbukhari.me/admin/uploads/og-image.avif"> 38 <meta property="twitter:image:alt" content="Badar Bukhari - Full-Stack Web & AI Developer Portfolio"> 39 40 <meta name="keywords" content="Badar Bukhari, Badar Bukhari Dev, Full-Stack Developer, AI Developer, Web Developer Pakistan, Laravel Developer, Node.js Developer, Python AI, Flutter Developer, Freelance Developer, Portfolio, AI Tools, Web Applications"> 41 <meta name="author" content="Badar Bukhari"> 42 <meta name="robots" content="index, follow"> 43 <meta name="theme-color" content="#6366f1"> 44 45 <!-- JSON-LD Structured Data (SEO) --> 46
46<script type="application/ld+json"> 47 { 48 "@context": "https://schema.org", 49 "@type": "Person", 50 "name": "Badar Bukhari", 51 "url": "https://badarbukhari.me", 52 "jobTitle": "Full-Stack Web & AI Developer", 53 "address": { 54 "@type": "PostalAddress", 55 "addressLocality": "Attock", 56 "addressCountry": "Pakistan" 57 }, 58 "sameAs": [ 59 "https://www.linkedin.com/in/badar-bukhari-248425355", 60 "#", 61 "#", 62 "https://www.instagram.com/syedzadabadar/", 63 "https://www.facebook.com/share/1CjdSrLFfB/" 64 ] 65 } 66 </script>
66 67 68 <!-- Font Optimization (Preload) --> 69 <link rel="preconnect" href="https://fonts.googleapis.com"> 70 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 71 <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style"> 72 73
73<script src="https://cdn.tailwindcss.com"></script>
73 74 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 75
75<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
75 76
76<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
76 77
77<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
77 78 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> 79
79<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
79 80
80<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
80 81
81<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
81 82 <link href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css" rel="stylesheet"> 83 84
84<script> 85 tailwind.config = { 86 theme: { 87 extend: { 88 colors: { 89 base: { 90 50: '#f8fafc', 91 100: '#edf2f7', 92 200: '#e2e8f0', 93 300: '#cfd8e3', 94 400: '#94a3b8', 95 500: '#64748b', 96 600: '#475569', 97 700: '#334155', 98 800: '#1f2937', 99 900: '#0f172a' 100 }, 101 brand: { 102 50: '#eff6ff', 103 100: '#dbeafe', 104 200: '#bfdbfe', 105 300: '#93c5fd', 106 400: '#60a5fa', 107 500: '#3b82f6', 108 600: '#2563eb', 109 700: '#1d4ed8' 110 }, 111 mint: { 112 50: '#ecfdf5', 113 100: '#d1fae5', 114 200: '#a7f3d0', 115 300: '#6ee7b7', 116 400: '#34d399', 117 500: '#10b981' 118 } 119 }, 120 boxShadow: { 121 soft: '0 10px 30px rgba(2, 6, 23, 0.06)' 122 }, 123 borderRadius: { 124 xl2: '1.25rem' 125 }, 126 animation: { 127 'gradient-xy': 'gradient-xy 6s ease infinite', 128 }, 129 keyframes: { 130 'gradient-xy': { 131 '0%, 100%': { 132 'background-size': '400% 400%', 133 'background-position': 'left center' 134 }, 135 '50%': { 136 'background-size': '200% 200%', 137 'background-position': 'right center' 138 } 139 } 140 } 141 } 142 } 143 } 144 </script>
144 145 146 <style> 147 :root { 148 --primary: #6366f1; 149 } 150 151 .line-clamp-3 { 152 display: -webkit-box; 153 -webkit-line-clamp: 3; 154 -webkit-box-orient: vertical; 155 overflow: hidden; 156 } 157 158 /* HD Image Sharpening & Optimization */ 159 .project-card img, 160 .glass-card img { 161 image-rendering: -webkit-optimize-contrast; 162 image-rendering: high-quality; 163 transform: translateZ(0); 164 backface-visibility: hidden; 165 filter: brightness(1.01) contrast(1.01); 166 transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; 167 } 168 169 .project-card:hover img { 170 filter: brightness(1.03) contrast(1.03) saturate(1.05); 171 } 172 173 body { 174 --primary-light: #818cf8; 175 --primary-dark: #4f46e5; 176 --secondary: #06b6d4; 177 --accent: #f59e0b; 178 --success: #10b981; 179 --warning: #f59e0b; 180 --error: #ef4444; 181 --background: #f8fafc; 182 --surface: #ffffff; 183 --text-primary: #1e293b; 184 --text-secondary: #64748b; 185 --border: #e2e8f0; 186 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 187 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 188 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 189 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 190 } 191 192 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); 193 194 :root { 195 --primary: #3b82f6; 196 --primary-light: #93c5fd; 197 --primary-dark: #1d4ed8; 198 --glass: rgba(255, 255, 255, 0.2); 199 } 200 201 * { 202 margin: 0; 203 padding: 0; 204 box-sizing: border-box; 205 font-family: 'DM Sans', sans-serif; 206 scroll-behavior: smooth; 207 } 208 209 h1, h2, h3, h4, h5, h6, .gradient-text, .nav-link, .btn, button { 210 font-family: 'Plus Jakarta Sans', sans-serif; 211 } 212 213 html, body { 214 overflow-x: hidden; 215 max-width: 100%; 216 position: relative; 217 } 218 219 body { 220 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); 221 color: #1e293b; 222 } 223 224 .glass-card { 225 background: rgba(255, 255, 255, 0.25); 226 backdrop-filter: blur(10px); 227 -webkit-backdrop-filter: blur(10px); 228 border-radius: 20px; 229 border: 1px solid rgba(255, 255, 255, 0.18); 230 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); 231 } 232 233 .floating { 234 animation: floating 6s ease-in-out infinite; 235 } 236 237 @keyframes floating { 238 0% { transform: translateY(0px); } 239 50% { transform: translateY(-20px); } 240 100% { transform: translateY(0px); } 241 } 242 243 .tech-icon { 244 transition: all 0.3s ease; 245 } 246 247 .tech-icon:hover { 248 transform: scale(1.2) rotate(10deg); 249 filter: drop-shadow(0 0 10px var(--primary-light)); 250 } 251 252 .project-card { 253 transition: all 0.3s ease; 254 transform-style: preserve-3d; 255 perspective: 1000px; 256 } 257 258 .project-card:hover { 259 transform: translateY(-10px) rotateX(5deg); 260 box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2); 261 } 262 263 .gradient-text { 264 background: linear-gradient(90deg, #3b82f6, #8b5cf6); 265 -webkit-background-clip: text; 266 background-clip: text; 267 color: transparent; 268 } 269 270 .scroll-down { 271 position: absolute; 272 bottom: 30px; 273 left: 50%; 274 transform: translateX(-50%); 275 width: 40px; 276 height: 70px; 277 border: 2px solid var(--primary); 278 border-radius: 50px; 279 cursor: pointer; 280 } 281 282 .scroll-down::before { 283 content: ''; 284 position: absolute; 285 top: 10px; 286 left: 50%; 287 width: 6px; 288 height: 6px; 289 margin-left: -3px; 290 background-color: var(--primary); 291 border-radius: 100%; 292 animation: scrollDown 2s infinite; 293 } 294 295 @keyframes scrollDown { 296 0% { 297 transform: translateY(0); 298 opacity: 1;
299 } 300 100% { 301 transform: translateY(20px); 302 opacity: 0; 303 } 304 } 305 306 .nav-link { 307 position: relative; 308 } 309 310 .nav-link::after { 311 content: ''; 312 position: absolute; 313 width: 0; 314 height: 2px; 315 bottom: -5px; 316 left: 0; 317 background-color: var(--primary); 318 transition: width 0.3s ease; 319 } 320 321 .nav-link:hover::after { 322 width: 100%; 323 } 324 325 326 .blob { 327 position: absolute; 328 width: 500px; 329 height: 500px; 330 border-radius: 50%; 331 filter: blur(100px); 332 opacity: 0.3; 333 z-index: 1; 334 } 335 336 .blob-1 { 337 background: #3b82f6; 338 top: -100px; 339 left: -100px; 340 animation: blob-anim-1 15s infinite alternate; 341 } 342 343 .blob-2 { 344 background: #8b5cf6; 345 bottom: -100px; 346 right: -100px; 347 animation: blob-anim-2 15s infinite alternate; 348 } 349 350 @keyframes blob-anim-1 { 351 0% { transform: translate(0, 0) scale(1); } 352 50% { transform: translate(100px, 100px) scale(1.2); } 353 100% { transform: translate(0, 0) scale(1); } 354 } 355 356 @keyframes blob-anim-2 { 357 0% { transform: translate(0, 0) scale(1); } 358 50% { transform: translate(-100px, -100px) scale(1.2); } 359 100% { transform: translate(0, 0) scale(1); } 360 } 361 362 .canvas-bg { 363 position: absolute; 364 top: 0; 365 left: 0; 366 width: 100%; 367 height: 100%; 368 z-index: 0; 369 } 370 371 .skill-bar { 372 height: 10px; 373 border-radius: 5px; 374 background: rgba(255, 255, 255, 0.3); 375 overflow: hidden; 376 } 377 378 .skill-progress { 379 height: 100%; 380 border-radius: 5px; 381 background: linear-gradient(90deg, #3b82f6, #8b5cf6); 382 transition: width 1.5s ease; 383 } 384 385 .contact-input { 386 background: rgba(255, 255, 255, 0.2); 387 border: 1px solid rgba(255, 255, 255, 0.3); 388 transition: all 0.3s ease; 389 } 390 391 .contact-input:focus { 392 background: rgba(255, 255, 255, 0.3); 393 border-color: var(--primary); 394 outline: none; 395 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); 396 } 397 398 .social-icon { 399 transition: all 0.3s ease; 400 } 401 402 .social-icon:hover { 403 transform: translateY(-5px) scale(1.1); 404 color: var(--primary); 405 } 406 .glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } 407 :root{ 408 --glass: rgba(255, 255, 255, 0.6); 409 --blur: blur(12px); 410 } 411 .soft-gradient { background: radial-gradient(60% 60% at 10% 10%, #dbeafe 0%, transparent 60%), 412 radial-gradient(70% 70% at 110% -10%, #ecfeff 0%, transparent 60%), 413 radial-gradient(60% 60% at -10% 110%, #e9ffe8 0%, transparent 60%); } 414 .blob { filter: blur(30px); opacity: .5; } 415 416 /* Custom Scrollbar */ 417 ::-webkit-scrollbar { width: 8px; } 418 ::-webkit-scrollbar-track { background: #f1f5f9; } 419 ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } 420 ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } 421 </style> 422</head> 423<body> 424 425 <!-- Decorative blobs --> 426 <div class="pointer-events-none fixed inset-0 -z-10 soft-gradient"></div> 427 <div class="pointer-events-none fixed inset-0 -z-10"> 428 <div class="absolute top-10 left-10 w-72 h-72 bg-brand-200 rounded-full blob"></div> 429 <div class="absolute bottom-20 right-10 w-80 h-80 bg-mint-200 rounded-full blob"></div> 430 </div> 431 432 <header class="sticky top-0 z-50 px-4"> 433 <nav class="mx-auto max-w-7xl px-4 py-4 md:py-5 flex items-center justify-between glass rounded-2xl mt-3"> 434 <a href="https://www.badarbukhari.me/" class="flex items-center gap-3"> 435 <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600 text-white font-semibold">A</span> 436 <div class="leading-tight"> 437 <p class="text-base-900 font-semibold">Badar Bukhari</p> 438 <p class="text-xs text-base-500">FullâStack + AI</p> 439 </div> 440 </a> 441 <ul class="hidden md:flex items-center gap-6 text-[17px]"> 442 <li><a class="hover:text-brand-700" href="https://www.badarbukhari.me/#home">Home</a></li> 443 <li><a class="hover:text-brand-700" href="https://www.badarbukhari.me/about">About</a></li> 444 <li><a class="hover:text-brand-700" href="https://www.badarbukhari.me/#skills">Skills</a></li> 445 <li><a class="hover:text-brand-700" href="https://www.badarbukhari.me/projects">Projects</a></li> 446 <li><a class="hover:text-brand-700" href="https://www.badarbukhari.me/#contact">Contact</a></li> 447 </ul> 448 <div class="flex items-center gap-3"> 449 <a href="https://www.badarbukhari.me/#contact" class="btn bg-brand-600 text-white p-2 rounded">Letâs build</a> 450 <button id="navToggle" class="md:hidden btn bg-white border border-base-200 p-2 rounded"><i class="ti ti-menu-2"></i></button> 451 </div> 452 </nav> 453 454 <!-- Mobile menu overlay --> 455 <div id="mobileMenu" class="fixed inset-0 z-40 hidden bg-black bg-opacity-50 backdrop-blur-sm"> 456 <div class="flex items-center justify-center h-full"> 457 <div class="bg-white rounded-2xl p-8 mx-4 w-full max-w-sm shadow-xl"> 458 <div class="flex justify-between items-center mb-6"> 459 <h3 class="text-lg font-bold">Menu</h3> 460 <button id="closeMobileMenu" class="text-gray-500 hover:text-gray-700"> 461 <i class="ti ti-x"></i> 462 </button> 463 </div> 464 <nav class="space-y-4 text-[17px]">
465 <a class="block py-3 px-4 rounded-lg hover:bg-gray-100 transition" href="https://www.badarbukhari.me/#home">Home</a> 466 <a class="block py-3 px-4 rounded-lg hover:bg-gray-100 transition" href="https://www.badarbukhari.me/about">About</a> 467 <a class="block py-3 px-4 rounded-lg hover:bg-gray-100 transition" href="https://www.badarbukhari.me/#skills">Skills</a> 468 <a class="block py-3 px-4 rounded-lg hover:bg-gray-100 transition" href="https://www.badarbukhari.me/projects">Projects</a> 469 <a class="block py-3 px-4 rounded-lg hover:bg-gray-100 transition" href="https://www.badarbukhari.me/#contact">Contact</a> 470 </nav> 471 </div> 472 </div> 473 </div> 474 </header> 475 <main> 476 477<!-- Project Specific Schema -->
478<script type="application/ld+json"> 479{ 480 "@context": "https://schema.org", 481 "@type": "CreativeWork", 482 "name": "Royal Scents Bar â E-Commerce Perfume Store", 483 "description": "Royal Scents Bar is a dynamic e-commerce website designed for selling premium perfumes online. The platform allows users to browse fragrance collections, view p", 484 "image": "https://www.badarbukhari.me/admin/uploads/projects/1777686861_69f5594d65409.png", 485 "author": { 486 "@type": "Person", 487 "name": "Badar Bukhari" 488 } 489} 490</script>
490 491 492<!-- Breadcrumbs --> 493<div class="pt-6 sm:pt-8 px-4"> 494 <nav class="max-w-7xl mx-auto flex items-center gap-2 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-slate-400 whitespace-nowrap overflow-x-auto pb-2 scrollbar-hide"> 495 <a href="https://www.badarbukhari.me/" class="hover:text-brand-600 transition-colors shrink-0">Home</a> 496 <i class="ti ti-chevron-right text-[8px] sm:text-[10px] shrink-0"></i> 497 <a href="https://www.badarbukhari.me/#projects" class="hover:text-brand-600 transition-colors shrink-0">Projects</a> 498 <i class="ti ti-chevron-right text-[8px] sm:text-[10px] shrink-0"></i> 499 <span class="text-slate-900 truncate">Royal Scents Bar â E-Commerce Perfume Store</span> 500 </nav> 501</div> 502 503<!-- Project Detail Section --> 504<div class="max-w-6xl mx-auto px-4 sm:px-6 py-8 md:py-16"> 505 <div class="space-y-12 md:space-y-20"> 506 <!-- Project Hero: Image & Header Info --> 507 <div class="flex flex-col lg:flex-row gap-10 lg:gap-16 items-center lg:items-start"> 508 509 <!-- Left: Smaller, Sharper Image --> 510 <div class="w-full lg:w-[45%] shrink-0" data-aos="fade-right"> 511 <div class="aspect-video glass-card overflow-hidden rounded-[2rem] shadow-premium relative group cursor-pointer" 512 onclick="openGalleryModal('https://www.badarbukhari.me/admin/uploads/projects/1777686861_69f5594d65409.png')"> 513 <img src="https://www.badarbukhari.me/admin/uploads/projects/1777686861_69f5594d65409.png" 514 alt="royal scents bar ecommerce website showing perfume products and shopping experience developed by Badar Bukhari" 515 class="w-full h-full object-cover transition duration-1000 group-hover:scale-105"> 516 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"> 517 <span class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white text-2xl"> 518 <i class="ti ti-maximize"></i> 519 </span> 520 </div> 521 </div> 522 </div> 523 524 <!-- Right: Content & CTA --> 525 <div class="w-full lg:flex-1 space-y-6 md:space-y-8" data-aos="fade-left"> 526 <div class="space-y-4"> 527 <div class="flex flex-wrap gap-2"> 528 <span class="px-3 py-1 bg-brand-50 text-brand-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-brand-100"> 529 PHP </span> 530 <span class="px-3 py-1 bg-brand-50 text-brand-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-brand-100"> 531 SQL </span> 532 </div> 533 534 <h1 class="text-3xl md:text-4xl lg:text-5xl font-black text-slate-900 leading-tight tracking-tight"> 535 Royal Scents Bar â E-Commerce Perfume Store </h1> 536 </div> 537 538 <div class="flex flex-wrap gap-4 pt-2"> 539 <a href="https://royalscentsbar.shop/" target="_blank" 540 class="inline-flex items-center justify-center gap-3 px-8 py-4 bg-brand-600 text-white rounded-2xl font-bold text-lg hover:bg-brand-700 transition-all transform hover:translate-y-[-2px] shadow-xl shadow-brand-100 active:scale-95 group"> 541 <i class="ti ti-world text-2xl"></i> 542 <span>Live Preview</span> 543 <i class="ti ti-arrow-up-right transition-transform group-hover:translate-x-1 group-hover:-translate-y-1"></i> 544 </a> 545 546 </div> 547 </div> 548 </div> 549 550 <!-- Description & Gallery --> 551 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-12 mt-8 md:mt-12" data-aos="fade-up"> 552 <div class="lg:col-span-2 space-y-8 md:space-y-12"> 553 <!-- Insight Box --> 554 <div class="glass-card p-6 sm:p-8 md:p-12 rounded-2xl md:rounded-[3rem] space-y-6 sm:space-y-8 leading-relaxed text-slate-600 shadow-soft"> 555 <h3 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight flex items-center gap-3"> 556 <i class="ti ti-info-square-rounded text-brand-600"></i> 557 Project Insight 558 </h3> 559 <div class="text-base sm:text-lg font-medium space-y-4 text-slate-600 break-words"> 560 <b>Royal Scents Bar</b> is a dynamic e-commerce website designed for selling premium perfumes online. The platform allows users to browse fragrance collections, view product details, and place orders through a clean and responsive interface. An integrated admin panel enables the store owner to manage products, orders, and website content efficiently.<br><br><br /> 561<b>Tech Stack</b><br><br /> 562<ul><br /> 563<li><b>Frontend:</b> HTML, CSS, JavaScript</li><br /> 564<li><b>
564Backend:</b> PHP</li><br /> 565<li><b>Database:</b> MySQL</li><br /> 566<li><b>Features:</b> Custom Admin Dashboard, Product Management, Order Handling, Responsive UI</li><br /> 567</ul><br><br /> 568<b>Development Work</b><br><br /> 569Developed the full website including both frontend and backend functionality. Implemented a custom admin panel to manage products, orders, and store data. Designed the user interface and handled database integration to ensure smooth product management and order processing.<br><b>Developer:</b> Badar Bukhari<br> </div> 570 </div> 571 572 <!-- Gallery Section --> 573 <section class="space-y-6 md:space-y-8"> 574 <h3 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight flex items-center gap-3 pl-4"> 575 <i class="ti ti-photo text-brand-600"></i> 576 Project Gallery 577 </h3> 578 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6"> 579 <div class="group relative aspect-video glass-card overflow-hidden rounded-2xl md:rounded-3xl shadow-soft cursor-pointer" 580 onclick="openGalleryModal('https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca00217d0.jpg')"> 581 <img src="https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca00217d0.jpg" 582 alt="Gallery Image" 583 class="w-full h-full object-cover transition duration-700 group-hover:scale-110"> 584 <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"> 585 <span class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white text-2xl"> 586 <i class="ti ti-maximize"></i> 587 </span> 588 </div> 589 </div> 590 <div class="group relative aspect-video glass-card overflow-hidden rounded-2xl md:rounded-3xl shadow-soft cursor-pointer" 591 onclick="openGalleryModal('https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca0050e98.jpg')"> 592 <img src="https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca0050e98.jpg" 593 alt="Gallery Image" 594 class="w-full h-full object-cover transition duration-700 group-hover:scale-110"> 595 <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"> 596 <span class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white text-2xl"> 597 <i class="ti ti-maximize"></i> 598 </span> 599 </div> 600 </div> 601 <div class="group relative aspect-video glass-card overflow-hidden rounded-2xl md:rounded-3xl shadow-soft cursor-pointer" 602 onclick="openGalleryModal('https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca007c4fb.jpg')"> 603 <img src="https://www.badarbukhari.me/admin/uploads/projects/gallery/1777715712_g_69f5ca007c4fb.jpg" 604 alt="Gallery Image" 605 class="w-full h-full object-cover transition duration-700 group-hover:scale-110"> 606 <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
607 <span class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white text-2xl"> 608 <i class="ti ti-maximize"></i> 609 </span> 610 </div> 611 </div> 612 </div> 613 </section> 614 </div> 615 616 <div class="lg:col-span-1 space-y-6 sm:space-y-8"> 617 <div class="glass-card p-6 sm:p-8 md:p-10 rounded-2xl md:rounded-[3rem] shadow-soft border border-brand-50"> 618 <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-5 sm:mb-6 line-after">The Stack</h4> 619 <ul class="space-y-3 sm:space-y-4"> 620 <li class="flex items-center gap-3 font-bold text-sm sm:text-base text-slate-700"> 621 <div class="w-2 h-2 rounded-full bg-brand-500 shrink-0"></div> 622 <span class="break-words">PHP</span> 623 </li> 624 <li class="flex items-center gap-3 font-bold text-sm sm:text-base text-slate-700"> 625 <div class="w-2 h-2 rounded-full bg-brand-500 shrink-0"></div> 626 <span class="break-words">SQL</span> 627 </li> 628 </ul> 629 </div> 630 631 <div class="glass-card p-6 sm:p-8 md:p-10 rounded-2xl md:rounded-[3rem] shadow-soft bg-slate-900 text-white border-0"> 632 <h4 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-3 sm:mb-4">Start a conversation</h4> 633 <p class="font-bold text-base sm:text-lg mb-6 sm:mb-8 leading-tight">Like this project? Let's discuss yours.</p> 634 <a href="https://www.badarbukhari.me/#contact" class="inline-flex items-center gap-2 text-brand-400 font-bold hover:text-white transition-colors group"> 635 Get in Touch 636 <i class="ti ti-arrow-right transition-transform group-hover:translate-x-2"></i> 637 </a> 638 </div> 639 </div> 640 </div> 641 </div> 642</div> 643 644<!-- More Projects Carousel Section --> 645<div class="max-w-7xl mx-auto px-4 sm:px-6 py-12 md:py-16 mt-8"> 646 <div class="flex items-center justify-between mb-8" data-aos="fade-up"> 647 <h3 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight">More Projects</h3> 648 <a href="https://www.badarbukhari.me/projects" class="text-brand-600 font-bold hover:text-brand-700 flex items-center gap-2 group text-sm md:text-base"> 649 View All <i class="ti ti-arrow-right transition-transform group-hover:translate-x-1"></i> 650 </a> 651 </div> 652 653 <div class="relative group/carousel" data-aos="fade-up"> 654 <!-- Scroll Indicators --> 655 <div class="absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-[rgba(240,249,255,1)] to-transparent z-10 pointer-events-none opacity-0 md:opacity-100"></div> 656 <div class="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-[rgba(224,242,254,1)] to-transparent z-10 pointer-events-none opacity-0 md:opacity-100"></div> 657 658 <div class="flex overflow-x-auto gap-5 md:gap-6 pb-8 snap-x snap-mandatory scrollbar-hide -mx-4 px-4 sm:mx-0 sm:px-0" style="scroll-behavior: smooth;"> 659 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 660 <div class="relative aspect-video overflow-hidden group shrink-0"> 661 <img src="https://www.badarbukhari.me/admin/uploads/projects/1778672108_6a0461ecd9183.jpg" 662 alt="Fitwell Gym - Premium Fitness & Personal Training Platform Design" 663 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 664 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
664parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 665 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 666 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 667 HTML5 </span> 668 </div> 669 </div> 670 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 671 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">Fitwell Gym - Premium Fitness & Personal Training Platform Design</h3> 672 <div class="mt-auto pt-4"> 673 <a href="https://www.badarbukhari.me/projects/fitwell-gym-premium-fitness-personal-training-platform-design" 674 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 675 View Details 676 </a> 677 </div> 678 </div> 679 </div> 680 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 681 <div class="relative aspect-video overflow-hidden group shrink-0"> 682 <img src="https://www.badarbukhari.me/admin/uploads/projects/1777714793_69f5c669ba3a4.png" 683 alt="SOLE STUDIO â Modern 3D Sneaker Landing Page" 684 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 685 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
685parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 686 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 687 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 688 HTML5 </span> 689 </div> 690 </div> 691 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 692 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">SOLE STUDIO â Modern 3D Sneaker Landing Page</h3> 693 <div class="mt-auto pt-4"> 694 <a href="https://www.badarbukhari.me/projects/sole-studio-modern-3d-sneaker-landing-page" 695 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 696 View Details 697 </a> 698 </div> 699 </div> 700 </div> 701 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 702 <div class="relative aspect-video overflow-hidden group shrink-0"> 703 <img src="https://www.badarbukhari.me/admin/uploads/projects/1777687027_69f559f376ff2.png" 704 alt="Brown Noise App Landing Page| Figma to Code" 705 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 706 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
706parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 707 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 708 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 709 HTML5 / CSS3 </span> 710 </div> 711 </div> 712 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 713 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">Brown Noise App Landing Page| Figma to Code</h3> 714 <div class="mt-auto pt-4"> 715 <a href="https://www.badarbukhari.me/projects/brown-noise-app-landing-page-figma-to-code" 716 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 717 View Details 718 </a> 719 </div> 720 </div> 721 </div> 722 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 723 <div class="relative aspect-video overflow-hidden group shrink-0"> 724 <img src="https://www.badarbukhari.me/admin/uploads/projects/1777687530_69f55beadf909.png" 725 alt="anifh â Social Networking Platform" 726 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 727 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
727parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 728 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 729 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 730 PHP </span> 731 </div> 732 </div> 733 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 734 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">anifh â Social Networking Platform</h3> 735 <div class="mt-auto pt-4"> 736 <a href="https://www.badarbukhari.me/projects/anifh-social-networking-platform" 737 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 738 View Details 739 </a> 740 </div> 741 </div> 742 </div> 743 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 744 <div class="relative aspect-video overflow-hidden group shrink-0"> 745 <img src="https://www.badarbukhari.me/admin/uploads/projects/1772983054_69ad930e7a537.webp" 746 alt="Kitten TTS AI Voice" 747 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 748 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
748parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 749 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 750 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 751 Python </span> 752 </div> 753 </div> 754 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 755 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">Kitten TTS AI Voice</h3> 756 <div class="mt-auto pt-4"> 757 <a href="https://www.badarbukhari.me/projects/kitten-tts-ai-voice" 758 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 759 View Details 760 </a> 761 </div> 762 </div> 763 </div> 764 <div class="snap-start shrink-0 w-[280px] sm:w-[320px] project-card bg-white rounded-2xl md:rounded-[2rem] overflow-hidden flex flex-col shadow-soft border border-slate-100 hover:shadow-premium transition-all duration-300"> 765 <div class="relative aspect-video overflow-hidden group shrink-0"> 766 <img src="https://www.badarbukhari.me/admin/uploads/projects/1771952321_699dd8c18d257.webp" 767 alt="AI Image Generator (Imgenix)" 768 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy"> 769 <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-trans
769parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 770 <div class="absolute bottom-3 left-3 right-3 flex flex-wrap gap-2"> 771 <span class="bg-brand-600/90 backdrop-blur text-white text-[10px] px-2 py-1 font-black tracking-widest rounded-xl uppercase shadow-sm truncate max-w-full"> 772 React </span> 773 </div> 774 </div> 775 <div class="p-5 md:p-6 flex flex-col flex-grow relative"> 776 <h3 class="text-lg md:text-xl font-black mb-2 text-slate-800 tracking-tight leading-tight line-clamp-2">AI Image Generator (Imgenix)</h3> 777 <div class="mt-auto pt-4"> 778 <a href="https://www.badarbukhari.me/projects/ai-image-generator-imgenix" 779 class="w-full text-center inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#2563eb] text-white rounded-xl font-bold hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 group text-sm"> 780 View Details 781 </a> 782 </div> 783 </div> 784 </div> 785 </div> 786 </div> 787</div> 788 789<style> 790 .scrollbar-hide::-webkit-scrollbar { display: none; } 791 .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } 792 .line-after { position: relative; display: flex; align-items: center; gap: 10px; } 793 .line-after::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } 794 .detail-card { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); } 795 @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } 796</style> 797 798<!-- Gallery Lightbox Modal --> 799<div id="galleryModal" class="fixed inset-0 bg-slate-900/90 backdrop-blur-xl hidden z-[200] flex items-center justify-center p-4 md:p-10" onclick="closeGalleryModal()"> 800 <button class="absolute top-6 right-6 w-12 h-12 bg-white/10 text-white rounded-full flex items-center justify-center hover:bg-white/20 transition-all text-2xl"> 801 <i class="ti ti-x"></i> 802 </button> 803 <img id="galleryModalImg" src="" class="max-w-full max-h-full object-contain rounded-xl shadow-2xl animate-in zoom-in duration-300" onclick="event.stopPropagation()"> 804</div> 805
806<script> 807 function openGalleryModal(src) { 808 const modal = document.getElementById('galleryModal'); 809 const img = document.getElementById('galleryModalImg'); 810 img.src = src; 811 modal.classList.remove('hidden'); 812 document.body.style.overflow = 'hidden'; 813 } 814 815 function closeGalleryModal() { 816 const modal = document.getElementById('galleryModal'); 817 modal.classList.add('hidden'); 818 document.body.style.overflow = 'auto'; 819 } 820 821 // Close on escape key 822 document.addEventListener('keydown', (e) => { 823 if (e.key === 'Escape') closeGalleryModal(); 824 }); 825</script>
825 826 827<!-- Chatbot UI --> 828<div class="chatbot-icon" id="chatbotIcon"><i class="fas fa-robot"></i></div> 829 830<div class="chatbot-popup" id="chatbotPopup"> 831 <div class="chatbot-header"> 832 <div class="avatar">BB</div> 833 <div> 834 <div><strong>BDEV Bot</strong></div> 835 <div style="font-size:12px;color:#10b981;">Online</div> 836 </div> 837 </div> 838 <div class="chat-messages" id="chatMessages"></div> 839 <div class="input-area"> 840 <div class="input-container"> 841 <input type="text" id="messageInput" class="message-input" placeholder="Ask about Badar..."> 842 <button class="send-btn" id="sendBtn" disabled><i class="fas fa-paper-plane"></i></button> 843 </div> 844 </div> 845</div> 846 847<style> 848 .chatbot-icon { 849 position: fixed; 850 bottom: 30px; 851 right: 30px; 852 width: 70px; 853 height: 70px; 854 background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); 855 color: white; 856 border-radius: 50%; 857 display: flex; 858 align-items: center; 859 justify-content: center; 860 font-size: 28px; 861 cursor: pointer; 862 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 863 transition: all 0.3s ease; 864 z-index: 1000; 865 animation: pulse 2s infinite; 866 } 867 868 .chatbot-icon:hover { 869 transform: scale(1.1) rotate(5deg); 870 box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3); 871 } 872 873 .chatbot-popup { 874 position: fixed; 875 bottom: 110px; 876 right: 30px; 877 width: 350px; 878 height: 480px; 879 max-height: calc(100vh - 140px); 880 background: #ffffff; 881 border-radius: 20px; 882 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 883 display: flex; 884 flex-direction: column; 885 transform: translateY(20px) scale(0.9); 886 opacity: 0; 887 transform-origin: bottom right; 888 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 889 overflow: hidden; 890 z-index: 999; 891 pointer-events: none; 892 } 893 894 .chatbot-popup.open { 895 transform: translateY(0) scale(1); 896 opacity: 1; 897 pointer-events: auto; 898 } 899 900 .chatbot-header { 901 background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); 902 padding: 20px; 903 display: flex; 904 align-items: center; 905 gap: 15px; 906 color: white; 907 position: relative; 908 overflow: hidden; 909 flex-shrink: 0; 910 } 911 912 .chatbot-header::before { 913 content: ''; 914 position: absolute; 915 top: -50%; 916 right: -50%; 917 width: 100%; 918 height: 100%; 919 background: linear-gradient(transparent, rgba(255, 255, 255, 0.1), transparent); 920 transform: rotate(30deg); 921 animation: shimmer 3s infinite linear; 922 } 923 924 .avatar { 925 width: 50px; 926 height: 50px; 927 border-radius: 50%; 928 background: rgba(255, 255, 255, 0.2); 929 backdrop-filter: blur(10px); 930 color: white; 931 display: flex; 932 align-items: center; 933 justify-content: center; 934 font-weight: bold; 935 font-size: 20px; 936 border: 2px solid rgba(255, 255, 255, 0.3); 937 position: relative; 938 z-index: 1; 939 flex-shrink: 0; 940 } 941 942 .chat-messages { flex: 1; padding: 10px; overflow-y: auto; font-size: 14px; } 943 .message { margin-bottom: 12px; display: flex; } 944 .message-bubble { padding: 8px 12px; border-radius: 15px; max-width: 75%; line-height: 1.5; } 945 .message-user { justify-content: flex-end; } 946 .message-user .message-bubble { background: #3b82f6; color: white; border-bottom-right-radius: 4px; } 947 .message-bot .message-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; } 948 .message-bubble ul { 949 margin: 12px 0 12px 18px; 950 padding: 0; 951 list-style-type: none; 952 } 953 .message-bubble li { 954 margin-bottom: 8px; 955 position: relative; 956 padding-left: 5px; 957 } 958 .message-bubble li::before { 959 content: "â¢"; 960 color: #6366f1; 961 font-weight: bold; 962 display: inline-block; 963 width: 1em; 964 margin-left: -1em; 965 } 966 .message-bubble a { 967 color: #6366f1; 968 text-decoration: none; 969 font-weight: 700; 970 border-bottom: 1px solid rgba(99, 102, 241, 0.2); 971 transition: all 0.2s ease; 972 } 973 .message-bubble a:hover { 974 color: #4f46e5; 975 border-bottom-color: #4f46e5; 976 background: rgba(99, 102, 241, 0.05); 977 } 978 .message-bubble b, .message-bubble strong { 979 color: #1e293b; 980 font-weight: 800; 981 letter-spacing: -0.01em; 982 } 983 .input-area { padding: 10px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; } 984 .input-container { display: flex; gap: 10px; } 985 .message-input { flex: 1; padding: 10px; border: 1px solid #d1d5db; border-radius: 20px; outline: none; font-size: 14px; } 986 .send-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: #3b82f6; color: white; cursor: pointer; font-size: 16px; flex-shrink: 0; } 987 .send-btn:disabled { background: #cbd5e1;
987 cursor: not-allowed; } 988 989 .typing-indicator { 990 display: flex; 991 gap: 4px; 992 padding: 12px 14px; 993 background: #f1f5f9; 994 border-radius: 15px; 995 border-bottom-left-radius: 4px; 996 width: fit-content; 997 align-items: center; 998 } 999 .typing-dot { 1000 width: 6px; 1001 height: 6px; 1002 background: #94a3b8; 1003 border-radius: 50%; 1004 animation: typing 1.4s infinite ease-in-out; 1005 } 1006 .typing-dot:nth-child(1) { animation-delay: 0s; } 1007 .typing-dot:nth-child(2) { animation-delay: 0.2s; } 1008 .typing-dot:nth-child(3) { animation-delay: 0.4s; } 1009 1010 @keyframes typing { 1011 0%, 100% { transform: translateY(0); } 1012 50% { transform: translateY(-4px); } 1013 } 1014 1015 @keyframes pulse { 1016 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } 1017 70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); } 1018 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } 1019 } 1020 1021 @keyframes shimmer { 1022 0% { transform: translateX(-100%) rotate(30deg); } 1023 100% { transform: translateX(200%) rotate(30deg); } 1024 } 1025 1026 @media (max-width: 768px) { 1027 .chatbot-icon { bottom: 20px; right: 20px; width: 60px; height: 60px; font-size: 24px; } 1028 .chatbot-popup { width: 100vw; height: 100vh; bottom: 0; right: 0; border-radius: 0; max-width: none; max-height: none; } 1029 } 1030</style> 1031
1032<script> 1033document.addEventListener('DOMContentLoaded', () => { 1034 const icon = document.getElementById('chatbotIcon'); 1035 const popup = document.getElementById('chatbotPopup'); 1036 const msgs = document.getElementById('chatMessages'); 1037 const input = document.getElementById('messageInput'); 1038 const btn = document.getElementById('sendBtn'); 1039 1040 icon.addEventListener('click', () => { 1041 popup.classList.toggle('open'); 1042 }); 1043 1044 input.addEventListener('input', () => { 1045 btn.disabled = !input.value.trim(); 1046 }); 1047 1048 input.addEventListener('keydown', e => { 1049 if (e.key === "Enter" && !btn.disabled) sendMsg(); 1050 }); 1051 1052 btn.addEventListener('click', sendMsg); 1053 1054 // --- Persistent Chat Logic --- 1055 let chatHistory = JSON.parse(localStorage.getItem('bdev_chat_history')) || []; 1056 1057 // Initialize: Load history if exists 1058 function loadHistory() { 1059 if (chatHistory.length > 0) { 1060 chatHistory.forEach(msg => addMsg(msg.text, msg.who, false)); 1061 } else { 1062 // Default Welcome if empty 1063 addMsg("Hi! I'm your AI assistant. How can I help you today?", 'bot', false); 1064 } 1065 } 1066 1067 function saveToStorage(text, who) { 1068 chatHistory.push({ text, who }); 1069 // Keep only last 50 messages to save space 1070 if (chatHistory.length > 50) chatHistory.shift(); 1071 localStorage.setItem('bdev_chat_history', JSON.stringify(chatHistory)); 1072 } 1073 1074 function addMsg(text, who, save = true) { 1075 const m = document.createElement('div'); 1076 m.className = 'message message-' + who; 1077 const b = document.createElement('div'); 1078 b.className = 'message-bubble'; 1079 b.innerHTML = text; 1080 m.appendChild(b); 1081 msgs.appendChild(m); 1082 msgs.scrollTop = msgs.scrollHeight; 1083 1084 if (save) saveToStorage(text, who); 1085 } 1086 1087 let typingElement = null; 1088 1089 function showTyping() { 1090 typingElement = document.createElement('div'); 1091 typingElement.className = 'message message-bot'; 1092 typingElement.innerHTML = ` 1093 <div class="typing-indicator"> 1094 <div class="typing-dot"></div> 1095 <div class="typing-dot"></div> 1096 <div class="typing-dot"></div> 1097 </div> 1098 `; 1099 msgs.appendChild(typingElement); 1100 msgs.scrollTop = msgs.scrollHeight; 1101 } 1102 1103 function removeTyping() { 1104 if (typingElement) { 1105 msgs.removeChild(typingElement); 1106 typingElement = null; 1107 } 1108 } 1109 1110 async function sendMsg() { 1111 const t = input.value.trim(); 1112 if (!t) return; 1113 addMsg(t, 'user'); 1114 input.value = ''; 1115 btn.disabled = true; 1116 1117 showTyping(); 1118 1119 try { 1120 // Send recent history for context 1121 const context = chatHistory.slice(-6); // Last 6 messages 1122 const res = await fetch(`index.php?ajax=1&text=${encodeURIComponent(t)}&context=${encodeURIComponent(JSON.stringify(context))}`); 1123 const data = await res.json(); 1124 removeTyping(); 1125 addMsg(data.content || 'No response', 'bot'); 1126 } catch (e) { 1127 removeTyping(); 1128 addMsg('Error connecting to AI. Please check your connection.', 'bot'); 1129 } 1130 } 1131 1132 // Start everything 1133 loadHistory(); 1134}); 1135</script>
1135 1136 </main> 1137 1138 <!-- Footer --> 1139 <footer class="py-12 px-6 bg-gradient-to-b from-blue-50 to-blue-100"> 1140 <div class="max-w-7xl mx-auto"> 1141 <div class="flex flex-col md:flex-row justify-between items-center"> 1142 <div class="mb-6 md:mb-0"> 1143 <a href="https://www.badarbukhari.me/" class="text-2xl font-bold gradient-text">Badar Bukhari</a> 1144 <p class="text-gray-600 mt-2">Web Developer & AI Specialist</p> 1145 </div> 1146 1147 <div class="flex flex-wrap justify-center gap-4 md:space-x-6 md:gap-0 text-[17px]"> 1148 <a href="https://www.badarbukhari.me/#home" class="nav-link text-gray-700 hover:text-blue-500">Home</a> 1149 <a href="https://www.badarbukhari.me/about" class="nav-link text-gray-700 hover:text-blue-500">About</a> 1150 <a href="https://www.badarbukhari.me/#skills" class="nav-link text-gray-700 hover:text-blue-500">Skills</a> 1151 <a href="https://www.badarbukhari.me/#projects" class="nav-link text-gray-700 hover:text-blue-500">Projects</a> 1152 <a href="https://www.badarbukhari.me/#contact" class="nav-link text-gray-700 hover:text-blue-500">Contact</a> 1153 </div> 1154 </div> 1155 1156 <div class="border-t border-gray-200 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> 1157 <p class="text-gray-600 mb-4 md:mb-0">© 2026 Badar Bukhari. All rights reserved.</p> 1158 <div class="flex space-x-4"> 1159 <a href="https://github.com/syedzadabadar" target="_blank" class="text-gray-600 hover:text-blue-500"> 1160 <i class="fab fa-github"></i> 1161 </a> 1162 <a href="https://www.linkedin.com/in/badar-bukhari-248425355" target="_blank" class="text-gray-600 hover:text-blue-500"> 1163 <i class="fab fa-linkedin-in"></i> 1164 </a> 1165 <a href="https://www.facebook.com/share/1CjdSrLFfB/" target="_blank" class="text-gray-600 hover:text-blue-500"> 1166 <i class="fab fa-facebook"></i> 1167 </a> 1168 <a href="https://www.instagram.com/syedzadabadar/" target="_blank" class="text-gray-600 hover:text-blue-500"> 1169 <i class="fab fa-instagram"></i> 1170 </a> 1171 </div> 1172 </div> 1173 </div> 1174 </footer> 1175 1176
1176<script> 1177 document.addEventListener('DOMContentLoaded', () => { 1178 // Typed headline 1179 if (document.getElementById('typed')) { 1180 new Typed('#typed', { 1181 strings: [ 1182 'fullâstack SaaS', 1183 'delightful UIs', 1184 'AI copilots', 1185 'performant APIs', 1186 '3D web experiences' 1187 ], 1188 typeSpeed: 42, 1189 backSpeed: 24, 1190 backDelay: 1000, 1191 loop: true, 1192 smartBackspace: true 1193 }); 1194 } 1195 1196 // Initialize AOS animations 1197 AOS.init({ 1198 duration: 800, 1199 easing: 'ease-in-out', 1200 once: false 1201 }); 1202 1203 // GSAP animations 1204 gsap.registerPlugin(ScrollTrigger); 1205 1206 // Animate skill bars on scroll 1207 document.querySelectorAll('.skill-progress').forEach(bar => { 1208 gsap.from(bar, { 1209 scrollTrigger: { 1210 trigger: bar, 1211 start: "top 80%", 1212 toggleActions: "play none none none" 1213 }, 1214 width: "0%", 1215 duration: 1.5, 1216 ease: "power3.out" 1217 }); 1218 }); 1219 1220 // Floating animation for tech icons 1221 gsap.to(".tech-icon", { 1222 y: 10, 1223 duration: 2, 1224 repeat: -1, 1225 yoyo: true, 1226 ease: "sine.inOut", 1227 stagger: 0.1 1228 }); 1229 1230 // Smooth scrolling for navigation links 1231 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 1232 anchor.addEventListener('click', function (e) { 1233 e.preventDefault(); 1234 const targetId = this.getAttribute('href').split('#')[1]; 1235 const targetElement = document.getElementById(targetId); 1236 if(targetElement){ 1237 targetElement.scrollIntoView({ 1238 behavior: 'smooth' 1239 }); 1240 } 1241 }); 1242 }); 1243 1244 // Mobile menu toggle 1245 const navToggle = document.getElementById('navToggle'); 1246 const mobileMenu = document.getElementById('mobileMenu'); 1247 const closeMobileMenu = document.getElementById('closeMobileMenu'); 1248 1249 if(navToggle && mobileMenu){ 1250 navToggle.addEventListener('click', () => { 1251 mobileMenu.classList.toggle('hidden'); 1252 }); 1253 1254 closeMobileMenu.addEventListener('click', () => { 1255 mobileMenu.classList.add('hidden'); 1256 }); 1257 1258 mobileMenu.addEventListener('click', (e) => { 1259 if (e.target.tagName === 'A' || e.target === mobileMenu) { 1260 mobileMenu.classList.add('hidden'); 1261 } 1262 }); 1263 } 1264 }); 1265 </script>
1265 1266</body> 1267</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.