diff --git a/a-propos.html b/a-propos.html
new file mode 100644
index 0000000..d6e2bd8
--- /dev/null
+++ b/a-propos.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>À propos - Portfolio de Yahya MABROUK</title>
+        <link rel="stylesheet" href="style.css" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+        />
+    </head>
+    <body>
+        <header>
+            <div class="navbar">
+                <div class="nom">
+                    <h1>Yahya MABROUK</h1>
+                    <p>Étudiant en BUT1 Informatique</p>
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Accueil</a></li>
+                        <li><a href="a-propos.html" class="active">À propos</a></li>
+                        <li><a href="competences.html">Compétences</a></li>
+                        <li><a href="realisations.html">Réalisations</a></li>
+                        <li><a href="interets.html">Centres d'intérêt</a></li>
+                        <li><a href="contact.html">Contact</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <section id="a-propos" class="section">
+            <h2 class="titre-section">À propos de moi</h2>
+
+            <div class="contenu-apropos">
+                <div class="texte-apropos">
+                    <h3>Qui suis-je?</h3>
+                    <p>
+                        Bonjour, je m'appelle Yahya MABROUK, étudiant marocain
+                        en première année du BUT Informatique à l'IUT de
+                        Clermont Auvergne. Passionné par l'économie, domaine
+                        dans lequel j'ai obtenu mon baccalauréat en 2024, j'ai
+                        ensuite choisi de me réorienter vers l'informatique en
+                        France afin de suivre ma deuxième passion.
+                    </p>
+
+                    <p>
+                        Grâce à ce changement, j'ai développé une grande
+                        capacité d'adaptation, en passant d'un domaine à un
+                        autre, dans un nouvel environnement, et en apprenant
+                        rapidement les technologies du secteur.
+                    </p>
+
+                    <h3>Mon parcours académique</h3>
+                    <div class="parcours">
+                        <div class="etape">
+                            <h4>2024 - 2027</h4>
+                            <p>BUT Informatique - IUT Clermont Ferrand</p>
+                        </div>
+                        <div class="etape">
+                            <h4>2023 - 2024</h4>
+                            <p>Baccalauréat en sciences économiques</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <div class="copyright">
+                <p>&copy; 2025 Yahya MABROUK. Tous droits réservés.</p>
+            </div>
+        </footer>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/competences.html b/competences.html
new file mode 100644
index 0000000..8ccea60
--- /dev/null
+++ b/competences.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Compétences - Portfolio de Yahya MABROUK</title>
+        <link rel="stylesheet" href="style.css" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+        />
+    </head>
+    <body>
+        <header>
+            <div class="navbar">
+                <div class="nom">
+                    <h1>Yahya MABROUK</h1>
+                    <p>Étudiant en BUT1 Informatique</p>
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Accueil</a></li>
+                        <li><a href="a-propos.html">À propos</a></li>
+                        <li><a href="competences.html" class="active">Compétences</a></li>
+                        <li><a href="realisations.html">Réalisations</a></li>
+                        <li><a href="interets.html">Centres d'intérêt</a></li>
+                        <li><a href="contact.html">Contact</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <section id="competences" class="section">
+            <h2 class="titre-section">Mes compétences</h2>
+
+            <div class="intro">
+                <p>
+                    En tant qu'étudiant en informatique, j'ai développé diverses compétences 
+                    techniques et personnelles qui me permettent d'aborder différents types de projets. 
+                    Voici un aperçu de mes principales compétences.
+                </p>
+            </div>
+
+            <div class="competences">
+                <div class="categorie">
+                    <h4>Langages de programmation</h4>
+                    <ul>
+                        <li>HTML/CSS</li>
+                        <li>SQL</li>
+                        <li>C</li>
+                        <li>C++</li>
+                        <li>C#</li>
+                        <li>BASH</li>
+                    </ul>
+                </div>
+
+                <div class="categorie">
+                    <h4>Outils & Technologies</h4>
+                    <ul>
+                        <li>Git/GitHub</li>
+                        <li>Canva</li>
+                    </ul>
+                </div>
+
+                <div class="categorie">
+                    <h4>Compétences personnelles</h4>
+                    <ul>
+                        <li>Capacité d'adaptation</li>
+                        <li>Sens de l'organisation</li>
+                        <li>Force de proposition</li>
+                    </ul>
+                </div>
+                <div class="categorie">
+                    <h4>Langues</h4>
+                    <ul>
+                        <li>Arabe</li>
+                        <li>Français</li>
+                        <li>Anglais</li>
+                        <li>Amazigh</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <div class="copyright">
+                <p>&copy; 2025 Yahya MABROUK. Tous droits réservés.</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..fd18d65
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - Portfolio de Yahya MABROUK</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+    <header>
+        <div class="navbar">
+            <div class="nom">
+                <h1>Yahya MABROUK</h1>
+                <p>Étudiant en BUT1 Informatique</p>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Accueil</a></li>
+                    <li><a href="a-propos.html">À propos</a></li>
+                    <li><a href="competences.html">Compétences</a></li>
+                    <li><a href="realisations.html">Réalisations</a></li>
+                    <li><a href="interets.html">Centres d'intérêt</a></li>
+                    <li><a href="contact.html" class="active">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section class="section" id="contact">
+            <h2 class="titre-section">Contact</h2>
+            <div class="contenu-contact">
+                <div class="coordonnees">
+                    <h3>Mes coordonnées</h3>
+                    <p>N'hésitez pas à me contacter par l'un des moyens suivants ou en utilisant le formulaire ci-dessous.</p>
+                    
+                    <div class="info-contact">
+                        <p><i class="fas fa-envelope"></i> <strong>Email :</strong> <a href="mailto:yahyamabrouk2006@gmail.com">yahyamabrouk2006@gmail.com</a></p>
+                        <p><i class="fas fa-phone"></i> <strong>Téléphone :</strong> 0699760396</p>
+                        <p><i class="fas fa-map-marker-alt"></i> <strong>Adresse :</strong> 35 rue roche genes Clermont-Ferrand, France</p>
+                    </div>
+                    
+                    <div class="reseaux-sociaux">
+                        <h3>Réseaux sociaux</h3>
+                        <p>Retrouvez-moi également sur les plateformes suivantes :</p>
+                        <ul>
+                            <li><a href="https://www.linkedin.com/in/yahya-mabrouk"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
+                            <li><a href="https://github.com/yahya-mabrouk1"><i class="fab fa-github"></i> GitHub</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="formulaire-contact">
+                    <h3>Envoyez-moi un message</h3>
+                    <form id="contact-form">
+                        <div class="form-group">
+                            <label for="nom">Nom complet</label>
+                            <input type="text" id="nom" name="nom" required>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="email">Adresse email</label>
+                            <input type="email" id="email" name="email" required>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="message">Message</label>
+                            <textarea id="message" name="message" rows="5" required></textarea>
+                        </div>
+                        
+                        <div class="form-submit">
+                            <button type="submit">Envoyer</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <div class="copyright">
+            <p>&copy; 2025 Yahya MABROUK. Tous droits réservés.</p>
+        </div>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/contacte.html b/contacte.html
new file mode 100644
index 0000000..5fae576
--- /dev/null
+++ b/contacte.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - Portfolio de Yahya MABROUK</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+    <header>
+        <div class="navbar">
+            <div class="nom">
+                <h1>Yahya MABROUK</h1>
+                <p>Développeur Web</p>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Accueil</a></li>
+                    <li><a href="a-propos.html">À propos</a></li>
+                    <li><a href="realisations.html">Réalisations</a></li>
+                    <li><a href="interets.html">Centres d'intérêt</a></li>
+                    <li><a href="contact.html" class="active">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section class="section" id="contact">
+            <h2 class="titre-section">Contact</h2>
+            <div class="contenu-contact">
+                <div class="coordonnees">
+                    <h3>Mes coordonnées</h3>
+                    <p>N'hésitez pas à me contacter par l'un des moyens suivants ou en utilisant le formulaire ci-dessous.</p>
+                    
+                    <div class="info-contact">
+                        <p><i class="fas fa-envelope"></i> <strong>Email :</strong> <a href="mailto:email@example.com">email@example.com</a></p>
+                        <p><i class="fas fa-phone"></i> <strong>Téléphone :</strong> +33 X XX XX XX XX</p>
+                        <p><i class="fas fa-map-marker-alt"></i> <strong>Adresse :</strong> Ville, Pays</p>
+                    </div>
+                    
+                    <div class="reseaux-sociaux">
+                        <h3>Réseaux sociaux</h3>
+                        <p>Retrouvez-moi également sur les plateformes suivantes :</p>
+                        <ul>
+                            <li><a href="#"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
+                            <li><a href="#"><i class="fab fa-github"></i> GitHub</a></li>
+                            <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="formulaire-contact">
+                    <h3>Envoyez-moi un message</h3>
+                    <form id="contact-form">
+                        <div class="form-group">
+                            <label for="nom">Nom complet</label>
+                            <input type="text" id="nom" name="nom" required>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="email">Adresse email</label>
+                            <input type="email" id="email" name="email" required>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="message">Message</label>
+                            <textarea id="message" name="message" rows="5" required></textarea>
+                        </div>
+                        
+                        <div class="form-submit">
+                            <button type="submit">Envoyer</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <div class="copyright">
+            <p>&copy; 2025 Yahya MABROUK. Tous droits réservés.</p>
+        </div>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/interets.html b/interets.html
new file mode 100644
index 0000000..270ccd1
--- /dev/null
+++ b/interets.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Centres d'intérêt - Portfolio de Yahya MABROUK</title>
+        <link rel="stylesheet" href="style.css" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+        />
+    </head>
+    <body>
+        <header>
+            <div class="navbar">
+                <div class="nom">
+                    <h1>Yahya MABROUK</h1>
+                    <p>Étudiant en BUT1 Informatique</p>
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Accueil</a></li>
+                        <li><a href="a-propos.html">À propos</a></li>
+                        <li><a href="competences.html">Compétences</a></li>
+                        <li><a href="realisations.html">Réalisations</a></li>
+                        <li><a href="interets.html" class="active">Centres d'intérêt</a></li>
+                        <li><a href="contact.html">Contact</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <section id="interets" class="section">
+            <h2 class="titre-section">Centres d'intérêt</h2>
+
+            <div class="intro">
+                <p>
+                    Même si l'informatique occupe une place importante dans ma
+                    vie, je m'épanouis également à travers diverses activités
+                    qui nourrissent ma créativité et mon bien-être.
+                </p>
+            </div>
+
+            <div class="interets-container">
+                <div class="interet">
+                    <h3><i class="fas fa-futbol"></i> Football</h3>
+                </div>
+
+                <div class="interet">
+                    <h3><i class="fas fa-store"></i> Commerce</h3>
+                </div>
+
+                <div class="interet">
+                    <h3><i class="fas fa-chart-line"></i> Économie</h3>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <div class="copyright">
+                <p>&copy; 2025 Yahya MABROUK. Tous droits réservés.</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
