diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d610e55
--- /dev/null
+++ b/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio d'Abdul | Technicien Systèmes et Réseaux</title>
+    <link rel="stylesheet" href="css/style.css">
+   
+</button>
+   
+</head>
+<body>
+    
+    <header class="header-portfolio">
+        <nav class="nav-principal">
+            <a href="#accueil" class="logo">Abdul</a>
+           
+</button>
+            <ul>
+                <li><a href="#accueil">Accueil</a></li>
+                <li><a href="#competences">Compétences</a></li>
+                <li><a href="#projets">Projets</a></li>
+                <li><a href="#contact">Contact</a></li>
+               
+</button>
+            </ul>
+        </nav>
+    </header>
+
+    <main id="accueil" class="section-accueil">
+        <div class="contenu-accueil">
+            <h1 class="titre-principal">
+                Abdul | Expert en Systèmes Numériques & Infrastructure Réseau
+            </h1>
+            <p class="accroche">
+              Je possède des compétences solides dans les domaines électriques et dans les domaines informatiques, notamment dans le développement web et l'infrastructure réseau.
+            </p>
+            <a href="#competences" class="bouton-cta">Découvrir mes Atouts</a>
+        </div>
+    </main>
+
+    <section id="competences" class="section-competences">
+        <h2 class="titre-section">Mes Compétences Techniques</h2>
+        <div class="grille-competences">
+            <div class="carte-competence">
+                <img src="images/globe.png" alt="icon-globe">
+                <h3><i class="bi bi-globe"></i> Déploiement Réseau</h3>
+                <p>Mise en place et optimisation d'infrastructures, brassage local technique, installation et mise en production de switchs.</p>
+            </div>
+            <div class="carte-competence">
+                 <img src="images/laptop.png" alt="Icône d'ordinateur portable">
+                <h3><i class="bi bi-laptop"></i> Maintenance PC</h3>
+                <p>Montage, dépannage, et optimisation de systèmes informatiques pour une performance maximale.</p>
+            </div>
+            <div class="carte-competence">
+                <img src="images/lightning-charge-fill.png">
+                <h3><i class="bi bi-lightning-charge-fill"></i> Intervention Électrique</h3>
+                <p>Capacité d'intervention électrique sécurisée, à domicile ou en local technique.</p>
+            </div>
+            <div class="carte-competence">
+                <img src="images/camera.png" alt="icon camera">
+                <h3><i class="bi bi-camera"></i>  Montage Photo</h3>
+                <p>Édition et retouche photo pour des supports visuels de qualité.</p>
+            </div>
+            <div class="carte-competence">
+                <img src="images/laptop.png" alt="Icône d'ordinateur portable">
+                <h3><i class="bi bi-laptop"></i>putty</h3>
+                <p>je possed des basse solid avec le logicielle putty</p> 
+            </div>
+            <div class="carte-competence">
+                <img src="images/filetype-html.png" alt="Icône html">
+                <h3><i class="bi bi-filetype-html"></i>html</h3>
+                <p>je posed des basse solid en html</p>
+
+            </div>
+           <div class="carte-competence">
+        <img src="images/filetype-css.png" alt="Icône css">
+        <h3><i class="bi bi-filetype-css"></i>css</h3>
+        <p> je posed des competense solide en css</p>
+        </div>
+        <div class="carte-competence">
+    <img src="images/filetype-sql.png" alt="Icône sql">
+    <h3><i class="bi bi-filetype-sql"></i>sql</h3>
+    <p> je posed des competense solide en sql</p>
+</div>
+            </div>
+    </section>
+    <section id="projets" class="section-projets">
+        <h2 class="titre-section">Mes Réalisations</h2>
+        <div class="grille-projets">
+            <div class="carte-projet">
+                <h3><i class="bi bi-camera"></i>Projet 1  :montage photo </h3>
+                <p>Retouche avancée, composition créative, étalonnage des couleurs, gestion des formats et des délais.</p>
+                <a href="#" class="lien-projet">Voir le Détail</a>
+            </div>
+            <div class="carte-projet">
+                <h3>premier project : mise en  prode de switch</h3>
+                <p>mise prod de pluiseur switch extrem network</p>
+                
+                <a href="https://www.extremenetworks.com/products/switches/vsp-and-voss-switches/vsp-4900"  class="lien-projet" target="_blank">switch utiliser📌 </a>
+            </div>
+            <div class="carte-projet">
+                <h3>créeation d'un keyloger</h3>
+                <p> un keyloger est un Logiciel qui enregistre secrètement les frappes clavier et les envoie discrètement.</p>  
+            </div>
+           
+    </section>
+
+    <section ip="experience" class="experienc-pro">
+        <h2 class="titre-section">mes experiences profecionelles</h2>
+        <div class="grille-projets">
+        <div class="carte-projet">
+            <h3>mes stage efectuer en entreprise duren le lycée  </h3>
+            <p>Mes stages de lycée professionnel ont été effectués dans l'hôpital AP-HP Robert Debré, dans le service Infrastructure Réseaux</p>
+        </div>
+        </div>
+    </section>
+    <section ip="experience" class="experienc-pro">
+        <div class="grille-projets">
+            <div class="carte-projet">
+                <h3>mes stage effectuer en entreprise duren le bts</h3>
+                <p>mon stage de bts a eter effectuier a l'hôpital AP-HP saint-louis </p>
+            </div>
+        </div>
+    </section>
+
+    <section id="contact" class="section-contact">
+    <h2 class="titre-section">Contactez-moi</h2>
+    <p>Intéressé par mes compétences ? N'hésitez pas à me contacter pour discuter de vos besoins.</p>
+    <a href="mailto:lm.kiki@orange.fr" class="bouton-cta">Envoyer un Email</a>
+    
+    
+</section>
+
+</body>
+</html>
\ No newline at end of file
