<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Redirect www to non-www -->
    <script>
      if (window.location.hostname === 'www.badr-mellal.com') {
        window.location.replace('https://badr-mellal.com' + window.location.pathname + window.location.search + window.location.hash);
      }
    </script>
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LN6S6PMX2Z"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-LN6S6PMX2Z');
    </script>
    
    <!-- Primary Meta Tags -->
    <title>Badr Mellal - Full Stack Developer | 3D Web Developer | AI & ML Expert</title>
    <meta name="title" content="Badr Mellal - Full Stack Developer | 3D Web Developer | AI & ML Expert" />
    <meta name="description" content="Full Stack Developer specializing in React, Next.js, Three.js, Spring Boot, and AI/ML. Masters student in Artificial Intelligence at Heriot-Watt University. Based in Liverpool, UK. View my interactive 3D portfolio." />
    <meta name="keywords" content="Badr Mellal, Full Stack Developer, Web Developer, 3D Developer, Three.js, React, Next.js, TypeScript, Java, Spring Boot, AI, Machine Learning, Deep Learning, Computer Vision, Liverpool, UK, Morocco, Portfolio" />
    <meta name="author" content="Badr Mellal" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="English" />
    <meta name="revisit-after" content="7 days" />
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://badr-mellal.com/" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://badr-mellal.com/" />
    <meta property="og:title" content="Badr Mellal - Full Stack Developer" />
    <meta property="og:description" content="Full Stack Developer specializing in React, Next.js, Three.js, and AI/ML. Explore my interactive 3D portfolio showcasing cutting-edge web experiences." />
    <meta property="og:site_name" content="Badr Mellal Portfolio" />
    <meta property="og:locale" content="en_GB" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://badr-mellal.com/" />
    <meta name="twitter:title" content="Badr Mellal - Full Stack Developer" />
    <meta name="twitter:description" content="Full Stack Developer specializing in React, Next.js, Three.js, and AI/ML. Explore my interactive 3D portfolio." />
    <meta name="twitter:image" content="https://badr-mellal.com/twitter-image.png" />
    <meta name="twitter:creator" content="@badr_mellal" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#6366f1" />
    <meta name="msapplication-TileColor" content="#6366f1" />
    
    <!-- Preconnect for Performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet" />
    
    <!-- DNS Prefetch -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Badr Mellal",
      "url": "https://badr-mellal.com",
      "image": "https://badr-mellal.com/profile-photo.jpg",
      "sameAs": [
        "https://www.linkedin.com/in/badr-mellal-207a34201/",
        "https://github.com/badrmellal",
        "https://www.youtube.com/channel/UCM8Gr2DKgxkUAYPh7YQXn0Q"
      ],
      "jobTitle": "Full Stack Developer",
      "worksFor": {
        "@type": "Organization",
        "name": "VOLUS AI Inc."
      },
      "alumniOf": [
        {
          "@type": "EducationalOrganization",
          "name": "Heriot-Watt University",
          "location": "Edinburgh, UK"
        },
        {
          "@type": "EducationalOrganization",
          "name": "University of Science Morocco",
          "location": "Morocco"
        }
      ],
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Liverpool",
        "addressCountry": "UK"
      },
      "email": "hello@badr-mellal.com",
      "knowsAbout": [
        "React",
        "Next.js",
        "Three.js",
        "TypeScript",
        "JavaScript",
        "Java",
        "Spring Boot",
        "Tailwind CSS",
        "Framer Motion",
        "AI",
        "Machine Learning",
        "3D Web Development",
        "Full Stack Development"
      ],
      "description": "Full Stack Developer specializing in React, Next.js, Three.js, Spring Boot, and AI/ML. PhD candidate in Computer Science."
    }
    </script>
    
    <!-- WebSite Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Badr Mellal Portfolio",
      "url": "https://badr-mellal.com",
      "description": "Interactive 3D portfolio showcasing full stack development projects and skills",
      "author": {
        "@type": "Person",
        "name": "Badr Mellal"
      },
      "inLanguage": "en-GB",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://badr-mellal.com/?s={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
    
    <!-- Portfolio Work Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CreativeWork",
      "name": "Badr Mellal - Portfolio",
      "author": {
        "@type": "Person",
        "name": "Badr Mellal"
      },
      "description": "Interactive 3D portfolio built with React Three Fiber, showcasing advanced web development skills",
      "keywords": "3D Portfolio, React Three Fiber, WebGL, Three.js, Interactive Design",
      "inLanguage": "en-GB",
      "url": "https://badr-mellal.com"
    }
    </script>
    <script type="module" crossorigin src="/assets/index-Dvw8AvEr.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/three-B_Kc7EpG.js">
    <link rel="modulepreload" crossorigin href="/assets/drei-DzYl1xGE.js">
    <link rel="modulepreload" crossorigin href="/assets/fiber-Jxc6UCUa.js">
    <link rel="modulepreload" crossorigin href="/assets/motion-pMuAB15h.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CuulCyf3.css">
  </head>
  <body>
    <div id="root"></div>
    
    <!-- Noscript fallback for SEO -->
    <noscript>
      <div style="padding: 20px; font-family: Arial, sans-serif;">
        <h1>Badr Mellal - Full Stack Developer</h1>
        <p>Welcome to my portfolio. This site requires JavaScript to display the interactive 3D experience.</p>
        <h2>About Me</h2>
        <p>Full Stack Developer specializing in React, Next.js, Three.js, Java Spring Boot, and AI/ML. Currently pursuing a PhD in Computer Science.</p>
        <h2>Skills</h2>
        <ul>
          <li>Frontend: React, Next.js, TypeScript, Three.js, Tailwind CSS</li>
          <li>Backend: Java, Spring Boot, Node.js</li>
          <li>Cloud: AWS, GCP, Firebase, Vercel</li>
          <li>AI/ML: Python, Pytorch, TensorFlow, Machine Learning, Deep Learning, Computer Vision</li>
        </ul>
        <h2>Contact</h2>
        <p>Email: <a href="mailto:hello@badr-mellal.com">hello@badr-mellal.com</a></p>
        <p>LinkedIn: <a href="https://www.linkedin.com/in/badr-mellal-207a34201/">Badr Mellal</a></p>
        <p>GitHub: <a href="https://github.com/badrmellal">badrmellal</a></p>
      </div>
    </noscript>
  </body>
</html>