<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Content Security Policy -->
    <meta http-equiv="Content-Security-Policy" content="
      default-src 'self'; 
      script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com; 
      connect-src 'self' https://www.google-analytics.com https://analytics.google.com https://images.unsplash.com ws://localhost:* wss://localhost:* ws://127.0.0.1:* wss://127.0.0.1:*; 
      img-src 'self' data: https: blob:; 
      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
      font-src 'self' https://fonts.gstatic.com; 
      object-src 'none'; 
      base-uri 'self';
    ">
    
    <!-- Google Fonts - Optimized loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Load fonts asynchronously to prevent render blocking -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"></noscript>
    
    <!-- Optimized CSS loading to prevent render blocking -->
    <script>
      // Enhanced CSS loading function with performance optimization
      const loadCSS = function(href, media = 'all') {
        // Check if CSS is already loaded
        if (document.querySelector(`link[href="${href}"]`)) {
          return;
        }
        
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = href;
        link.as = 'style';
        link.media = media;
        link.crossOrigin = 'anonymous';
        
        link.onload = function() {
          this.onload = null;
          this.rel = 'stylesheet';
          // Mark CSS as loaded for performance tracking
          document.documentElement.classList.add('css-loaded');
        };
        
        link.onerror = function() {
          // Fallback: load as regular stylesheet if preload fails
          this.rel = 'stylesheet';
          document.documentElement.classList.add('css-loaded');
        };
        
        document.head.appendChild(link);
      };
      
      // Load CSS immediately but asynchronously to prevent render blocking
      loadCSS('/src/index.css', 'all');
    </script>
    <noscript></noscript>
    
    <!-- Critical preconnect hints for important origins -->
    <link rel="preconnect" href="https://festimbunjaku.dev" crossorigin>
    <link rel="dns-prefetch" href="https://festimbunjaku.dev">
    
    <!-- Resource preloading handled by Vite build process -->
    
    <!-- DNS prefetch for less critical origins -->
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://www.google-analytics.com">
    
    <!-- Preload critical resources for faster loading -->
    <script>
      // Note: Main entry point is handled by Vite automatically
      // No need to preload it manually as it can cause warnings in development
    </script>
    
    <!-- Favicon - New ultra-high quality PNG from updated logo.svg -->
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon.png" />
    <link rel="icon" type="image/png" sizes="128x128" href="/favicon/favicon-128x128.png" />
    <link rel="icon" type="image/png" sizes="256x256" href="/favicon/favicon-256x256.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/favicon/favicon-512x512.png" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-256x256.png" />
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Additional favicon meta tags for better discovery -->
    <meta name="msapplication-TileImage" content="/favicon/favicon.png" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    
    <!-- Critical CSS - Inline the most important styles -->
    <style>
      /* Critical styles for above-the-fold content */
      *{margin:0;padding:0;box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background-color:#ffffff;min-height:100vh;min-height:100dvh}body{margin:0;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;background-color:#ffffff;color:#0f172a;font-weight:400;line-height:1.65;transition:background-color 0.3s ease,color 0.3s ease;min-height:100vh;min-height:100dvh;font-feature-settings:'liga' 1,'kern' 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;overscroll-behavior-y:none}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f8fafc;flex-direction:column;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top:3px solid #4f46e5;border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:#6b7280;font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){html:not(.light){background-color:#111827}body:not(.light){background-color:#111827;color:#f9fafb}.loading{background:#111827}.loading-spinner{border-color:#374151;border-top-color:#6366f1}.loading-text{color:#9ca3af}}.hidden{display:none}.block{display:block}.flex{display:flex}.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.w-full{width:100%}.h-full{height:100%}.object-cover{-o-object-fit:cover;object-fit:cover}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.transition-opacity{transition-property:opacity}.duration-300{transition-duration:300ms}img{max-width:100%;height:auto;content-visibility:auto}.will-change-transform{will-change:transform}.will-change-opacity{will-change:opacity}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.loading-spinner{animation:none}}body.dark{background-color:#111827;color:#f3f4f6}html.dark{background-color:#111827}@media (prefers-color-scheme: dark){html:not(.light):not(.dark){background-color:#111827}body:not(.light):not(.dark){background-color:#111827;color:#f3f4f6}}html:not(.dark){background-color:#ffffff}html:not(.dark) body{background-color:#ffffff;color:#0f172a}
    </style>
    
    <title>Festim Bunjaku | Full Stack Developer</title>
    <meta name="description" content="Passionate Full Stack Developer from Kosovo specializing in Laravel, React, and modern web technologies. Creating innovative web applications with clean code, responsive design, and exceptional user experiences. Available for freelance projects and collaborations." />
    <meta name="author" content="Festim Bunjaku" />
    <meta name="robots" content="index, follow" />
    
    <!-- Open Graph / Social Media -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://festimbunjaku.dev/" />
    <meta property="og:title" content="Festim Bunjaku | Full Stack Developer" />
    <meta property="og:description" content="Passionate Full Stack Developer from Kosovo specializing in Laravel, React, and modern web technologies. Creating innovative web applications with clean code, responsive design, and exceptional user experiences. Available for freelance projects and collaborations." />
    <meta property="og:image" content="https://festimbunjaku.dev/favicon/favicon-256x256.png" />
    
    <!-- Twitter Card -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://festimbunjaku.dev/" />
    <meta property="twitter:title" content="Festim Bunjaku | Full Stack Developer" />
    <meta property="twitter:description" content="Passionate Full Stack Developer from Kosovo specializing in Laravel, React, and modern web technologies. Creating innovative web applications with clean code, responsive design, and exceptional user experiences. Available for freelance projects and collaborations." />
    <meta property="twitter:image" content="https://festimbunjaku.dev/favicon/favicon-256x256.png" />
    
    <!-- RSS Feed -->
    <link rel="alternate" type="application/rss+xml" title="Festim Bunjaku | Portfolio Updates" href="/rss.xml" />
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#111827" />
    <meta name="msapplication-TileColor" content="#111827" />
    
    <!-- Structured Data for better favicon discovery -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Festim Bunjaku - Full Stack Developer",
      "url": "https://festimbunjaku.dev",
      "description": "Passionate Full Stack Developer from Kosovo specializing in Laravel, React, and modern web technologies.",
      "author": {
        "@type": "Person",
        "name": "Festim Bunjaku",
        "url": "https://festimbunjaku.dev"
      },
      "publisher": {
        "@type": "Person",
        "name": "Festim Bunjaku"
      },
      "logo": {
        "@type": "ImageObject",
        "url": "https://festimbunjaku.dev/favicon/favicon-256x256.png",
        "width": 1024,
        "height": 1024
      },
      "image": "https://festimbunjaku.dev/favicon/favicon-256x256.png",
      "sameAs": [
        "https://github.com/festimbunjaku",
        "https://linkedin.com/in/festimbunjaku"
      ]
    }
    </script>
    
    <!-- Performance optimizations -->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <script type="module" crossorigin src="/assets/js/index-DI2_IFCB.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/chunk-stLNOqQl.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunk-L9PC51kB.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunk-CnutkEe_.js">
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin href="/assets/css/index-DBzfDN6x.css">
    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
  </head>
  <body>
    <!-- Initial loading state to prevent layout shift -->
    <div id="root">
      <div class="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">Loading portfolio...</div>
      </div>
    </div>
    
    <!-- Main script -->
    
    <!-- Optimized Google Analytics - Minimal configuration -->
    <script>
      // Only load analytics after everything else is ready and user interaction
      let analyticsLoaded = false;
      
      function loadAnalytics() {
        if (analyticsLoaded) return;
        analyticsLoaded = true;
        
        // Create and load GA script with minimal configuration
        var script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-22QXMJ1WB5';
        document.head.appendChild(script);
        
        script.onload = function() {
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-22QXMJ1WB5', {
            // Minimal configuration to reduce unused JS
            send_page_view: false, // Disable automatic page views
            anonymize_ip: true,
            allow_google_signals: false,
            allow_ad_personalization_signals: false,
            // Disable unused features
            custom_map: {},
            send_to: 'G-22QXMJ1WB5'
          });
          
          // Manual page view only when needed
          gtag('event', 'page_view', {
            page_title: document.title,
            page_location: window.location.href
          });
        };
      }
      
      // Load analytics only on significant user interaction
      ['mousedown', 'keypress', 'scroll'].forEach(function(event) {
        document.addEventListener(event, loadAnalytics, { once: true, passive: true });
      });
      
      // Fallback: load after 10 seconds if no interaction
      setTimeout(loadAnalytics, 10000);
    </script>
    
    <!-- Performance optimization for image loading -->
    <script>
      // Optimize image loading for better LCP
      if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll('img[loading="lazy"]');
        images.forEach(img => {
          if (img.dataset.src) {
            img.src = img.dataset.src;
          }
        });
      }
      
      // Preload critical resources for better performance
      window.addEventListener('DOMContentLoaded', function() {
        // Preload critical project images only when needed and in production
        if ((window.location.hash.includes('projects') || window.location.pathname.includes('projects')) && 
            window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
          const criticalImage = '/project-images/edutrack/dashboard_800w.webp';
          
          const link = document.createElement('link');
          link.rel = 'preload';
          link.href = criticalImage;
          link.as = 'image';
          document.head.appendChild(link);
        }
        
        // Preload next route for faster navigation (production only)
        if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
          const nextRoute = window.location.pathname === '/' ? '/about' : '/';
          const nextRouteLink = document.createElement('link');
          nextRouteLink.rel = 'prefetch';
          nextRouteLink.href = nextRoute;
          document.head.appendChild(nextRouteLink);
        }
      });
      
      // Optimize font loading
      if ('fonts' in document) {
        document.fonts.ready.then(() => {
          document.documentElement.classList.add('fonts-loaded');
        });
      }
      
      // Performance optimization: Initialize resource loading optimization
      const initializeOptimization = () => {
        // Only run optimizations in production to avoid development server issues
        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
          return; // Skip optimizations in development
        }
        
        // Vite handles code splitting and prefetching automatically
        // No manual prefetching needed for bundled resources
      };
      
      // Initialize optimization after page load
      if (document.readyState === 'complete') {
        initializeOptimization();
      } else {
        window.addEventListener('load', initializeOptimization, { once: true });
      }
      
    </script>
  </body>
</html>
