Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dossiya DAKOU | Sustainable Engineering & Climate Innovation</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| // Language management | |
| function setLanguage(lang) { | |
| document.documentElement.setAttribute('data-lang', lang); | |
| localStorage.setItem('lang', lang); | |
| toggleLanguageContent(lang); | |
| } | |
| function toggleLanguageContent(lang) { | |
| document.querySelectorAll('[data-en], [data-fr]').forEach(el => { | |
| if (el.hasAttribute(`data-${lang}`)) { | |
| el.style.display = ''; | |
| } else { | |
| el.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Initialize language | |
| const savedLang = localStorage.getItem('lang') || 'en'; | |
| setLanguage(savedLang); | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| onyx: '#0B0B0F', | |
| offwhite: '#F7F7F8', | |
| main: '#2CA7A0', // Changed teal to main | |
| deepblue: '#90EE90', // Changed from deep blue to light green | |
| orange: '#E67E22', | |
| }, | |
| fontFamily: { | |
| inter: ['Inter', 'sans-serif'], | |
| source: ['Source Sans Pro', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap"> | |
| </head> | |
| <body class="bg-onyx text-offwhite font-source min-h-screen"> | |
| <!-- Navigation Rubrique --> | |
| <nav class="sticky top-0 z-50 bg-black backdrop-blur-md border-b border-gray-800 py-4 px-6 md:px-12 lg:px-24"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="flex items-center space-x-4"> | |
| <div class="h-14 w-14 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">DD</span> | |
| </div> | |
| <span class="text-2xl font-inter font-bold text-green-400">Dossiya DAKOU</span> | |
| </a> | |
| <div class="hidden md:flex space-x-1"> | |
| <a href="index.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-green-400 font-medium border-b-2 border-green-400">Home</a> | |
| <a href="about.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">About</a> | |
| <a href="experience.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Experience</a> | |
| <a href="projects.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Projects</a> | |
| <a href="awards.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Awards</a> | |
| <a href="skills.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Skills</a> | |
| <a href="education.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Education</a> | |
| <a href="volunteering.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Volunteering</a> | |
| <a href="contact.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Contact</a> | |
| <a href="resume.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-white">Resume</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800"> | |
| <i class="fas fa-moon text-green-400"></i> | |
| </button> | |
| <div class="flex items-center space-x-2 ml-4 bg-gray-800 rounded-full p-1"> | |
| <button class="px-3 py-1 rounded-full bg-green-400 text-black text-sm">EN</button> | |
| <button class="px-3 py-1 rounded-full text-gray-400 hover:text-white text-sm">FR</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="px-6 md:px-12 lg:px-32 py-24 md:py-36 bg-black relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-black via-black to-green-900/20 opacity-70"></div> | |
| <div class="absolute top-20 right-20 w-96 h-96 bg-green-400/10 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-10 left-10 w-80 h-80 bg-green-400/5 rounded-full blur-3xl"></div> | |
| <div class="max-w-6xl mx-auto relative z-10"> | |
| <div class="grid md:grid-cols-2 gap-16 items-center"> | |
| <div class="space-y-8"> | |
| <div> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-inter font-bold text-white leading-tight"> | |
| <span data-en>Dossiya DAKOU</span> | |
| <span data-fr style="display:none">Dossiya DAKOU</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl lg:text-4xl font-medium text-green-400 mt-4"> | |
| <span data-en>Sustainable Engineering & Climate Innovation</span> | |
| <span data-fr style="display:none">Ingénierie Durable & Innovation Climatique</span> | |
| </h2> | |
| </div> | |
| <p class="text-xl md:text-2xl leading-relaxed max-w-2xl text-white/90"> | |
| <span data-en>Engineering sustainable energy futures through AI-powered solutions. Bridging the gap between renewable energy, climate action, and equitable technology for African communities.</span> | |
| <span data-fr style="display:none">Concevoir un avenir énergétique durable grâce à des solutions alimentées par l'IA. Combler le fossé entre les énergies renouvelables, l'action climatique et les technologies équitables pour les communautés africaines.</span> | |
| </p> | |
| <div class="flex flex-wrap gap-6 mt-8"> | |
| <a href="#contact" | |
| class="bg-green-400 hover:bg-green-500 text-black px-8 py-4 rounded-lg font-semibold text-lg transition-all hover:shadow-lg hover:shadow-green-400/20 flex items-center gap-2"> | |
| <i class="fas fa-calendar-check"></i> | |
| <span data-en>Contact / Book a call</span> | |
| <span data-fr style="display:none">Contact / Prendre rendez-vous</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl blur-lg opacity-30"></div> | |
| <img src="/images/b19c12f6-0e3f-4f15-b9ff-b1b60d376b87.jpeg" alt="Dossiya DAKOU" | |
| class="relative h-80 w-80 lg:h-96 lg:w-96 rounded-2xl object-cover border-2 border-green-400/50 shadow-2xl shadow-green-400/10"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Stats --> | |
| <section class="px-6 md:px-12 lg:px-32 py-20 bg-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-inter font-bold text-white mb-4"> | |
| <span data-en>Impact Across Africa</span> | |
| <span data-fr style="display:none">Impact à travers l'Afrique</span> | |
| </h2> | |
| <p class="text-xl text-white/70 max-w-3xl mx-auto"> | |
| <span data-en>Driving sustainable change through engineering innovation and community-centered solutions</span> | |
| <span data-fr style="display:none">Conduire un changement durable grâce à l'innovation technique et des solutions centrées sur la communauté</span> | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all transform hover:-translate-y-2 group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-solar-panel text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-3xl font-inter text-green-400 mb-4">10+</h3> | |
| <h4 class="text-xl font-semibold text-white mb-2"> | |
| <span data-en>Energy Projects</span> | |
| <span data-fr style="display:none">Projets Énergétiques</span> | |
| </h4> | |
| <p class="text-green-400/80"> | |
| <span data-en>From solar cold chains to AI-powered microgrids</span> | |
| <span data-fr style="display:none">De chaînes de froid solaires aux micro-réseaux alimentés par IA</span> | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all transform hover:-translate-y-2 group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-users text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-3xl font-inter text-green-400 mb-4">5000+</h3> | |
| <h4 class="text-xl font-semibold text-white mb-2"> | |
| <span data-en>People Impacted</span> | |
| <span data-fr style="display:none">Personnes Impactées</span> | |
| </h4> | |
| <p class="text-green-400/80"> | |
| <span data-en>Through sustainable energy deployments</span> | |
| <span data-fr style="display:none">Par le déploiement d'énergies durables</span> | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all transform hover:-translate-y-2 group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-medal text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-3xl font-inter text-green-400 mb-4">5+</h3> | |
| <h4 class="text-xl font-semibold text-white mb-2"> | |
| <span data-en>Awards & Honors</span> | |
| <span data-fr style="display:none">Prix et Honneurs</span> | |
| </h4> | |
| <p class="text-green-400/80"> | |
| <span data-en>For climate-tech innovation</span> | |
| <span data-fr style="display:none">Pour l'innovation climat-tech</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Engineering Approach --> | |
| <section class="px-6 md:px-12 lg:px-32 py-24 bg-black relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-900/10 via-black to-black"></div> | |
| <div class="max-w-6xl mx-auto relative z-10"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-inter font-bold text-white mb-4"> | |
| <span data-en>Engineering Approach</span> | |
| <span data-fr style="display:none">Approche Ingénierique</span> | |
| </h2> | |
| <p class="text-xl text-white/70 max-w-3xl mx-auto"> | |
| <span data-en>Blending technical excellence with sustainable principles for impactful solutions</span> | |
| <span data-fr style="display:none">Allier l'excellence technique aux principes durables pour des solutions impactantes</span> | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-leaf text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-inter text-green-400 mb-4"> | |
| <span data-en>Sustainability-First</span> | |
| <span data-fr style="display:none">Durabilité d'Abord</span> | |
| </h3> | |
| <p class="text-white/80"> | |
| <span data-en>Design balancing technical feasibility with environmental and social impact assessment</span> | |
| <span data-fr style="display:none">Conception équilibrant la faisabilité technique avec l'évaluation d'impact environnemental et social</span> | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-brain text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-inter text-green-400 mb-4"> | |
| <span data-en>AI-Enhanced</span> | |
| <span data-fr style="display:none">IA-Amélioré</span> | |
| </h3> | |
| <p class="text-white/80"> | |
| <span data-en>Applying machine learning for optimized energy systems and predictive maintenance</span> | |
| <span data-fr style="display:none">Application du machine learning pour des systèmes énergétiques optimisés et une maintenance prédictive</span> | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-black to-gray-900 p-8 rounded-2xl border border-green-400/20 hover:border-green-400 transition-all group"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-400/20 transition-colors"> | |
| <i class="fas fa-hand-holding-heart text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-inter text-green-400 mb-4"> | |
| <span data-en>Community-Centered</span> | |
| <span data-fr style="display:none">Centré sur la Communauté</span> | |
| </h3> | |
| <p class="text-white/80"> | |
| <span data-en>Solutions developed with and for local users, ensuring adoption and long-term sustainability</span> | |
| <span data-fr style="display:none">Solutions développées avec et pour les utilisateurs locaux, assurant l'adoption et la durabilité à long terme</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Navigation --> | |
| <nav class="border-b border-gray-800 py-6 px-6 md:px-12 lg:px-32 flex justify-between items-center"> | |
| <div class="flex items-center space-x-12"> | |
| <a href="index.html" class="text-teal font-inter font-bold text-3xl">Dossiya DAKOU</a> | |
| <div class="hidden md:flex space-x-10"> | |
| <a href="index.html" class="text-orange hover:text-orange transition text-xl">Home</a> | |
| <a href="about.html" class="text-gray-400 hover:text-orange transition text-xl">About</a> | |
| <a href="experience.html" class="text-gray-400 hover:text-orange transition text-xl">Experience</a> | |
| <a href="projects.html" class="text-gray-400 hover:text-orange transition text-xl">Projects</a> | |
| <a href="awards.html" class="text-gray-400 hover:text-orange transition text-xl">Awards</a> | |
| <a href="skills.html" class="text-gray-400 hover:text-orange transition text-xl">Skills</a> | |
| <a href="contact.html" class="text-gray-400 hover:text-orange transition text-xl">Contact</a> | |
| <a href="resume.html" class="text-gray-400 hover:text-orange transition text-xl">Resume</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-10"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-teal hover:text-orange transition text-xl">EN</a> | |
| <a href="#" class="text-gray-500 hover:text-orange transition text-xl">FR</a> | |
| </div> | |
| <a href="contact.html" class="hidden md:block bg-orange text-onyx px-6 py-3 rounded-lg hover:bg-opacity-90 transition text-xl"> | |
| Contact / Book a call | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- About Section --> | |
| <section id="about" class="px-6 md:px-12 lg:px-24 py-16 bg-black"> | |
| <div class="rounded-xl p-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-green-300 mb-8">About Me</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <p class="mb-4">Mastercard Foundation Scholar at Arizona State University pursuing a Master of Science in Engineering in Sustainable Engineering with a Bachelor of Physical Science in Renewable Energy and Energy Systems.</p> | |
| <p class="mb-4">I believe engineering should serve both people and the planet. My journey sits at the crossroads of technology, social equity, and environmental justice.</p> | |
| <p>I'm passionate about how AI and machine learning can help build smarter, more inclusive energy systems, with a focus on policies that ensure fairness, engineering that restores dignity, and research that includes marginalized voices.</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800"> | |
| <h3 class="text-xl font-inter text-green-300 mb-4">Details</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="text-orange font-medium">Location</h4> | |
| <p>Kigali, Rwanda</p> | |
| </div> | |
| <div> | |
| <h4 class="text-orange font-medium">Contact</h4> | |
| <p>+250 796 892 820</p> | |
| <p>ddakou@asu.edu</p> | |
| </div> | |
| <div> | |
| <h4 class="text-orange font-medium">Links</h4> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.linkedin.com/in/dossiya-dakou" class="text-green-300 hover:text-orange transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="https://dossiyadakou.vercel.app" class="text-green-300 hover:text-orange transition"><i class="fas fa-globe"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="px-6 md:px-12 lg:px-24 py-16 bg-onyx"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-inter font-bold text-green-300">Professional Experience</h2> | |
| </div> | |
| <!-- Experience Timeline --> | |
| <div class="space-y-12"> | |
| <!-- IOM-UN Migration --> | |
| <div class="border-l-4 border-teal pl-6 relative"> | |
| <div class="absolute -left-2 top-0 h-4 w-4 rounded-full bg-teal"></div> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-2"> | |
| <h3 class="text-xl font-inter text-offwhite">Policy Research Intern</h3> | |
| <span class="text-orange">May 2025 - July 2025</span> | |
| </div> | |
| <p class="text-teal mb-4">IOM - UN Migration</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Conducted research on climate migration policies affecting West Africa region</li> | |
| <li>Assisted in policy development for climate mobility solutions</li> | |
| <li>Presented findings to UN stakeholders and local officials</li> | |
| </ul> | |
| </div> | |
| <!-- Add more experiences following same structure --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="px-6 md:px-12 lg:px-24 py-16 bg-gray-900 bg-opacity-30"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Engineering Projects</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Project Cards here (keep existing cards) --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Skills Section --> | |
| <section id="skills" class="px-6 md:px-12 lg:px-24 py-16 bg-black"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Skills & Expertise</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-xl font-inter text-orange mb-3">Technical Skills</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fab fa-python"></i></span> | |
| Python | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-bolt"></i></span> | |
| Sustainable Engineering | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-cloud"></i></span> | |
| Cloud Architecture | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-database"></i></span> | |
| Data Science | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-robot"></i></span> | |
| Machine Learning | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-wifi"></i></span> | |
| IoT | |
| </span> | |
| <span class="bg-gray-800 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <span class="text-orange mr-2"><i class="fas fa-project-diagram"></i></span> | |
| Project Management | |
| </span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-inter text-orange mb-3">Soft Skills</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Problem Solving</span> | |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Leadership</span> | |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Public Speaking</span> | |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Coordination</span> | |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Critical Thinking</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-inter text-orange mb-3">Languages</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>English (Professional)</span> | |
| <span>80%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-teal h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>French (Native)</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-teal h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Waama (Native)</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-teal h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- Certifications Section --> | |
| <section id="certifications" class="px-6 md:px-12 lg:px-24 py-16"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Certifications</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-onyx/50 p-6 rounded-lg border border-teal/30 hover:border-teal transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Project Management: Energy and Water Projects</h3> | |
| </div> | |
| <div class="bg-onyx/50 p-6 rounded-lg border border-teal/30 hover:border-teal transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Public Speaking Professional Certificate</h3> | |
| <p class="text-teal">Toastmasters International</p> | |
| </div> | |
| <div class="bg-onyx/50 p-6 rounded-lg border border-teal/30 hover:border-teal transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">IBM Cloud Advanced Architect Concepts</h3> | |
| </div> | |
| <div class="bg-onyx/50 p-6 rounded-lg border border-teal/30 hover:border-teal transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Presenting Technical Information with Stories</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Awards Section --> | |
| <section id="awards" class="px-6 md:px-12 lg:px-24 py-16 bg-gray-900 bg-opacity-30"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Awards & Honors</h2> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800 hover:border-main transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Best Green Innovation</h3> | |
| <p class="text-main">MIME AUF BENIN 2023</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800 hover:border-main transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Sustainable Energy Champion</h3> | |
| <p class="text-main">Climate Innovation Challenge</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800 hover:border-main transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Social Venture Challenge Winner</h3> | |
| <p class="text-main">2024</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800 hover:border-main transition"> | |
| <h3 class="text-xl font-inter text-orange mb-2">Young Leader</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Showcase --> | |
| <section class="px-6 md:px-12 lg:px-24 py-16 bg-black bg-opacity-90"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Engineering Projects</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-onyx rounded-xl overflow-hidden border border-main"> | |
| <div class="h-48 bg-[url('https://static.photos/industry/640x360/5')] bg-cover"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-inter text-main mb-2">Solar Cold Chain System</h3> | |
| <p class="mb-4">AI-powered refrigerated storage for agricultural produce</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">Solar PV</span> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">IoT</span> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">Python</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-onyx rounded-xl overflow-hidden border border-main"> | |
| <div class="h-48 bg-[url('https://static.photos/agriculture/640x360/7')] bg-cover"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-inter text-main mb-2">Smart Microgrid (GEFE2)</h3> | |
| <p class="mb-4">Community-scale renewable energy integration</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">Energy Storage</span> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">Machine Learning</span> | |
| <span class="text-xs bg-gray-800 px-2 py-1 rounded">Load Balancing</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="px-6 md:px-12 lg:px-24 py-16 bg-black"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Get In Touch</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-inter text-orange mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <a href="mailto:ddakou@asu.edu" class="text-teal hover:text-orange transition">ddakou@asu.edu</a> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Phone</h4> | |
| <a href="tel:+250796892820" class="text-teal hover:text-orange transition">+250 796 892 820</a> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Location</h4> | |
| <p>Kigali, Rwanda</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Social Media</h4> | |
| <div class="flex space-x-4 mt-2"> | |
| <a href="https://www.linkedin.com/in/dossiya-dakou" class="text-teal hover:text-orange transition text-xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="https://dossiyadakou.vercel.app" class="text-teal hover:text-orange transition text-xl"><i class="fas fa-globe"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-teal"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-teal"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-teal"></textarea> | |
| </div> | |
| <button type="submit" class="bg-orange text-onyx px-6 py-2 rounded-md hover:bg-opacity-90 transition font-medium">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-800 py-12 px-6 md:px-12 lg:px-32 bg-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid md:grid-cols-3 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="h-10 w-10 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center"> | |
| <span class="text-black font-bold">DD</span> | |
| </div> | |
| <span class="text-xl font-inter font-bold text-green-400">Dossiya DAKOU</span> | |
| </div> | |
| <p class="text-white/70 mb-6"> | |
| <span data-en>Sustainable Engineering & Climate Innovation for African Communities</span> | |
| <span data-fr style="display:none">Ingénierie Durable & Innovation Climatique pour les Communautés Africaines</span> | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.linkedin.com/in/dossiya-dakou" class="text-green-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="mailto:ddakou@asu.edu" class="text-green-400 hover:text-white transition"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| <a href="tel:+250796892820" class="text-green-400 hover:text-white transition"> | |
| <i class="fas fa-phone text-xl"></i> | |
| </a> | |
| <a href="https://dossiyadakou.vercel.app" class="text-green-400 hover:text-white transition"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-6"> | |
| <span data-en>Navigation</span> | |
| <span data-fr style="display:none">Navigation</span> | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="index.html" class="text-white/70 hover:text-green-400 transition">Home</a> | |
| <a href="about.html" class="text-white/70 hover:text-green-400 transition">About</a> | |
| <a href="experience.html" class="text-white/70 hover:text-green-400 transition">Experience</a> | |
| <a href="projects.html" class="text-white/70 hover:text-green-400 transition">Projects</a> | |
| <a href="awards.html" class="text-white/70 hover:text-green-400 transition">Awards</a> | |
| <a href="skills.html" class="text-white/70 hover:text-green-400 transition">Skills</a> | |
| <a href="education.html" class="text-white/70 hover:text-green-400 transition">Education</a> | |
| <a href="contact.html" class="text-white/70 hover:text-green-400 transition">Contact</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-6"> | |
| <span data-en>Get In Touch</span> | |
| <span data-fr style="display:none">Contactez-moi</span> | |
| </h3> | |
| <div class="space-y-3"> | |
| <p class="text-white/70 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-green-400 mr-3"></i> | |
| Kigali, Rwanda | |
| </p> | |
| <p class="text-white/70 flex items-center"> | |
| <i class="fas fa-envelope text-green-400 mr-3"></i> | |
| ddakou@asu.edu | |
| </p> | |
| <p class="text-white/70 flex items-center"> | |
| <i class="fas fa-phone text-green-400 mr-3"></i> | |
| +250 796 892 820 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-white/60 text-sm">© 2024 Dossiya DAKOU. All rights reserved.</p> | |
| <p class="text-white/60 text-sm mt-2 md:mt-0"> | |
| <span data-en>Built with passion and sustainable principles</span> | |
| <span data-fr style="display:none">Construit avec passion et principes durables</span> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Language management | |
| function setLanguage(lang) { | |
| document.documentElement.setAttribute('data-lang', lang); | |
| localStorage.setItem('lang', lang); | |
| toggleLanguageContent(lang); | |
| } | |
| function toggleLanguageContent(lang) { | |
| document.querySelectorAll('[data-en], [data-fr]').forEach(el => { | |
| if (el.hasAttribute(`data-${lang}`)) { | |
| el.style.display = ''; | |
| } else { | |
| el.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Initialize language | |
| const savedLang = localStorage.getItem('lang') || 'en'; | |
| setLanguage(savedLang); | |
| // Language toggle buttons | |
| document.querySelectorAll('.flex.items-center.space-x-2 button').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const lang = e.target.textContent.toLowerCase(); | |
| setLanguage(lang); | |
| // Update active state | |
| document.querySelectorAll('.flex.items-center.space-x-2 button').forEach(btn => { | |
| if (btn.textContent.toLowerCase() === lang) { | |
| btn.classList.add('bg-green-400', 'text-black'); | |
| btn.classList.remove('text-gray-400'); | |
| } else { | |
| btn.classList.remove('bg-green-400', 'text-black'); | |
| btn.classList.add('text-gray-400'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| if (themeToggle) { | |
| themeToggle.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.documentElement.classList.contains('dark')) { | |
| icon.classList.replace('fa-sun', 'fa-moon'); | |
| icon.classList.add('text-green-400'); | |
| } else { | |
| icon.classList.replace('fa-moon', 'fa-sun'); | |
| icon.classList.add('text-green-400'); | |
| } | |
| }); | |
| } | |
| // Animation on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| </script> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| section { | |
| opacity: 0; | |
| } | |
| </style> | |
| </body> | |
| </html> |