PageSourceSearch

https://www.badarbukhari.me/projects/royal-scents-bar-ecommerce-perfume-store

html badarbukhari.me collected 2026-09-24 15:05:32 UTC 61,035 bytes, 1,267 lines download raw bytes

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 &amp; 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 &amp; 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.