Spaces:
Running
Running
File size: 8,560 Bytes
d791e0d cd32755 d791e0d 42761da cd32755 42761da c814c81 d791e0d c814c81 d791e0d 85d11a4 9489f50 d791e0d 85d11a4 d791e0d cd32755 d791e0d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Dossiya DAKOU</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>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
onyx: '#0B0B0F',
offwhite: '#F7F7F8',
teal: '#2CA7A0',
deepblue: '#90EE90',
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-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-2">
<span class="text-2xl font-inter font-bold text-green-300">Dossiya DAKOU</span>
</a>
<div class="hidden md:flex space-x-2">
<a href="index.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Home</a>
<a href="about.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-orange font-medium">About</a>
<a href="experience.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Experience</a>
<a href="projects.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Projects</a>
<a href="awards.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Awards</a>
<a href="skills.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Skills</a>
<a href="contact.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Contact</a>
<a href="resume.html" class="px-4 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-3 py-1 rounded-md bg-orange/10 text-orange hover:bg-orange/20">EN</a>
<a href="#" class="px-3 py-1 rounded-md hover:bg-gray-800">FR</a>
</div>
</div>
</div>
</nav>
<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-2">
<span class="text-2xl font-inter font-bold text-green-300">Dossiya DAKOU</span>
</a>
<div class="hidden md:flex space-x-2">
<a href="index.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Home</a>
<a href="about.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-orange font-medium">About</a>
<a href="experience.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Experience</a>
<a href="projects.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Projects</a>
<a href="awards.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Awards</a>
<a href="skills.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Skills</a>
<a href="contact.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 text-offwhite">Contact</a>
<a href="resume.html" class="px-4 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-3 py-1 rounded-md bg-orange/10 text-orange hover:bg-orange/20">EN</a>
<a href="#" class="px-3 py-1 rounded-md hover:bg-gray-800">FR</a>
</div>
</div>
</div>
</nav>
<!-- About Section -->
<section class="px-6 md:px-12 lg:px-24 py-16 min-h-[80vh] 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-deepblue 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-teal hover:text-orange transition"><i class="fab fa-linkedin"></i></a>
<a href="index.html" class="text-teal hover:text-orange transition"><i class="fas fa-globe"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>© 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-teal hover:text-orange transition"><i class="fab fa-linkedin"></i></a>
<a href="mailto:ddakou@asu.edu" class="text-teal hover:text-orange transition"><i class="fas fa-envelope"></i></a>
<a href="tel:+250796892820" class="text-teal hover:text-orange transition"><i class="fas fa-phone"></i></a>
<a href="index.html" class="text-teal hover:text-orange transition"><i class="fas fa-globe"></i></a>
</div>
</div>
</footer>
</body>
</html> |