Téléverser les fichiers vers "/"
This commit is contained in:
195
Portfolio Mahmoud.html
Normal file
195
Portfolio Mahmoud.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mahmoud Mostafa - Portfolio</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="brand">Mahmoud Mostafa</h1>
|
||||
<nav class="nav">
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#experiences-pro">Expériences</a>
|
||||
<a href="#formation">Formation</a>
|
||||
<a href="#langues">Langues</a>
|
||||
<a href="#skills">Compétences</a>
|
||||
<a href="#competences-detaillees">Compétences détaillées</a>
|
||||
<a href="#project-eye">Projet</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="actions">
|
||||
<a class="btn small" href="https://drive.google.com/uc?export=download&id=1Bg2zwzGqEKXyr2DBfMl7DWsYOmeSrd5v" download>
|
||||
<i class="bi bi-download" aria-hidden="true"></i> Télécharger CV
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-inner">
|
||||
<h2 class="name">Mahmoud Mostafa</h2>
|
||||
<p class="subtitle">Étudiant en BTS CIEL – Groupe scolaire La Salle Saint-Denis</p>
|
||||
<div class="hero-cta">
|
||||
<a class="btn" href="#contact">Me contacter</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section about" id="about">
|
||||
<div class="container">
|
||||
<h3>À propos</h3>
|
||||
<p>
|
||||
Je suis étudiant en deuxième année de BTS CIEL au groupe scolaire La Salle Saint-Denis.
|
||||
Ce portfolio a pour objectif de présenter mon parcours, mes compétences, mes expériences professionnelles, associatives ainsi que mes formations. Passionné par les sciences informatiques, la cybersécurité et l'accessibilité numérique, j’ai remporté le Trophée NSI régional 2024 (prix de la créativité) ainsi que le Prix Avenir de Voir Ensemble 2024 avec le projet « EyeDrone », un dispositif aidant les personnes ayant une déficience visuelle à se déplacer plus librement et reconnaître leur environnement.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section skills" id="skills">
|
||||
<div class="container">
|
||||
<h3>Compétences</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card"><div class="skill-title">HTML / CSS</div><div class="skill-bar"><span style="width:85%"></span></div></div>
|
||||
<div class="skill-card"><div class="skill-title">Développement Web</div><div class="skill-bar"><span style="width:75%"></span></div></div>
|
||||
<div class="skill-card"><div class="skill-title">Réseaux et systèmes</div><div class="skill-bar"><span style="width:70%"></span></div></div>
|
||||
<div class="skill-card"><div class="skill-title">Électronique - bases</div><div class="skill-bar"><span style="width:60%"></span></div></div>
|
||||
<div class="skill-card"><div class="skill-title">Python</div><div class="skill-bar"><span style="width:65%"></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section experiences-pro" id="experiences-pro">
|
||||
<div class="container">
|
||||
<h3>Expériences professionnelles</h3>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item"><div class="timeline-date">05/2025 — 06/2025</div><div class="timeline-content"><div class="timeline-title">Stage de fin d'année — Penetration Tester Junior — Crédit Agricole CIB</div><div class="timeline-desc">Travail sur tests d'intrusion et audits de sécurité.</div></div></div>
|
||||
<div class="timeline-item"><div class="timeline-date">07/2024</div><div class="timeline-content"><div class="timeline-title">Stage en Cybersécurité — Parfums Christian Dior</div><div class="timeline-desc">Découverte des pratiques internes et échanges avec les équipes RH et sécurité.</div></div></div>
|
||||
<div class="timeline-item"><div class="timeline-date">11/2023</div><div class="timeline-content"><div class="timeline-title">Stage de découverte — Airbus CyberSecurity</div><div class="timeline-desc">Initiation aux métiers de la cybersécurité, simulations d'attaques.</div></div></div>
|
||||
<div class="timeline-item"><div class="timeline-date">11/2022</div><div class="timeline-content"><div class="timeline-title">Stage de découverte — Parfums Christian Dior</div><div class="timeline-desc">Observation des pratiques internes.</div></div></div>
|
||||
<div class="timeline-item"><div class="timeline-date">03/2021</div><div class="timeline-content"><div class="timeline-title">Stage de découverte — Société Générale</div><div class="timeline-desc">Découverte du fonctionnement bancaire.</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section experiences-asso" id="experiences-asso">
|
||||
<div class="container">
|
||||
<h3>Expériences associatives</h3>
|
||||
<ul>
|
||||
<li><strong>Co-fondateur — Association EyeLevel</strong> — Association dédiée à l’accessibilité numérique pour les personnes en situation de déficience visuelle.</li>
|
||||
<li><strong>Bénévolat — ONG Saint-Denis</strong> — Distribution de repas aux personnes dans le besoin (1 mois).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section formation" id="formation">
|
||||
<div class="container">
|
||||
<h3>Formations</h3>
|
||||
<ul>
|
||||
<li><strong>BTS CIEL</strong> — Cybersécurité, Informatique et Réseaux, Électronique (2024 - 2026)</li>
|
||||
<li><strong>Baccalauréat Général</strong> — NSI, Physique-Chimie, Maths Experts, Option Bac Européen (2018 - 2024)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section langues" id="langues">
|
||||
<div class="container">
|
||||
<h3>Langues</h3>
|
||||
<ul>
|
||||
<li><strong>Arabe :</strong> Bilingue</li>
|
||||
<li><strong>Anglais :</strong> B2 – Conversation avancée</li>
|
||||
<li><strong>Espagnol :</strong> B1 – Vocabulaire du quotidien</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section competences-detaillees" id="competences-detaillees">
|
||||
<div class="container">
|
||||
<h3>Compétences techniques</h3>
|
||||
<ul>
|
||||
<li>Python</li>
|
||||
<li>HTML / CSS</li>
|
||||
<li>Excel</li>
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top:40px;">Compétences personnelles</h3>
|
||||
<ul>
|
||||
<li>Travail d'équipe</li>
|
||||
<li>Gestion du stress</li>
|
||||
<li>Adaptabilité</li>
|
||||
<li>Analyse approfondie</li>
|
||||
<li>Rigueur</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="project-eye">
|
||||
<div class="container project">
|
||||
<h3>Projet phare — EyeDrone</h3>
|
||||
<div class="project-grid">
|
||||
<div class="project-media">
|
||||
<video src="https://associationeyelevel.fr/drone_volant.mov"
|
||||
class="project-image"
|
||||
controls
|
||||
loop>
|
||||
</video>
|
||||
|
||||
<div class="project-info">
|
||||
<p class="project-lead">EyeDrone aide les personnes ayant une déficience visuelle à se déplacer plus librement et à reconnaître leur environnement. Projet récompensé par le Trophée NSI régional 2024 et le Prix Avenir de Voir Ensemble 2024.</p>
|
||||
<ul>
|
||||
<li><strong>Rôle :</strong> Co-conception, prototypage, tests utilisateurs</li>
|
||||
<li><strong>Technologies :</strong> Python, électronique embarquée, capteurs, traitement d'image</li>
|
||||
<li><strong>Résultats :</strong> Prototype fonctionnel et démonstration en milieu réel</li>
|
||||
</ul>
|
||||
<div class="project-cta">
|
||||
<a class="btn" href="#contact">Me contacter</a>
|
||||
<a class="btn ghost" href="https://associationeyelevel.fr/eyedrone_menu.html">Voir la présentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section contact" id="contact">
|
||||
<div class="container">
|
||||
<h3>Contact</h3>
|
||||
<p>Vous pouvez me contacter par e-mail ou téléphone :</p>
|
||||
<p style="margin-top: 10px; font-size: 20px;">
|
||||
📧 <a href="mailto:mmostafa93200@gmail.com"><strong>mmostafa93200@gmail.com</strong></a>
|
||||
</p>
|
||||
<p style="margin-top: 6px; font-size: 20px;">
|
||||
📞 <a href="tel:+33626100810"><strong>+33 6 26 10 08 10</strong></a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-inner">
|
||||
<p>© 2025 Mahmoud Mostafa — Portfolio</p>
|
||||
<div class="socials">
|
||||
<a href="mailto:mmostafa93200@gmail.com"><i class="bi bi-envelope" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const sections = document.querySelectorAll("section");
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("in-view");
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
sections.forEach(section => observer.observe(section));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user