Actualiser Portfolio Mahmoud.html
This commit is contained in:
@@ -1,195 +1,197 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Mahmoud Mostafa - Portfolio</title>
|
<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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
<h1 class="brand">Mahmoud Mostafa</h1>
|
<h1 class="brand">Mahmoud Mostafa</h1>
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a href="#about">À propos</a>
|
<a href="#about">À propos</a>
|
||||||
<a href="#experiences-pro">Expériences</a>
|
<a href="#experiences-pro">Expériences</a>
|
||||||
<a href="#formation">Formation</a>
|
<a href="#formation">Formation</a>
|
||||||
<a href="#langues">Langues</a>
|
<a href="#langues">Langues</a>
|
||||||
<a href="#skills">Compétences</a>
|
<a href="#skills">Compétences</a>
|
||||||
<a href="#competences-detaillees">Compétences détaillées</a>
|
<a href="#competences-detaillees">Compétences détaillées</a>
|
||||||
<a href="#project-eye">Projet</a>
|
<a href="#project-eye">Projet</a>
|
||||||
<a href="#contact">Contact</a>
|
<a href="#contact">Contact</a>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<a class="btn small" href="https://drive.google.com/uc?export=download&id=1Bg2zwzGqEKXyr2DBfMl7DWsYOmeSrd5v" download>
|
<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
|
<i class="bi bi-download" aria-hidden="true"></i> Télécharger CV
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="hero" id="hero">
|
<section class="hero" id="hero">
|
||||||
<div class="hero-inner">
|
<div class="hero-inner">
|
||||||
<h2 class="name">Mahmoud Mostafa</h2>
|
<h2 class="name">Mahmoud Mostafa</h2>
|
||||||
<p class="subtitle">Étudiant en BTS CIEL – Groupe scolaire La Salle Saint-Denis</p>
|
<p class="subtitle">Étudiant en BTS CIEL – Groupe scolaire La Salle Saint-Denis</p>
|
||||||
<div class="hero-cta">
|
<div class="hero-cta">
|
||||||
<a class="btn" href="#contact">Me contacter</a>
|
<a class="btn" href="#contact">Me contacter</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section about" id="about">
|
<section class="section about" id="about">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3>À propos</h3>
|
<h3>À propos</h3>
|
||||||
<p>
|
<p>
|
||||||
Je suis étudiant en deuxième année de BTS CIEL au groupe scolaire La Salle Saint-Denis.
|
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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section skills" id="skills">
|
<section class="section skills" id="skills">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3>Compétences</h3>
|
<h3>Compétences</h3>
|
||||||
<div class="skills-grid">
|
<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">HTML / CSS / JS</div><div class="skill-bar"><span style="width:80%"></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">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">Réseaux et systèmes</div><div class="skill-bar"><span style="width:60%"></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">É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 class="skill-card"><div class="skill-title">Python</div><div class="skill-bar"><span style="width:85%"></span></div></div>
|
||||||
</div>
|
<div class="skill-card"><div class="skill-title">SQL</div><div class="skill-bar"><span style="width:50%"></span></div></div>
|
||||||
</div>
|
<div class="skill-card"><div class="skill-title">C++</div><div class="skill-bar"><span style="width:35%"></span></div></div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
<section class="section experiences-pro" id="experiences-pro">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Expériences professionnelles</h3>
|
<section class="section experiences-pro" id="experiences-pro">
|
||||||
<div class="timeline">
|
<div class="container">
|
||||||
<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>
|
<h3>Expériences professionnelles</h3>
|
||||||
<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">
|
||||||
<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">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">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">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">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 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>
|
<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>
|
<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>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
<section class="section experiences-asso" id="experiences-asso">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Expériences associatives</h3>
|
<section class="section experiences-asso" id="experiences-asso">
|
||||||
<ul>
|
<div class="container">
|
||||||
<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>
|
<h3>Expériences associatives</h3>
|
||||||
<li><strong>Bénévolat — ONG Saint-Denis</strong> — Distribution de repas aux personnes dans le besoin (1 mois).</li>
|
<ul>
|
||||||
</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>
|
||||||
</div>
|
<li><strong>Bénévolat — ONG Saint-Denis</strong> — Distribution de repas aux personnes dans le besoin (1 mois).</li>
|
||||||
</section>
|
</ul>
|
||||||
|
</div>
|
||||||
<section class="section formation" id="formation">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Formations</h3>
|
<section class="section formation" id="formation">
|
||||||
<ul>
|
<div class="container">
|
||||||
<li><strong>BTS CIEL</strong> — Cybersécurité, Informatique et Réseaux, Électronique (2024 - 2026)</li>
|
<h3>Formations</h3>
|
||||||
<li><strong>Baccalauréat Général</strong> — NSI, Physique-Chimie, Maths Experts, Option Bac Européen (2018 - 2024)</li>
|
<ul>
|
||||||
</ul>
|
<li><strong>BTS CIEL</strong> — Cybersécurité, Informatique et Réseaux, Électronique (2024 - 2026)</li>
|
||||||
</div>
|
<li><strong>Baccalauréat Général</strong> — NSI, Physique-Chimie, Maths Experts, Option Bac Européen (2018 - 2024)</li>
|
||||||
</section>
|
</ul>
|
||||||
|
</div>
|
||||||
<section class="section langues" id="langues">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Langues</h3>
|
<section class="section langues" id="langues">
|
||||||
<ul>
|
<div class="container">
|
||||||
<li><strong>Arabe :</strong> Bilingue</li>
|
<h3>Langues</h3>
|
||||||
<li><strong>Anglais :</strong> B2 – Conversation avancée</li>
|
<ul>
|
||||||
<li><strong>Espagnol :</strong> B1 – Vocabulaire du quotidien</li>
|
<li><strong>Arabe :</strong> Bilingue</li>
|
||||||
</ul>
|
<li><strong>Anglais :</strong> B2 – Conversation avancée</li>
|
||||||
</div>
|
<li><strong>Espagnol :</strong> B1 – Vocabulaire du quotidien</li>
|
||||||
</section>
|
</ul>
|
||||||
|
</div>
|
||||||
<section class="section competences-detaillees" id="competences-detaillees">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Compétences techniques</h3>
|
<section class="section competences-detaillees" id="competences-detaillees">
|
||||||
<ul>
|
<div class="container">
|
||||||
<li>Python</li>
|
<h3>Compétences techniques</h3>
|
||||||
<li>HTML / CSS</li>
|
<ul>
|
||||||
<li>Excel</li>
|
<li>Python</li>
|
||||||
</ul>
|
<li>HTML / CSS</li>
|
||||||
|
<li>Excel</li>
|
||||||
<h3 style="margin-top:40px;">Compétences personnelles</h3>
|
</ul>
|
||||||
<ul>
|
|
||||||
<li>Travail d'équipe</li>
|
<h3 style="margin-top:40px;">Compétences personnelles</h3>
|
||||||
<li>Gestion du stress</li>
|
<ul>
|
||||||
<li>Adaptabilité</li>
|
<li>Travail d'équipe</li>
|
||||||
<li>Analyse approfondie</li>
|
<li>Gestion du stress</li>
|
||||||
<li>Rigueur</li>
|
<li>Adaptabilité</li>
|
||||||
</ul>
|
<li>Analyse approfondie</li>
|
||||||
</div>
|
<li>Rigueur</li>
|
||||||
</section>
|
</ul>
|
||||||
<section class="section" id="project-eye">
|
</div>
|
||||||
<div class="container project">
|
</section>
|
||||||
<h3>Projet phare — EyeDrone</h3>
|
<section class="section" id="project-eye">
|
||||||
<div class="project-grid">
|
<div class="container project">
|
||||||
<div class="project-media">
|
<h3>Projet phare — EyeDrone</h3>
|
||||||
<video src="https://associationeyelevel.fr/drone_volant.mov"
|
<div class="project-grid">
|
||||||
class="project-image"
|
<div class="project-media">
|
||||||
controls
|
<video src="https://associationeyelevel.fr/drone_volant.mov"
|
||||||
loop>
|
class="project-image"
|
||||||
</video>
|
controls
|
||||||
|
loop>
|
||||||
<div class="project-info">
|
</video>
|
||||||
<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>
|
<div class="project-info">
|
||||||
<li><strong>Rôle :</strong> Co-conception, prototypage, tests utilisateurs</li>
|
<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>
|
||||||
<li><strong>Technologies :</strong> Python, électronique embarquée, capteurs, traitement d'image</li>
|
<ul>
|
||||||
<li><strong>Résultats :</strong> Prototype fonctionnel et démonstration en milieu réel</li>
|
<li><strong>Rôle :</strong> Co-conception, prototypage, tests utilisateurs</li>
|
||||||
</ul>
|
<li><strong>Technologies :</strong> Python, électronique embarquée, capteurs, traitement d'image</li>
|
||||||
<div class="project-cta">
|
<li><strong>Résultats :</strong> Prototype fonctionnel et démonstration en milieu réel</li>
|
||||||
<a class="btn" href="#contact">Me contacter</a>
|
</ul>
|
||||||
<a class="btn ghost" href="https://associationeyelevel.fr/eyedrone_menu.html">Voir la présentation</a>
|
<div class="project-cta">
|
||||||
</div>
|
<a class="btn" href="#contact">Me contacter</a>
|
||||||
</div>
|
<a class="btn ghost" href="https://associationeyelevel.fr/eyedrone_menu.html">Voir la présentation</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
<section class="section contact" id="contact">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h3>Contact</h3>
|
<section class="section contact" id="contact">
|
||||||
<p>Vous pouvez me contacter par e-mail ou téléphone :</p>
|
<div class="container">
|
||||||
<p style="margin-top: 10px; font-size: 20px;">
|
<h3>Contact</h3>
|
||||||
📧 <a href="mailto:mmostafa93200@gmail.com"><strong>mmostafa93200@gmail.com</strong></a>
|
<p>Vous pouvez me contacter par e-mail ou téléphone :</p>
|
||||||
</p>
|
<p style="margin-top: 10px; font-size: 20px;">
|
||||||
<p style="margin-top: 6px; font-size: 20px;">
|
📧 <a href="mailto:mmostafa93200@gmail.com"><strong>mmostafa93200@gmail.com</strong></a>
|
||||||
📞 <a href="tel:+33626100810"><strong>+33 6 26 10 08 10</strong></a>
|
</p>
|
||||||
</p>
|
<p style="margin-top: 6px; font-size: 20px;">
|
||||||
</div>
|
📞 <a href="tel:+33626100810"><strong>+33 6 26 10 08 10</strong></a>
|
||||||
</section>
|
</p>
|
||||||
</main>
|
</div>
|
||||||
|
</section>
|
||||||
<footer>
|
</main>
|
||||||
<div class="footer-inner">
|
|
||||||
<p>© 2025 Mahmoud Mostafa — Portfolio</p>
|
<footer>
|
||||||
<div class="socials">
|
<div class="footer-inner">
|
||||||
<a href="mailto:mmostafa93200@gmail.com"><i class="bi bi-envelope" aria-hidden="true"></i></a>
|
<p>© 2025 Mahmoud Mostafa — Portfolio</p>
|
||||||
</div>
|
<div class="socials">
|
||||||
</div>
|
<a href="mailto:mmostafa93200@gmail.com"><i class="bi bi-envelope" aria-hidden="true"></i></a>
|
||||||
</footer>
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
</footer>
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const sections = document.querySelectorAll("section");
|
<script>
|
||||||
const observer = new IntersectionObserver(entries => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
entries.forEach(entry => {
|
const sections = document.querySelectorAll("section");
|
||||||
if (entry.isIntersecting) {
|
const observer = new IntersectionObserver(entries => {
|
||||||
entry.target.classList.add("in-view");
|
entries.forEach(entry => {
|
||||||
}
|
if (entry.isIntersecting) {
|
||||||
});
|
entry.target.classList.add("in-view");
|
||||||
}, { threshold: 0.1 });
|
}
|
||||||
sections.forEach(section => observer.observe(section));
|
});
|
||||||
});
|
}, { threshold: 0.1 });
|
||||||
</script>
|
sections.forEach(section => observer.observe(section));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user