<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="google-site-verification" content="3KCu5cbGDmR-r2S-T9-hxGnuCx62Ovv3e52bWSUnB58" />
    
    <!-- CSP is delivered via Netlify response headers (see netlify.toml) -->

    <!-- Favicon optimisé et professionnel -->
    <link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32x32.webp" />
    <link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16x16.webp" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.webp" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
    <link rel="icon" type="image/webp" sizes="192x192" href="/android-chrome-192x192.webp" />
    <link rel="icon" type="image/webp" sizes="512x512" href="/android-chrome-512x512.webp" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- Preconnect supprimés: éviter les connexions inutiles pour des origines non utilisées au chargement -->
    
    <!-- DNS Prefetch pour les domaines externes -->
    <link rel="dns-prefetch" href="//www.googletagmanager.com" />
    <link rel="dns-prefetch" href="//www.google-analytics.com" />
    <link rel="dns-prefetch" href="//github.com" />
    <link rel="dns-prefetch" href="//linkedin.com" />
    
    <!-- Resource Hints pour optimiser le chargement -->
    <link rel="prefetch" href="/cv-elyes-allani.pdf" />
    
    <!-- SEO Meta Tags optimisés et professionnels -->
    <title>Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack Montpellier</title>
    <meta name="description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM à Montpellier. Développeur Full-Stack spécialisé en React, PHP, Node.js. Découvrez mes projets, stages et compétences techniques. Recherche stage et opportunités professionnelles." />
    <meta name="keywords" content="Elyes Allani, BTS SIO, SLAM, développeur, full-stack, React, PHP, Node.js, portfolio, stage, alternance, emploi, Montpellier, développeur web, programmeur, informatique, JavaScript, MySQL, Python" />
    <meta name="author" content="Elyes Allani" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <link rel="canonical" href="https://elyes-allani.netlify.app" />
    
    <!-- Open Graph Meta Tags (Facebook, LinkedIn) optimisés -->
    <meta property="og:title" content="Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack Montpellier" />
    <meta property="og:description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM. Développeur Full-Stack spécialisé en React, PHP, Node.js. Recherche stage et opportunités." />
    <meta property="og:image" content="https://elyes-allani.netlify.app/image.webp" />
    <meta property="og:image:alt" content="Espace de travail de développeur avec ordinateur et code - Portfolio Elyes Allani" />
    <meta property="og:url" content="https://elyes-allani.netlify.app" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="fr_FR" />
    <meta property="og:site_name" content="Portfolio Elyes Allani - Développeur BTS SIO SLAM" />
    
    <!-- Twitter Card Meta Tags optimisés -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack" />
    <meta name="twitter:description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM. Développeur Full-Stack spécialisé en React, PHP, Node.js." />
    <meta name="twitter:image" content="https://elyes-allani.netlify.app/image.webp" />
    <meta name="twitter:image:alt" content="Espace de travail de développeur avec ordinateur et code - Portfolio Elyes Allani" />
    <meta name="twitter:creator" content="@elyesallani" />
    
    <!-- Additional SEO optimisé -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="geo.region" content="FR-34" />
    <meta name="geo.placename" content="Montpellier" />
    <meta name="geo.position" content="43.610769;3.876716" />
    <meta name="ICBM" content="43.610769, 3.876716" />
    
    <!-- Structured Data (JSON-LD) externalized for strict CSP compliance -->
    <script type="application/ld+json" src="/ld.json"></script>
    
    <!-- Accessibility improvements -->

    <!-- Preload des polices critiques pour réduire la chaîne de requêtes -->
    <link rel="preload" as="font" href="/fonts/inter-v19-latin-regular.woff2" type="font/woff2" crossorigin>

    <!-- Précharger et charger le CSS critique (compatible CSP, sans inline) -->
    <link rel="preload" as="style" href="/critical.css">
    <link rel="stylesheet" href="/critical.css">
    <!-- Charger le CSS global en parallèle du JS pour éviter la chaîne critique JS→CSS -->
    <!-- Feuilles de style différée pour les graisses 700 (chargée après interaction) -->
    <link rel="stylesheet" href="/fonts-700.css" media="not all" id="fonts-700">
    <script type="module" crossorigin src="/assets/index-Bw3Cbuzs.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-C-eeCz9z.js">
    <link rel="modulepreload" crossorigin href="/assets/router-DWED4KVV.js">
    <link rel="modulepreload" crossorigin href="/assets/icons-DDVuHLLn.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BBsvdi8D.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>
  <body>
    <!-- Loading screen optimisé pour améliorer la perception de performance -->
    <div id="loading-screen" class="loading-screen">
      <div class="loading-spinner"></div>
    </div>
    
    <div id="root"></div>
    <p id="lcp-text" class="lcp-text critical-content">
      Étudiant passionné par le développement logiciel et la création d'applications innovantes. 
      Spécialisé dans les solutions web et mobiles modernes avec React, PHP et Node.js.
    </p>
    
    <!-- Skip to main content for accessibility -->
    <a href="/#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded z-50">
      Aller au contenu principal
    </a>
    
    <!-- Runtime init moved to external script for CSP compliance -->
    <script src="/runtime-init.js" defer></script>
  </body>
</html>