<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tim DeHof - Full Stack Developer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Full-stack developer specializing in React, Node.js, and modern web technologies. Building innovative solutions with cutting-edge technologies."
    />
    <meta
      name="keywords"
      content="web developer, full stack developer, React, Node.js, JavaScript, TypeScript, portfolio"
    />
    <meta name="author" content="Tim DeHof" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Tim DeHof - Full Stack Developer" />
    <meta
      property="og:description"
      content="Full-stack developer specializing in React, Node.js, and modern web technologies."
    />
    <meta property="og:image" content="/og-image.jpg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="Tim DeHof - Full Stack Developer" />
    <meta
      property="twitter:description"
      content="Full-stack developer specializing in React, Node.js, and modern web technologies."
    />
    <meta property="twitter:image" content="/og-image.jpg" />

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

    <!-- Google Fonts - Non-blocking -->
    <link
      rel="preload"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      as="style"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <noscript
      ><link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet"
    /></noscript>

    <!-- Theme color -->
    <meta name="theme-color" content="#2563eb" />

    <!-- Critical CSS for LCP optimization -->
    <style>
      .hero-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #e0e7ff 100%);
      }
      .hero-title {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.1;
        color: #111827;
      }
      @media (prefers-color-scheme: dark) {
        .hero-section {
          background: linear-gradient(135deg, #0f172a 0%, #0f766e 50%, #1e1b4b 100%);
        }
        .hero-title {
          color: #f9fafb;
        }
      }
    </style>

    <!-- Manifest for PWA -->
    <link rel="manifest" href="/manifest.json" />
    <script type="module" crossorigin src="/assets/index-DfvtjFW7.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BlhucPoG.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body>
    <div id="app"></div>
  </body>
</html>
