<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NexusTech Blog</title>
    <meta name="description" content="An ultra-modern, professional-grade technology blog with top-notch UI/UX, focusing on AI, Cloud Computing, and Web Development.">
    <meta name="robots" content="index, follow">
    <meta name="author" content="NexusTech">
    <meta name="keywords" content="technology, AI, machine learning, cloud computing, web development, cybersecurity">
    <meta name="format-detection" content="telephone=no">
    
    <!-- Open Graph tags for social sharing -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="NexusTech Blog">
    <meta property="og:description" content="An ultra-modern, professional-grade technology blog with top-notch UI/UX, focusing on AI, Cloud Computing, and Web Development.">
    <meta property="og:image" content="https://bc60b93d.blog-template-akc.pages.dev/icons/social-share.jpg">
    <meta property="og:url" content="https://bc60b93d.blog-template-akc.pages.dev/">
    <meta property="og:site_name" content="NexusTech Blog">

    <!-- Twitter Card tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="NexusTech Blog">
    <meta name="twitter:description" content="An ultra-modern, professional-grade technology blog with top-notch UI/UX, focusing on AI, Cloud Computing, and Web Development.">
    <meta name="twitter:image" content="https://bc60b93d.blog-template-akc.pages.dev/icons/social-share.jpg">
    
    <!-- PWA Support -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#3b82f6">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="NexusTech Blog">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.svg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    
    <!-- Resource hints for faster loading -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="dns-prefetch" href="//picsum.photos">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
    <link rel="preconnect" href="https://picsum.photos" crossorigin="anonymous">
    
    <!-- Preload critical assets -->
    <link rel="preload" href="/assets/index.*.js" as="script" fetchpriority="high">
    <link rel="preload" href="/assets/react-vendor.*.js" as="script" fetchpriority="high">
    
    <!-- Preload LCP image - Important for first contentful paint -->
    <link rel="preload" as="image" href="https://picsum.photos/seed/kb-arch/800/400" fetchpriority="high" imagesizes="100vw">
    
    <!-- Main stylesheet -->
    
    <!-- Font loading optimization - Direct link instead of CSS-in-JS -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
    </noscript>
    
    <!-- Font fallback system to prevent layout shifts -->
    <style>
      html {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      
      /* Prevent layout shifts by reserving space for images */
      img {
        aspect-ratio: attr(width) / attr(height);
      }
      
      /* Prevent CLS from footer */
      footer {
        contain: layout;
      }
      
      /* Improve LCP by making sure images load quickly */
      img.opacity-20 {
        content-visibility: auto;
      }
      
      /* Fix layout shift for borders */
      .border-t.border-gray-800 {
        border-top-width: 1px !important;
        border-color: rgb(31, 41, 55) !important;
      }
    </style>
    
    <!-- Cloudflare specific meta tag for faster HTML parsing -->
    <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
    <script type="module" crossorigin src="/assets/index-DdLGRFjO.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor.CDLsyMSG.js">
    <link rel="stylesheet" crossorigin href="/assets/index-5yR27JkF.css">
  <script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body class="bg-gray-900">
    <div id="root"></div>
  </body>
</html>