| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Data Scientist & AI Engineer Portfolio</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | .hero-gradient { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | .project-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | .skill-badge:hover { |
| | background-color: #4f46e5; |
| | color: white; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans antialiased text-gray-800 bg-gray-50"> |
| | |
| | <div id="hero" class="relative overflow-hidden hero-gradient text-white min-h-screen flex items-center justify-center"> |
| | <div class="absolute inset-0" id="vanta-bg"></div> |
| | <div class="relative z-10 container mx-auto px-6 py-20 text-center"> |
| | <h1 class="text-4xl md:text-6xl font-bold mb-4" data-aos="fade-down">Hi, I'm <span class="text-yellow-300">ASHA NASRI MALIKI</span></h1> |
| | <h2 class="text-2xl md:text-3xl font-semibold mb-8" data-aos="fade-down" data-aos-delay="100">Data Scientist | AI/ML Engineer | Data Analyst</h2> |
| | <p class="text-lg md:text-xl max-w-2xl mx-auto mb-10" data-aos="fade-up" data-aos-delay="200"> |
| | Transforming raw data into intelligent solutions through machine learning and artificial intelligence. |
| | </p> |
| | <div class="flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="300"> |
| | <a href="#projects" class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-lg hover:bg-gray-100 transition duration-300">View Projects</a> |
| | <a href="#contact" class="px-6 py-3 border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-indigo-700 transition duration-300">Contact Me</a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <section id="about" class="py-20 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">About Me</h2> |
| | <div class="flex flex-col md:flex-row items-center gap-12"> |
| | <div class="md:w-1/3" data-aos="fade-right"> |
| | <img src="http://static.photos/people/640x360/123" alt="Asha Nasri Maliki" class="rounded-xl shadow-xl w-full max-w-md mx-auto"> |
| | </div> |
| | <div class="md:w-2/3" data-aos="fade-left"> |
| | <p class="text-lg mb-6"> |
| | I'm a passionate data scientist and AI/ML engineer with expertise in developing machine learning models, analyzing complex datasets, and creating data-driven solutions. |
| | </p> |
| | <p class="text-lg mb-6"> |
| | My work spans across various domains including healthcare, finance, education, and agriculture. I specialize in predictive modeling, natural language processing, computer vision, and recommendation systems. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-6"> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">Python</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">TensorFlow</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">PyTorch</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">Pandas</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">Numpy</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">Scikit-learn</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">OpenCV</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">SQL</span> |
| | <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full font-medium">Tableau</span> |
| | </div> |
| | <a href="#contact" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"> |
| | <i data-feather="download" class="mr-2"></i> Download Resume |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="projects" class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">My Projects</h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up"> |
| | <img src="http://static.photos/finance/640x360/1" alt="Customer Churn Prediction" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Customer Churn Prediction</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Developed a machine learning model to predict customer churn for a telecom company with 92% accuracy. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Random Forest</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Feature Engineering</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">XGBoost</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
| | <img src="http://static.photos/medical/640x360/2" alt="Brain Tumor Detection" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Brain Tumor Detection</h3> |
| | <p class="text-gray-600 mb-4"> |
| | CNN-based system to detect brain tumors from MRI scans with 96% accuracy using deep learning. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">TensorFlow</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">CNN</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Medical Imaging</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
| | <img src="http://static.photos/education/640x360/3" alt="Student Course Recommender" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Student Course Recommender</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Content-based recommender system that suggests courses to students based on their academic history. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Recommendation System</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">NLP</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Cosine Similarity</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up"> |
| | <img src="http://static.photos/security/640x360/4" alt="Camera Theft Detection" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Camera Theft Detection</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Real-time surveillance system that detects suspicious activities and potential theft using computer vision. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">OpenCV</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">YOLO</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Object Detection</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
| | <img src="http://static.photos/handwriting/640x360/5" alt="Handwritten Text Detection" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Handwritten Text Detection</h3> |
| | <p class="text-gray-600 mb-4"> |
| | OCR system that converts handwritten notes to digital text with 89% accuracy using deep learning. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">LSTM</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">CRNN</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">OCR</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
| | <img src="http://static.photos/agriculture/640x360/6" alt="Green Cure Hub" class="w-full h-48 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Green Cure Hub</h3> |
| | <p class="text-gray-600 mb-4"> |
| | AI-powered platform for mitishamba dawa za asili that helps farmers identify medicinal plants and their uses. |
| | </p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Image Classification</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">Flask</span> |
| | <span class="text-xs px-2 py-1 bg-gray-100 rounded">AgriTech</span> |
| | </div> |
| | <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="py-20 bg-white"> |
| | <div class="container mx-auto px-6 max-w-4xl"> |
| | <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Get In Touch</h2> |
| | <div class="bg-gray-50 rounded-xl shadow-md p-8" data-aos="fade-up"> |
| | <form class="space-y-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> |
| | <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
| | <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
| | <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | <div> |
| | <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
| | <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
| | </div> |
| | <button type="submit" class="w-full md:w-auto px-8 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300 flex items-center justify-center"> |
| | <i data-feather="send" class="mr-2"></i> Send Message |
| | </button> |
| | </form> |
| | </div> |
| | <div class="mt-12 flex flex-col md:flex-row justify-center space-y-6 md:space-y-0 md:space-x-12 text-center" data-aos="fade-up"> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> |
| | <i data-feather="mail" class="text-indigo-600"></i> |
| | </div> |
| | <p class="font-medium">Email</p> |
| | <a href="mailto:ashanasri36@gmail.com" class="text-indigo-600 hover:text-indigo-800">ashanasri36@gmail.com</a> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> |
| | <i data-feather="phone" class="text-indigo-600"></i> |
| | </div> |
| | <p class="font-medium">Phone</p> |
| | <a href="tel:+255687725266" class="text-indigo-600 hover:text-indigo-800">+255 687 725 266</a> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> |
| | <i data-feather="map-pin" class="text-indigo-600"></i> |
| | </div> |
| | <p class="font-medium">Location</p> |
| | <p class="text-gray-600">Dar es Salaam, Tanzania</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="py-10 bg-gray-900 text-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-6 md:mb-0"> |
| | <p>© 2023 ASHA NASRI MALIKI. All rights reserved.</p> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="https://github.com/ashnasri" target="_blank" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i data-feather="github"></i> |
| | </a> |
| | <a href="https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile" target="_blank" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i data-feather="linkedin"></i> |
| | </a> |
| | <a href="https://www.instagram.com/ashanasri24/" target="_blank" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i data-feather="instagram"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <script> |
| | |
| | VANTA.GLOBE({ |
| | el: "#vanta-bg", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x3a86ff, |
| | backgroundColor: 0x0, |
| | size: 0.8 |
| | }); |
| | |
| | |
| | AOS.init({ |
| | duration: 800, |
| | easing: 'ease-in-out', |
| | once: true |
| | }); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
