Update styles.css

styles.css

@@ -13,12 +13,14 @@ body {
     padding: 20px;
 }
 
-/* Header */
+/* Sticky header */
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    z-index: 1000;
+    border-bottom: 2px solid #f4f4f4;
 }
 
 #logo {
@@ -76,3 +78,55 @@ footer {
         margin: auto;
     }
 }
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Project gallery */
+#projects {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+}
+
+.project {
+    min-width: 200px; /* Adjust as necessary for your project thumbnail size */
+    margin-right: 20px;
+    text-align: center;
+}
+
+.project img {
+    width: 100%;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.project img:hover {
+    transform: scale(1.05);
+}
+
+.project-title {
+    font-weight: bold;
+    margin-top: 5px;
+}
+
+/* Add left and right navigation buttons for projects */
+#project-prev, #project-next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    user-select: none;
+}
+
+#project-prev { left: 10px; }
+#project-next { right: 10px; }
+
+