Spaces:

ddakou
/

dossiyadakou

Running

App Files Files Community

ddakou commited on Sep 4, 2025

Commit

c8bdfb3

verified ·

1 Parent(s): c9f1bcc

step by step redesign my portofolio like a pro. I want it look nice - Follow Up Deployment

Browse files

Files changed (2) hide show

index.html +315 -84
prompts.txt +5 -1

index.html CHANGED Viewed

@@ -52,111 +52,200 @@
 <body class="bg-onyx text-offwhite font-source min-h-screen">
     <!-- Navigation Rubrique -->
-    <nav class="sticky top-0 z-50 bg-onyx/90 backdrop-blur border-b border-gray-800 py-3 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">
-                <img src="/images/b19c12f6-0e3f-4f15-b9ff-b1b60d376b87.jpeg" alt="Dossiya DAKOU" class="h-12 w-12 rounded-full object-cover border-2 border-teal">
-                <span class="text-2xl font-inter font-bold text-green-300">Dossiya DAKOU</span>
             </a>
-            <div class="hidden md:flex space-x-0">
-                <a href="index.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-orange font-medium">Home</a>
-                <a href="about.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">About</a>
-                <a href="experience.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Experience</a>
-                <a href="projects.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Projects</a>
-                <a href="awards.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Awards</a>
-                <a href="skills.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Skills</a>
-                <a href="education.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Education</a>
-                <a href="volunteering.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Volunteering</a>
-                <a href="contact.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Contact</a>
-                <a href="resume.html" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-offwhite">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-teal"></i>
                 </button>
-                <div class="flex items-center space-x-1 ml-4">
-                    <a href="#" class="px-2 py-1 rounded-md bg-orange/10 text-orange hover:bg-orange/20 text-sm">EN</a>
-                    <a href="#" class="px-2 py-1 rounded-md hover:bg-gray-800 text-sm">FR</a>
                 </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
-    <section class="px-6 md:px-12 lg:px-32 py-24 md:py-36 bg-black">
-        <div class="max-w-5xl">
-            <div class="space-y-8 max-w-4xl">
-                <div class="flex items-center gap-8">
-                    <img src="/images/b19c12f6-0e3f-4f15-b9ff-b1b60d376b87.jpeg" alt="Dossiya DAKOU"
-                        class="h-48 w-48 lg:h-64 lg:w-64 rounded-full object-cover border-8 border-teal">
                     <div>
-                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-inter font-bold text-green-300 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-teal mt-2">
                             <span data-en>Sustainable Engineering & Climate Innovation</span>
                             <span data-fr style="display:none">Ingénierie Durable & Innovation Climatique</span>
                         </h2>
                     </div>
                 </div>
-                <p class="text-xl md:text-2xl lg:text-3xl leading-relaxed max-w-3xl border-l-4 border-teal pl-6 py-2">
-                    <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-6">
-                    <a href="#contact"
-                        class="bg-orange hover:bg-orange-600 text-onyx px-8 py-4 rounded-lg font-medium text-lg transition-all hover:shadow-lg">
-                        <span data-en>Contact / Book a call</span>
-                        <span data-fr style="display:none">Contact / Prendre rendez-vous</span>
-                    </a>
-                    <a href="#"
-                        class="border-2 border-teal hover:bg-teal/10 text-teal px-8 py-4 rounded-lg font-medium text-lg transition-all">
-                        Download CV (PDF)
-                    </a>
                 </div>
             </div>
         </div>
     </section>
     <!-- Impact Stats -->
