Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mon Parcours | ÉducAI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-r from-primary-600 to-primary-800 text-white py-20 px-6"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Mon Parcours</h1> | |
| <p class="text-xl md:text-2xl">Découvrez mon expérience et mon approche pédagogique</p> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 px-6 bg-white"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="flex flex-col md:flex-row gap-12"> | |
| <div class="md:w-1/3"> | |
| <img src="http://static.photos/people/640x360/10" alt="Marie Dupont" class="rounded-lg shadow-xl w-full h-auto mb-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="font-bold text-lg text-primary-700 mb-4">Informations</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="award" class="text-primary-600 mr-3 mt-1"></i> | |
| <span>Formatrice certifiée</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="text-primary-600 mr-3 mt-1"></i> | |
| <span>Lyon, France</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="globe" class="text-primary-600 mr-3 mt-1"></i> | |
| <span>Interventions dans toute la France</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="calendar" class="text-primary-600 mr-3 mt-1"></i> | |
| <span>+10 ans d'expérience</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h2 class="text-3xl font-bold text-primary-700 mb-6">Marie Dupont</h2> | |
| <p class="text-lg text-gray-700 mb-6">Formatrice spécialisée dans l'intégration du numérique et de l'intelligence artificielle dans les pratiques pédagogiques.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold text-primary-700 mb-4 border-b border-gray-200 pb-2">Expérience Professionnelle</h3> | |
| <div class="space-y-6"> | |
| <!-- Experience 1 --> | |
| <div class="flex"> | |
| <div class="mr-4"> | |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="book-open" class="text-primary-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Formatrice Indépendante</h4> | |
| <p class="text-gray-600 mb-1">2018 - Présent</p> | |
| <p class="text-gray-700">Conception et animation de formations sur les outils numériques et l'IA pour les enseignants du primaire et secondaire.</p> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="flex"> | |
| <div class="mr-4"> | |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="monitor" class="text-primary-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Chargée de mission numérique</h4> | |
| <p class="text-gray-600 mb-1">2014 - 2018</p> | |
| <p class="text-gray-700">Accompagnement des établissements scolaires dans leur transition numérique au sein de l'Académie de Lyon.</p> | |
| </div> | |
| </div> | |
| <!-- Experience 3 --> | |
| <div class="flex"> | |
| <div class="mr-4"> | |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="users" class="text-primary-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Professeure des écoles</h4> | |
| <p class="text-gray-600 mb-1">2010 - 2014</p> | |
| <p class="text-gray-700">Enseignante en école primaire avec une spécialisation dans l'intégration des outils numériques en classe.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-primary-700 mb-4 border-b border-gray-200 pb-2">Formation</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Master en Ingénierie Pédagogique</h4> | |
| <p class="text-gray-600">Université Lyon 2 - 2016</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Certification en Intelligence Artificielle</h4> | |
| <p class="text-gray-600">Stanford Online - 2019</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Diplôme de Professeure des Écoles</h4> | |
| <p class="text-gray-600">ESPE Lyon - 2010</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Approach Section --> | |
| <section class="py-16 px-6 bg-gray-50"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="text-3xl font-bold text-center text-primary-700 mb-12">Mon Approche Pédagogique</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Approach 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="user" class="text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Centrée sur l'enseignant</h3> | |
| <p class="text-gray-700">Des formations adaptées à vos besoins spécifiques et à votre contexte d'enseignement.</p> | |
| </div> | |
| <!-- Approach 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="activity" class="text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Pratique et concrète</h3> | |
| <p class="text-gray-700">Des mises en situation et des exercices directement applicables en classe.</p> | |
| </div> | |
| <!-- Approach 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="refresh-cw" class="text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Accompagnement continu</h3> | |
| <p class="text-gray-700">Un suivi après la formation pour vous aider dans la mise en œuvre.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |