|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Abdeljalil EL MAJJODI | Machine Learning Engineer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.skill-pill { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.skill-pill:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: all 0.3s ease; |
|
|
border-left: 4px solid transparent; |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-5px); |
|
|
border-left-color: #6e8efb; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.timeline-item:not(:last-child)::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 19px; |
|
|
top: 30px; |
|
|
height: calc(100% - 30px); |
|
|
width: 2px; |
|
|
background: #e2e8f0; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #6e8efb; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active-nav::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-md z-50"> |
|
|
<div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
|
|
<div class="text-2xl font-bold gradient-text"> |
|
|
<span>ELMAJJODI</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link active-nav">Home</a> |
|
|
<a href="#about" class="nav-link">About</a> |
|
|
<a href="#skills" class="nav-link">Skills</a> |
|
|
<a href="#experience" class="nav-link">Experience</a> |
|
|
<a href="#projects" class="nav-link">Projects</a> |
|
|
<a href="#education" class="nav-link">Education</a> |
|
|
<a href="#contact" class="nav-link">Contact</a> |
|
|
</div> |
|
|
<button id="mobile-menu-button" class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden bg-white w-full"> |
|
|
<div class="px-2 pt-2 pb-4 space-y-1"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">About</a> |
|
|
<a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Skills</a> |
|
|
<a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Experience</a> |
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Projects</a> |
|
|
<a href="#education" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Education</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Abdeljalil EL MAJJODI</h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6">MACHINE LEARNING ENGINEER</h2> |
|
|
<p class="text-lg mb-8 max-w-lg">Specializing in advanced AI model development with a focus on cultural linguistics and bridging the gap between theoretical research and real-world needs.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Contact Me</a> |
|
|
<a href="#projects" class="px-6 py-3 border-2 border-white text-white rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">View Projects</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl"> |
|
|
|
|
|
<div class="w-full h-full bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-6xl text-gray-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Who I Am</h2> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<p class="text-lg text-gray-700 mb-8 leading-relaxed"> |
|
|
A machine learning engineer specializing in advanced AI model development with a focus on cultural linguistics. |
|
|
I design and implement sophisticated neural networks that capture the nuances of regional dialects and deliver |
|
|
practical solutions to complex challenges. |
|
|
</p> |
|
|
<p class="text-lg text-gray-700 leading-relaxed"> |
|
|
Driven by a passion for transforming cutting‑edge technology into impactful applications that bridge the gap |
|
|
between theoretical research and real‑world needs. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Phone</p> |
|
|
<p class="font-medium">(+212) 651513594</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Email</p> |
|
|
<a href="mailto:elmajjodi.abdeljalil@gmail.com" class="font-medium hover:text-indigo-600 transition">elmajjodi.abdeljalil@gmail.com</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fab fa-github text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">GitHub</p> |
|
|
<a href="https://github.com/Elma-dev" target="_blank" class="font-medium hover:text-indigo-600 transition">Elma-dev</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fab fa-linkedin-in text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">LinkedIn</p> |
|
|
<a href="https://www.linkedin.com/in/abdeljalil-el-majjodi" target="_blank" class="font-medium hover:text-indigo-600 transition">abdeljalil-el-majjodi</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Skills</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-code text-indigo-600 mr-3"></i> Programming |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">C</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">C++</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Python</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Java</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Linux shell</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">JavaScript</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-globe text-indigo-600 mr-3"></i> Web Development |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">HTML</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">CSS</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Angular</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Node.js</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-database text-indigo-600 mr-3"></i> Data Science |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Pandas</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">NumPy</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Matplotlib</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Scikit-Learn</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">PyTorch</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-server text-indigo-600 mr-3"></i> Web Services |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">SOAP</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">REST</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">GraphQL</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">gRPC</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-database text-indigo-600 mr-3"></i> DBMS |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">MySQL</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">SQL Server</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">PostgreSQL</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Neo4j</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-cloud text-indigo-600 mr-3"></i> DevOps & Cloud |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Git</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Docker</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Kubernetes</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">AWS</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-line text-indigo-600 mr-3"></i> Big Data |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">HDFS</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Map Reducer</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Kafka</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Spark</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-brain text-indigo-600 mr-3"></i> ML/DL |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Transformers</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">LLMs</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">LangChain</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">LlamaIndex</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-layer-group text-indigo-600 mr-3"></i> Frameworks |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Spring Boot</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Spring Cloud</span> |
|
|
<span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Spring Security</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Experience</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto space-y-8"> |
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-briefcase text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Machine Learning Engineer</h3> |
|
|
<span class="text-indigo-600 font-medium">August 2024 - Present</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-building text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">Sawalni, Remote</p> |
|
|
</div> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Development of Darija Language Models: Led the design, development, and fine‑tuning of large language models specifically tailored for the Darija dialect.</li> |
|
|
<li>Data Collection and Analysis: Designed and implemented efficient data pipelines using Python and Pandas to collect and preprocess data for machine learning tasks.</li> |
|
|
<li>Pretraining and Fine‑Tuning LLMs: Pretrained and fine‑tuned large language models using PyTorch, Transformers (Hugging Face), and Langchain, enhancing model performance for language understanding and text generation.</li> |
|
|
<li>Model Evaluation and Optimization: Employed tools like scikit‑learn and Hugging Face datasets for benchmarking and performance tuning, improving accuracy and computational efficiency.</li> |
|
|
<li>Cross‑Functional Collaboration: Worked closely with data scientists and linguists to ensure that models reflected the linguistic nuances of Darija and aligned model outputs with project goals.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-briefcase text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Software Engineer</h3> |
|
|
<span class="text-indigo-600 font-medium">February 2024 - August 2024</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-building text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">XcomSolution, Mohammedia</p> |
|
|
</div> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Design and Develop of a Digital Marketing Automation.</li> |
|
|
<li>Microservices Architecture: Developed and implemented a robust and scalable microservices architecture to meet stringent performance and flexibility requirements.</li> |
|
|
<li>Full‑Stack Development: Contributed to both backend and frontend development, ensuring seamless integration and functionality across the platform.</li> |
|
|
<li>Cross‑Functional Collaboration: Partnered with business teams to align technical solutions with operational needs, ensuring successful project outcomes.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-briefcase text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Junior Data Scientist</h3> |
|
|
<span class="text-indigo-600 font-medium">July 2023 - October 2023</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-building text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">JPTRACK: JP&Co, Casablanca</p> |
|
|
</div> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Developed Advanced Fuel Consumption Tracking Systems.</li> |
|
|
<li>Algorithm Design: Engineered and deployed custom fuel consumption algorithms optimized for various vehicle types.</li> |
|
|
<li>Theft Detection: Created machine learning models to detect and prevent fuel theft, significantly enhancing security measures.</li> |
|
|
<li>Data Analysis: Performed detailed analysis to optimize fuel efficiency and reduce operational costs, contributing to more sustainable operations.</li> |
|
|
<li>Client Collaboration: Worked closely with clients and engineering teams to tailor solutions, ensuring successful implementation and satisfaction.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-hands-helping text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Software Developer and Data Scientist</h3> |
|
|
<span class="text-indigo-600 font-medium">May 2024 - Present</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-building text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">AtlasAI</p> |
|
|
</div> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Building the next generation of Moroccan AI Models.</li> |
|
|
<li>LLM Development: Creation and refinement of large language models tailored specifically for Darija, the Moroccan Arabic dialect, ensuring cultural and linguistic relevance.</li> |
|
|
<li>Data Collection Platforms: Designed and developed platforms to efficiently collect and preprocess data, providing a strong foundation for training high‑quality LLMs.</li> |
|
|
<li>Collaborative Innovation: Worked closely with a multidisciplinary team of data scientists and engineers to integrate these AI solutions into various applications, driving forward the AI capabilities of the organization.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Projects</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-language text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Al-Atlas: Moroccan Darija Language Model</h3> |
|
|
<p class="text-sm text-gray-500">Jan 2025 - Mar 2025</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Developed Al‑Atlas, a 0.5B parameter language model, the first dedicated foundation model for Moroccan Darija, fine‑tuned from Qwen‑2.5.</p> |
|
|
<ul class="list-disc pl-5 space-y-1 text-gray-700 text-sm mb-4"> |
|
|
<li>Dataset Curation: Collected and preprocessed a high‑quality dataset of 155M tokens</li> |
|
|
<li>Cultural & Linguistic Impact: Designed to enhance NLP applications for Moroccan Arabic</li> |
|
|
</ul> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Huggingface</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Transformers</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">PyTorch</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-book text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">TODa: Tamazight Open Dataset</h3> |
|
|
<p class="text-sm text-gray-500">Nov 2024 - Jan 2025</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Conceptualized and developed a groundbreaking open‑source project to preserve and advance the Tamazight language.</p> |
|
|
<ul class="list-disc pl-5 space-y-1 text-gray-700 text-sm mb-4"> |
|
|
<li>Extensive linguistic dataset for NLP applications</li> |
|
|
<li>Preservation of Tamazight language</li> |
|
|
</ul> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Pandas</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Pyplot</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Huggingface</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Tarjman-AI: Moroccan Chat-bot</h3> |
|
|
<p class="text-sm text-gray-500">May 2024 - May 2024</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Developed a multilingual question‑answering platform that allows Moroccan users to interact with advanced LLMs in native languages.</p> |
|
|
<ul class="list-disc pl-5 space-y-1 text-gray-700 text-sm mb-4"> |
|
|
<li>Supports Darija and other native languages</li> |
|
|
<li>Advanced question-answering capabilities</li> |
|
|
</ul> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">LLMs</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Postgres</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Docker</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">LangChain</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-terminal text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">EmbedPrepro: Text Analysis Library, CLI</h3> |
|
|
<p class="text-sm text-gray-500">Apr 2024 - May 2024</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Created a command‑line tool and library designed for text analysis tasks, including embedding, clustering, dimensionality reduction, and visualization.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Python</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Click</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">PyPi</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-file-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Ask Documents</h3> |
|
|
<p class="text-sm text-gray-500">Apr 2024 - Apr 2024</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Developed an advanced Retrieval‑Augmented Generation (RAG) system for document‑based question answering, enhancing information retrieval and response accuracy.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Ollama</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">LlamaIndex</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">ngrok</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">LLMs</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-shield-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Secure Health Data Storage & Skin Cancer Classifier</h3> |
|
|
<p class="text-sm text-gray-500">March 2023 - March 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Developed a decentralized system using blockchain technology for securely storing patient health data and a skin cancer classifier.</p> |
|
|
<ul class="list-disc pl-5 space-y-1 text-gray-700 text-sm mb-4"> |
|
|
<li>Blockchain-based health data storage</li> |
|
|
<li>Skin cancer classification model</li> |
|
|
</ul> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Angular</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Solidity</span> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">IPFS</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
View Project <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="education" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Education</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto space-y-8"> |
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Master's of Artificial Intelligence & Distributed Systems</h3> |
|
|
<span class="text-indigo-600 font-medium">2022 - 2024</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-university text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">HASSAN II University, Higher Normal School of Technical Education (ENSET), Mohammedia, Morocco</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Bachelor's of Mathematics and Computer Science</h3> |
|
|
<span class="text-indigo-600 font-medium">2021 - 2022</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-university text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">IBN Zohr University, Faculty of Sciences, Agadir, Morocco</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Baccalaureate in Mathematics Sciences</h3> |
|
|
<span class="text-indigo-600 font-medium">2018 - 2019</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full bg-indigo-200 mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-school text-indigo-600 text-xs"></i> |
|
|
</div> |
|
|
<p class="font-medium">Dakhla High School Ouled Berhil, Taroudant, Morocco</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">Languages</h2> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">Amazigh</span> |
|
|
<span class="text-gray-500">Native</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">Arabic</span> |
|
|
<span class="text-gray-500">Native</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">English</span> |
|
|
<span class="text-gray-500">Advanced</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">French</span> |
|
|
<span class="text-gray-500">Intermediate</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">Hobbies</h2> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-code text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Coding</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-gamepad text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Gaming</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-book text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Reading</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-camera text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Photography</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-utensils text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Cooking</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-dumbbell text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">GYM</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Publications</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto space-y-6"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<h3 class="text-xl font-semibold mb-2">Atlaset Dataset for Moroccan Darija: From Data Collection, Analysis, to Model Trainings</h3> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
Read Publication <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<h3 class="text-xl font-semibold mb-2">Finding Moroccan Arabic (Darija) in Fineweb 2</h3> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
Read Publication <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<h3 class="text-xl font-semibold mb-2">Darija Chatbot Arena: Making LLMs Compete in the Moroccan Dialect</h3> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
|
|
Read Publication <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Awards</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-trophy text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Decentralized Health Data Storage System</h3> |
|
|
<p class="text-gray-700"> |
|
|
Developed a decentralized and secure storage system for patient health data and created AI Models that help doctors to discover complex diseases from the stored data. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">Contact Information</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Location</p> |
|
|
<p class="text-gray-600">Mohammedia, Morocco</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Email</p> |
|
|
<a href="mailto:elmajjodi.abdeljalil@gmail.com" class="text-gray-600 hover:text-indigo-600">elmajjodi.abdeljalil@gmail.com</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-phone text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Phone</p> |
|
|
<p class="text-gray-600">(+212) 651513594</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Social Media</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://github.com/Elma-dev" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-indigo-100 transition"> |
|
|
<i class="fab fa-github text-gray-700 hover:text-indigo-600"></i> |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/abdeljalil-el-majjodi" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-indigo-100 transition"> |
|
|
<i class="fab fa-linkedin-in text-gray-700 hover:text-indigo-600"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<form class="space-y-4"> |
|
|
<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-2 focus:ring-indigo-200 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-2 focus:ring-indigo-200 focus:border-indigo-500"> |
|
|
</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-2 focus:ring-indigo-200 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-2 focus:ring-indigo-200 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-8 bg-gray-800 text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<p>© 2024 Abdeljalil EL MAJJODI. All rights reserved.</p> |
|
|
<div class="mt-4 flex justify-center space-x-6"> |
|
|
<a href="https://github.com/Elma-dev" target="_blank" class="hover:text-indigo-400 transition"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/abdeljalil-el-majjodi" target="_blank" class="hover:text-indigo-400 transition"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
<a href="mailto:elmajjodi.abdeljalil@gmail.com" class="hover:text-indigo-400 transition"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
mobileMenu.classList.remove('open'); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
let current = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
const sectionHeight = section.clientHeight; |
|
|
|
|
|
if (pageYOffset >= (sectionTop - 300)) { |
|
|
current = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.classList.remove('active-nav'); |
|
|
if (link.getAttribute('href') === `#${current}`) { |
|
|
link.classList.add('active-nav'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=abdeljalilELmajjodi/my-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