-    <section class="px-6 md:px-12 lg:px-32 py-20 grid md:grid-cols-3 gap-12">
-        <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg border-l-8 border-teal hover:border-orange transition-all transform hover:-translate-y-1">
-            <span class="block text-orange mb-4 text-3xl"><i class="fas fa-solar-panel"></i></span>
-            <h3 class="text-3xl font-inter text-deepblue mb-4">10+ Energy Projects</h3>
-            <p class="text-teal text-xl">From solar cold chains to AI-powered microgrids</p>
-        </div>
-        <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg border-l-8 border-teal hover:border-orange transition-all transform hover:-translate-y-1">
-            <span class="block text-orange mb-4 text-3xl"><i class="fas fa-users"></i></span>
-            <h3 class="text-3xl font-inter text-deepblue mb-4">5000+ Impacted</h3>
-            <p class="text-teal text-xl">Through sustainable energy deployments</p>
-        </div>
-        <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg border-l-8 border-teal hover:border-orange transition-all transform hover:-translate-y-1">
-            <span class="block text-orange mb-4 text-3xl"><i class="fas fa-medal"></i></span>
-            <h3 class="text-3xl font-inter text-deepblue mb-4">5+ Awards</h3>
-            <p class="text-teal text-xl">For climate-tech innovation</p>
         </div>
     </section>
     <!-- Engineering Approach -->
-    <section class="px-6 md:px-12 lg:px-32 py-24 bg-black bg-opacity-90">
-        <div class="max-w-5xl mx-auto">
-            <h2 class="text-4xl font-inter font-bold text-green-300 mb-12">Engineering Approach</h2>
-            <div class="grid md:grid-cols-3 gap-12">
-                <div class="bg-onyx p-8 rounded-lg">
-                    <span class="block text-green-300 mb-6 text-4xl"><i class="fas fa-leaf"></i></span>
-                    <h3 class="text-3xl font-inter text-teal mb-4">Sustainability-First</h3>
-                    <p class="text-xl">Design balancing technical feasibility and environmental/social impact</p>
                 </div>
-                <div class="bg-onyx p-8 rounded-lg">
-                    <span class="block text-green-300 mb-6 text-4xl"><i class="fas fa-brain"></i></span>
-                    <h3 class="text-3xl font-inter text-teal mb-4">AI-Enhanced</h3>
-                    <p class="text-xl">Applying ML for optimized energy systems and predictive maintenance</p>
                 </div>
-                <div class="bg-onyx p-8 rounded-lg">
-                    <span class="block text-green-300 mb-6 text-4xl"><i class="fas fa-hand-holding-heart"></i></span>
-                    <h3 class="text-3xl font-inter text-teal mb-4">Community-Centered</h3>
-                    <p class="text-xl">Solutions developed with and for local users, ensuring adoption</p>
                 </div>
             </div>
         </div>
@@ -481,29 +570,136 @@
     </section>
     <!-- Footer -->
-    <footer class="border-t border-gray-800 py-8 px-6 md:px-12 lg:px-24">
-        <div class="max-w-4xl mx-auto flex flex-col md:flex-row justify-between items-center">
-            <div class="mb-4 md:mb-0">
-                <p>&copy; 2023 Dossiya DAKOU. All rights reserved.</p>
-                <p class="text-sm text-green-300 mt-1">Built with passion and Next.js & Tailwind CSS</p>
             </div>
-            <div class="flex space-x-6">
-                <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="mailto:ddakou@asu.edu" class="text-green-300 hover:text-orange transition"><i class="fas fa-envelope"></i></a>
-                <a href="tel:+250796892820" class="text-green-300 hover:text-orange transition"><i class="fas fa-phone"></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>
     </footer>
     <script>
         // 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'
-                });
             });
         });
@@ -515,11 +711,46 @@
                 const icon = themeToggle.querySelector('i');
                 if (document.documentElement.classList.contains('dark')) {
                     icon.classList.replace('fa-sun', 'fa-moon');
                 } else {
                     icon.classList.replace('fa-moon', 'fa-sun');
                 }
             });
         }
     </script>
 </body>
 </html>

 <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>
     <!-- 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">&copy; 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'
+                    });
+                }
             });
         });
                 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>

prompts.txt CHANGED Viewed

@@ -888,4 +888,8 @@ change the color of all icones to green light
 I need the rubrique of all sections at the head of the website
 Add the rubrlque of all section at the head of the website
 put all awards here
-Full the website content must be in white and green light color

 I need the rubrique of all sections at the head of the website
 Add the rubrlque of all section at the head of the website
 put all awards here
+Full the website content must be in white and green light color
+rdesign by step 0 to step n alll the website like a pro
+redesign my portofolio step by step like a pro
+step by step redesign my portofolio like a pro. I want it look nice
+step by step redesign my portofolio like a pro. I want it look nice