Spaces:
Running
Running
| <html lang="fr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SEWODA Komla Bernard - Développeur Full Stack</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6C63FF', | |
| secondary: '#00FFFF', | |
| }, | |
| fontFamily: { | |
| poppins: ['Poppins', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'fade-up': 'fadeUp 0.5s ease-out', | |
| 'zoom-in': 'zoomIn 0.5s ease-out', | |
| }, | |
| keyframes: { | |
| fadeUp: { | |
| '0%': { opacity: '0', transform: 'translateY(20px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| zoomIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.95)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-[#0F0C29] via-[#302B63] to-[#24243E] min-h-screen font-poppins text-white"> | |
| <script src="components/navbar.js"></script> | |
| <custom-navbar></custom-navbar> | |
| <a href="https://wa.me/228XXXXXXXXX" target="_blank" class="whatsapp-btn-mobile md:hidden"> | |
| <i data-feather="message-circle"></i> | |
| </a> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 md:py-32 text-center"> | |
| <div class="max-w-4xl mx-auto animate-fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">SEWODA KOMLA BERNARD</h1> | |
| <h2 class="text-xl md:text-2xl text-secondary mb-6">Développeur Full Stack | Ingénieur Réseau & Sécurité Informatique</h2> | |
| <div class="text-lg md:text-xl mb-8"> | |
| <span>Je conçois des systèmes </span> | |
| <span id="animated-text" class="font-bold text-primary"></span> | |
| </div> | |
| <p class="text-lg mb-10 max-w-2xl mx-auto"> | |
| Je conçois des systèmes web et mobiles performants, sécurisés et intelligents, pensés pour l'efficacité et la fiabilité. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#projects" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full font-medium transition-all shadow-lg hover:shadow-primary/30"> | |
| Voir mes projets 🚀 | |
| </a> | |
| <a href="#cv" class="bg-secondary hover:bg-secondary/90 text-gray-900 px-6 py-3 rounded-full font-medium transition-all shadow-lg hover:shadow-secondary/30"> | |
| Télécharger mon CV 📄 | |
| </a> | |
| <a href="#contact" class="border-2 border-white hover:bg-white/10 px-6 py-3 rounded-full font-medium transition-all"> | |
| Me contacter 💬 | |
| </a> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-2 mt-12"> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">HTML</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">CSS</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">JavaScript</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">PHP</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Laravel</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Flutter</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Dart</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">MySQL</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Sécurité Informatique</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Réseaux</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">IA</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">Git</span> | |
| <span class="bg-white/10 px-3 py-1 rounded-full text-sm">CI/CD</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="container mx-auto px-6 py-20 bg-white/5 rounded-3xl max-w-6xl backdrop-blur-sm"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">À propos de moi</h2> | |
| <p class="text-lg leading-relaxed"> | |
| Passionné par la technologie, le développement et la sécurité informatique, je crée des solutions digitales performantes et sécurisées. J'aime transformer les idées en produits concrets, intuitifs et durables. Grâce à ma double compétence en développement full stack et en ingénierie réseau, j'intègre aussi des outils IA pour booster la productivité et l'automatisation. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="container mx-auto px-6 py-20"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Compétences techniques</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Column 1 --> | |
| <div class="bg-white/5 p-6 rounded-2xl backdrop-blur-sm animate-fade-up"> | |
| <h3 class="text-xl font-semibold mb-4 text-primary">Langages & Frameworks</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> HTML | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> CSS | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> JavaScript | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> PHP | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> Laravel | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> Flutter | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="code" class="mr-2 text-secondary"></i> Dart | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Column 2 --> | |
| <div class="bg-white/5 p-6 rounded-2xl backdrop-blur-sm animate-fade-up"> | |
| <h3 class="text-xl font-semibold mb-4 text-primary">Bases de données & Sécurité</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="database" class="mr-2 text-secondary"></i> MySQL | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="layout" class="mr-2 text-secondary"></i> UML | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="link" class="mr-2 text-secondary"></i> Conception relationnelle | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="shield" class="mr-2 text-secondary"></i> Audit | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="lock" class="mr-2 text-secondary"></i> VPN | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="shield" class="mr-2 text-secondary"></i> Firewall | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="server" class="mr-2 text-secondary"></i> Hébergement sécurisé | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div class="bg-white/5 p-6 rounded-2xl backdrop-blur-sm animate-fade-up"> | |
| <h3 class="text-xl font-semibold mb-4 text-primary">Outils & Automatisation</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="cpu" class="mr-2 text-secondary"></i> Intégration IA | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="refresh-cw" class="mr-2 text-secondary"></i> Optimisation des processus | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="zap" class="mr-2 text-secondary"></i> Automatisation du code | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="git-branch" class="mr-2 text-secondary"></i> Git | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="repeat" class="mr-2 text-secondary"></i> CI/CD | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="terminal" class="mr-2 text-secondary"></i> Serveur Linux | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="activity" class="mr-2 text-secondary"></i> Maintenance & Monitoring | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="container mx-auto px-6 py-20"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Projets réalisés</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Project 1 --> | |
| <div class="bg-white/5 rounded-2xl overflow-hidden backdrop-blur-sm animate-zoom-in"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">volonteuniversity.com</h3> | |
| <p class="text-gray-300 mb-4">Système complet de gestion universitaire (inscriptions, examens, bibliothèque, administration).</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">PHP</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">MySQL</span> | |
| </div> | |
| <a href="https://volonteuniversity.com" target="_blank" class="text-secondary hover:underline flex items-center"> | |
| <i data-feather="external-link" class="mr-1 w-4 h-4"></i> Visiter le site | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white/5 rounded-2xl overflow-hidden backdrop-blur-sm animate-zoom-in"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-primary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">volontes.volonteuniversity.com</h3> | |
| <p class="text-gray-300 mb-4">Plateforme de gestion préscolaire et secondaire : gestion des scolarités, bulletins et cartes.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">PHP</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">MySQL</span> | |
| </div> | |
| <a href="http://volontes.volonteuniversity.com" target="_blank" class="text-secondary hover:underline flex items-center"> | |
| <i data-feather="external-link" class="mr-1 w-4 h-4"></i> Visiter le site | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white/5 rounded-2xl overflow-hidden backdrop-blur-sm animate-zoom-in"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">agroshoptg.store</h3> | |
| <p class="text-gray-300 mb-4">Site e-commerce pour produits agricoles (interface fluide et responsive).</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">PHP</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">MySQL</span> | |
| </div> | |
| <a href="http://agroshoptg.store" target="_blank" class="text-secondary hover:underline flex items-center"> | |
| <i data-feather="external-link" class="mr-1 w-4 h-4"></i> Visiter le site | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="bg-white/5 rounded-2xl overflow-hidden backdrop-blur-sm animate-zoom-in"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-primary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">leguminotg.store</h3> | |
| <p class="text-gray-300 mb-4">Application web de gestion et vente de produits agricoles développée avec Laravel.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">Laravel</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">MySQL</span> | |
| </div> | |
| <a href="http://leguminotg.store" target="_blank" class="text-secondary hover:underline flex items-center"> | |
| <i data-feather="external-link" class="mr-1 w-4 h-4"></i> Visiter le site | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="bg-white/5 rounded-2xl overflow-hidden backdrop-blur-sm animate-zoom-in"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Système de microfinance</h3> | |
| <p class="text-gray-300 mb-4">Plateforme de gestion financière avec Laravel & Flutter : comptes, prêts, transactions, rapports.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">Laravel</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">Flutter</span> | |
| <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">MySQL</span> | |
| </div> | |
| <span class="text-gray-400 text-sm">En cours de développement</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="container mx-auto px-6 py-20 bg-white/5 rounded-3xl max-w-4xl backdrop-blur-sm"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Formation</h2> | |
| <div class="space-y-6"> | |
| <div class="border-l-2 border-primary pl-6 py-2"> | |
| <h3 class="text-xl font-semibold">Licence en Informatique et Sécurité Informatique</h3> | |
| <p class="text-gray-300">Université de Formatec</p> | |
| <p class="text-secondary">2022 - en cours</p> | |
| </div> | |
| <div class="border-l-2 border-primary pl-6 py-2"> | |
| <h3 class="text-xl font-semibold">Baccalauréat Scientifique</h3> | |
| <p class="text-gray-300">Lycée Badou</p> | |
| <p class="text-secondary">2020 - 2021</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="container | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |