<?php
// Inclure le fichier des projets
require_once 'projects.php';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Mon Portfolio</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
            overflow-x: hidden; /* Empêcher le débordement horizontal */
            width: 100%;
            max-width: 100%;
        }
        
        .terminal-text {
            font-family: 'Fira Code', monospace;
            font-size: 2.5rem;
            line-height: 1.2;
            color: #e6e6e6;
            text-shadow: 0 0 5px rgba(230, 230, 230, 0.5);
        }
        
        .terminal-subtext {
            font-family: 'Fira Code', monospace;
            font-size: 1.8rem;
            line-height: 1.4;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            font-weight: 500;
            margin-top: 1rem;
        }
        
        .terminal-keyword {
            color: #ff79c6;
        }
        
        .terminal-string {
            color: #f1fa8c;
        }
        
        .terminal-comment {
            color: #6272a4;
        }
        
        .terminal-cursor {
            display: inline-block;
            width: 3px;
            height: 1.2em;
            background-color: #e6e6e6;
            margin-left: 2px;
            animation: blink 0.7s infinite;
            vertical-align: middle;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        .gradient-text {
            background: linear-gradient(to right, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .btn-gradient {
            background: linear-gradient(to right, #6366f1, #8b5cf6);
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(to right, #6366f1, #8b5cf6);
        }
        
        .cursor-glow {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(99, 102, 241, 0.3);
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: transform 0.1s;
        }
        
        .hero-overlay {
            animation: gradientBG 15s ease infinite;
            background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(76,29,149,0.3), rgba(99,102,241,0.3));
            background-size: 400% 400%;
        }
        
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        .project-image {
            transition: all 0.5s ease;
        }
        
        .project-card:hover .project-image {
            transform: scale(1.05);
        }
        
        .project-overlay {
            background: linear-gradient(to top, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .project-card:hover .project-overlay {
            opacity: 1;
        }

        /* Styles pour la barre de navigation */
        .nav-transparent {
            background-color: transparent;
            transition: all 0.3s ease;
        }

        .nav-solid {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .nav-link {
            transition: all 0.3s ease;
        }

        .nav-link-transparent {
            color: white;
        }

        .nav-link-solid {
            color: #4B5563;
        }

        .nav-link-solid:hover {
            color: #6366F1;
        }

        .logo-text {
            transition: all 0.3s ease;
        }

        .logo-text-transparent {
            color: white;
        }

        .logo-text-solid {
            color: #4B5563;
        }

        .hamburger-btn {
            transition: all 0.3s ease;
        }

        .hamburger-btn-transparent {
            color: white;
        }

        .hamburger-btn-solid {
            color: #4B5563;
        }

        /* Styles responsives */
        @media (max-width: 768px) {
            .terminal-text {
                font-size: 1.5rem;
                line-height: 1.3;
                margin-bottom: 1rem;
            }
            
            .terminal-subtext {
                font-size: 0.9rem;
                line-height: 1.4;
                margin-bottom: 2rem;
            }
            
            .hero-section {
                height: 100vh;
                min-height: 500px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .hero-overlay {
                padding: 1rem;
            }
            
            .btn-gradient {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
                display: block;
                font-size: 0.9rem;
                padding: 0.75rem 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            .terminal-text {
                font-size: 1.3rem;
            }
            
            .terminal-subtext {
                font-size: 0.8rem;
            }
            
            .hero-section {
                min-height: 450px;
            }
        }

        /* Menu mobile */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(255, 255, 255, 0.98);
            z-index: 100;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .mobile-menu.active {
            transform: translateX(0);
        }
        
        .mobile-menu-links {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 2rem;
        }
        
        .mobile-menu-links a {
            font-size: 1.5rem;
            color: #4B5563;
            transition: color 0.3s ease;
        }
        
        .mobile-menu-links a:hover {
            color: #6366F1;
        }
        
        .close-menu {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2rem;
            color: #4B5563;
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="notification" class="fixed bottom-4 right-4 max-w-xs w-full bg-white shadow-lg rounded-lg p-4 hidden z-50 border-l-4 transition-transform duration-300 transform translate-x-4 opacity-0">
        <div class="flex items-start">
            <div id="notification-icon" class="mr-3 text-xl text-green-500">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="flex-1">
                <p id="notification-message" class="text-gray-800 font-medium"></p>
            </div>
            <span id="notification-close" class="ml-2 text-gray-400 hover:text-gray-600 cursor-pointer">&times;</span>
        </div>
    </div>
    <div class="cursor-glow hidden md:block"></div>

    <!-- Navigation -->
    <nav class="fixed w-full z-50 nav-transparent">
        <div class="container mx-auto px-4 sm:px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#hero" class="text-2xl font-bold logo-text logo-text-transparent">Jules Crevoisier</a>
                <div class="hidden md:flex space-x-8">
                    <a href="#about" class="nav-link nav-link-transparent">À Propos</a>
                    <a href="#skills" class="nav-link nav-link-transparent">Compétences</a>
                    <a href="#projects" class="nav-link nav-link-transparent">Réalisations</a>
                    <a href="#contact" class="nav-link nav-link-transparent">Contact</a>
                </div>
                <button class="md:hidden hamburger-btn hamburger-btn-transparent">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="hero" class="relative h-screen w-full overflow-hidden hero-section">
        <div class="absolute inset-0">
            <video 
                id="hero-video"
                autoplay 
                muted 
                loop 
                preload="metadata" 
                playsinline 
                class="w-full h-full object-cover"
                poster="assets/images/video-poster.jpg">
                <source src="assets/video/Main.mp4" type="video/mp4" />
                <source src="assets/video/Main.webm" type="video/webm" />
                Votre navigateur ne supporte pas la vidéo.
            </video>
        </div>
        <div class="absolute inset-0 hero-overlay flex items-center justify-center">
            <div class="text-center text-white" data-aos="fade-up" data-aos-duration="1000">
                <h1 class="terminal-text mb-6" id="terminal-text"></h1>
                <p class="terminal-subtext mb-10" id="terminal-subtext"></p>
                <a href="#contact" class="btn-gradient px-8 py-3 rounded-full text-white font-medium inline-block">
                    Contactez-moi
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
            <a href="#about">
                <i class="fas fa-chevron-down text-3xl"></i>
            </a>
        </div>
    </section>

    <!-- Section Information -->
    <section id="about" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-12" data-aos="fade-up">
                <span class="gradient-text">À Propos de Moi</span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 w-full max-w-6xl mx-auto">
                <div class="order-2 md:order-1 space-y-6" data-aos="fade-right" data-aos-delay="200">
                    <h3 class="text-2xl font-semibold">Mon Parcours</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Étudiant en BUT Métiers du Multimédia et de l'Internet (MMI) à Troyes, je suis passionné par l'univers du numérique, avec une forte appétence pour le développement web et la programmation.
                    </p>
                    <p class="text-gray-600 leading-relaxed">
                        Issu d'une formation en Systèmes Numériques (Bac Pro), j'ai acquis des bases techniques solides qui me permettent aujourd'hui de concevoir et de développer des projets variés.
                    </p>
                    <p class="text-gray-600 leading-relaxed">
                        Curieux, rigoureux et toujours prêt à relever de nouveaux défis, je continue d'élargir mes compétences pour proposer des solutions créatives et performantes.
                    </p>
                    <div class="pt-4 flex flex-col sm:flex-row gap-4">
                        <a href="assets/cv/CV_Jules_Crevoisier.pdf" target="_blank" class="btn-gradient px-8 py-3 rounded-full text-white font-medium inline-flex items-center justify-center">
                            <i class="fas fa-download mr-2"></i>
                            Télécharger mon CV
                        </a>
                        <a href="#skills" class="btn-gradient px-8 py-3 rounded-full text-white font-medium inline-flex items-center justify-center">
                            Découvrir mes compétences
                            <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="order-1 md:order-2 relative flex justify-center md:justify-end" data-aos="fade-left" data-aos-delay="400">
                    <div class="absolute -top-4 -left-4 w-24 h-24 bg-indigo-100 rounded-xl z-0"></div>
                    <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-purple-100 rounded-xl z-0"></div>
                    <div class="h-80 md:h-96 w-full max-w-md overflow-hidden rounded-xl shadow-lg relative z-10">
                        <img src="assets/images/jules.jpg" alt="Profile" class="w-full h-full object-cover object-top rounded-xl">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section Compétences -->
    <section id="skills" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-12" data-aos="fade-up">
                <span class="gradient-text">Mes Compétences</span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12 max-w-6xl mx-auto">
                <!-- Compétence 1 -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover" data-aos="zoom-in" data-aos-delay="100">
                    <div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-paint-brush text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Design UI/UX</h3>
                    <p class="text-gray-600 mb-5">Création d'interfaces utilisateur intuitives et esthétiques pour une expérience optimale.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">Figma</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">Photoshop</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">Illustrator</span>
                    </div>
                </div>
                <!-- Compétence 2 (Développement Web au centre) -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover" data-aos="zoom-in" data-aos-delay="200">
                    <div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-code text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Développement Web</h3>
                    <p class="text-gray-600 mb-5">Création de sites web modernes et responsives avec les dernières technologies.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">HTML</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">CSS</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">JavaScript</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">Tailwind</span>
                    </div>
                </div>
                <!-- Compétence 3 -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover" data-aos="zoom-in" data-aos-delay="300">
                    <div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-database text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Backend & PHP</h3>
                    <p class="text-gray-600 mb-5">Développement de solutions backend robustes et sécurisées avec PHP.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">PHP</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">SQL</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">JSON</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">MariaDB</span>
                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-indigo-200 transition-colors">MySQL</span>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <a href="#projects" class="btn-gradient px-8 py-3 rounded-full text-white font-medium inline-block">
                    Voir mes réalisations
                    <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Section Projets -->
    <section id="projects" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-12" data-aos="fade-up">
                <span class="gradient-text">Mes Réalisations</span>
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <!-- Projet 1 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/mdp.srko.fr_.png" alt="Générateur de mot de passe" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">Générateur de mot de passe</h3>
                                <a href="projet-detail.php?id=1" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">Générateur de mot de passe</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Web</span>
                        </div>
                        <p class="text-gray-600 mb-4">Un site web qui permet de générer des mots de passe aléatoires.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">MySQL</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=1" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Projet 2 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/ceres.srko.fr_.png" alt="Ceres - Chaussures Écoresponsables" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">Ceres - Chaussures Écoresponsables</h3>
                                <a href="projet-detail.php?id=2" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">Ceres - Chaussures Écoresponsables</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">E-commerce</span>
                        </div>
                        <p class="text-gray-600 mb-4">Site vitrine et boutique en ligne pour une marque de chaussures écoresponsable.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind CSS</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">HTML</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=2" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Projet 3 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/67ae61d73f5f1_SgaYKgW_1_.png" alt="Portfolio Professionnel" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">Portfolio Professionnel</h3>
                                <a href="projet-detail.php?id=3" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">Portfolio Professionnel</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Web</span>
                        </div>
                        <p class="text-gray-600 mb-4">Création d'un portfolio moderne pour un camarade de classe.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind CSS</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">GSAP Animation</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=3" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Projet 4 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/jeux.png" alt="Plateforme E-sport Interactive" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">Plateforme E-sport Interactive</h3>
                                <a href="projet-detail.php?id=4" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">Plateforme E-sport Interactive</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Web Application</span>
                        </div>
                        <p class="text-gray-600 mb-4">Application web dédiée au monde de l'E-sport avec fonctionnalités interactives.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind CSS</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">MySQL</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">DataTables</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=4" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Projet 5 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/vosoft.png" alt="vosoft.fr" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">vosoft.fr</h3>
                                <a href="projet-detail.php?id=5" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">vosoft.fr</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Site web</span>
                        </div>
                        <p class="text-gray-600 mb-4">J'ai réalisé un site web vitrine pour ma micro-entreprise</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind CSS</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">MySQL</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">DataTables</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=5" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Projet 6 -->
                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-white" data-aos="fade-up">
                    <div class="relative overflow-hidden">
                        <img src="assets/images/cours.png" alt="Plateforme de cours" class="project-image w-full h-64 object-cover">
                        <div class="project-overlay absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white p-6">
                                <h3 class="text-2xl font-bold mb-4">Plateforme de cours</h3>
                                <a href="projet-detail.php?id=6" class="inline-block bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-colors">
                                    Voir le projet
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold">Plateforme de cours</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Web Application</span>
                        </div>
                        <p class="text-gray-600 mb-4">Une plateforme de cours réalisée en PHP</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">PHP</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Tailwind CSS</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">MySQL</span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">DataTables</span>
                        </div>
                        <div class="mt-4">
                            <a href="projet-detail.php?id=6" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-8">
                <a href="#contact" class="btn-gradient px-8 py-3 rounded-full text-white font-medium inline-block">
                    Me contacter
                    <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Section Contact -->
    <section id="contact" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-12" data-aos="fade-up">
                <span class="gradient-text">Contactez-moi</span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-5 gap-10 max-w-6xl mx-auto">
                <div class="md:col-span-2 space-y-6" data-aos="fade-right" data-aos-delay="100">
                    <h3 class="text-2xl font-semibold">Discutons de votre projet</h3>
                    <p class="text-gray-600 text-sm sm:text-base">
                        Vous avez un projet en tête ? N'hésitez pas à me contacter pour en discuter. Je suis disponible pour répondre à toutes vos questions.
                    </p>
                    <div class="space-y-4 pt-4">
                        <div class="flex items-center">
                            <div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-envelope text-indigo-600"></i>
                            </div>
                            <span class="text-gray-700 text-sm sm:text-base">jules.crevoisier@etudiant.univ-reims.fr</span>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-phone text-indigo-600"></i>
                            </div>
                            <span class="text-gray-700 text-sm sm:text-base">07 87 35 96 48</span>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-map-marker-alt text-indigo-600"></i>
                            </div>
                            <span class="text-gray-700 text-sm sm:text-base">Troyes, France</span>
                        </div>
                    </div>
                    <div class="flex space-x-4 pt-4">
                        <a href="https://www.linkedin.com/in/jules-crevoisier" target="_blank" class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center text-indigo-600 hover:bg-indigo-200 transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="https://github.com/srkodev" target="_blank" class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center text-indigo-600 hover:bg-indigo-200 transition-colors">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="https://x.com/srko_dj" target="_blank" class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center text-indigo-600 hover:bg-indigo-200 transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
                <div class="md:col-span-3 bg-white p-4 sm:p-8 rounded-xl shadow-lg" data-aos="fade-left" data-aos-delay="200">
                    <form action="process.php" method="POST" class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                                <input type="text" name="name" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" name="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base">
                            </div>
                        </div>
                        <div>
                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label>
                            <input type="text" name="subject" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base">
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                            <textarea name="message" id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base"></textarea>
                        </div>
                        <button type="submit" class="btn-gradient w-full py-3 px-6 rounded-lg text-white font-medium text-sm sm:text-base">
                            Envoyer le message
                            <i class="fas fa-paper-plane ml-2"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 sm:px-6">
            <div class="flex flex-col md:flex-row justify-between items-center max-w-6xl mx-auto">
                <div>
                    <h3 class="text-2xl font-bold mb-2">Portfolio</h3>
                    <p class="text-gray-400">© 2025 Tous droits réservés</p>
                </div>
                <div class="mt-6 md:mt-0">
                    <ul class="flex space-x-6">
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">À Propos</a></li>
                        <li><a href="#skills" class="text-gray-400 hover:text-white transition-colors">Compétences</a></li>
                        <li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">Projets</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Mobile Menu -->
    <div class="mobile-menu">
        <div class="close-menu">
            <i class="fas fa-times"></i>
        </div>
        <div class="mobile-menu-links">
            <a href="#about">À Propos</a>
            <a href="#skills">Compétences</a>
            <a href="#projects">Réalisations</a>
            <a href="#contact">Contact</a>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Initialisation AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });
        
        // Terminal Text Animation
        const mainText = {
            text: "Bienvenue sur mon Portfolio",
            parts: [
                { text: "Bienvenue sur mon Portfolio", class: "terminal-string" }
            ]
        };
        
        const subText = {
            text: "// Développeur Fullstack Junior",
            parts: [
                { text: "// Développeur Fullstack Junior", class: "terminal-comment" }
            ]
        };
        
        const mainTextElement = document.getElementById('terminal-text');
        const subTextElement = document.getElementById('terminal-subtext');
        
        function getRandomDelay() {
            // Retourne un délai aléatoire entre 50ms et 150ms
            return Math.random() * 100 + 50;
        }
        
        function getRandomPause() {
            // 10% de chance d'avoir une pause plus longue (entre 200ms et 400ms)
            return Math.random() < 0.1 ? Math.random() * 200 + 200 : 0;
        }
        
        function typeText(element, textObj, baseSpeed = 100) {
            let currentPart = 0;
            let currentChar = 0;
            element.innerHTML = '<span class="terminal-cursor"></span>';
            
            function type() {
                if (currentPart < textObj.parts.length) {
                    const part = textObj.parts[currentPart];
                    if (currentChar < part.text.length) {
                        // Remplacer le curseur par le caractère + le curseur
                        element.innerHTML = textObj.parts.slice(0, currentPart).map(p => 
                            `<span class="${p.class}">${p.text}</span>`
                        ).join('') + 
                        `<span class="${part.class}">${part.text.substring(0, currentChar + 1)}</span>` +
                        '<span class="terminal-cursor"></span>';
                        
                        currentChar++;
                        
                        // Ajouter un délai aléatoire et une pause occasionnelle
                        const delay = getRandomDelay() + getRandomPause();
                        setTimeout(type, delay);
                    } else {
                        currentPart++;
                        currentChar = 0;
                        if (currentPart < textObj.parts.length) {
                            element.innerHTML = textObj.parts.slice(0, currentPart).map(p => 
                                `<span class="${p.class}">${p.text}</span>`
                            ).join('') + 
                            `<span class="${textObj.parts[currentPart].class}">${textObj.parts[currentPart].text[0]}</span>` +
                            '<span class="terminal-cursor"></span>';
                            currentChar++;
                        }
                        setTimeout(type, getRandomDelay());
                    }
                } else {
                    element.innerHTML = textObj.parts.map(p => 
                        `<span class="${p.class}">${p.text}</span>`
                    ).join('') + '<span class="terminal-cursor"></span>';
                }
            }
            
            type();
        }
        
        // Start typing animations
        setTimeout(() => {
            typeText(mainTextElement, mainText, 100);
            // Afficher directement le sous-titre sans animation
            subTextElement.innerHTML = subText.parts.map(p => 
                `<span class="${p.class}">${p.text}</span>`
            ).join('');
        }, 1000);
        
        // Cursor Effect
        document.addEventListener('DOMContentLoaded', function() {
            const cursor = document.querySelector('.cursor-glow');
            
            document.addEventListener('mousemove', function(e) {
                cursor.style.left = e.clientX + 'px';
                cursor.style.top = e.clientY + 'px';
            });
            
            // Links hover effect
            const links = document.querySelectorAll('a, button');
            links.forEach(link => {
                link.addEventListener('mouseenter', () => {
                    cursor.style.transform = 'translate(-50%, -50%) scale(2)';
                });
                link.addEventListener('mouseleave', () => {
                    cursor.style.transform = 'translate(-50%, -50%) scale(1)';
                });
            });
        });
        
        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Gestion de la barre de navigation
        function updateNav() {
            const nav = document.querySelector('nav');
            const navLinks = document.querySelectorAll('.nav-link');
            const logoText = document.querySelector('.logo-text');
            const hamburgerBtn = document.querySelector('.hamburger-btn');
            const heroSection = document.querySelector('.hero-section');
            const heroHeight = heroSection.offsetHeight;

            if (window.scrollY > heroHeight * 0.8) {
                nav.classList.remove('nav-transparent');
                nav.classList.add('nav-solid');
                navLinks.forEach(link => {
                    link.classList.remove('nav-link-transparent');
                    link.classList.add('nav-link-solid');
                });
                logoText.classList.remove('logo-text-transparent');
                logoText.classList.add('logo-text-solid');
                hamburgerBtn.classList.remove('hamburger-btn-transparent');
                hamburgerBtn.classList.add('hamburger-btn-solid');
            } else {
                nav.classList.add('nav-transparent');
                nav.classList.remove('nav-solid');
                navLinks.forEach(link => {
                    link.classList.add('nav-link-transparent');
                    link.classList.remove('nav-link-solid');
                });
                logoText.classList.add('logo-text-transparent');
                logoText.classList.remove('logo-text-solid');
                hamburgerBtn.classList.add('hamburger-btn-transparent');
                hamburgerBtn.classList.remove('hamburger-btn-solid');
            }
        }

        // Mettre à jour au chargement et au défilement
        window.addEventListener('load', updateNav);
        window.addEventListener('scroll', updateNav);

        // Mobile Menu
        const mobileMenuBtn = document.querySelector('.md\\:hidden');
        const mobileMenu = document.querySelector('.mobile-menu');
        const closeMenuBtn = document.querySelector('.close-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.add('active');
        });
        
        closeMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.remove('active');
        });
        
        // Fermer le menu mobile lors du clic sur un lien
        document.querySelectorAll('.mobile-menu-links a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('active');
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('hero-video');
            
            // Gestion des erreurs de chargement
            video.addEventListener('error', function(e) {
                console.error('Erreur de chargement de la vidéo:', e);
                // Fallback vers une image si la vidéo ne charge pas
                video.style.display = 'none';
                video.parentElement.style.backgroundImage = 'url("assets/images/video-poster.jpg")';
                video.parentElement.style.backgroundSize = 'cover';
                video.parentElement.style.backgroundPosition = 'center';
            });

            // Tentative de chargement progressif
            video.load();
        });
    </script>
    <!-- Notification interne au site -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const params = new URLSearchParams(window.location.search);
            const notification = document.getElementById('notification');
            const messageEl = document.getElementById('notification-message');
            const closeBtn = document.getElementById('notification-close');

            function showNotification(msg, type) {
                // Met à jour l'icône et le message
                const iconEl = document.getElementById('notification-icon');
                iconEl.innerHTML = type === 'success'
                    ? '<i class="fas fa-check-circle"></i>'
                    : '<i class="fas fa-exclamation-triangle"></i>';
                iconEl.classList.remove('text-green-500', 'text-red-500');
                iconEl.classList.add(type === 'success' ? 'text-green-500' : 'text-red-500');
                messageEl.textContent = msg;
                // Animation d'entrée
                notification.classList.remove('hidden', 'translate-x-4', 'opacity-0');
                notification.classList.add('translate-x-0', 'opacity-100', type === 'success' ? 'border-green-500' : 'border-red-500');
                // Fermeture automatique après 4s
                setTimeout(() => {
                    // Animation de sortie
                    notification.classList.remove('translate-x-0', 'opacity-100');
                    notification.classList.add('translate-x-4', 'opacity-0');
                    setTimeout(() => {
                        notification.classList.add('hidden');
                        notification.classList.remove('border-green-500', 'border-red-500');
                    }, 300);
                }, 4000);
            }

            closeBtn.addEventListener('click', () => {
                notification.classList.add('hidden');
            });

            if (params.has('success')) {
                showNotification('Votre message a été envoyé avec succès !', 'success');
                window.history.replaceState(null, '', window.location.pathname);
            } else if (params.has('error')) {
                let msg = 'Une erreur est survenue lors de l\'envoi du message.';
                const err = params.get('error');
                if (err === 'empty_fields') msg = 'Veuillez remplir tous les champs requis.';
                else if (err === 'invalid_email') msg = 'Veuillez entrer une adresse email valide.';
                else if (err === 'mail_error') msg = 'Problème lors de l\'envoi de l\'email. Veuillez réessayer plus tard.';
                showNotification(msg, 'error');
                window.history.replaceState(null, '', window.location.pathname);
            }
        });
    </script>
</body>
</html>