index.html

<!doctype html>
<html lang="en" class="dark">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>Abdullah Rather — AI Software Engineer · PHP Backend / Full-Stack</title>

  <!-- Apply the saved / system theme before first paint to avoid a flash -->
  <script>
    (function () {
      try {
        var saved = localStorage.getItem("theme");
        var dark = saved ? saved === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
        document.documentElement.classList.toggle("dark", dark);
      } catch (e) {}
      // The pre-rendered HTML is English. For other languages (same rule as getInitialLang in
      // src/lib/i18n.jsx) hide the page until React swaps the text, with a safety timeout.
      try {
        var root = document.documentElement;
        var lang = null;
        try { lang = localStorage.getItem("lang"); } catch (e) {}
        if (lang !== "en" && lang !== "de") lang = /^de/i.test(navigator.language || "") ? "de" : "en";
        root.lang = lang;
        if (lang !== "en") {
          root.dataset.langPending = "";
          setTimeout(function () { delete root.dataset.langPending; }, 2500);
        }
      } catch (e) {}
    })();
  </script>

  <meta name="description"
    content="AI Software Engineer and PHP backend / full-stack developer in Heilbronn, Germany, building enterprise web platforms, REST APIs, integrations and AI features with Yii, Laravel, Symfony, MySQL, Docker and CI/CD." />
  <meta name="author" content="Abdullah Rather" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://abdullahrather.com/" />

  <meta name="color-scheme" content="dark light" />
  <meta name="theme-color" content="#09090b" media="(prefers-color-scheme: dark)" />
  <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />

  <!-- Favicons / PWA -->
  <link rel="icon" href="/images/favicons/favicon.ico" sizes="any" />
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Hero portrait is the LCP element -->
  <link rel="preload" as="image" href="/images/profile-avatar.avif" type="image/avif" fetchpriority="high" />

  <!-- Resource hints -->
  <link rel="preconnect" href="https://www.googletagmanager.com" />
  <link rel="dns-prefetch" href="https://api.emailjs.com" />
  <link rel="dns-prefetch" href="https://www.google.com" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://abdullahrather.com/" />
  <meta property="og:title" content="Abdullah Rather — AI Software Engineer · PHP Backend / Full-Stack" />
  <meta property="og:description"
    content="AI Software Engineer and PHP backend / full-stack developer building enterprise web platforms, REST APIs, integrations and AI features." />
  <meta property="og:image" content="https://abdullahrather.com/images/og-image.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="Abdullah Rather" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:locale:alternate" content="de_DE" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Abdullah Rather — AI Software Engineer · PHP Backend / Full-Stack" />
  <meta name="twitter:description"
    content="AI Software Engineer and PHP backend / full-stack developer building enterprise web platforms, REST APIs, integrations and AI features." />
  <meta name="twitter:image" content="https://abdullahrather.com/images/og-image.jpg" />

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Abdullah Rather",
    "jobTitle": "AI Software Engineer",
    "worksFor": { "@type": "Organization", "name": "APS AG" },
    "description": "AI Software Engineer and PHP backend / full-stack developer building enterprise web platforms, REST APIs, integrations and AI features.",
    "url": "https://abdullahrather.com/",
    "image": "https://abdullahrather.com/images/og-image.jpg",
    "email": "mailto:abdullahrather19@gmail.com",
    "sameAs": [
      "https://linkedin.com/in/abdullahrather",
      "https://github.com/abdullahrather",
      "https://www.xing.com/profile/Abdullah_Rather"
    ],
    "knowsAbout": [
      "Artificial Intelligence", "LLM integration", "PHP", "Yii", "Laravel", "Symfony", "MySQL", "PostgreSQL", "Docker", "CI/CD",
      "REST APIs", "DATEV Integration", "JavaScript", "React", "TypeScript", "Python"
    ],
    "address": { "@type": "PostalAddress", "addressLocality": "Heilbronn", "addressCountry": "DE" }
  }
  </script>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-RSXZVL7MRQ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-RSXZVL7MRQ');
  </script>
</head>

<body>
  <div id="root"></div>
  <noscript>
    <p style="padding:2rem;font-family:system-ui">Abdullah Rather — AI Software Engineer · PHP Backend / Full-Stack.
      Email: <a href="mailto:abdullahrather19@gmail.com">abdullahrather19@gmail.com</a></p>
  </noscript>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>