diff --git a/about.html b/about.html
index 40ed184..2beec40 100644
--- a/about.html
+++ b/about.html
@@ -20,6 +20,7 @@
         <nav class="navbar">
             <a href="index.html">Portfolio</a>
             <a href="#about" class="active">À propos de Moi</a>
+            <a href="#services">Mes Services</a>
             <a href="#contact">Mes Hobbies</a>
             
             
@@ -44,11 +45,51 @@ <h3>Développeur Full-Stack!<span class="animate scroll" style="--i:3;"></span><
             </p>
 
             <div class="btn-box btns">
-                <a href="#contact" class="btn">Mes Hobbies</a>
+                <a href="#services" class="btn">Mes Services</a>
                 <span class="animate scroll" style="--i:5;"></span>
             </div>
         </div>
     </section>
+
+     <!-- services section design -->
+     <section class="services" id="services">
+        <h2 class="heading">Mes <span>Services</span></h2>
+
+        <div class="services-container">
+            <div class="services-box">
+                <i class='bx bx-code-alt'></i>
+                <h3>Création de site web</h3>
+                <p>Création, construction et maintenance de sites web et d'applications web. En rendant vos sites responsives et performants, ce qui me permet
+                    d'avoir une vision complète du développement.</p>
+                    <div class="btn-box btns">
+                        <a href="#" class="btn">Voir plus</a>
+                        </span>
+                    </div>
+            </div>
+
+            <div class="services-box">
+                <i class='bx bx-bar-chart-alt'></i>
+                <h3>Optimisation SEO</h3>
+                <p>Optimisation des moteurs de recherches (SEO), afin d'améliorer la visibilité de votre site web.Création et diffusion de contenu pertinent et précieux pour attirer et fidéliserde nouveaux clients.</p>
+                <div class="btn-box btns">
+                    <a href="#" class="btn">Voir plus</a>
+                    </span>
+                </div>
+            </div>
+
+            <div class="services-box">
+                <i class='bx bxs-paint'></i>
+                <h3>Support technique</h3>
+                <p>Le design graphique joue un rôle crucial dans la communication visuelle. J'aide des entreprises, les organisations et les individus à transmettre leurs messages de manière efficace et estétique</p>
+                <div class="btn-box btns">
+                    <a href="#" class="btn">Voir plus</a>
+                    </span>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
     <section class="contact" id="contact">
         <h2 class="heading">Mes <span>Hobbies</span><span class="animate scroll" style="--i:3;"></span></h2>
 
@@ -58,7 +99,7 @@ <h2 class="heading">Mes <span>Hobbies</span><span class="animate scroll" style="
                 <div class="portfolio-layer">
                     <h4>Le parachurisme</h4>
                     <p>Retrouver toutes mes créations et projets sur mon GitHub. Ou bien contactez-moi: 07.68.26.18.77</p>
-                    <a href="https://github.com/AlexNesvit" target="_blank"><i
+                    <a href="https://youtu.be/yZdJZt8KNWM?si=cuqVtyOkWEdOhdCY" target="_blank"><i
                             class='bx bx-link-external'></i></a>
                     <span class="focus"></span>
                 </div>
@@ -75,7 +116,7 @@ <h4>Le parachurisme</h4>
                 <div class="portfolio-layer">
                     <h4>Activités de plein air</h4>
                     <p>Retrouver toutes mes créations et projets sur mon GitHub. Ou bien contactez-moi: 07.68.26.18.77</p>
-                    <a href="https://github.com/AlexNesvit" target="_blank"><i
+                    <a href="https://www.youtube.com/watch?v=1ygvweNWizw&t=16s" target="_blank"><i
                             class='bx bx-link-external'></i></a>
                     <span class="focus"></span>
                 </div>
diff --git a/index.html b/index.html
index a46c3a8..e6eb9dc 100644
--- a/index.html
+++ b/index.html
@@ -155,8 +155,8 @@ <h3 class="title">Expériences professionnelles:<span class="animate scroll" sty
                     <div class="education-content">
                         <div class="content">
                             <div class="year"><i class='bx bxs-calendar'></i> 2023 - 2024</div>
-                            <h3>Web Developer - Company (Stage)</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, aperiam!</p>
+                            <h3>Développeur Web Fullstack en Freelance</h3>
+                            <p>Expérimenté développeur web Full-stack freelance. Expert en HTML, CSS, JavaScript, PHP+Symfony, SQL, Python. Créatif, efficace, orienté résultats. Délais respectés. Excellente communication. Clientèle satisfaite.</p>
                         </div>
                     </div>
 
@@ -201,22 +201,22 @@ <h3 class="title">Coding Skills<span class="animate scroll" style="--i:2;"></spa
                 <div class="skills-box">
                     <div class="skills-content">
                         <div class="progress">
-                            <h3>HTML <span>90%</span></h3>
+                            <h3>HTML + CSS <span>90%</span></h3>
                             <div class="bar"><span></span></div>
                         </div>
 
                         <div class="progress">
-                            <h3>CSS <span>80%</span></h3>
+                            <h3>JavaScript <span>85%</span></h3>
                             <div class="bar"><span></span></div>
                         </div>
 
                         <div class="progress">
-                            <h3>Javascript <span>65%</span></h3>
+                            <h3>Python <span>80%</span></h3>
                             <div class="bar"><span></span></div>
                         </div>
 
                         <div class="progress">
-                            <h3>Python <span>65%</span></h3>
+                            <h3>PHP <span>85%</span></h3>
                             <div class="bar"><span></span></div>
                         </div>
 
@@ -329,10 +329,10 @@ <h4>GITHUB BOT</h4>
             <div class="portfolio-box">
                 <img src="images/portfolio6.jpg" alt="">
                 <div class="portfolio-layer">
-                    <h4>Projet WEB</h4>
+                    <h4>Projet Personal-Card</h4>
                     <p>Retrouver toutes mes créations et projets sur mon GitHub. Ou bien contactez-moi: 07.68.26.18.77
                     </p>
-                    <a href="https://github.com/AlexNesvit" target="_blank"><i class='bx bx-link-external'></i></a>
+                    <a href="https://alexnesvit.github.io/Personal-Card/" target="_blank"><i class='bx bx-link-external'></i></a>
                     <span class="focus"></span>
                 </div>
                 <span class="animate scroll" style="--i:7;"></span>
diff --git a/style.css b/style.css
index 2a69e85..618eb3b 100644
--- a/style.css
+++ b/style.css
@@ -540,15 +540,15 @@ span {
 }
 
 .skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
-    width: 80%;
+    width: 85%;
 }
 
 .skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
-    width: 65%;
+    width: 80%;
 }
 
 .skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
-    width: 65%;
+    width: 85%;
 }
 
 .skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
@@ -1244,6 +1244,55 @@ span {
     padding-bottom: .5rem;
 }
 
+/* about.html section services */
+
+.services {
+    min-height: auto;
+    padding-bottom: 10rem;
+}
+
+.services h2 {
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.services-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.services-container .services-box {
+    flex: 1 1 30rem;
+    background: var(--second-bg-color);
+    padding: 3rem 2rem 4rem;
+    border-radius: 2rem;
+    text-align: center;
+    border: .2rem solid var(--bg-color);
+    transition: .5s ease;
+}
+
+.services-container .services-box:hover {
+    border-color: var(--main-color);
+    transform: scale(1.02);
+}
+
+.services-box i {
+    font-size: 7rem;
+    color: var(--main-color);
+}
+
+.services-box h3 {
+    font-size: 2.6rem;
+}
+
+.services-box p {
+    font-size: 1.6rem;
+    margin: 1rem 0 3rem;
+}