Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfolio IA - Projets en Intelligence Artificielle</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F3F4F6', | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'fade-in': 'fadeIn 1s ease-in', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Animation de dessin */ | |
| @keyframes draw { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .drawing { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: draw 3s ease-in-out forwards; | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .project-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #4F46E5, #10B981); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-primary">Portfolio IA</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#projects" class="text-gray-700 hover:text-primary transition">Projets</a> | |
| <a href="#about" class="text-gray-700 hover:text-primary transition">À propos</a> | |
| <a href="#contact" class="text-gray-700 hover:text-primary transition">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Profile Section --> | |
| <div class="bg-white py-6 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center space-x-4"> | |
| <img src="https://media.licdn.com/dms/image/D4E03AQF1Q7JwQq5j5w/profile-displayphoto-shrink_400_400/0/1701265003803?e=1718236800&v=beta&t=Y2z3JjQ2q0VKXp0Y0Q5QZ1Z0Z0Z0Z0Z0Z0Z0Z0Z0Z0" alt="Mohamed Dougaya Touré" class="w-20 h-20 rounded-full object-cover border-2 border-primary"> | |
| <h1 class="text-2xl font-bold text-gray-900">Mohamed Dougaya Touré</h1> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <header class="bg-gradient-to-r from-primary to-secondary py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 animate-fade-in"> | |
| Mes <span class="gradient-text">Projets IA</span> | |
| </h1> | |
| <p class="text-xl text-gray-100 max-w-3xl mx-auto"> | |
| Découvrez mes réalisations en intelligence artificielle, du traitement d'images à la génération de texte et bien plus encore. | |
| </p> | |
| <!-- Dessin animé --> | |
| <div class="flex justify-center mt-8"> | |
| <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Visage --> | |
| <circle cx="100" cy="100" r="50" fill="none" stroke="white" stroke-width="3" class="drawing"/> | |
| <!-- Yeux --> | |
| <circle cx="75" cy="85" r="8" fill="none" stroke="white" stroke-width="3" class="drawing" style="animation-delay: 0.5s"/> | |
| <circle cx="125" cy="85" r="8" fill="none" stroke="white" stroke-width="3" class="drawing" style="animation-delay: 0.5s"/> | |
| <!-- Sourire --> | |
| <path d="M75 130 Q100 150 125 130" fill="none" stroke="white" stroke-width="3" class="drawing" style="animation-delay: 1s"/> | |
| </svg> | |
| </div> | |
| <div class="mt-10"> | |
| <a href="#projects" class="bg-white text-primary px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg"> | |
| Explorer les projets | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Mes Projets IA</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Une collection de projets variés mettant en œuvre différentes technologies d'intelligence artificielle. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Object Detection" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/YOLOv8_Object_Detection" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Vision</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">YOLOv8 Object Detection</h3> | |
| <p class="text-gray-600">Application de détection d'objets basée sur YOLOv8.</p> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Multilingual Translation" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Traduction_Multilingue" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Traduction Multilingue</h3> | |
| <p class="text-gray-600">Application de traduction multilingue basée sur des modèles IA.</p> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Audio Transcription" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Audio_Transcription" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Audio</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Audio Transcription</h3> | |
| <p class="text-gray-600">Application de transcription et traduction audio avec Whisper et Canary.</p> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Object Segmentation" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Segmentation_objets_avec_YOLOv8" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Vision</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Segmentation d'objets avec YOLOv8</h3> | |
| <p class="text-gray-600">Application de détection d'objets sur images et vidéos.</p> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Image Generation" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/GENERATION_IMAGE" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Génération</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Génération d'Images</h3> | |
| <p class="text-gray-600">Générez des images à partir de texte avec Kandinsky 2.2 ou Stable Diffusion.</p> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Image Captioning" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Description_Automatique_d_Images_avec_IA" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Description Automatique d'Images</h3> | |
| <p class="text-gray-600">Générez des légendes d'images en anglais et traduisez-les en français.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="text-center mt-12"> | |
| <button id="loadMore" class="bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-primary-dark transition"> | |
| Voir plus de projets | |
| </button> | |
| </div> | |
| <!-- Hidden Projects (will be shown when clicking "Load More") --> | |
| <div id="moreProjects" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8"> | |
| <!-- Project 7 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Text Translation" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Texte_Traduction_EN-FR__FR-EN" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Texte Traduction EN-FR / FR-EN</h3> | |
| <p class="text-gray-600">Traduction automatique entre français et anglais avec plusieurs modèles.</p> | |
| </div> | |
| </div> | |
| <!-- Project 8 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Text Summarization" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Resumer_un_texte" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Résumer un texte</h3> | |
| <p class="text-gray-600">Résumé de texte multilingue avec BART et mT5.</p> | |
| </div> | |
| </div> | |
| <!-- Project 9 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1611605698335-8b1569810432?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Sentiment Analysis" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Verification_Sentiments" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Vérification de Sentiments</h3> | |
| <p class="text-gray-600">Analysez le sentiment de tweets en français avec LSTM et DistilCamemBERT.</p> | |
| </div> | |
| </div> | |
| <!-- Project 10 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="CIFAR-10 Classifier" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/Classificateur_CIFAR-10" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Vision</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Classificateur CIFAR-10</h3> | |
| <p class="text-gray-600">Classifiez des images en 10 catégories avec un modèle CNN.</p> | |
| </div> | |
| </div> | |
| <!-- Project 11 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Bank Subscription" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/verification_souscrire_ou_pas" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Prédiction</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Vérification Souscription</h3> | |
| <p class="text-gray-600">Prédit si un client souscrira à un produit bancaire avec un DNN.</p> | |
| </div> | |
| </div> | |
| <!-- Project 12 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Text to Speech" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/TEXT_TO_SPEEAK" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Audio</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">TEXT TO SPEAK</h3> | |
| <p class="text-gray-600">Synthèse vocale multilingue avec trois options différentes.</p> | |
| </div> | |
| </div> | |
| <!-- Project 13 --> | |
| <div class="project-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Car Price Prediction" class="w-full h-full object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4"> | |
| <a href="https://huggingface.co/spaces/Dougaya/prix_voiture-prediction" target="_blank" class="text-white text-center"> | |
| <h3 class="text-xl font-bold mb-2">Voir le projet</h3> | |
| <i class="fas fa-external-link-alt text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Prédiction</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Prix Voiture Prediction</h3> | |
| <p class="text-gray-600">Prédisez le prix de vente d'une voiture à partir de ses caractéristiques.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">À propos de moi</h2> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Informations Personnelles</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-user mr-3 text-primary"></i> | |
| <span>Mohamed Dougaya Touré</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-primary"></i> | |
| <span>mohameddougaya@gmail.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-calendar-alt mr-3 text-primary"></i> | |
| <span>26 octobre 2004</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-3 text-primary"></i> | |
| <span>Conakry, Guinée</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-graduation-cap mr-3 text-primary"></i> | |
| <span>L3 Mathématiques Appliquées</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="text-gray-600 mb-6"> | |
| Passionné par l'intelligence artificielle, j'ai développé une expertise dans divers domaines du machine learning et du deep learning. Mes projets couvrent la vision par ordinateur, le traitement du langage naturel, la génération de contenu et bien plus encore. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Étudiant en L3 Mathématiques Appliquées, je combine mes connaissances théoriques avec des applications pratiques en intelligence artificielle. Chaque projet présenté ici a été soigneusement conçu pour résoudre des problèmes concrets en utilisant les dernières technologies d'IA. J'accorde une grande importance à la qualité des résultats et à l'expérience utilisateur. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Python</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">TensorFlow</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">PyTorch</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Hugging Face</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">OpenAI</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">YOLOv8</span> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 lg:pl-12"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Mes Compétences en IA</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Vision par ordinateur</span> | |
| <span class="text-gray-700">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-primary h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Traitement du langage</span> | |
| <span class="text-gray-700">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Génération de contenu</span> | |
| <span class="text-gray-700">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Modèles pré-entraînés</span> | |
| <span class="text-gray-700">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Contactez-moi</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Vous avez des questions sur mes projets ou souhaitez collaborer ? N'hésitez pas à me contacter. | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"></textarea> | |
| </div> | |
| <div class="text-center"> | |
| <button type="submit" class="bg-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-primary-dark transition shadow-lg"> | |
| Envoyer le message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Portfolio IA</h3> | |
| <p class="text-gray-400"> | |
| Une collection de projets avancés en intelligence artificielle démontrant diverses applications des technologies modernes de ML et DL. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Liens rapides</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#projects" class="text-gray-400 hover:text-white transition">Projets</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Réseaux sociaux</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.linkedin.com/in/mohamed-dougaya-touré-1094a8305" target="_blank" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin text-2xl"></i> | |
| </a> | |
| <a href="https://github.com/Dougaya" target="_blank" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-medium text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Portfolio IA. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Load More Projects | |
| document.getElementById('loadMore').addEventListener('click', function() { | |
| const moreProjects = document.getElementById('moreProjects'); | |
| const loadMoreBtn = document.getElementById('loadMore'); | |
| if (moreProjects.classList.contains('hidden')) { | |
| moreProjects.classList.remove('hidden'); | |
| loadMoreBtn.textContent = 'Voir moins de projets'; | |
| } else { | |
| moreProjects.classList.add('hidden'); | |
| loadMoreBtn.textContent = 'Voir plus de projets'; | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dougaya/my-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |