{"id":12,"date":"2025-11-29T11:58:57","date_gmt":"2025-11-29T11:58:57","guid":{"rendered":"https:\/\/portfolio5492.live-website.com\/?page_id=12"},"modified":"2026-05-24T11:25:54","modified_gmt":"2026-05-24T11:25:54","slug":"a-propos","status":"publish","type":"page","link":"https:\/\/noubissikenmogne.com\/index.php\/a-propos\/","title":{"rendered":"Mon parcours"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Mon Parcours - Hero Section<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .parcours-hero-container {\n position: relative;\n width: 100%;\n height: 400px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0a0e27;\n }\n\n \/* Animation de fond futuriste *\/\n .background-animation {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 50%, #0d47a1 100%);\n z-index: 1;\n }\n\n .grid-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(33, 150, 243, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(33, 150, 243, 0.1) 1px, transparent 1px);\n background-size: 50px 50px;\n animation: gridMove 20s linear infinite;\n z-index: 2;\n }\n\n @keyframes gridMove {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(50px, 50px);\n }\n }\n\n \/* Particules flottantes *\/\n .particle {\n position: absolute;\n background: rgba(33, 150, 243, 0.6);\n border-radius: 50%;\n animation: float 15s infinite;\n z-index: 2;\n }\n\n @keyframes float {\n 0%, 100% {\n transform: translateY(0) translateX(0);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh) translateX(100px);\n opacity: 0;\n }\n }\n\n \/* Cercles lumineux *\/\n .glow-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(60px);\n z-index: 2;\n }\n\n .glow-1 {\n width: 400px;\n height: 400px;\n background: rgba(33, 150, 243, 0.3);\n top: 20%;\n left: 10%;\n animation: pulse 8s ease-in-out infinite;\n }\n\n .glow-2 {\n width: 300px;\n height: 300px;\n background: rgba(0, 188, 212, 0.2);\n bottom: 20%;\n right: 15%;\n animation: pulse 6s ease-in-out infinite reverse;\n }\n\n @keyframes pulse {\n 0%, 100% {\n transform: scale(1);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.8;\n }\n }\n\n \/* Contenu principal *\/\n .parcours-content {\n position: relative;\n z-index: 10;\n text-align: center;\n color: #ffffff;\n padding: 20px;\n }\n\n .parcours-title {\n font-size: 3.5rem;\n font-weight: 700;\n margin-bottom: 20px;\n font-family: 'Arial', sans-serif;\n color: #ffffff;\n text-shadow: 0 0 20px rgba(33, 150, 243, 0.5);\n }\n\n .greeting {\n font-size: 1.2rem;\n font-weight: 300;\n margin-bottom: 15px;\n opacity: 1;\n letter-spacing: 2px;\n color: #64b5f6;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .parcours-hero-container {\n height: 300px;\n }\n\n .parcours-title {\n font-size: 2rem;\n }\n \n .greeting {\n font-size: 1rem;\n }\n \n .glow-1, .glow-2 {\n width: 200px;\n height: 200px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"parcours-hero-container\">\n <!-- Animation de fond -->\n <div class=\"background-animation\"><\/div>\n <div class=\"grid-overlay\"><\/div>\n \n <!-- Cercles lumineux -->\n <div class=\"glow-circle glow-1\"><\/div>\n <div class=\"glow-circle glow-2\"><\/div>\n \n <!-- Particules -->\n <div id=\"particles\"><\/div>\n \n <!-- Contenu principal -->\n <div class=\"parcours-content\">\n <div class=\"parcours-title\">Mon parcours<\/div>\n <div class=\"greeting\">D\u00e9couvrez mon parcours, mes comp\u00e9tences et ma passion pour l'informatique.<\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ G\u00e9n\u00e9rer des particules flottantes\n const particlesContainer = document.getElementById('particles');\n for (let i = 0; i < 30; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.width = Math.random() * 5 + 2 + 'px';\n particle.style.height = particle.style.width;\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 15 + 's';\n particle.style.animationDuration = (Math.random() * 10 + 10) + 's';\n particlesContainer.appendChild(particle);\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0529e62 e-flex e-con-boxed e-con e-parent\" data-id=\"0529e62\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3714f61 elementor-widget elementor-widget-html\" data-id=\"3714f61\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* --- ISOLATION ET VARIABLES --- *\/\n .timeline-section {\n --cyan-primary: #00bcd4;\n --cyan-light: #e0f7fa;\n --text-dark: #333333;\n --text-gray: #666666;\n --bg-card: #ffffff;\n \n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n max-width: 1100px;\n margin: 40px auto;\n padding: 20px;\n }\n\n \/* --- TITRE --- *\/\n .timeline-section .main-title {\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 2.2rem;\n color: #0000000; \/* Couleur claire comme sur l'image *\/\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n margin-bottom: 10px;\n font-weight: 800;\n }\n\n .timeline-section .title-line {\n width: 100%;\n max-width: 400px;\n height: 4px;\n background: var(--cyan-primary);\n margin-bottom: 40px;\n }\n\n \/* --- CONTENEUR TIMELINE --- *\/\n .timeline-section .timeline-container {\n position: relative;\n padding-left: 40px;\n }\n\n \/* La ligne verticale cyan *\/\n .timeline-section .timeline-container::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background: var(--cyan-primary);\n border-radius: 2px;\n }\n\n \/* --- ITEM DE LA TIMELINE --- *\/\n .timeline-section .timeline-item {\n position: relative;\n margin-bottom: 40px;\n }\n\n \/* Le point blanc sur la ligne *\/\n .timeline-section .timeline-item::before {\n content: '';\n position: absolute;\n left: -46px; \/* Ajust\u00e9 pour centrer sur la ligne de 4px *\/\n top: 20px;\n width: 12px;\n height: 12px;\n background: white;\n border: 3px solid var(--cyan-primary);\n border-radius: 50%;\n z-index: 2;\n }\n\n \/* --- CARTE --- *\/\n .timeline-section .timeline-card {\n background: var(--bg-card);\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n border: 1px solid rgba(0,0,0,0.05);\n transition: transform 0.3s ease;\n }\n\n .timeline-section .timeline-card:hover {\n transform: translateX(10px);\n }\n\n \/* --- TEXTES --- *\/\n .timeline-section .item-date {\n color: var(--cyan-primary);\n font-weight: bold;\n font-size: 0.9rem;\n margin-bottom: 8px;\n }\n\n .timeline-section .item-title {\n color: var(--text-dark);\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 10px;\n }\n\n .timeline-section .item-school {\n color: var(--text-gray);\n font-size: 1rem;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .timeline-section .item-address {\n color: #999;\n font-size: 0.85rem;\n margin-bottom: 15px;\n }\n\n \/* --- BADGE \/ TAG --- *\/\n .timeline-section .status-badge {\n display: inline-block;\n background: var(--cyan-light);\n color: var(--cyan-primary);\n padding: 8px 15px;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.9rem;\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 768px) {\n .timeline-section .main-title { font-size: 1.6rem; }\n .timeline-section .timeline-container { padding-left: 30px; }\n .timeline-section .timeline-item::before { left: -36px; }\n }\n<\/style>\n\n<div class=\"timeline-section\">\n <h2 class=\"main-title\">\ud83c\udf93 Mon Parcours Scolaire<\/h2>\n <div class=\"title-line\"><\/div>\n\n <div class=\"timeline-container\">\n \n <div class=\"timeline-item\">\n <div class=\"timeline-card\">\n <div class=\"item-date\">2024 \u2014 Aujourd'hui<\/div>\n <div class=\"item-title\">BTS SIO (Services Informatiques aux Organisations)<\/div>\n <div class=\"item-school\">\ud83c\udfe2 \u00c9cole IRIS \u2014 Paris 17e<\/div>\n <div class=\"item-address\">\ud83d\udccd 6-12 Impasse des Deux Cousins, 75017 Paris<\/div>\n <div class=\"status-badge\">En cours (2\u00e8me ann\u00e9e)<\/div>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-card\">\n <div class=\"item-date\">2023<\/div>\n <div class=\"item-title\">Baccalaur\u00e9at<\/div>\n <div class=\"item-school\">\ud83c\udfeb Coll\u00e8ge De La Salle \u2014 Douala, Cameroun<\/div>\n <div class=\"status-badge\">Dipl\u00f4me obtenu<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0fe243 e-flex e-con-boxed e-con e-parent\" data-id=\"e0fe243\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d06cbb elementor-widget elementor-widget-html\" data-id=\"0d06cbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Mes Projets - Portfolio<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n padding: 40px 20px;\n background: #f0f0f0;\n min-height: 100vh;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n :root {\n --cyan: #00bcd4;\n --cyan-fonce: #0097a7;\n --blanc: #ffffff;\n --gris-clair: #f0f0f0;\n --gris-texte: #333333;\n --gris-moyen: #666666;\n }\n\n .projects-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 40px 20px;\n }\n\n .section-title-top {\n text-align: center;\n color: var(--cyan);\n font-size: 2rem;\n font-weight: 600;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 3px;\n }\n\n .section-title {\n text-align: center;\n color: var(--gris-texte);\n font-size: 1.8rem;\n font-weight: 600;\n margin-bottom: 10px;\n }\n\n .title-underline {\n width: 120px;\n height: 4px;\n background: var(--cyan);\n margin: 0 auto 60px;\n }\n\n .subsection-title {\n color: var(--cyan);\n font-size: 1.6rem;\n font-weight: 600;\n margin: 50px 0 30px;\n padding-bottom: 15px;\n border-bottom: 3px solid var(--cyan);\n }\n\n .subsection-title:first-of-type {\n margin-top: 0;\n }\n\n .projects-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 35px;\n margin-bottom: 40px;\n }\n\n .project-card {\n background: var(--blanc);\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.08);\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n border: 2px solid transparent;\n }\n\n .project-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);\n border-color: var(--cyan);\n }\n\n .project-image {\n width: 100%;\n height: 250px;\n background: var(--blanc);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-bottom: 3px solid var(--cyan);\n transition: all 0.3s ease;\n position: relative;\n }\n\n .project-card:hover .project-image {\n background: #fafafa;\n }\n\n .project-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n }\n\n .project-card:hover .project-image img {\n transform: scale(1.1);\n }\n\n .project-content {\n padding: 25px;\n }\n\n .project-title {\n color: var(--gris-texte);\n font-size: 1.4rem;\n font-weight: 600;\n margin-bottom: 15px;\n transition: color 0.3s ease;\n }\n\n .project-card:hover .project-title {\n color: var(--cyan);\n }\n\n .project-description {\n color: var(--gris-moyen);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 15px;\n }\n\n .project-description ul {\n margin: 10px 0;\n padding-left: 20px;\n }\n\n .project-description li {\n margin-bottom: 8px;\n transition: transform 0.2s ease;\n }\n\n .project-card:hover .project-description li {\n transform: translateX(5px);\n }\n\n .project-tech {\n color: var(--cyan);\n font-size: 0.9rem;\n font-weight: 600;\n margin-top: 15px;\n }\n\n .project-button {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--cyan);\n color: var(--blanc);\n padding: 10px 25px;\n border-radius: 25px;\n text-decoration: none;\n font-weight: 600;\n margin-top: 15px;\n transition: all 0.3s ease;\n border: 2px solid var(--cyan);\n cursor: pointer;\n }\n\n .project-button:hover {\n background: var(--cyan-fonce);\n border-color: var(--cyan-fonce);\n transform: translateX(5px);\n }\n\n \/* ===== CAROUSEL MODAL ===== *\/\n .carousel-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.85);\n z-index: 9999;\n align-items: center;\n justify-content: center;\n }\n\n .carousel-overlay.active {\n display: flex;\n }\n\n .carousel-box {\n background: #fff;\n border-radius: 16px;\n max-width: 860px;\n width: 94%;\n padding: 30px 30px 24px;\n position: relative;\n }\n\n .carousel-header {\n font-size: 1.2rem;\n font-weight: 600;\n color: #333;\n margin-bottom: 20px;\n }\n\n .carousel-close {\n position: absolute;\n top: 16px;\n right: 18px;\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #888;\n line-height: 1;\n transition: color 0.2s;\n }\n\n .carousel-close:hover {\n color: #333;\n }\n\n .carousel-track {\n position: relative;\n background: #f5f5f5;\n border-radius: 10px;\n overflow: hidden;\n height: 420px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .carousel-track img {\n max-width: 100%;\n max-height: 420px;\n object-fit: contain;\n display: none;\n }\n\n .carousel-track img.active {\n display: block;\n }\n\n .carousel-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.92);\n border: none;\n border-radius: 50%;\n width: 44px;\n height: 44px;\n font-size: 22px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #333;\n z-index: 2;\n transition: background 0.2s, transform 0.2s;\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n }\n\n .carousel-arrow:hover {\n background: #fff;\n transform: translateY(-50%) scale(1.08);\n }\n\n .carousel-arrow.left { left: 12px; }\n .carousel-arrow.right { right: 12px; }\n\n .carousel-caption {\n text-align: center;\n font-size: 13px;\n color: #888;\n margin-top: 10px;\n }\n\n .carousel-dots {\n display: flex;\n justify-content: center;\n gap: 9px;\n margin-top: 14px;\n }\n\n .carousel-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #ccc;\n border: none;\n cursor: pointer;\n transition: background 0.2s, transform 0.2s;\n padding: 0;\n }\n\n .carousel-dot.active {\n background: var(--cyan);\n transform: scale(1.2);\n }\n\n \/* Responsive *\/\n @media (max-width: 1024px) {\n .projects-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n }\n }\n\n @media (max-width: 768px) {\n .projects-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }\n\n .section-title-top { font-size: 1.5rem; }\n .section-title { font-size: 1.4rem; }\n .carousel-track { height: 260px; }\n .carousel-track img { max-height: 260px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"projects-section\">\n\n <h2 class=\"section-title-top\">Projets<\/h2>\n <h3 class=\"section-title\">Mes R\u00e9alisations<\/h3>\n <div class=\"title-underline\"><\/div>\n\n <!-- SECTION PROFESSIONNELLE -->\n <h3 class=\"subsection-title\">\ud83c\udfe2 R\u00e9alisations Professionnelles<\/h3>\n\n <div class=\"projects-grid\">\n\n <!-- Projet Pro 1: Restaurant Africain -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/istockphoto-1143191120-612x612-1.jpg\" alt=\"Restaurant Africain\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">Site Vitrine Restaurant Africain<\/h3>\n <div class=\"project-description\">\n Site vitrine pour un restaurant de cuisine africaine :\n <ul>\n <li>Design moderne et chaleureux refl\u00e9tant l'identit\u00e9 africaine<\/li>\n <li>Pr\u00e9sentation du menu, galerie photos et formulaire de r\u00e9servation<\/li>\n <li>Optimisation mobile et int\u00e9gration Google Maps<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">WordPress \u2022 Elementor \u2022 HTML\/CSS<\/div>\n <a href=\"https:\/\/dreamy-alfajores-d1b26e.netlify.app\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <!-- Projet Pro 2: Elphytech -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/LogoMakr-74jbvi.png\" alt=\"Elphytech\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">Site Vitrine Elphytech<\/h3>\n <div class=\"project-description\">\n Site professionnel pour l'entreprise Elphytech :\n <ul>\n <li>Pr\u00e9sentation des services et solutions technologiques<\/li>\n <li>Interface professionnelle avec animations fluides<\/li>\n <li>Formulaire de contact et optimisation SEO<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">WordPress \u2022 Elementor \u2022 PHP<\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/04\/Rapport_Stage_Elphytech.pdf\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- SECTION SCOLAIRE -->\n <h3 class=\"subsection-title\">\ud83c\udf93 R\u00e9alisations Scolaires<\/h3>\n\n <div class=\"projects-grid\">\n\n <!-- Projet 1: Auto \u00c9cole POO -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/auto_ecole.png\" alt=\"Auto \u00c9cole\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">Auto \u00c9cole POO<\/h3>\n <div class=\"project-description\">\n Site de gestion d'auto-\u00e9cole avec architecture POO :\n <ul>\n <li>Gestion candidats, moniteurs, v\u00e9hicules et examens<\/li>\n <li>Architecture Frontend\/Backend avec base relationnelle<\/li>\n <li>Docker pour d\u00e9ploiement structur\u00e9 et maintenable<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">HTML\/CSS \u2022 PHP \u2022 MySQL\/MariaDB<\/div>\n <!-- Bouton qui ouvre le carousel -->\n <a href=\"#\" class=\"project-button\" onclick=\"openCarousel(); return false;\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <!-- Projet 2: Snake en C -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/snake-scaled.jpg\" alt=\"Snake\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">Snake en C<\/h3>\n <div class=\"project-description\">\n Jeu Snake d\u00e9velopp\u00e9 en langage C :\n <ul>\n <li>Gestion des d\u00e9placements au clavier en console<\/li>\n <li>D\u00e9tection des collisions (murs et serpent)<\/li>\n <li>Syst\u00e8me de score et sauvegarde de parties<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">Langage C \u2022 Console Windows<\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/Le-Jeu-Snake-en-Langage-C.pdf\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <!-- Projet 3: Site E-Commerce AFRISTYLE -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/afristyle.png\" alt=\"AFRISTYLE\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">AFRISTYLE E-Commerce<\/h3>\n <div class=\"project-description\">\n Boutique en ligne Shopify pour v\u00eatements africains :\n <ul>\n <li>Personnalisation compl\u00e8te du th\u00e8me et design responsive<\/li>\n <li>Gestion catalogue produits et syst\u00e8me de paiement s\u00e9curis\u00e9<\/li>\n <li>Optimisation SEO et int\u00e9gration r\u00e9seaux sociaux<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">Shopify \u2022 Liquid \u2022 HTML\/CSS<\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/AfriStyle_Presentation.pdf\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <!-- Projet 4: OCS Inventory & GLPI -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/ocsglpi.png\" alt=\"OCS GLPI\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">OCS Inventory & GLPI<\/h3>\n <div class=\"project-description\">\n D\u00e9ploiement d'outils de gestion de parc informatique :\n <ul>\n <li>Installation et configuration OCS pour inventaire automatis\u00e9<\/li>\n <li>Int\u00e9gration GLPI pour ticketing et gestion incidents<\/li>\n <li>Synchronisation bases de donn\u00e9es et supervision r\u00e9seau<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">OCS Inventory \u2022 GLPI \u2022 MySQL \u2022 Linux<\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/ocs_glpi.pdf\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <!-- Projet 5: Site E-Enseignement WordPress -->\n <div class=\"project-card\">\n <div class=\"project-image\">\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/e-enseignement-1.png\" alt=\"WordPress E-Learning\">\n <\/div>\n <div class=\"project-content\">\n <h3 class=\"project-title\">E-Enseignement WordPress<\/h3>\n <div class=\"project-description\">\n Plateforme \u00e9ducative en ligne avec WordPress :\n <ul>\n <li>Installation locale XAMPP et th\u00e8me \u00e9ducatif personnalis\u00e9<\/li>\n <li>Cr\u00e9ation de modules de cours et gestion utilisateurs<\/li>\n <li>Optimisation Responsive Design et tests multi-navigateurs<\/li>\n <\/ul>\n <\/div>\n <div class=\"project-tech\">WordPress \u2022 PHP \u2022 XAMPP \u2022 MySQL<\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/E-Enseignements.pdf\" class=\"project-button\">\ud83d\udcc4 Pr\u00e9sentation<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n\n<!-- ============================================================\n CAROUSEL MODAL \u2014 AUTO \u00c9COLE POO\n Remplace les 3 URLs ci-dessous par tes liens WordPress\n ============================================================ -->\n<div class=\"carousel-overlay\" id=\"carousel-modal\">\n <div class=\"carousel-box\">\n\n <button class=\"carousel-close\" onclick=\"closeCarousel()\">\u2715<\/button>\n <p class=\"carousel-header\">Auto \u00c9cole EasyPermis \u2014 Pr\u00e9sentation du projet<\/p>\n\n <div class=\"carousel-track\">\n <button class=\"carousel-arrow left\" onclick=\"prevSlide()\">‹<\/button>\n\n <!-- \u2193\u2193\u2193 REMPLACE CES 3 LIENS PAR TES URLS WORDPRESS \u2193\u2193\u2193 -->\n <img decoding=\"async\" id=\"slide-0\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/04\/image-3.png\" alt=\"Page d'accueil\" class=\"active\">\n <img decoding=\"async\" id=\"slide-1\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/04\/image-4.png\" alt=\"Formulaire d'inscription\">\n <img decoding=\"async\" id=\"slide-2\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/04\/image-5.png\" alt=\"Tableau de bord administrateur\">\n <!-- \u2191\u2191\u2191 FIN DES LIENS \u00c0 REMPLACER \u2191\u2191\u2191 -->\n\n <button class=\"carousel-arrow right\" onclick=\"nextSlide()\">›<\/button>\n <\/div>\n\n <p class=\"carousel-caption\" id=\"carousel-caption\">Page d'accueil \u2014 1 \/ 3<\/p>\n\n <div class=\"carousel-dots\">\n <button class=\"carousel-dot active\" id=\"dot-0\" onclick=\"goTo(0)\"><\/button>\n <button class=\"carousel-dot\" id=\"dot-1\" onclick=\"goTo(1)\"><\/button>\n <button class=\"carousel-dot\" id=\"dot-2\" onclick=\"goTo(2)\"><\/button>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n var cur = 0;\n var captions = [\n \"Page d'accueil \u2014 1 \/ 3\",\n \"Formulaire d'inscription \u2014 2 \/ 3\",\n \"Tableau de bord administrateur \u2014 3 \/ 3\"\n ];\n\n function goTo(n) {\n document.getElementById('slide-' + cur).classList.remove('active');\n document.getElementById('dot-' + cur).classList.remove('active');\n cur = n;\n document.getElementById('slide-' + cur).classList.add('active');\n document.getElementById('dot-' + cur).classList.add('active');\n document.getElementById('carousel-caption').textContent = captions[cur];\n }\n\n function nextSlide() { goTo((cur + 1) % 3); }\n function prevSlide() { goTo((cur + 2) % 3); }\n\n function openCarousel() {\n document.getElementById('carousel-modal').classList.add('active');\n goTo(0);\n }\n\n function closeCarousel() {\n document.getElementById('carousel-modal').classList.remove('active');\n }\n\n \/\/ Clic en dehors de la box = fermeture\n document.getElementById('carousel-modal').addEventListener('click', function(e) {\n if (e.target === this) closeCarousel();\n });\n\n \/\/ Touche \u00c9chap = fermeture\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') closeCarousel();\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d03482 e-flex e-con-boxed e-con e-parent\" data-id=\"6d03482\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58eafcc elementor-widget elementor-widget-html\" data-id=\"58eafcc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Cours OpenClassrooms - Portfolio<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f5f5; }\r\n :root {\r\n --cyan: #00bcd4; --cyan-fonce: #0097a7; --blanc: #ffffff;\r\n --gris-clair: #f0f0f0; --gris-texte: #333333; --gris-moyen: #666666;\r\n }\r\n .cours-section { background-color: var(--blanc); text-align: center; padding: 60px 5%; min-height: 100vh; }\r\n .section-title-top { color: var(--cyan); font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; }\r\n .section-title { color: #000000 !important; font-weight: 900; font-size: 2.8rem; margin-bottom: 15px; }\r\n .section-description { color: #555555; font-size: 1.1rem; max-width: 700px; margin: 0 auto 50px; line-height: 1.6; font-weight: 400; }\r\n .formations-container { max-width: 1000px; margin: 0 auto; }\r\n .formation-card { border: 2px solid #eee; border-radius: 12px; padding: 25px 30px; margin-bottom: 25px; text-align: left; background: var(--blanc); transition: all 0.3s ease; }\r\n .formation-card:hover { border-color: var(--cyan); box-shadow: 0 5px 15px rgba(0, 188, 212, 0.1); transform: translateY(-3px); }\r\n .formation-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }\r\n .formation-info { display: flex; align-items: center; gap: 15px; flex: 1; }\r\n .formation-icon { width: 48px; height: 48px; transition: transform 0.3s ease; }\r\n .formation-card:hover .formation-icon { transform: scale(1.1); }\r\n .formation-details h2 { color: var(--gris-texte); font-weight: 900; font-size: 1.6rem; margin: 0; transition: color 0.3s ease; }\r\n .formation-card:hover .formation-details h2 { color: var(--cyan); }\r\n .formation-details p { color: var(--gris-moyen); font-size: 1rem; margin-top: 5px; }\r\n .formation-badges { display: flex; align-items: center; gap: 10px; }\r\n .badge { background-color: var(--gris-moyen); color: var(--blanc); padding: 6px 12px; border-radius: 5px; font-size: 0.9rem; transition: all 0.3s ease; }\r\n .formation-card:hover .badge { background-color: var(--cyan); }\r\n .toggle-btn { cursor: pointer; transition: transform 0.3s ease; }\r\n .toggle-btn i { color: var(--cyan); font-size: 2.5rem; }\r\n .toggle-btn.active { transform: rotate(180deg); }\r\n .hidden-content { display: none; margin-top: 30px; color: var(--gris-texte); font-size: 1rem; line-height: 1.6; }\r\n .module-box { margin-bottom: 15px; background-color: var(--gris-clair); padding: 20px; border-radius: 10px; border-left: 6px solid var(--cyan); transition: all 0.3s ease; }\r\n .module-box:hover { background-color: #e8e8e8; transform: translateX(5px); }\r\n .module-box h3 { font-weight: 900; color: var(--gris-texte); margin: 0 0 10px 0; }\r\n .module-box ul { margin: 10px 0 0 0; padding-left: 20px; }\r\n .module-box li { margin-bottom: 8px; }\r\n .competences-section { margin-top: 40px; padding: 25px; background: var(--gris-clair); border-radius: 10px; }\r\n .competences-section h3 { color: var(--gris-texte); font-weight: 900; font-size: 1.5rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; justify-content: center; }\r\n .competences-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }\r\n .competence-badge { background: var(--cyan); color: var(--blanc); padding: 10px 18px; border-radius: 8px; font-weight: 700; transition: all 0.3s ease; }\r\n .competence-badge:hover { background: var(--cyan-fonce); transform: translateY(-3px); }\r\n @media (max-width: 768px) {\r\n .cours-section { padding: 40px 5%; }\r\n .section-title { font-size: 2rem; }\r\n .formation-header { flex-direction: column; align-items: flex-start; }\r\n .formation-info { width: 100%; }\r\n .formation-badges { width: 100%; justify-content: space-between; }\r\n .formation-icon { width: 40px; height: 40px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"cours-section\">\r\n\r\n <h2 class=\"section-title-top\">Cours OpenClassrooms<\/h2>\r\n <h1 class=\"section-title\">Formations suivies sur OpenClassrooms<\/h1>\r\n <p class=\"section-description\">D\u00e9couvrez l'ensemble des comp\u00e9tences acquises dans chaque formation.<\/p>\r\n\r\n <div class=\"formations-container\">\r\n\r\n <!-- FORMATION WORDPRESS -->\r\n <div class=\"formation-card\">\r\n <div class=\"formation-header\">\r\n <div class=\"formation-info\">\r\n <svg class=\"formation-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 122.52 122.523\" width=\"48\" height=\"48\">\r\n <circle cx=\"61.26\" cy=\"61.26\" r=\"61.26\" fill=\"#21759b\"\/>\r\n <path d=\"M15.86 61.26c0 19.59 12.44 36.28 29.84 42.58L19.64 41.75c-2.48 6.25-3.78 13.01-3.78 19.51z\" fill=\"#fff\"\/>\r\n <path d=\"M96.15 58.61c0-6.12-2.2-10.36-4.08-13.66-2.51-4.08-4.86-7.53-4.86-11.61 0-4.55 3.45-8.78 8.32-8.78.22 0 .43.03.64.04-8.82-8.08-20.55-13.01-33.43-13.01-17.29 0-32.49 8.87-41.36 22.27 1.16.04 2.25.06 3.18.06 5.16 0 13.15-.63 13.15-.63 2.66-.16 2.97 3.75.32 4.06 0 0-2.67.31-5.64.47l17.96 53.4 10.79-32.37-7.68-21.03c-2.66-.16-5.18-.47-5.18-.47-2.66-.16-2.35-4.22.31-4.06 0 0 8.14.63 12.98.63 5.16 0 13.15-.63 13.15-.63 2.66-.16 2.97 3.75.32 4.06 0 0-2.68.31-5.65.47l17.82 53.01 4.92-16.43c2.13-6.81 3.75-11.7 3.75-15.91z\" fill=\"#fff\"\/>\r\n <path d=\"M62.47 66.41l-14.79 42.97c4.42 1.3 9.09 2.01 13.93 2.01 5.74 0 11.25-0.99 16.38-2.79-.13-.21-.25-.43-.36-.66L62.47 66.41z\" fill=\"#fff\"\/>\r\n <path d=\"M103.48 36.33c.22 1.61.34 3.34.34 5.2 0 5.13-.96 10.91-3.85 18.14L85.12 102.3c14.55-8.49 24.34-24.32 24.34-42.39 0-8.58-2.21-16.65-6.08-23.66l.1.08z\" fill=\"#fff\"\/>\r\n <\/svg>\r\n <div class=\"formation-details\">\r\n <h2>Cr\u00e9ation de site WordPress<\/h2>\r\n <p>Fondamentaux de la conception et gestion de sites WordPress modernes.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"formation-badges\">\r\n <div class=\"badge\">15 heures<\/div>\r\n <div class=\"badge\">Niveau Avanc\u00e9<\/div>\r\n <div class=\"toggle-btn\"><i class=\"fas fa-caret-down\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hidden-content\">\r\n <div class=\"module-box\">\r\n <h3>Module 1 : D\u00e9couverte WordPress<\/h3>\r\n <ul>\r\n <li>D\u00e9couverte de WordPress et mise en place du site web<\/li>\r\n <li>Installation de l'environnement de travail<\/li>\r\n <li>Initiation au fonctionnement d'un site web<\/li>\r\n <li>Cr\u00e9ation du premier site WordPress<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 2 : Administration<\/h3>\r\n <ul>\r\n <li>Prise en main du tableau de bord WordPress<\/li>\r\n <li>Cr\u00e9ation d'articles et gestion du contenu<\/li>\r\n <li>Param\u00e9trage g\u00e9n\u00e9ral du site<\/li>\r\n <li>Cr\u00e9ation d'une page d'accueil et d'un menu de navigation<\/li>\r\n <li>Personnalisation de l'apparence<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 3 : Configuration & Extensions<\/h3>\r\n <ul>\r\n <li>Choix et configuration du th\u00e8me<\/li>\r\n <li>S\u00e9lection des extensions adapt\u00e9es au projet<\/li>\r\n <li>Param\u00e9trage du builder de pages<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 4 : Personnalisation<\/h3>\r\n <ul>\r\n <li>Personnalisation du contenu et du design<\/li>\r\n <li>Pr\u00e9paration de la page d'accueil avec Elementor<\/li>\r\n <li>Ajout de fonctionnalit\u00e9s compl\u00e9mentaires<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 5 : Lancement & Optimisation<\/h3>\r\n <ul>\r\n <li>Optimisation SEO et performances<\/li>\r\n <li>Suivi du trafic<\/li>\r\n <li>V\u00e9rification finale avant mise en ligne<\/li>\r\n <li>Mise en ligne du site professionnel<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"competences-section\">\r\n <h3><i class=\"fas fa-brain\"><\/i> Comp\u00e9tences acquises<\/h3>\r\n <div class=\"competences-grid\">\r\n <div class=\"competence-badge\">Cr\u00e9ation de sites WordPress<\/div>\r\n <div class=\"competence-badge\">Personnalisation de th\u00e8mes<\/div>\r\n <div class=\"competence-badge\">Optimisation SEO<\/div>\r\n <div class=\"competence-badge\">Gestion de contenu<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FORMATION SQL -->\r\n <div class=\"formation-card\">\r\n <div class=\"formation-header\">\r\n <div class=\"formation-info\">\r\n <svg class=\"formation-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 48 48\" width=\"48\" height=\"48\">\r\n <path fill=\"#00758F\" d=\"M40.084 32.613c-1.26 0-2.017.4-2.791.808l-.244.123c-.956.482-2.117 1.033-4.327 1.033-2.514 0-3.863-.634-4.95-1.156l-.318-.152c-1.179-.56-2.044-.846-3.745-.846-2.285 0-3.669.62-5.23 1.335l-.528.24c-1.842.844-4.023 1.844-7.598 1.844v-1.914c2.893 0 4.627-.745 6.327-1.52l.527-.239c1.673-.763 3.4-1.555 6.197-1.555 2.23 0 3.39.445 4.75 1.092l.32.154c.86.413 2.116.995 4.25.995 1.523 0 2.34-.338 3.163-.742l.247-.125c.885-.45 1.97-1.004 3.568-1.004 1.3 0 2.372.23 3.388.725l.364.177c1.162.563 1.934.908 3.662.908v1.914c-2.435 0-3.547-.542-4.8-1.145l-.366-.178C42.335 32.904 41.403 32.613 40.084 32.613zM39.996 36.55c-1.306 0-2.366.23-3.377.725l-.368.177c-1.162.563-1.935.908-3.662.908-1.26 0-2.017-.4-2.791-.808l-.244-.123c-.956-.482-2.117-1.033-4.327-1.033-2.514 0-3.863.634-4.95 1.156l-.318.152c-1.18.56-2.044.846-3.745.846-2.285 0-3.67-.62-5.23-1.335l-.528-.24c-1.842-.844-4.023-1.844-7.598-1.844v-1.915c2.893 0 4.627.745 6.327 1.52l.527.24c1.673.762 3.4 1.555 6.197 1.555 2.23 0 3.39-.445 4.75-1.092l.32-.154c.86-.413 2.116-.995 4.25-.995 1.523 0 2.34.338 3.163.742l.247.125c.885.45 1.97 1.004 3.568 1.004 1.3 0 2.372-.23 3.388-.725l.364-.177c1.162-.563 1.934-.908 3.662-.908v1.914C43.56 35.365 42.455 35.907 41.195 36.51l-.366.178C40.337 36.873 39.405 37.164 39.996 36.55zM39.996 40.487c-1.306 0-2.366.23-3.377.725l-.368.177c-1.162.563-1.935.908-3.662.908-1.26 0-2.017-.4-2.791-.808l-.244-.123c-.956-.482-2.117-1.033-4.327-1.033-2.514 0-3.863.634-4.95 1.156l-.318.152c-1.18.56-2.044.846-3.745.846-2.285 0-3.67-.62-5.23-1.335l-.528-.24c-1.842-.844-4.023-1.844-7.598-1.844v-1.914c2.893 0 4.627.745 6.327 1.52l.527.239c1.673.763 3.4 1.555 6.197 1.555 2.23 0 3.39-.445 4.75-1.092l.32-.154c.86-.413 2.116-.995 4.25-.995 1.523 0 2.34.338 3.163.742l.247.125c.885.45 1.97 1.004 3.568 1.004 1.3 0 2.372-.23 3.388-.725l.364-.177c1.162-.563 1.934-.908 3.662-.908v1.914C43.56 39.302 42.455 39.844 41.195 40.447l-.366.178C40.337 40.81 39.405 41.1 39.996 40.487z\"\/>\r\n <path fill=\"#00758F\" d=\"M24 4C12.954 4 4 6.686 4 10v28c0 3.314 8.954 6 20 6s20-2.686 20-6V10C44 6.686 35.046 4 24 4zM24 6c9.941 0 18 2.462 18 4s-8.059 4-18 4S6 11.538 6 10 14.059 6 24 6zM6 14.71C8.955 16.84 15.957 18 24 18s15.045-1.16 18-3.29V18c0 1.538-8.059 4-18 4S6 19.538 6 18v-3.29zm0 8C8.955 24.84 15.957 26 24 26s15.045-1.16 18-3.29V26c0 1.538-8.059 4-18 4S6 27.538 6 26v-3.29zm0 8C8.955 32.84 15.957 34 24 34s15.045-1.16 18-3.29V34c0 1.538-8.059 4-18 4S6 35.538 6 34v-3.29zM6 38c0 1.538 8.059 4 18 4s18-2.462 18-4v-1.29C39.045 38.84 32.043 40 24 40s-15.045-1.16-18-3.29V38z\"\/>\r\n <\/svg>\r\n <div class=\"formation-details\">\r\n <h2>SQL - Gestion de bases de donn\u00e9es<\/h2>\r\n <p>Ma\u00eetrise du langage SQL et des bases de donn\u00e9es relationnelles.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"formation-badges\">\r\n <div class=\"badge\">10 heures<\/div>\r\n <div class=\"badge\">Niveau Interm\u00e9diaire<\/div>\r\n <div class=\"toggle-btn\"><i class=\"fas fa-caret-down\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hidden-content\">\r\n <div class=\"module-box\">\r\n <h3>Module 1 : Introduction aux bases de donn\u00e9es<\/h3>\r\n <ul>\r\n <li>Concepts des bases de donn\u00e9es relationnelles<\/li>\r\n <li>Installation et configuration de MySQL<\/li>\r\n <li>Structure d'une base de donn\u00e9es<\/li>\r\n <li>Premiers pas avec SQL<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 2 : Requ\u00eates de base<\/h3>\r\n <ul>\r\n <li>S\u00e9lection de donn\u00e9es (SELECT)<\/li>\r\n <li>Filtrage avec WHERE<\/li>\r\n <li>Tri et limitation des r\u00e9sultats<\/li>\r\n <li>Fonctions d'agr\u00e9gation (COUNT, SUM, AVG)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 3 : Manipulation de donn\u00e9es<\/h3>\r\n <ul>\r\n <li>Insertion de donn\u00e9es (INSERT)<\/li>\r\n <li>Mise \u00e0 jour (UPDATE)<\/li>\r\n <li>Suppression (DELETE)<\/li>\r\n <li>Transactions et contraintes<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 4 : Requ\u00eates avanc\u00e9es<\/h3>\r\n <ul>\r\n <li>Jointures (INNER, LEFT, RIGHT, FULL)<\/li>\r\n <li>Sous-requ\u00eates et requ\u00eates imbriqu\u00e9es<\/li>\r\n <li>GROUP BY et HAVING<\/li>\r\n <li>Optimisation de requ\u00eates<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"module-box\">\r\n <h3>Module 5 : Conception de bases de donn\u00e9es<\/h3>\r\n <ul>\r\n <li>Mod\u00e9lisation de donn\u00e9es<\/li>\r\n <li>Normalisation des tables<\/li>\r\n <li>Cr\u00e9ation de sch\u00e9mas<\/li>\r\n <li>Index et performances<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"competences-section\">\r\n <h3><i class=\"fas fa-brain\"><\/i> Comp\u00e9tences acquises<\/h3>\r\n <div class=\"competences-grid\">\r\n <div class=\"competence-badge\">Requ\u00eates SQL<\/div>\r\n <div class=\"competence-badge\">Mod\u00e9lisation BDD<\/div>\r\n <div class=\"competence-badge\">Jointures complexes<\/div>\r\n <div class=\"competence-badge\">Optimisation<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n document.querySelectorAll('.toggle-btn').forEach(btn => {\r\n btn.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const card = this.closest('.formation-card');\r\n const content = card.querySelector('.hidden-content');\r\n if (content.style.display === 'block') {\r\n content.style.display = 'none';\r\n this.classList.remove('active');\r\n } else {\r\n content.style.display = 'block';\r\n this.classList.add('active');\r\n }\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7242c2c e-flex e-con-boxed e-con e-parent\" data-id=\"7242c2c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e69071 elementor-widget elementor-widget-html\" data-id=\"0e69071\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section style=\"background-color: #fff; text-align: center; padding: 50px 20px; font-family: 'Roboto', sans-serif; overflow: hidden;\">\r\n <h1 style=\"font-size: 2.5rem; font-weight: bold; color: #000; margin-bottom: 40px;\">Langages et outils utilis\u00e9s<\/h1>\r\n \r\n <style>\r\n .logos-carousel-container {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n padding: 20px 0;\r\n }\r\n \r\n .logos-carousel-track {\r\n display: flex;\r\n animation: logos-scroll 30s linear infinite;\r\n width: fit-content;\r\n }\r\n \r\n .logos-carousel-track:hover {\r\n animation-play-state: paused;\r\n }\r\n \r\n @keyframes logos-scroll {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n \r\n .logos-tool-item {\r\n flex: 0 0 auto;\r\n text-align: center;\r\n width: 120px;\r\n margin: 0 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .logos-tool-item:hover {\r\n transform: scale(1.1);\r\n }\r\n \r\n .logos-tool-icon {\r\n background: #fff;\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 10px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n padding: 15px;\r\n transition: box-shadow 0.3s ease;\r\n }\r\n \r\n .logos-tool-item:hover .logos-tool-icon {\r\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\r\n }\r\n \r\n .logos-tool-icon img {\r\n width: 50px;\r\n height: 50px;\r\n object-fit: contain;\r\n }\r\n \r\n .logos-tool-name {\r\n color: #000;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n margin-top: 8px;\r\n }\r\n \r\n .logos-carousel-container::before,\r\n .logos-carousel-container::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 100px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n \r\n .logos-carousel-container::before {\r\n left: 0;\r\n background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));\r\n }\r\n \r\n .logos-carousel-container::after {\r\n right: 0;\r\n background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));\r\n }\r\n <\/style>\r\n \r\n <div class=\"logos-carousel-container\">\r\n <div class=\"logos-carousel-track\">\r\n <!-- Premier set de logos -->\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/java_logo.png\" alt=\"Java\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Java<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/html_logo.png\" alt=\"HTML\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">HTML<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/css_logo.png\" alt=\"CSS\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">CSS<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/wordpress_logo.png\" alt=\"WordPress\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">WordPress<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/Langage_C_logo.png\" alt=\"Langage C\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Langage C<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/sql_logo.png\" alt=\"SQL\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">SQL<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/mysql_logo.png\" alt=\"MySQL\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">MySQL<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/vscode_logo.png\" alt=\"VS Code\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">VS Code<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/xampp_logo.png\" alt=\"XAMPP\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">XAMPP<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/eclipse_logo.png\" alt=\"Eclipse\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Eclipse<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/UML_logo.png\" alt=\"UML\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">UML<\/div>\r\n <\/div>\r\n\r\n <!-- Duplication pour effet infini -->\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/java_logo.png\" alt=\"Java\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Java<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/html_logo.png\" alt=\"HTML\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">HTML<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/css_logo.png\" alt=\"CSS\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">CSS<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/wordpress_logo.png\" alt=\"WordPress\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">WordPress<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/Langage_C_logo.png\" alt=\"Langage C\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Langage C<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/sql_logo.png\" alt=\"SQL\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">SQL<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/mysql_logo.png\" alt=\"MySQL\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">MySQL<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/vscode_logo.png\" alt=\"VS Code\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">VS Code<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/xampp_logo.png\" alt=\"XAMPP\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">XAMPP<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/eclipse_logo.png\" alt=\"Eclipse\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">Eclipse<\/div>\r\n <\/div>\r\n\r\n <div class=\"logos-tool-item\">\r\n <div class=\"logos-tool-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/UML_logo.png\" alt=\"UML\">\r\n <\/div>\r\n <div class=\"logos-tool-name\">UML<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aff7513 e-flex e-con-boxed e-con e-parent\" data-id=\"aff7513\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79a00f3 elementor-widget elementor-widget-html\" data-id=\"79a00f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n :root {\n --cyan: #00bcd4;\n --cyan-fonce: #0097a7;\n --blanc: #ffffff;\n --gris-clair: #f5f5f5;\n --gris-texte: #333333;\n --gris-moyen: #666666;\n }\n\n .expertise-section {\n background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);\n padding: 80px 5%;\n text-align: center;\n }\n\n .section-header {\n margin-bottom: 60px;\n }\n\n .section-subtitle {\n color: var(--cyan);\n font-size: 1rem;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n margin-bottom: 15px;\n }\n\n .section-title {\n color: var(--gris-texte);\n font-size: 2.8rem;\n font-weight: 900;\n margin: 0;\n }\n\n .expertise-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n max-width: 1300px;\n margin: 0 auto;\n }\n\n .expertise-card {\n background: var(--blanc);\n border: 2px solid #e0e0e0;\n border-radius: 20px;\n padding: 40px 30px;\n transition: all 0.4s ease;\n position: relative;\n overflow: hidden;\n }\n\n .expertise-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-fonce) 100%);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n }\n\n .expertise-card:hover::before {\n transform: scaleX(1);\n }\n\n .expertise-card:hover {\n transform: translateY(-10px);\n border-color: var(--cyan);\n box-shadow: 0 15px 40px rgba(0, 188, 212, 0.15);\n }\n\n .card-icon {\n font-size: 3rem;\n color: var(--cyan);\n margin-bottom: 20px;\n transition: transform 0.3s ease;\n }\n\n .expertise-card:hover .card-icon {\n transform: scale(1.1) rotate(5deg);\n }\n\n .card-title {\n color: var(--gris-texte);\n font-weight: 900;\n font-size: 1.5rem;\n margin-bottom: 30px;\n min-height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Cercle de progression *\/\n .progress-circle {\n position: relative;\n width: 140px;\n height: 140px;\n margin: 30px auto;\n }\n\n .progress-circle svg {\n transform: rotate(-90deg);\n }\n\n .progress-bg {\n fill: none;\n stroke: #e0e0e0;\n stroke-width: 12;\n }\n\n .progress-bar {\n fill: none;\n stroke: var(--cyan);\n stroke-width: 12;\n stroke-linecap: round;\n transition: stroke-dashoffset 1s ease;\n }\n\n .progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 2rem;\n font-weight: 900;\n color: var(--gris-texte);\n }\n\n .card-description {\n color: var(--gris-texte);\n font-weight: 700;\n font-size: 1.1rem;\n margin-bottom: 15px;\n line-height: 1.6;\n }\n\n .tech-list {\n color: var(--gris-moyen);\n font-size: 1rem;\n margin-bottom: 25px;\n line-height: 1.8;\n }\n\n .tools-container {\n display: flex;\n gap: 10px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-fonce) 100%);\n color: var(--blanc);\n padding: 10px 18px;\n border-radius: 25px;\n font-weight: 700;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }\n\n .tool-badge:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3);\n }\n\n @media (max-width: 768px) {\n .expertise-section {\n padding: 60px 5%;\n }\n\n .section-title {\n font-size: 2rem;\n }\n\n .expertise-grid {\n gap: 30px;\n }\n\n .card-title {\n font-size: 1.3rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"expertise-section\">\n \n <div class=\"section-header\">\n <p class=\"section-subtitle\">Mesures d'Expertise<\/p>\n <h1 class=\"section-title\">Comp\u00e9tences Quantifi\u00e9es<\/h1>\n <\/div>\n\n <div class=\"expertise-grid\">\n\n <!-- D\u00c9VELOPPEMENT -->\n <div class=\"expertise-card\">\n <i class=\"fas fa-code card-icon\"><\/i>\n <h2 class=\"card-title\">D\u00e9veloppement<\/h2>\n\n <div class=\"progress-circle\">\n <svg width=\"140\" height=\"140\">\n <circle class=\"progress-bg\" cx=\"70\" cy=\"70\" r=\"60\"\/>\n <circle class=\"progress-bar\" cx=\"70\" cy=\"70\" r=\"60\"\n stroke-dasharray=\"377\" stroke-dashoffset=\"38\"\/>\n <\/svg>\n <div class=\"progress-text\">90%<\/div>\n <\/div>\n\n <p class=\"card-description\">\n D\u00e9veloppement d'applications web Front-end & Back-end\n <\/p>\n <p class=\"tech-list\">\n HTML \u2022 CSS \u2022 JavaScript \u2022 Java \u2022 PHP \u2022 C \u2022 WordPress\n <\/p>\n\n <div class=\"tools-container\">\n <span class=\"tool-badge\">VS Code<\/span>\n <span class=\"tool-badge\">XAMPP<\/span>\n <span class=\"tool-badge\">Eclipse<\/span>\n <\/div>\n <\/div>\n\n <!-- GESTION DE PROJETS -->\n <div class=\"expertise-card\">\n <i class=\"fas fa-project-diagram card-icon\"><\/i>\n <h2 class=\"card-title\">Gestion de Projets<\/h2>\n\n <div class=\"progress-circle\">\n <svg width=\"140\" height=\"140\">\n <circle class=\"progress-bg\" cx=\"70\" cy=\"70\" r=\"60\"\/>\n <circle class=\"progress-bar\" cx=\"70\" cy=\"70\" r=\"60\"\n stroke-dasharray=\"377\" stroke-dashoffset=\"75\"\/>\n <\/svg>\n <div class=\"progress-text\">80%<\/div>\n <\/div>\n\n <p class=\"card-description\">\n Coordination et suivi de projets informatiques\n <\/p>\n <p class=\"tech-list\">\n Trello \u2022 GitHub \u2022 Gantt Project \u2022 Discord\n <\/p>\n\n <div class=\"tools-container\">\n <span class=\"tool-badge\">Gantt Project<\/span>\n <span class=\"tool-badge\">Discord<\/span>\n <span class=\"tool-badge\">Trello<\/span>\n <\/div>\n <\/div>\n\n <!-- BASES DE DONN\u00c9ES -->\n <div class=\"expertise-card\">\n <i class=\"fas fa-database card-icon\"><\/i>\n <h2 class=\"card-title\">Bases de Donn\u00e9es<\/h2>\n\n <div class=\"progress-circle\">\n <svg width=\"140\" height=\"140\">\n <circle class=\"progress-bg\" cx=\"70\" cy=\"70\" r=\"60\"\/>\n <circle class=\"progress-bar\" cx=\"70\" cy=\"70\" r=\"60\"\n stroke-dasharray=\"377\" stroke-dashoffset=\"19\"\/>\n <\/svg>\n <div class=\"progress-text\">95%<\/div>\n <\/div>\n\n <p class=\"card-description\">\n Conception et gestion de bases de donn\u00e9es\n <\/p>\n <p class=\"tech-list\">\n SQL \u2022 UML \u2022 Mod\u00e9lisation\n <\/p>\n\n <div class=\"tools-container\">\n <span class=\"tool-badge\">MySQL<\/span>\n <span class=\"tool-badge\">UML<\/span>\n <span class=\"tool-badge\">MariaDB<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n<\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-85c028c e-flex e-con-boxed e-con e-parent\" data-id=\"85c028c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c5d74e elementor-widget elementor-widget-html\" data-id=\"5c5d74e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section style=\"text-align: center; padding: 80px 5%; font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); color: #000; border-radius: 25px; max-width: 1200px; margin: 80px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; overflow: hidden;\">\r\n\r\n <div style=\"position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: #00bcd4; border-radius: 50%; opacity: 0.1;\"><\/div>\r\n <div style=\"position: absolute; bottom: -80px; left: -80px; width: 250px; height: 250px; background: #00bcd4; border-radius: 50%; opacity: 0.05;\"><\/div>\r\n\r\n <div style=\"position: relative; z-index: 2;\">\r\n <h1 style=\"color: #000; font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2;\">Certifications<\/h1>\r\n <h2 style=\"color: #00bcd4; font-weight: 700; font-size: 1.6rem; margin-bottom: 60px; letter-spacing: 2px;\">Mes accr\u00e9ditations<\/h2>\r\n <\/div>\r\n\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; position: relative; z-index: 2;\">\r\n\r\n <!-- Certification WordPress -->\r\n <div class=\"certification-card\" style=\"background: #fff; padding: 40px 30px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden;\">\r\n <div style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #21759b, #1a6485); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 8px 20px rgba(33, 117, 155, 0.3);\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/wordpress_logo.png\" alt=\"WordPress\" style=\"width: 45px; height: 45px;\">\r\n <\/div>\r\n <h3 style=\"color: #000; font-size: 1.5rem; font-weight: 700; margin-bottom: 15px;\">WordPress<\/h3>\r\n <p style=\"color: #666; font-size: 1rem; margin-bottom: 25px; line-height: 1.6;\">Certification en d\u00e9veloppement et gestion de sites WordPress<\/p>\r\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/wordpress.pdf\" target=\"_blank\" style=\"background: linear-gradient(135deg, #21759b, #1a6485); color: white; border: none; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(33, 117, 155, 0.3); text-decoration: none; display: inline-block;\">\r\n Voir la certification\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Certification SQL -->\r\n <div class=\"certification-card\" style=\"background: #fff; padding: 40px 30px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden;\">\r\n <div style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #00758F, #005f73); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 8px 20px rgba(0, 117, 143, 0.3);\">\r\n <img decoding=\"async\" src=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2025\/11\/sql_logo.png\" alt=\"SQL\" style=\"width: 45px; height: 45px;\">\r\n <\/div>\r\n <h3 style=\"color: #000; font-size: 1.5rem; font-weight: 700; margin-bottom: 15px;\">SQL<\/h3>\r\n <p style=\"color: #666; font-size: 1rem; margin-bottom: 25px; line-height: 1.6;\">Certification en gestion de bases de donn\u00e9es et requ\u00eates SQL<\/p>\r\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/02\/SQL.pdf\" target=\"_blank\" style=\"background: linear-gradient(135deg, #00758F, #005f73); color: white; border: none; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 117, 143, 0.3); text-decoration: none; display: inline-block;\">\r\n Voir la certification\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n .certification-card:hover {\r\n transform: translateY(-10px);\r\n border-color: #00bcd4 !important;\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;\r\n }\r\n a:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;\r\n text-decoration: none !important;\r\n color: white !important;\r\n }\r\n @media (max-width: 768px) {\r\n section { padding: 50px 5%; margin: 40px auto; }\r\n h1 { font-size: 2.8rem !important; }\r\n .certification-card { padding: 30px 20px !important; }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const cards = document.querySelectorAll('.certification-card');\r\n cards.forEach(card => {\r\n card.addEventListener('mouseenter', function() {\r\n this.style.transform = 'translateY(-10px)';\r\n this.style.borderColor = '#00bcd4';\r\n this.style.boxShadow = '0 15px 35px rgba(0,0,0,0.15)';\r\n });\r\n card.addEventListener('mouseleave', function() {\r\n this.style.transform = 'translateY(0)';\r\n this.style.borderColor = 'transparent';\r\n this.style.boxShadow = '0 8px 25px rgba(0,0,0,0.08)';\r\n });\r\n });\r\n });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9a4b95 e-flex e-con-boxed e-con e-parent\" data-id=\"e9a4b95\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a4f72f elementor-widget elementor-widget-html\" data-id=\"3a4f72f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #f5f5f5;\n padding: 40px 20px;\n }\n\n :root {\n --cyan: #00bcd4;\n --cyan-fonce: #0097a7;\n --blanc: #ffffff;\n }\n\n .qualites-section {\n background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-fonce) 100%);\n padding: 80px 10%;\n text-align: center;\n border-radius: 25px;\n box-shadow: 0 10px 40px rgba(0, 188, 212, 0.3);\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .section-header {\n margin-bottom: 50px;\n }\n\n .header-icon {\n font-size: 3.5rem;\n color: var(--blanc);\n margin-bottom: 15px;\n display: inline-block;\n transition: transform 0.3s ease;\n }\n\n .qualites-section:hover .header-icon {\n transform: scale(1.1) rotate(5deg);\n }\n\n .section-title {\n color: var(--blanc);\n font-size: 3rem;\n font-weight: 900;\n margin: 0;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n\n .qualites-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .qualite-badge {\n background: var(--blanc);\n color: var(--cyan-fonce);\n padding: 18px 25px;\n border-radius: 15px;\n font-weight: 900;\n font-size: 1.1rem;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n }\n\n .qualite-badge:hover {\n transform: translateY(-8px) scale(1.05);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n background: var(--cyan-fonce);\n color: var(--blanc);\n }\n\n @media (max-width: 768px) {\n .qualites-section {\n padding: 60px 5%;\n }\n\n .section-title {\n font-size: 2.2rem;\n }\n\n .header-icon {\n font-size: 2.8rem;\n }\n\n .qualites-grid {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 15px;\n }\n\n .qualite-badge {\n padding: 15px 20px;\n font-size: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"qualites-section\">\n \n <div class=\"section-header\">\n <i class=\"fas fa-user-check header-icon\"><\/i>\n <h2 class=\"section-title\">Qualit\u00e9s Personnelles<\/h2>\n <\/div>\n\n <div class=\"qualites-grid\">\n <div class=\"qualite-badge\">Rigoureux<\/div>\n <div class=\"qualite-badge\">Organis\u00e9<\/div>\n <div class=\"qualite-badge\">Pers\u00e9v\u00e9rant<\/div>\n <div class=\"qualite-badge\">Curieux<\/div>\n <div class=\"qualite-badge\">Autonome<\/div>\n <\/div>\n\n<\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mon Parcours – Hero Section Mon parcours D\u00e9couvrez mon parcours, mes comp\u00e9tences et ma passion pour l’informatique. \ud83c\udf93 Mon Parcours Scolaire 2024 \u2014 Aujourd’hui BTS SIO (Services Informatiques aux Organisations) \ud83c\udfe2 \u00c9cole IRIS \u2014 Paris 17e \ud83d\udccd 6-12 Impasse des Deux Cousins, 75017 Paris En cours (2\u00e8me ann\u00e9e) 2023 Baccalaur\u00e9at \ud83c\udfeb Coll\u00e8ge De La Salle […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"on","ocean_header_style":"minimal","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":149,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}