Portfolio Hero Section<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .hero-container {\n position: relative;\n width: 100%;\n height: 85vh;\n min-height: px;\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 .hero-content {\n position: relative;\n z-index: 10;\n text-align: center;\n color: #ffffff;\n padding: 20px;\n }\n\n .greeting {\n font-size: 1.5rem;\n font-weight: 300;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInDown 1s ease forwards;\n letter-spacing: 2px;\n color: #64b5f6;\n }\n\n .name-container {\n font-size: 4rem;\n font-weight: 700;\n margin-bottom: 40px;\n min-height: 100px;\n font-family: 'Arial', sans-serif;\n }\n\n .typing-text {\n display: inline-block;\n border-right: 3px solid #2196f3;\n padding-right: 5px;\n animation: blink 0.7s step-end infinite;\n color: #ffffff;\n text-shadow: 0 0 20px rgba(33, 150, 243, 0.5);\n }\n\n @keyframes blink {\n 50% {\n border-color: transparent;\n }\n }\n\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Bouton de t\u00e9l\u00e9chargement *\/\n .cv-button {\n display: inline-block;\n padding: 18px 45px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n color: #ffffff;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 50px;\n border: 2px solid rgba(33, 150, 243, 0.5);\n transition: all 0.3s ease;\n opacity: 0;\n animation: fadeInUp 1s ease 2s forwards;\n box-shadow: 0 10px 30px rgba(33, 150, 243, 0.3);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n }\n\n .cv-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.2);\n transform: translate(-50%, -50%);\n transition: width 0.6s, height 0.6s;\n }\n\n .cv-button:hover::before {\n width: 300px;\n height: 300px;\n }\n\n .cv-button:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(33, 150, 243, 0.5);\n border-color: #2196f3;\n }\n\n .cv-button span {\n position: relative;\n z-index: 1;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .name-container {\n font-size: 2.5rem;\n }\n \n .greeting {\n font-size: 1.2rem;\n }\n \n .cv-button {\n padding: 15px 35px;\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=\"hero-container\">\n \n <div class=\"background-animation\"><\/div>\n <div class=\"grid-overlay\"><\/div>\n \n \n <div class=\"glow-circle glow-1\"><\/div>\n <div class=\"glow-circle glow-2\"><\/div>\n \n \n <div id=\"particles\"><\/div>\n \n<div class=\"hero-content\">\n <div class=\"greeting\">Bonjour, Je Suis<\/div>\n <div class=\"name-container\">\n <span class=\"typing-text\" id=\"typingText\"><\/span>\n <\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/CV.pdf\" \n class=\"cv-button\" \n download \n target=\"_blank\">\n <span>\ud83d\udcc4 T\u00e9l\u00e9charger mon CV<\/span>\n <\/a>\n<\/div>\n\n <script>\n \/\/ Animation de texte qui s'\u00e9crit progressivement\n const text = \"NOUBISSI Kenmogne\"; \/\/ Remplacez par votre nom\n const typingText = document.getElementById('typingText');\n let index = 0;\n\n function typeWriter() {\n if (index < text.length) {\n typingText.textContent += text.charAt(index);\n index++;\n setTimeout(typeWriter, 150); \/\/ Vitesse de frappe (150ms par lettre)\n }\n }\n\n \/\/ D\u00e9marrer l'animation apr\u00e8s 1 seconde\n setTimeout(typeWriter, 1000);\n\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\n \/\/ Gestion du bouton CV (remplacez l'URL par le lien de votre CV)\n document.getElementById('cvButton').addEventListener('click', function(e) {\n e.preventDefault();\n alert('Ajoutez ici le lien vers votre CV !');\n \/\/ D\u00e9commentez et modifiez la ligne ci-dessous pour votre CV\n \/\/ window.open('votre-cv.pdf', '_blank');\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-22cf25b e-flex e-con-boxed e-con e-parent\" data-id=\"22cf25b\" 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-2888151 elementor-widget elementor-widget-html\" data-id=\"2888151\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5; \/* fond g\u00e9n\u00e9ral gris clair *\/\n }\n\n \/* Section Objectif *\/\n .objectif-section {\n text-align: center;\n padding: 60px 20px 40px 20px;\n color: #222;\n }\n\n .objectif-section h1 {\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n font-size: 3rem;\n margin-bottom: 20px;\n }\n\n .objectif-section h2 {\n color: #000;\n font-weight: 700;\n font-size: 2.5rem;\n display: inline-block;\n position: relative;\n padding-bottom: 10px;\n }\n\n .objectif-section h2::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50%;\n height: 4px;\n background-color: #00BFFF; \/* bleu clair *\/\n border-radius: 2px;\n }\n\n \/* Section description transform\u00e9e en \"colonne\" *\/\n .description-section {\n background-color: #fff;\n border: 2px solid #fff; \/* bordure blanche *\/\n max-width: 800px;\n margin: 0 auto 60px auto;\n padding: 40px 20px;\n text-align: center;\n font-size: 1.2rem;\n line-height: 1.8;\n border-radius: 10px;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n \/* Mots cl\u00e9s *\/\n .description-section .highlight {\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n font-weight: 700;\n transition: all 0.3s ease;\n display: inline-block;\n }\n\n \/* Survol de la section description *\/\n .description-section:hover .highlight {\n transform: scale(1.2);\n }\n\n \/* Trois colonnes *\/\n .three-columns {\n display: flex;\n justify-content: center;\n gap: 30px;\n padding: 0 20px 60px 20px;\n flex-wrap: wrap;\n }\n\n .column {\n background-color: #fff;\n padding: 30px 20px;\n flex: 1 1 280px;\n text-align: center;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n cursor: pointer;\n border: 2px solid #fff;\n }\n\n .column:hover {\n box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n transform: translateY(-5px);\n }\n\n .column i {\n font-size: 3rem;\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n margin-bottom: 15px;\n transition: transform 0.6s ease;\n }\n\n .column:hover i {\n transform: rotate(360deg);\n }\n\n .column h3 {\n font-weight: 700;\n margin-bottom: 15px;\n font-size: 1.4rem;\n }\n\n .column p {\n font-size: 1rem;\n color: #333;\n line-height: 1.6;\n }\n<\/style>\n\n\n<section class=\"objectif-section\">\n <h1>OBJECTIF<\/h1>\n <h2>Objectif du portfolio<\/h2>\n<\/section>\n\n\n<section class=\"description-section\">\n Pr\u00e9sentation de mon <span class=\"highlight\">parcours<\/span>, de mes <span class=\"highlight\">r\u00e9alisations<\/span> et <span class=\"highlight\">comp\u00e9tences<\/span> en tant que d\u00e9veloppeur full-stack\n<\/section>\n\n\n<section class=\"three-columns\">\n \n <div class=\"column\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <h3>Parcours acad\u00e9mique<\/h3>\n D\u00e9couvrez mon cheminement dans le BTS SIO option SLAM, mes formations et mes certifications.\n <\/div>\n\n \n <div class=\"column\">\n <i class=\"fas fa-briefcase\"><\/i>\n <h3>R\u00e9alisations techniques<\/h3>\n Explorez mes projets concrets en d\u00e9veloppement d\u2019applications, bases de donn\u00e9es et s\u00e9curit\u00e9 logicielle.\n <\/div>\n\n \n <div class=\"column\">\n <i class=\"fas fa-laptop-code\"><\/i>\n <h3>Comp\u00e9tences SLAM<\/h3>\n D\u00e9couvrez mes comp\u00e9tences techniques en d\u00e9veloppement web, base de donn\u00e9es, et cybers\u00e9curit\u00e9.\n <\/div>\n<\/section>\n\n\n<script src=\"https:\/\/kit.fontawesome.com\/a076d05399.js\" crossorigin=\"anonymous\"><\/script>\n\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-2fda026 e-flex e-con-boxed e-con e-parent\" data-id=\"2fda026\" 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-94f8159 elementor-widget elementor-widget-html\" data-id=\"94f8159\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5;\n }\n\n \/* Section \u00c0 PROPOS *\/\n .about-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 60px 10%;\n gap: 40px;\n flex-wrap: wrap;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n\n .about-text {\n flex: 1 1 500px;\n max-width: 600px;\n }\n\n .about-text h1 {\n color: #00BFFF; \/* Bleu demand\u00e9 *\/\n font-size: 2rem;\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n\n .about-text h2 {\n color: #000;\n font-size: 2.5rem; \/* Taille r\u00e9duite *\/\n font-weight: 900;\n margin-bottom: 20px;\n }\n\n .about-text p {\n font-size: 1.1rem;\n line-height: 1.8;\n color: #333;\n }\n\n .about-image {\n flex: 1 1 300px;\n max-width: 400px;\n height: 400px;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .about-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 10px;\n transition: transform 0.3s ease;\n }\n\n .about-image img:hover {\n transform: scale(1.05); \/* L\u00e9g\u00e8re animation au survol *\/\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .about-section {\n flex-direction: column;\n align-items: center;\n }\n\n .about-image {\n width: 80%;\n height: 300px;\n margin-top: 30px;\n }\n }\n<\/style>\n\n<section class=\"about-section\">\n <div class=\"about-text\">\n <h1>A PROPOS<\/h1>\n <h2>NOUBISSSI Kenmogne<\/h2>\n <p>\n Je suis actuellement \u00e9tudiant en BTS SIO, sp\u00e9cialit\u00e9 SLAM, avec un int\u00e9r\u00eat marqu\u00e9 pour le d\u00e9veloppement logiciel et web. J\u2019aime cr\u00e9er des applications utiles et fonctionnelles, que ce soit des sites web, des outils de gestion ou des projets applicatifs.\nPendant ma formation, j\u2019ai acquis de bonnes bases en programmation, en bases de donn\u00e9es et en conception d\u2019applications, que j\u2019applique concr\u00e8tement dans mes projets.\nMon objectif est de continuer \u00e0 progresser techniquement et de participer \u00e0 des projets s\u00e9rieux dans le domaine du d\u00e9veloppement informatique.\n <\/p>\n <\/div>\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/noubissikenmogne.com\/wp-content\/uploads\/2026\/05\/photo_moi.png\" \n alt=\"LIAMIDI Saobane\">\n <\/div>\n<\/section>\n\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-c01e852 e-flex e-con-boxed e-con e-parent\" data-id=\"c01e852\" 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-432361a elementor-widget elementor-widget-html\" data-id=\"432361a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5;\n }\n\n \/* ================= FORMATION ================= *\/\n .formation-section {\n text-align: center;\n padding: 60px 10%;\n }\n\n .formation-section h1 {\n color: #00BFFF;\n font-size: 2rem;\n margin-bottom: 10px;\n font-weight: 700;\n }\n\n .formation-section h2 {\n color: #000;\n font-size: 2.5rem;\n font-weight: 700;\n position: relative;\n display: inline-block;\n margin-bottom: 40px;\n }\n\n .formation-section h2::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50%;\n height: 4px;\n background-color: #00BFFF;\n border-radius: 2px;\n }\n\n .formation-section p {\n font-size: 1.2rem;\n line-height: 1.8;\n color: #333;\n max-width: 900px;\n margin: 40px auto;\n }\n\n \/* Options *\/\n .options-container {\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n margin-top: 60px;\n }\n\n .option-card {\n background-color: #fff;\n border-radius: 10px;\n overflow: hidden;\n flex: 1 1 400px;\n max-width: 450px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .option-header {\n padding: 40px 20px;\n color: #fff;\n text-align: center;\n }\n\n .option-header i {\n font-size: 3rem;\n margin-bottom: 10px;\n display: block;\n }\n\n .option-header h3 {\n font-size: 1.8rem;\n font-weight: 900;\n margin: 0;\n }\n\n .option-header span {\n display: block;\n font-size: 1rem;\n margin-top: 5px;\n }\n\n .option-body {\n padding: 20px;\n text-align: left;\n }\n\n .option-body p {\n font-size: 1.2rem;\n margin-bottom: 20px;\n }\n\n .option-body ul li {\n font-size: 1.15rem;\n margin-bottom: 8px;\n }\n\n .option-body strong {\n font-size: 1.3rem;\n }\n\n \/* Couleurs harmonis\u00e9es *\/\n .sisr-header {\n background-color: #2E7D6F; \/* vert p\u00e9trole *\/\n }\n\n .slam-header {\n background-color: #5E35B1; \/* violet indigo *\/\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .options-container {\n flex-direction: column;\n align-items: center;\n }\n\n .option-card {\n max-width: 90%;\n }\n }\n<\/style>\n\n<section class=\"formation-section\">\n <h1>FORMATION<\/h1>\n <h2>BTS Services Informatiques aux Organisations<\/h2>\n\n <p>\n Le Brevet de Technicien Sup\u00e9rieur Services Informatiques aux Organisations (BTS SIO) est un dipl\u00f4me d'\u00c9tat de niveau Bac+2 qui forme des \u00e9tudiants capables de r\u00e9pondre aux besoins informatiques des entreprises.\n <\/p>\n\n <div class=\"options-container\">\n\n \n <div class=\"option-card\">\n <div class=\"option-header sisr-header\">\n <i class=\"fas fa-server\"><\/i>\n <h3>Option SISR<\/h3>\n <span>Solutions d'Infrastructure, Syst\u00e8mes et R\u00e9seaux<\/span>\n <\/div>\n <div class=\"option-body\">\n <p>Administration des syst\u00e8mes, r\u00e9seaux, s\u00e9curit\u00e9 et infrastructures informatiques.<\/p>\n <p><strong>D\u00e9bouch\u00e9s professionnels :<\/strong><\/p>\n <ul>\n <li>Administrateur syst\u00e8mes et r\u00e9seaux<\/li>\n <li>Technicien support<\/li>\n <li>Technicien cybers\u00e9curit\u00e9<\/li>\n <li>Consultant r\u00e9seau<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"option-card\">\n <div class=\"option-header slam-header\">\n <i class=\"fas fa-laptop-code\"><\/i>\n <h3>Option SLAM<\/h3>\n <span>Solutions Logiciel et Applications M\u00e9tiers<\/span>\n <\/div>\n <div class=\"option-body\">\n <p>D\u00e9veloppement d'applications web, mobiles et logiciels m\u00e9tiers.<\/p>\n <p><strong>D\u00e9bouch\u00e9s professionnels :<\/strong><\/p>\n <ul>\n <li>D\u00e9veloppeur web<\/li>\n <li>D\u00e9veloppeur full-stack<\/li>\n <li>Concepteur logiciel<\/li>\n <li>Analyste programmeur<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section style=\"text-align:center; padding:60px 10%;\">\n <h1 style=\"color:#00BFFF; font-size:2rem; margin-bottom:10px; font-weight:700;\">OBJECTIFS<\/h1>\n <h2 style=\"color:#000; font-size:2.5rem; font-weight:700; margin-bottom:40px;\">Les atouts du BTS SIO<\/h2>\n\n <div style=\"display:flex; justify-content:center; gap:30px; flex-wrap:wrap;\">\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-tools\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Formation pratique<\/h3>\n <p>Comp\u00e9tences concr\u00e8tes et projets r\u00e9els.<\/p>\n <\/div>\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-briefcase\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Insertion professionnelle<\/h3>\n <p>Entr\u00e9e rapide sur le march\u00e9 du travail.<\/p>\n <\/div>\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-graduation-cap\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Poursuite d\u2019\u00e9tudes<\/h3>\n <p>Licence, bachelor ou \u00e9cole d\u2019ing\u00e9nieur.<\/p>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script src=\"https:\/\/kit.fontawesome.com\/a076d05399.js\" crossorigin=\"anonymous\"><\/script>\n\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>Portfolio Hero Section Bonjour, Je Suis \ud83d\udcc4 T\u00e9l\u00e9charger mon CV OBJECTIF Objectif du portfolio Pr\u00e9sentation de mon parcours, de mes r\u00e9alisations et comp\u00e9tences en tant que d\u00e9veloppeur full-stack Parcours acad\u00e9mique D\u00e9couvrez mon cheminement dans le BTS SIO option SLAM, mes formations et mes certifications. R\u00e9alisations techniques Explorez mes projets concrets en d\u00e9veloppement d\u2019applications, bases de […]<\/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":"on","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-7","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7","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=7"}],"version-history":[{"count":117,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Portfolio Hero Section<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .hero-container {\n position: relative;\n width: 100%;\n height: 85vh;\n min-height: px;\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 .hero-content {\n position: relative;\n z-index: 10;\n text-align: center;\n color: #ffffff;\n padding: 20px;\n }\n\n .greeting {\n font-size: 1.5rem;\n font-weight: 300;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInDown 1s ease forwards;\n letter-spacing: 2px;\n color: #64b5f6;\n }\n\n .name-container {\n font-size: 4rem;\n font-weight: 700;\n margin-bottom: 40px;\n min-height: 100px;\n font-family: 'Arial', sans-serif;\n }\n\n .typing-text {\n display: inline-block;\n border-right: 3px solid #2196f3;\n padding-right: 5px;\n animation: blink 0.7s step-end infinite;\n color: #ffffff;\n text-shadow: 0 0 20px rgba(33, 150, 243, 0.5);\n }\n\n @keyframes blink {\n 50% {\n border-color: transparent;\n }\n }\n\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Bouton de t\u00e9l\u00e9chargement *\/\n .cv-button {\n display: inline-block;\n padding: 18px 45px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n color: #ffffff;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 50px;\n border: 2px solid rgba(33, 150, 243, 0.5);\n transition: all 0.3s ease;\n opacity: 0;\n animation: fadeInUp 1s ease 2s forwards;\n box-shadow: 0 10px 30px rgba(33, 150, 243, 0.3);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n }\n\n .cv-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.2);\n transform: translate(-50%, -50%);\n transition: width 0.6s, height 0.6s;\n }\n\n .cv-button:hover::before {\n width: 300px;\n height: 300px;\n }\n\n .cv-button:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(33, 150, 243, 0.5);\n border-color: #2196f3;\n }\n\n .cv-button span {\n position: relative;\n z-index: 1;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .name-container {\n font-size: 2.5rem;\n }\n \n .greeting {\n font-size: 1.2rem;\n }\n \n .cv-button {\n padding: 15px 35px;\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=\"hero-container\">\n \n <div class=\"background-animation\"><\/div>\n <div class=\"grid-overlay\"><\/div>\n \n \n <div class=\"glow-circle glow-1\"><\/div>\n <div class=\"glow-circle glow-2\"><\/div>\n \n \n <div id=\"particles\"><\/div>\n \n<div class=\"hero-content\">\n <div class=\"greeting\">Bonjour, Je Suis<\/div>\n <div class=\"name-container\">\n <span class=\"typing-text\" id=\"typingText\"><\/span>\n <\/div>\n <a href=\"https:\/\/portfolio5492.live-website.com\/wp-content\/uploads\/2026\/03\/CV.pdf\" \n class=\"cv-button\" \n download \n target=\"_blank\">\n <span>\ud83d\udcc4 T\u00e9l\u00e9charger mon CV<\/span>\n <\/a>\n<\/div>\n\n <script>\n \/\/ Animation de texte qui s'\u00e9crit progressivement\n const text = \"NOUBISSI Kenmogne\"; \/\/ Remplacez par votre nom\n const typingText = document.getElementById('typingText');\n let index = 0;\n\n function typeWriter() {\n if (index < text.length) {\n typingText.textContent += text.charAt(index);\n index++;\n setTimeout(typeWriter, 150); \/\/ Vitesse de frappe (150ms par lettre)\n }\n }\n\n \/\/ D\u00e9marrer l'animation apr\u00e8s 1 seconde\n setTimeout(typeWriter, 1000);\n\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\n \/\/ Gestion du bouton CV (remplacez l'URL par le lien de votre CV)\n document.getElementById('cvButton').addEventListener('click', function(e) {\n e.preventDefault();\n alert('Ajoutez ici le lien vers votre CV !');\n \/\/ D\u00e9commentez et modifiez la ligne ci-dessous pour votre CV\n \/\/ window.open('votre-cv.pdf', '_blank');\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-22cf25b e-flex e-con-boxed e-con e-parent\" data-id=\"22cf25b\" 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-2888151 elementor-widget elementor-widget-html\" data-id=\"2888151\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5; \/* fond g\u00e9n\u00e9ral gris clair *\/\n }\n\n \/* Section Objectif *\/\n .objectif-section {\n text-align: center;\n padding: 60px 20px 40px 20px;\n color: #222;\n }\n\n .objectif-section h1 {\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n font-size: 3rem;\n margin-bottom: 20px;\n }\n\n .objectif-section h2 {\n color: #000;\n font-weight: 700;\n font-size: 2.5rem;\n display: inline-block;\n position: relative;\n padding-bottom: 10px;\n }\n\n .objectif-section h2::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50%;\n height: 4px;\n background-color: #00BFFF; \/* bleu clair *\/\n border-radius: 2px;\n }\n\n \/* Section description transform\u00e9e en \"colonne\" *\/\n .description-section {\n background-color: #fff;\n border: 2px solid #fff; \/* bordure blanche *\/\n max-width: 800px;\n margin: 0 auto 60px auto;\n padding: 40px 20px;\n text-align: center;\n font-size: 1.2rem;\n line-height: 1.8;\n border-radius: 10px;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n \/* Mots cl\u00e9s *\/\n .description-section .highlight {\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n font-weight: 700;\n transition: all 0.3s ease;\n display: inline-block;\n }\n\n \/* Survol de la section description *\/\n .description-section:hover .highlight {\n transform: scale(1.2);\n }\n\n \/* Trois colonnes *\/\n .three-columns {\n display: flex;\n justify-content: center;\n gap: 30px;\n padding: 0 20px 60px 20px;\n flex-wrap: wrap;\n }\n\n .column {\n background-color: #fff;\n padding: 30px 20px;\n flex: 1 1 280px;\n text-align: center;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n cursor: pointer;\n border: 2px solid #fff;\n }\n\n .column:hover {\n box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n transform: translateY(-5px);\n }\n\n .column i {\n font-size: 3rem;\n color: #00BFFF; \/* bleu clair \u00e0 la place du jaune *\/\n margin-bottom: 15px;\n transition: transform 0.6s ease;\n }\n\n .column:hover i {\n transform: rotate(360deg);\n }\n\n .column h3 {\n font-weight: 700;\n margin-bottom: 15px;\n font-size: 1.4rem;\n }\n\n .column p {\n font-size: 1rem;\n color: #333;\n line-height: 1.6;\n }\n<\/style>\n\n\n<section class=\"objectif-section\">\n <h1>OBJECTIF<\/h1>\n <h2>Objectif du portfolio<\/h2>\n<\/section>\n\n\n<section class=\"description-section\">\n Pr\u00e9sentation de mon <span class=\"highlight\">parcours<\/span>, de mes <span class=\"highlight\">r\u00e9alisations<\/span> et <span class=\"highlight\">comp\u00e9tences<\/span> en tant que d\u00e9veloppeur full-stack\n<\/section>\n\n\n<section class=\"three-columns\">\n \n <div class=\"column\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <h3>Parcours acad\u00e9mique<\/h3>\n D\u00e9couvrez mon cheminement dans le BTS SIO option SLAM, mes formations et mes certifications.\n <\/div>\n\n \n <div class=\"column\">\n <i class=\"fas fa-briefcase\"><\/i>\n <h3>R\u00e9alisations techniques<\/h3>\n Explorez mes projets concrets en d\u00e9veloppement d\u2019applications, bases de donn\u00e9es et s\u00e9curit\u00e9 logicielle.\n <\/div>\n\n \n <div class=\"column\">\n <i class=\"fas fa-laptop-code\"><\/i>\n <h3>Comp\u00e9tences SLAM<\/h3>\n D\u00e9couvrez mes comp\u00e9tences techniques en d\u00e9veloppement web, base de donn\u00e9es, et cybers\u00e9curit\u00e9.\n <\/div>\n<\/section>\n\n\n<script src=\"https:\/\/kit.fontawesome.com\/a076d05399.js\" crossorigin=\"anonymous\"><\/script>\n\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-2fda026 e-flex e-con-boxed e-con e-parent\" data-id=\"2fda026\" 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-94f8159 elementor-widget elementor-widget-html\" data-id=\"94f8159\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5;\n }\n\n \/* Section \u00c0 PROPOS *\/\n .about-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 60px 10%;\n gap: 40px;\n flex-wrap: wrap;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n\n .about-text {\n flex: 1 1 500px;\n max-width: 600px;\n }\n\n .about-text h1 {\n color: #00BFFF; \/* Bleu demand\u00e9 *\/\n font-size: 2rem;\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n\n .about-text h2 {\n color: #000;\n font-size: 2.5rem; \/* Taille r\u00e9duite *\/\n font-weight: 900;\n margin-bottom: 20px;\n }\n\n .about-text p {\n font-size: 1.1rem;\n line-height: 1.8;\n color: #333;\n }\n\n .about-image {\n flex: 1 1 300px;\n max-width: 400px;\n height: 400px;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .about-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 10px;\n transition: transform 0.3s ease;\n }\n\n .about-image img:hover {\n transform: scale(1.05); \/* L\u00e9g\u00e8re animation au survol *\/\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .about-section {\n flex-direction: column;\n align-items: center;\n }\n\n .about-image {\n width: 80%;\n height: 300px;\n margin-top: 30px;\n }\n }\n<\/style>\n\n<section class=\"about-section\">\n <div class=\"about-text\">\n <h1>A PROPOS<\/h1>\n <h2>NOUBISSSI Kenmogne<\/h2>\n <p>\n Je suis actuellement \u00e9tudiant en BTS SIO, sp\u00e9cialit\u00e9 SLAM, avec un int\u00e9r\u00eat marqu\u00e9 pour le d\u00e9veloppement logiciel et web. J\u2019aime cr\u00e9er des applications utiles et fonctionnelles, que ce soit des sites web, des outils de gestion ou des projets applicatifs.\nPendant ma formation, j\u2019ai acquis de bonnes bases en programmation, en bases de donn\u00e9es et en conception d\u2019applications, que j\u2019applique concr\u00e8tement dans mes projets.\nMon objectif est de continuer \u00e0 progresser techniquement et de participer \u00e0 des projets s\u00e9rieux dans le domaine du d\u00e9veloppement informatique.\n <\/p>\n <\/div>\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/noubissikenmogne.com\/wp-content\/uploads\/2026\/05\/photo_moi.png\" \n alt=\"LIAMIDI Saobane\">\n <\/div>\n<\/section>\n\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-c01e852 e-flex e-con-boxed e-con e-parent\" data-id=\"c01e852\" 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-432361a elementor-widget elementor-widget-html\" data-id=\"432361a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background: #f5f5f5;\n }\n\n \/* ================= FORMATION ================= *\/\n .formation-section {\n text-align: center;\n padding: 60px 10%;\n }\n\n .formation-section h1 {\n color: #00BFFF;\n font-size: 2rem;\n margin-bottom: 10px;\n font-weight: 700;\n }\n\n .formation-section h2 {\n color: #000;\n font-size: 2.5rem;\n font-weight: 700;\n position: relative;\n display: inline-block;\n margin-bottom: 40px;\n }\n\n .formation-section h2::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50%;\n height: 4px;\n background-color: #00BFFF;\n border-radius: 2px;\n }\n\n .formation-section p {\n font-size: 1.2rem;\n line-height: 1.8;\n color: #333;\n max-width: 900px;\n margin: 40px auto;\n }\n\n \/* Options *\/\n .options-container {\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n margin-top: 60px;\n }\n\n .option-card {\n background-color: #fff;\n border-radius: 10px;\n overflow: hidden;\n flex: 1 1 400px;\n max-width: 450px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .option-header {\n padding: 40px 20px;\n color: #fff;\n text-align: center;\n }\n\n .option-header i {\n font-size: 3rem;\n margin-bottom: 10px;\n display: block;\n }\n\n .option-header h3 {\n font-size: 1.8rem;\n font-weight: 900;\n margin: 0;\n }\n\n .option-header span {\n display: block;\n font-size: 1rem;\n margin-top: 5px;\n }\n\n .option-body {\n padding: 20px;\n text-align: left;\n }\n\n .option-body p {\n font-size: 1.2rem;\n margin-bottom: 20px;\n }\n\n .option-body ul li {\n font-size: 1.15rem;\n margin-bottom: 8px;\n }\n\n .option-body strong {\n font-size: 1.3rem;\n }\n\n \/* Couleurs harmonis\u00e9es *\/\n .sisr-header {\n background-color: #2E7D6F; \/* vert p\u00e9trole *\/\n }\n\n .slam-header {\n background-color: #5E35B1; \/* violet indigo *\/\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .options-container {\n flex-direction: column;\n align-items: center;\n }\n\n .option-card {\n max-width: 90%;\n }\n }\n<\/style>\n\n<section class=\"formation-section\">\n <h1>FORMATION<\/h1>\n <h2>BTS Services Informatiques aux Organisations<\/h2>\n\n <p>\n Le Brevet de Technicien Sup\u00e9rieur Services Informatiques aux Organisations (BTS SIO) est un dipl\u00f4me d'\u00c9tat de niveau Bac+2 qui forme des \u00e9tudiants capables de r\u00e9pondre aux besoins informatiques des entreprises.\n <\/p>\n\n <div class=\"options-container\">\n\n \n <div class=\"option-card\">\n <div class=\"option-header sisr-header\">\n <i class=\"fas fa-server\"><\/i>\n <h3>Option SISR<\/h3>\n <span>Solutions d'Infrastructure, Syst\u00e8mes et R\u00e9seaux<\/span>\n <\/div>\n <div class=\"option-body\">\n <p>Administration des syst\u00e8mes, r\u00e9seaux, s\u00e9curit\u00e9 et infrastructures informatiques.<\/p>\n <p><strong>D\u00e9bouch\u00e9s professionnels :<\/strong><\/p>\n <ul>\n <li>Administrateur syst\u00e8mes et r\u00e9seaux<\/li>\n <li>Technicien support<\/li>\n <li>Technicien cybers\u00e9curit\u00e9<\/li>\n <li>Consultant r\u00e9seau<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"option-card\">\n <div class=\"option-header slam-header\">\n <i class=\"fas fa-laptop-code\"><\/i>\n <h3>Option SLAM<\/h3>\n <span>Solutions Logiciel et Applications M\u00e9tiers<\/span>\n <\/div>\n <div class=\"option-body\">\n <p>D\u00e9veloppement d'applications web, mobiles et logiciels m\u00e9tiers.<\/p>\n <p><strong>D\u00e9bouch\u00e9s professionnels :<\/strong><\/p>\n <ul>\n <li>D\u00e9veloppeur web<\/li>\n <li>D\u00e9veloppeur full-stack<\/li>\n <li>Concepteur logiciel<\/li>\n <li>Analyste programmeur<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section style=\"text-align:center; padding:60px 10%;\">\n <h1 style=\"color:#00BFFF; font-size:2rem; margin-bottom:10px; font-weight:700;\">OBJECTIFS<\/h1>\n <h2 style=\"color:#000; font-size:2.5rem; font-weight:700; margin-bottom:40px;\">Les atouts du BTS SIO<\/h2>\n\n <div style=\"display:flex; justify-content:center; gap:30px; flex-wrap:wrap;\">\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-tools\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Formation pratique<\/h3>\n <p>Comp\u00e9tences concr\u00e8tes et projets r\u00e9els.<\/p>\n <\/div>\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-briefcase\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Insertion professionnelle<\/h3>\n <p>Entr\u00e9e rapide sur le march\u00e9 du travail.<\/p>\n <\/div>\n\n <div style=\"max-width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1);\">\n <i class=\"fas fa-graduation-cap\" style=\"font-size:3rem; color:#00BFFF;\"><\/i>\n <h3 style=\"color:#0D47A1;\">Poursuite d\u2019\u00e9tudes<\/h3>\n <p>Licence, bachelor ou \u00e9cole d\u2019ing\u00e9nieur.<\/p>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script src=\"https:\/\/kit.fontawesome.com\/a076d05399.js\" crossorigin=\"anonymous\"><\/script>\n\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>Portfolio Hero Section Bonjour, Je Suis \ud83d\udcc4 T\u00e9l\u00e9charger mon CV OBJECTIF Objectif du portfolio Pr\u00e9sentation de mon parcours, de mes r\u00e9alisations et comp\u00e9tences en tant que d\u00e9veloppeur full-stack Parcours acad\u00e9mique D\u00e9couvrez mon cheminement dans le BTS SIO option SLAM, mes formations et mes certifications. R\u00e9alisations techniques Explorez mes projets concrets en d\u00e9veloppement d\u2019applications, bases de […]<\/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":"on","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-7","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7","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=7"}],"version-history":[{"count":117,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}