Ctrl+K
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Blog | Portfolio de Honoré M12</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary: #00abf0; --secondary: #112e42; --dark: #081b29; --light: #ededed; } body { background-color: var(--dark); color: var(--light); font-family: 'Poppins', sans-serif; overflow-x: hidden; } .navbar a.active { color: var(--primary); position: relative; } .navbar a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--primary); animation: underline 0.3s ease-out; } @keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } .blog-card { perspective: 1000px; } .blog-card-inner { transition: transform 0.6s; transform-style: preserve-3d; } .blog-card:hover .blog-card-inner { transform: rotateY(5deg) rotateX(5deg); } .category-tag { clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); } .gradient-text { background: linear-gradient(90deg, #00abf0, #0088ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .pagination a.active { background: linear-gradient(135deg, #00abf0, #0088ff); color: white; } .search-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .sidebar-item:hover { color: var(--primary); transform: translateX(5px); } .article-image { mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0)); } .floating-btn { animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .wave { animation: wave 8s linear infinite; } @keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } </style> </head> <body class="relative"> <!-- Floating particles background --> <div class="fixed inset-0 overflow-hidden -z-10 opacity-20"> <div class="absolute top-0 left-0 w-full h-full"> <div class="particle absolute rounded-full bg-blue-400 opacity-50" style="top: 20%; left: 10%; width: 5px; height: 5px;"></div> <div class="particle absolute rounded-full bg-blue-400 opacity-30" style="top: 60%; left: 30%; width: 8px; height: 8px;"></div> <div class="particle absolute rounded-full bg-blue-400 opacity-20" style="top: 30%; left: 80%; width: 10px; height: 10px;"></div> <div class="particle absolute rounded-full bg-blue-400 opacity-40" style="top: 80%; left: 70%; width: 6px; height: 6px;"></div> <div class="particle absolute rounded-full bg-blue-400 opacity-25" style="top: 40%; left: 50%; width: 4px; height: 4px;"></div> </div> </div> <!-- Animated wave pattern --> <div class="fixed bottom-0 left-0 w-full h-24 overflow-hidden -z-10 opacity-10"> <div class="wave absolute bottom-0 left-0 w-[200%] h-full flex"> <svg class="w-1/2 h-full" viewBox="0 0 1440 320" preserveAspectRatio="none"> <path fill="#00abf0" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> </svg> <svg class="w-1/2 h-full" viewBox="0 0 1440 320" preserveAspectRatio="none"> <path fill="#00abf0" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> </svg> </div> </div> <!-- Floating action button --> <div class="fixed bottom-8 right-8 z-40 floating-btn"> <button class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg flex items-center justify-center text-white hover:shadow-xl transition-all duration-300"> <i class="fas fa-pen text-xl"></i> </button> </div> <header class="sticky top-0 z-50 bg-[#081b29]/90 backdrop-blur-md shadow-md"> <div class="container mx-auto px-4 py-3"> <div class="flex justify-between items-center"> <div class="text-xl font-semibold"> <a href="index.html" class="flex items-center"> <span class="gradient-text font-bold">Honoré M12</span> <span class="ml-2 text-blue-400 animate-pulse"><i class="fas fa-code"></i></span> </a> </div> <nav class="hidden lg:flex space-x-8 navbar"> <a href="about.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-user mr-2"></i> À propos </a> <a href="skills.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-cogs mr-2"></i> Compétences </a> <a href="projects.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-briefcase mr-2"></i> Projets </a> <a href="gallery.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-images mr-2"></i> Galerie </a> <a href="Blog.html" class="text-blue-400 active flex items-center"> <i class="fas fa-blog mr-2"></i> Blog </a> <a href="contacts.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-envelope mr-2"></i> Contact </a> </nav> <div class="flex items-center space-x-4"> <button class="hidden md:block px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full text-sm font-medium hover:shadow-lg transition-all duration-300"> <i class="fas fa-user-plus mr-2"></i> S'abonner </button> <button id="mobile-menu-button" class="lg:hidden text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> <div id="mobile-menu" class="lg:hidden hidden py-4 animate__animated animate__fadeIn"> <div class="flex flex-col space-y-4"> <a href="about.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-user mr-3"></i> À propos </a> <a href="skills.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-cogs mr-3"></i> Compétences </a> <a href="projects.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-briefcase mr-3"></i> Projets </a> <a href="gallery.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-images mr-3"></i> Galerie </a> <a href="Blog.html" class="text-blue-400 flex items-center"> <i class="fas fa-blog mr-3"></i> Blog </a> <a href="contacts.html" class="text-white hover:text-blue-400 transition duration-300 flex items-center"> <i class="fas fa-envelope mr-3"></i> Contact </a> <button class="w-full mt-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full text-sm font-medium hover:shadow-lg transition-all duration-300"> <i class="fas fa-user-plus mr-2"></i> S'abonner </button> </div> </div> </div> </header> <main class="container mx-auto px-4 py-12 relative"> <!-- Hero Section --> <section class="relative mb-16 rounded-2xl overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-purple-900/80 z-10"></div> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Code background" class="w-full h-96 object-cover article-image"> <div class="relative z-20 px-8 py-16 text-center"> <h1 class="text-5xl font-bold mb-4 text-white animate__animated animate__fadeInDown"> <span class="gradient-text">Mon Blog</span> Développement </h1> <p class="text-xl text-gray-200 max-w-3xl mx-auto animate__animated animate__fadeIn animate__delay-1s"> Explorez mes réflexions, tutoriels et expériences dans le monde du développement web et mobile </p> <div class="mt-8 max-w-xl mx-auto animate__animated animate__fadeIn animate__delay-1s"> <div class="relative search-box rounded-full"> <input type="text" placeholder="Rechercher des articles..." class="w-full bg-transparent border border-gray-600/50 text-white px-6 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 pl-12"> <i class="fas fa-search absolute left-5 top-3.5 text-gray-400"></i> <button class="absolute right-1 top-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium hover:shadow-lg transition-all duration-300"> Rechercher </button> </div> </div> </div> </section> <div class="flex flex-col lg:flex-row gap-8"> <!-- Main Content --> <div class="lg:w-2/3"> <!-- Featured Article --> <div class="mb-16 blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-xl transition-all duration-500 hover:shadow-2xl"> <div class="relative overflow-hidden h-80"> <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Featured article" class="w-full h-full object-cover transition duration-700 hover:scale-105"> <div class="absolute bottom-0 left-0 bg-blue-500 text-white px-4 py-1 text-sm font-medium category-tag"> <i class="fas fa-star mr-1"></i> Article Vedette </div> </div> <div class="p-8"> <div class="flex items-center text-sm text-gray-400 mb-4"> <div class="flex items-center mr-4"> <i class="far fa-calendar mr-2"></i> <span>28 Mars 2023</span> </div> <div class="flex items-center mr-4"> <i class="far fa-comment mr-2"></i> <span>18 Commentaires</span> </div> <div class="flex items-center"> <i class="far fa-eye mr-2"></i> <span>1.2K Vues</span> </div> </div> <h3 class="text-2xl font-bold mb-4 text-white">Les 10 Meilleures Pratiques pour un Code Propre en 2023</h3> <p class="text-gray-300 mb-6">Dans cet article complet, je partage les meilleures pratiques que j'ai apprises au cours de mes années d'expérience en développement. Nous aborderons des techniques avancées pour écrire un code plus lisible, maintenable et efficace, avec des exemples concrets en JavaScript, Python et Java...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 font-medium flex items-center group"> Lire l'article <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i> </a> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2"> <i class="fas fa-user text-xs"></i> </div> <span class="text-sm text-gray-400">Honoré M12</span> </div> </div> </div> </div> <!-- Articles Grid --> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> <!-- Article 1 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f5e?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-purple-500 text-white px-3 py-1 text-sm font-medium category-tag"> Framework </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>22 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Pourquoi j'ai choisi React pour mon dernier projet</h3> <p class="text-gray-300 mb-4 text-sm">Une analyse approfondie des raisons qui m'ont poussé à choisir React plutôt que Vue ou Angular pour mon application web...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 5 min</span> </div> </div> </div> </div> <!-- Article 2 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-green-500 text-white px-3 py-1 text-sm font-medium category-tag"> Backend </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>18 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Optimisation des performances avec Node.js</h3> <p class="text-gray-300 mb-4 text-sm">Découvrez les techniques que j'ai utilisées pour améliorer les performances de mon API Node.js de plus de 300%...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 8 min</span> </div> </div> </div> </div> <!-- Article 3 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1581094794329-c8112d9b0275?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-yellow-500 text-white px-3 py-1 text-sm font-medium category-tag"> Mobile </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>15 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Flutter vs React Native: Mon expérience</h3> <p class="text-gray-300 mb-4 text-sm">Après avoir utilisé les deux frameworks, voici mon analyse comparative et pourquoi j'ai finalement choisi Flutter pour mon projet...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 7 min</span> </div> </div> </div> </div> <!-- Article 4 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1581094794325-841dac64a2d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-red-500 text-white px-3 py-1 text-sm font-medium category-tag"> UI/UX </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>12 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Les principes de design que tout développeur devrait connaître</h3> <p class="text-gray-300 mb-4 text-sm">Même sans être designer, ces principes fondamentaux vous aideront à créer des interfaces plus intuitives et agréables...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 6 min</span> </div> </div> </div> </div> <!-- Article 5 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1581094794326-7e7a1a45d0b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-indigo-500 text-white px-3 py-1 text-sm font-medium category-tag"> Outils </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>8 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Mon setup de développement en 2023</h3> <p class="text-gray-300 mb-4 text-sm">Découvrez les outils, extensions et configurations que j'utilise quotidiennement pour booster ma productivité...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 9 min</span> </div> </div> </div> </div> <!-- Article 6 --> <div class="blog-card bg-[#112e42] rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-xl"> <div class="blog-card-inner"> <div class="relative overflow-hidden h-48"> <img src="https://images.unsplash.com/photo-1581094794328-d5d5a8f0e5d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Code on screen" class="w-full h-full object-cover transition duration-700 hover:scale-110"> <div class="absolute bottom-0 left-0 bg-pink-500 text-white px-3 py-1 text-sm font-medium category-tag"> Carrière </div> </div> <div class="p-6"> <div class="flex items-center text-sm text-gray-400 mb-3"> <i class="far fa-calendar mr-2"></i> <span>5 Mars 2023</span> </div> <h3 class="text-xl font-bold mb-3 text-white">Comment j'ai décroché mon premier emploi en tant que développeur</h3> <p class="text-gray-300 mb-4 text-sm">Mon parcours, les erreurs à éviter et les conseils pour ceux qui cherchent à entrer dans le monde professionnel du développement...</p> <div class="flex items-center justify-between"> <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center group"> Lire plus <i class="fas fa-arrow-right ml-1 group-hover:ml-2 transition-all duration-300 text-xs"></i> </a> <span class="text-xs text-gray-500"><i class="fas fa-clock mr-1"></i> 10 min</span> </div> </div> </div> </div> </div> <!-- Pagination --> <div class="flex justify-center mt-8"> <nav class="inline-flex rounded-md shadow-sm"> <a href="#" class="px-4 py-2 rounded-l-lg border border-blue-400 text-blue-400 hover:bg-blue-900/50 transition duration-300"> <i class="fas fa-chevron-left"></i> </a> <a href="#" class="px-4 py-2 border-t border-b border-blue-400 text-white bg-blue-500"> 1 </a> <a href="#" class="px-4 py-2 border-t border-b border-blue-400 text-blue-400 hover:bg-blue-900/50 transition duration-300"> 2 </a> <a href="#" class="px-4 py-2 border-t border-b border-blue-400 text-blue-400 hover:bg-blue-900/50 transition duration-300"> 3 </a> <span class="px-4 py-2 border-t border-b border-blue-400 text-blue-400"> ... </span> <a href="#" class="px-4 py-2 border-t border-b border-blue-400 text-blue-400 hover:bg-blue-900/50 transition duration-300"> 8 </a> <a href="#" class="px-4 py-2 rounded-r-lg border border-blue-400 text-blue-400 hover:bg-blue-900/50 transition duration-300"> <i class="fas fa-chevron-right"></i> </a> </nav> </div> </div> <!-- Sidebar --> <div class="lg:w-1/3 mt-8 lg:mt-0"> <!-- About Widget --> <div class="bg-[#112e42] rounded-xl p-6 mb-8 shadow-lg"> <h3 class="text-xl font-bold mb-4 text-white border-b border-gray-700 pb-3">À Propos de Moi</h3> <div class="flex items-center mb-4"> <div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> <i class="fas fa-user text-2xl"></i> </div> <div> <h4 class="font-medium text-white">Honoré M12</h4> <p class="text-sm text-gray-400">Développeur Full Stack</p> </div> </div> <p class="text-gray-300 text-sm mb-4">Passionné par le développement web et mobile, je partage ici mes connaissances et expériences pour aider la communauté des développeurs.</p> <button class="w-full px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full text-sm font-medium hover:shadow-lg transition-all duration-300"> <i class="fas fa-user-plus mr-2"></i> Suivre </button> </div> <!-- Categories Widget --> <div class="bg-[#112e42] rounded-xl p-6 mb-8 shadow-lg"> <h3 class="text-xl font-bold mb-4 text-white border-b border-gray-700 pb-3">Catégories</h3> <ul class="space-y-2"> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-code text-blue-400 mr-3 text-sm"></i> Développement </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">24</span> </a> </li> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-mobile-alt text-purple-400 mr-3 text-sm"></i> Mobile </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">12</span> </a> </li> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-paint-brush text-green-400 mr-3 text-sm"></i> UI/UX </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">8</span> </a> </li> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-server text-yellow-400 mr-3 text-sm"></i> Backend </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">15</span> </a> </li> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-tools text-red-400 mr-3 text-sm"></i> Outils </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">7</span> </a> </li> <li> <a href="#" class="flex items-center justify-between text-gray-300 hover:text-blue-400 transition duration-300 sidebar-item py-2 px-1"> <span class="flex items-center"> <i class="fas fa-briefcase text-indigo-400 mr-3 text-sm"></i> Carrière </span> <span class="bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded-full">5</span> </a> </li> </ul> </div> <!-- Popular Posts --> <div class="bg-[#112e42] rounded-xl p-6 mb-8 shadow-lg"> <h3 class="text-xl font-bold mb-4 text-white border-b border-gray-700 pb-3">Articles Populaires</h3> <div class="space-y-4"> <a href="#" class="flex group"> <div class="w-16 h-16 flex-shrink-0 overflow-hidden rounded-lg mr-4"> <img src="https://images.unsplash.com/photo-1581094794329-c8112d9b0275?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Popular post" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> </div> <div> <h4 class="text-sm font-medium text-white group-hover:text-blue-400 transition duration-300">Les erreurs à éviter avec React Hooks</h4> <div class="flex items-center text-xs text-gray-400 mt-1"> <i class="far fa-eye mr-1"></i> 1.5K vues </div> </div> </a> <a href="#" class="flex group"> <div class="w-16 h-16 flex-shrink-0 overflow-hidden rounded-lg mr-4"> <img src="https://images.unsplash.com/photo-1581094794328-d5d5a8f0e5d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Popular post" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> </div> <div> <h4 class="text-sm font-medium text-white group-hover:text-blue-400 transition duration-300">Comment j'ai appris à coder en 6 mois</h4> <div class="flex items-center text-xs text-gray-400 mt-1"> <i class="far fa-eye mr-1"></i> 2.3K vues </div> </div> </a> <a href="#" class="flex group"> <div class="w-16 h-16 flex-shrink-0 overflow-hidden rounded-lg mr-4"> <img src="https://images.unsplash.com/photo-1581094794326-7e7a1a45d0b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Popular post" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> </div> <div> <h4 class="text-sm font-medium text-white group-hover:text-blue-400 transition duration-300">Mon workflow avec VS Code en 2023</h4> <div class="flex items-center text-xs text-gray-400 mt-1"> <i class="far fa-eye mr-1"></i> 1.8K vues </div> </div> </a> </div> </div> <!-- Tags Widget --> <div class="bg-[#112e42] rounded-xl p-6 shadow-lg"> <h3 class="text-xl font-bold mb-4 text-white border-b border-gray-700 pb-3">Tags</h3> <div class="flex flex-wrap gap-2"> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">JavaScript</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">React</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">Node.js</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">Flutter</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">UI/UX</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">CSS</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">Performance</a> <a href="#" class="px-3 py-1 bg-blue-900/50 text-blue-400 text-sm rounded-full hover:bg-blue-500 hover:text-white transition duration-300">Tutoriel</a> </div> </div> </div> </div> </main> <!-- Newsletter Section --> <section class="bg-gradient-to-r from-blue-900/80 to-purple-900/80 py-16"> <div class="container mx-auto px-4 text-center"> <div class="max-w-2xl mx-auto"> <h2 class="text-3xl font-bold text-white mb-4">Abonnez-vous à ma newsletter</h2> <p class="text-gray-200 mb-8">Recevez les derniers articles, tutoriels et ressources directement dans votre boîte mail.</p> <div class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-full bg-white/10 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400"> <button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:shadow-lg transition-all duration-300"> S'abonner </button> </div> <p class="text-gray-300 text-xs mt-4">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p> </div> </div> </section> <footer class="bg-[#112e42] py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <h3 class="text-lg font-semibold text-white mb-4">Portfolio</h3> <p class="text-gray-400 text-sm">Un espace où je partage mes projets, mes connaissances et mes expériences dans le monde du développement.</p> </div> <div> <h3 class="text-lg font-semibold text-white mb-4">Liens Rapides</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">À propos</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Projets</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Contact</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold text-white mb-4">Catégories</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Développement</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Design</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Mobile</a></li> <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Tutoriels</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold text-white mb-4">Contact</h3> <ul class="space-y-2"> <li class="flex items-center text-gray-400 text-sm"><i class="fas fa-envelope mr-2"></i> contact@honore-m12.com</li> <li class="flex items-center text-gray-400 text-sm"><i class="fas fa-phone mr-2"></i> +33 6 12 34 56 78</li> <li class="flex items-center text-gray-400 text-sm"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li> </ul> </div> </div> <div class="pt-8 border-t border-gray-700"> <div class="flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Portfolio de Honoré M12. Tous droits réservés.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> <i class="fab fa-github fa-lg"></i> </a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> <i class="fab fa-linkedin fa-lg"></i> </a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> <i class="fab fa-twitter fa-lg"></i> </a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> <i class="fab fa-instagram fa-lg"></i> </a> </div> </div> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); menu.classList.toggle('animate__fadeIn'); }); // Highlight active page in mobile menu const currentPage = window.location.pathname.split('/').pop(); const navLinks = document.querySelectorAll('#mobile-menu a'); navLinks.forEach(link => { if (link.getAttribute('href') === currentPage) { link.classList.add('text-blue-400'); } }); // Animation for blog cards const blogCards = document.querySelectorAll('.blog-card'); blogCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px)'; this.style.boxShadow = '0 15px 25px rgba(0, 171, 240, 0.3)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.3)'; }); }); // Floating particles animation const particles = document.querySelectorAll('.particle'); particles.forEach(particle => { // Random animation duration const duration = Math.random() * 20 + 10; // Random delay const delay = Math.random() * 5; // Set animation particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; // Random initial position const top = Math.random() * 100; const left = Math.random() * 100; particle.style.top = `${top}%`; particle.style.left = `${left}%`; }); // Animate sidebar items on hover const sidebarItems = document.querySelectorAll('.sidebar-item'); sidebarItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.transition = 'transform 0.3s ease, color 0.3s ease'; }); item.addEventListener('mouseleave', function() { this.style.transition = 'transform 0.3s ease, color 0.3s ease'; }); }); // Wave animation const wave = document.querySelector('.wave'); wave.style.animation = 'wave 8s linear infinite'; </script> </body> </html> create and avanced version of this . But conserve the color ans the background color. You must also add a toddle to change the theme from dark to light. The dark mode contains , the existing color and background color. The first article content the paragraph: "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." and the same for the aders articles.do not forget tags , categories etc........... - Follow Up Deployment
2ab2faa verified