Initial commit: Portfolio Aya Ben Mabrouk
This commit is contained in:
Aya Tess tess
221
index.html
Normal file
221
index.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Portfolio - Aya Ben Mabrouk</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="main-header">
|
||||
<div class="logo">
|
||||
<span class="logo-abm">ABM</span>
|
||||
<div class="logo-info">
|
||||
<span>Aya Ben Mabrouk</span>
|
||||
<span class="logo-subtitle">BTS CIEL — Développement & Réseaux</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="main-nav">
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#skills">Compétences</a>
|
||||
<a href="#projects">Projets</a>
|
||||
<a href="#experience">Expériences</a>
|
||||
<a href="#parcours">Parcours</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- SECTION HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Portfolio de Aya Ben Mabrouk</h1>
|
||||
<p class="hero-description">
|
||||
Étudiante en 2ème année de BTS CIEL — développement web, systèmes & réseaux.
|
||||
Je conçois des solutions simples et élégantes, et j'aime résoudre des problèmes concrets.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#projects" class="btn btn-project">Voir mes projets</a>
|
||||
<a href="#contact" class="btn btn-contact">Me contacter</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-profile-card">
|
||||
<div class="profile-placeholder">AB</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION A PROPOS -->
|
||||
<section id="about" class="about-section">
|
||||
<div class="about-header">
|
||||
<h2>À propos</h2>
|
||||
</div>
|
||||
|
||||
<div class="about-details-grid">
|
||||
<div class="about-bio">
|
||||
<p>
|
||||
Je m'appelle Aya Ben Mabrouk. Actuellement en deuxième année de BTS CIEL,
|
||||
je m'intéresse au développement web, à l'administration système et réseau, et aux systèmes embarqués.
|
||||
J'apprécie les interfaces soignées et l'optimisation technique.
|
||||
</p>
|
||||
<p>
|
||||
Je suis organisée, curieuse et motivée. J'apprends continuellement et j'aime travailler sur des
|
||||
projets concrets et stimulants.
|
||||
</p>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="mailto:ayabmk13@gmail.com" target="_blank">
|
||||
<i class="devicon-google-plain colored"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/ayabmk13" target="_blank">
|
||||
<i class="devicon-linkedin-plain colored"></i>
|
||||
</a>
|
||||
<a href="https://github.com/Ayaabmk" target="_blank">
|
||||
<i class="devicon-github-original"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-keywords">
|
||||
<p><strong>Langages :</strong> HTML, CSS, JavaScript, PHP, Python</p>
|
||||
<p><strong>Réseaux :</strong> TCP/IP, VLAN, DHCP, Linux</p>
|
||||
<p><strong>Outils :</strong> Git, Docker, MySQL</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION COMPETENCES -->
|
||||
<section id="skills">
|
||||
<h2>Compétences</h2>
|
||||
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card"><i class="devicon-html5-plain colored"></i><p>HTML</p></div>
|
||||
<div class="skill-card"><i class="devicon-css3-plain colored"></i><p>CSS</p></div>
|
||||
<div class="skill-card"><i class="devicon-javascript-plain colored"></i><p>JavaScript</p></div>
|
||||
<div class="skill-card"><i class="devicon-php-plain colored"></i><p>PHP</p></div>
|
||||
<div class="skill-card"><i class="devicon-mysql-plain colored"></i><p>MySQL</p></div>
|
||||
<div class="skill-card"><i class="devicon-linux-plain colored"></i><p>Linux</p></div>
|
||||
<div class="skill-card"><i class="devicon-docker-plain colored"></i><p>Docker</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION PROJETS -->
|
||||
<section id="projects">
|
||||
<h2>Projets</h2>
|
||||
|
||||
<div class="project-card">
|
||||
<h3>Mini CMS – Création d’un système de gestion de contenu</h3>
|
||||
|
||||
<img src="assets/cms.preview.jpg" alt="Aperçu du CMS" class="project-preview">
|
||||
|
||||
<p>
|
||||
J’ai développé un mini CMS permettant de créer, modifier et supprimer du contenu.
|
||||
Il intègre un système d’authentification, une interface administrateur moderne et une gestion dynamique des contenus.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>PHP / MySQL</li>
|
||||
<li>CRUD complet</li>
|
||||
<li>Gestion des utilisateurs</li>
|
||||
<li>Interface moderne</li>
|
||||
</ul>
|
||||
|
||||
<div class="project-actions">
|
||||
<a class="project-btn" target="_blank" href="https://github.com/Ayaabmk">
|
||||
Voir le code sur GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION EXPERIENCE -->
|
||||
<section id="experience">
|
||||
<h2>Mon expérience en entreprise</h2>
|
||||
|
||||
<div class="experience-card">
|
||||
<h3>Stage – Support Informatique & Réseau<br>Clinique Privée</h3>
|
||||
<p>
|
||||
Dans un environnement réel en clinique, j'ai participé à la gestion du parc informatique :
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Configuration de postes</li>
|
||||
<li>Mise en réseau et gestion des accès</li>
|
||||
<li>Installation d’imprimantes</li>
|
||||
<li>Support utilisateurs quotidien</li>
|
||||
<li>Gestion de droits sur des logiciels internes</li>
|
||||
</ul>
|
||||
|
||||
<p>Ce stage m’a permis de renforcer mes compétences techniques et ma rigueur.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION PARCOURS -->
|
||||
<section id="parcours" class="timeline-section">
|
||||
<h2>Parcours</h2>
|
||||
|
||||
<div class="timeline">
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-dot"></span>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date">2025 - 2026</span>
|
||||
<p>BTS CIEL — 2ᵉ année, développement & réseaux</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="timeline-dot"></span>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date">2024 - 2025</span>
|
||||
<p>BTS CIEL — 1ʳᵉ année, bases en programmation</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
|
||||
|
||||
<span class="timeline-dot"></span>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date">2024 - 2023</span>
|
||||
<p>Baccalauréat — Général - Mention Bien, Economique & social</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION CONTACT -->
|
||||
<section id="contact" class="contact-section">
|
||||
<h2>Contact</h2>
|
||||
|
||||
<p class="contact-subtitle">
|
||||
Une opportunité, une idée, une question ? Contacte-moi !
|
||||
</p>
|
||||
|
||||
<div class="contact-links">
|
||||
<a href="mailto:ayabmk13@gmail.com" class="contact-btn">
|
||||
<i class="fas fa-envelope"></i> Email
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/ayabmk13" target="_blank" class="contact-btn">
|
||||
<i class="fab fa-linkedin"></i> LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Aya Ben Mabrouk - Portfolio</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user