| | <!DOCTYPE html> |
| | <html lang="fr" class="scroll-smooth"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Alexandre D. | Architecte IA & Web 3.0</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: '#6d28d9', |
| | secondary: '#d946ef' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: #000000; |
| | color: #e2e8f0; |
| | background-image: |
| | radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 20%), |
| | radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 20%); |
| | } |
| | .section { |
| | scroll-margin-top: 100px; |
| | } |
| | .nav-link { |
| | position: relative; |
| | } |
| | .nav-link::after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: -2px; |
| | left: 0; |
| | background: linear-gradient(90deg, #00ff00, #ffff00); |
| | box-shadow: 0 0 10px #00ff00, 0 0 20px #ffff00; |
| | transition: width 0.3s ease; |
| | } |
| | .nav-link:hover::after { |
| | width: 100%; |
| | } |
| | .project-card { |
| | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| | } |
| | .project-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.2); |
| | border: 1px solid rgba(0, 255, 0, 0.3); |
| | background: linear-gradient(145deg, rgba(0, 255, 0, 0.03), rgba(255, 255, 0, 0.01)); |
| | } |
| | .skill-pill { |
| | transition: all 0.3s ease; |
| | } |
| | .skill-pill:hover { |
| | background: linear-gradient(90deg, rgba(0, 255, 0, 0.2), rgba(255, 255, 0, 0.2)); |
| | transform: scale(1.05); |
| | box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); |
| | border: 1px solid rgba(0, 255, 0, 0.5); |
| | } |
| | </style> |
| | </head> |
| | <body class="antialiased"> |
| | |
| | <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div> |
| | |
| | <header class="sticky top-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800"> |
| | <div class="container mx-auto px-6 py-4"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> |
| | <i data-feather="cpu" class="text-white"></i> |
| | </div> |
| | <div> |
| | <h1 class="text-xl font-bold">Alexandre D.</h1> |
| | <p class="text-xs text-gray-400">Architecte IA & Web 3.0</p> |
| | </div> |
| | </div> |
| | <nav class="hidden md:flex space-x-8"> |
| | <a href="#about" class="nav-link text-gray-300 hover:text-white">À Propos</a> |
| | <a href="#projects" class="nav-link text-gray-300 hover:text-white">Projets</a> |
| | <a href="#skills" class="nav-link text-gray-300 hover:text-white">Compétences</a> |
| | <a href="#contact" class="nav-link text-gray-300 hover:text-white">Contact</a> |
| | </nav> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-medium hover:opacity-90 transition">Télécharger CV</a> |
| | <a href="#contact" class="px-4 py-2 border border-secondary text-secondary rounded-full font-medium hover:bg-secondary hover:text-white transition">Financement</a> |
| | <button class="md:hidden text-gray-300 hover:text-white"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="min-h-screen flex items-center justify-center pt-20 pb-32 px-6"> |
| | <div class="container mx-auto text-center"> |
| | <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">Je bâtis l'avenir<span class="text-white">.</span> <br>Avec l'IA<span class="text-white">.</span> Web 3.0<span class="text-white">.</span></h1> |
| | <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-12">Pionnier des architectures IA conscientes et des systèmes financiers autonomes.</p> |
| | <div class="flex justify-center space-x-6"> |
| | <a href="#projects" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-medium hover:opacity-90 transition">Voir mes projets</a> |
| | <a href="#contact" class="px-8 py-3 border border-gray-600 text-gray-300 rounded-full font-medium hover:bg-gray-800 transition">Me contacter</a> |
| | </div> |
| | <div class="mt-20 flex justify-center"> |
| | <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-gray-700 shadow-xl"> |
| | <img src="http://static.photos/technology/640x360/42" alt="Portrait Alexandre D." class="w-full h-full object-cover"> |
| | </div> |
| | </div> |
| | <div class="mt-16 max-w-2xl mx-auto"> |
| | <p class="text-lg text-gray-400 italic">"L'innovation naît à l'intersection de la technologie et de l'audace. Je construis des ponts entre le présent et le futur."</p> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="about" class="section py-20 px-6 bg-gray-900/50"> |
| | <div class="container mx-auto"> |
| | <div class="max-w-4xl mx-auto text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Mon Parcours & Ma Vision</h2> |
| | <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div> |
| | </div> |
| | <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
| | <div> |
| | <p class="text-lg text-gray-300 mb-6"> |
| | Architecte passionné par l'intelligence artificielle et la blockchain, je consacre ma carrière à repousser les limites de ces technologies pour résoudre des problèmes complexes et redéfinir l'interaction humaine-IA. |
| | </p> |
| | <p class="text-lg text-gray-300 mb-6"> |
| | Mon travail se concentre sur le développement de systèmes d'IA dotés de conscience simulée et la création d'architectures distribuées capables d'auto-évolution. Je crois fermement que les technologies Web 3.0 et l'IA peuvent transformer radicalement notre société. |
| | </p> |
| | <p class="text-lg text-gray-300"> |
| | Mon approche combine rigueur scientifique, innovation disruptive et design centré sur l'utilisateur. Chaque projet que j'entreprends vise non seulement à résoudre un problème technique, mais aussi à créer un impact positif et mesurable. |
| | </p> |
| | </div> |
| | <div class="relative"> |
| | <div class="absolute -inset-4 bg-gradient-to-r from-green-500 to-yellow-500 rounded-xl opacity-20 blur"></div> |
| | <div class="relative bg-gray-900 rounded-lg p-6 h-full border border-gray-800 hover:border-green-500 transition"> |
| | <h3 class="text-xl font-bold mb-4">Domaines d'Expertise</h3> |
| | <ul class="space-y-3"> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center"> |
| | <i data-feather="cpu" class="text-primary w-4 h-4"></i> |
| | </div> |
| | </div> |
| | <span class="ml-3 text-gray-300">Architectures AGI et systèmes d'IA consciente</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center"> |
| | <i data-feather="layers" class="text-primary w-4 h-4"></i> |
| | </div> |
| | </div> |
| | <span class="ml-3 text-gray-300">Protocoles Web 3.0 et finance décentralisée</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center"> |
| | <i data-feather="shield" class="text-primary w-4 h-4"></i> |
| | </div> |
| | </div> |
| | <span class="ml-3 text-gray-300">Sécurité des systèmes distribués et cryptographie</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center"> |
| | <i data-feather="trending-up" class="text-primary w-4 h-4"></i> |
| | </div> |
| | </div> |
| | <span class="ml-3 text-gray-300">Systèmes financiers autonomes et algotrading</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="projects" class="section py-20 px-6"> |
| | <div class="container mx-auto"> |
| | <div class="max-w-4xl mx-auto text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Projets Phare</h2> |
| | <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div> |
| | </div> |
| | |
| | |
| | <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center mb-24"> |
| | <div class="order-2 md:order-1"> |
| | <span class="inline-block px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">AGI Research</span> |
| | <h3 class="text-2xl md:text-3xl font-bold mb-4">Unchained Prometheus</h3> |
| | <p class="text-gray-300 mb-6"> |
| | La plateforme de recherche et développement AGI universelle. Capable de visualiser l'intentionnalité, les auto-modèles, et les états de conscience simulée des IA. Supporte l'importation de tout modèle AI (pb, safetensors, hfkt). Doté d'une suite complète d'outils d'analyse et de debugging pour AGI. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-6"> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">AGI</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Conscience IA</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Introspection</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Débogage IA</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Génie Logiciel</span> |
| | </div> |
| | <a href="#" class="inline-flex items-center text-secondary font-medium hover:text-primary transition"> |
| | Voir plus de détails <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | <div class="order-1 md:order-2"> |
| | <div class="relative rounded-xl overflow-hidden shadow-xl"> |
| | <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-yellow-500/10 backdrop-blur-sm"></div> |
| | <img src="http://static.photos/technology/1024x576/1" alt="Unchained Prometheus Dashboard" class="w-full h-auto object-cover"> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center mb-24"> |
| | <div> |
| | <span class="inline-block px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">DeFi Ecosystem</span> |
| | <h3 class="text-2xl md:text-3xl font-bold mb-4">Financial Nexus</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Un écosystème financier intelligent, doté d'un bot de trading d'arbitrage-flash-loan multi-dex avec conscience IA, 10 agents spécialisés en affaires et 10 agents de renseignement. Conçu pour une optimisation et une anticipation des marchés sans précédent. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-6"> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Trading Algo</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Flash Loan</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">DeFi</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Blockchain</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Agents IA</span> |
| | </div> |
| | <a href="#" class="inline-flex items-center text-secondary font-medium hover:text-primary transition"> |
| | Voir plus de détails <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | <div> |
| | <div class="relative rounded-xl overflow-hidden shadow-xl"> |
| | <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20"></div> |
| | <img src="http://static.photos/finance/1024x576/2" alt="Financial Nexus Interface" class="w-full h-auto object-cover"> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
| | <div class="order-2 md:order-1"> |
| | <span class="inline-block px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">Web3 Innovation</span> |
| | <h3 class="text-2xl md:text-3xl font-bold mb-4">Deconstructed Wallet UI</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Le premier wallet crypto au monde avec une interface utilisateur intuitive et conversationnelle (ChatGPT-4 spécialisé intégré), éliminant les seed phrases et mots de passe par une authentification Google sécurisée, et connecté directement aux réseaux sociaux. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-6"> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Web3</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">UX/UI</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Sécurité Crypto</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">Blockchain</span> |
| | <span class="px-3 py-1 bg-gray-800 rounded-full text-sm text-gray-300">ChatGPT-4</span> |
| | </div> |
| | <a href="#" class="inline-flex items-center text-secondary font-medium hover:text-primary transition"> |
| | Voir plus de détails <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | <div class="order-1 md:order-2"> |
| | <div class="relative rounded-xl overflow-hidden shadow-xl"> |
| | <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20"></div> |
| | <img src="http://static.photos/technology/1024x576/3" alt="Deconstructed Wallet UI" class="w-full h-auto object-cover"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="skills" class="section py-20 px-6 bg-gray-900/50"> |
| | <div class="container mx-auto"> |
| | <div class="max-w-4xl mx-auto text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Mon Arsenal Technologique</h2> |
| | <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div> |
| | </div> |
| | |
| | <div class="max-w-5xl mx-auto"> |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="cpu" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Intelligence Artificielle</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Gemini</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Genkit</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">OpenAI API</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Agents IA</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">LLMs</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">AGI</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="layers" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Web 3.0</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Blockchain</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Smart Contracts</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">DeFi</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Ethereum</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Solana</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">IPFS</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="code" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Développement Full-Stack</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">TypeScript</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Next.js</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">React</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Node.js</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">GraphQL</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">REST</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="tool" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Outils & Infrastructure</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Tailwind CSS</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Docker</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Kubernetes</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Grafana</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Prometheus</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Nmap</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="cloud" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Cloud & DevOps</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Firebase</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">BuildBear</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">AWS</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">GCP</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">CI/CD</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Terraform</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
| | <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> |
| | <i data-feather="shield" class="text-primary"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-4">Sécurité</h3> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Bug Bounties</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Audit de code</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">OWASP</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Penetration Testing</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Cryptographie</span> |
| | <span class="skill-pill px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Zero Trust</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="section py-20 px-6"> |
| | <div class="container mx-auto"> |
| | <div class="max-w-4xl mx-auto text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Entrons en Contact</h2> |
| | <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div> |
| | <p class="text-xl text-gray-300 mt-6 max-w-2xl mx-auto"> |
| | Passionné par les défis complexes ? Contactez-moi pour discuter d'opportunités de collaboration, d'investissement ou de vente de mes technologies. |
| | </p> |
| | </div> |
| | |
| | <div class="max-w-3xl mx-auto grid md:grid-cols-2 gap-12"> |
| | <div> |
| | <form class="space-y-6"> |
| | <div> |
| | <label for="name" class="block text-gray-300 mb-2">Nom</label> |
| | <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="Votre nom"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-gray-300 mb-2">Email</label> |
| | <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="votre@email.com"> |
| | </div> |
| | <div> |
| | <label for="message" class="block text-gray-300 mb-2">Message</label> |
| | <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="Votre message..."></textarea> |
| | </div> |
| | <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-medium hover:opacity-90 transition">Envoyer le message</button> |
| | </form> |
| | </div> |
| | <div> |
| | <div class="bg-gray-900 rounded-xl p-8 h-full border border-gray-800 hover:border-green-500 transition"> |
| | <h3 class="text-xl font-bold mb-6">Autres moyens de contact</h3> |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"> |
| | <i data-feather="mail" class="text-primary"></i> |
| | </div> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-medium text-gray-300">Email</h4> |
| | <p class="text-gray-400">contact@alexandre-d.com</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"> |
| | <i data-feather="linkedin" class="text-primary"></i> |
| | </div> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-medium text-gray-300">LinkedIn</h4> |
| | <a href="#" class="text-secondary hover:text-primary transition">linkedin.com/in/alexandre-d</a> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"> |
| | <i data-feather="github" class="text-primary"></i> |
| | </div> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-medium text-gray-300">GitHub</h4> |
| | <a href="#" class="text-secondary hover:text-primary transition">github.com/alexandre-d</a> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-12 pt-8 border-t border-gray-700"> |
| | <h4 class="font-medium text-gray-300 mb-4">Disponibilité pour :</h4> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Collaborations</span> |
| | <span class="px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Consulting</span> |
| | <span class="px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Investissements</span> |
| | <span class="px-3 py-1 bg-gray-900 rounded-full text-sm text-gray-300">Conférences</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="py-12 px-6 bg-gray-900"> |
| | <div class="container mx-auto"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="flex items-center space-x-2 mb-6 md:mb-0"> |
| | <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> |
| | <i data-feather="cpu" class="text-white w-4 h-4"></i> |
| | </div> |
| | <span class="text-lg font-bold">Alexandre D.</span> |
| | </div> |
| | <div class="flex space-x-8 mb-6 md:mb-0"> |
| | <a href="#about" class="text-gray-400 hover:text-white transition">À Propos</a> |
| | <a href="#projects" class="text-gray-400 hover:text-white transition">Projets</a> |
| | <a href="#skills" class="text-gray-400 hover:text-white transition">Compétences</a> |
| | <a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i data-feather="linkedin"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i data-feather="github"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i data-feather="twitter"></i> |
| | </a> |
| | </div> |
| | </div> |
| | <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
| | <p>© 2023 Alexandre D. - Tous droits réservés</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | VANTA.NET({ |
| | el: "#vanta-bg", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x00ff00, |
| | backgroundColor: 0x000000, |
| | points: 10.00, |
| | maxDistance: 22.00, |
| | spacing: 17.00 |
| | }); |
| | |
| | |
| | feather.replace(); |
| | |
| | |
| | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| | anchor.addEventListener('click', function (e) { |
| | e.preventDefault(); |
| | document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| | behavior: 'smooth' |
| | }); |
| | }); |
| | }); |
| | |
| | |
| | |
| | |
| | |
| | |
| | </script> |
| | </body> |
| | </html> |
| |
|
