add of a navBar and update of README.md

src/styles/Experiences.css

@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 5rem;
     width: 100%;
+    scroll-margin-top: 40px;
 }
 
 .experiences-container {

src/styles/NavBar.css

@@ -0,0 +1,43 @@
+.navbar {
+    position: fixed;
+    top: 30px;
+    background: rgba(100,100,100, 0.25);
+    backdrop-filter: blur(12px);
+    border-radius: 25px;
+    padding: 6px 10px;
+    z-index: 1000;
+    border: solid rgba(100,100,100,0.5) 0.001rem;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 1.3rem;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    li{
+        display: flex;
+    }
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    color: #B0B0B0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 15px;
+}
+
+.nav-link:hover {
+    color: #D95F46;
+}
+
+.nav-link.active {
+    background-color: rgba(217, 95, 70, 0.3);
+    color: #D95F46;
+}

src/styles/Projects.css

@@ -1,3 +1,9 @@
+#projects-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+}
+
 .show-more-container {
     text-align: center;
     margin-top: 2rem;

src/styles/Skills.css

@@ -1,3 +1,9 @@
+#skills-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+}
+
 .skills-span{
     width: 100%;
 }