Update index.html

index.html

@@ -17,17 +17,16 @@
             margin: 20px auto;
             padding: 0 10px;
         }
-        .section {
-            margin-bottom: 30px;
-        }
         .section-title {
             color: #ffffff;
             margin: 10px 0;
+            text-align: center;
+            font-size: 2em; /* Bigger font for section titles */
         }
         .project-row {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-around; /* Adjust the spacing between projects */
+            justify-content: center; /* Center the projects */
         }
         .project {
             border: 2px solid #30363d;
@@ -35,46 +34,44 @@
             padding: 10px;
             margin: 10px;
             background-color: #161b22;
-            transition: background-color 0.3s ease;
-            width: calc(50% - 20px); /* Two projects per row, accounting for margin */
-            box-sizing: border-box; /* Includes padding and border in the element's total width and height */
+            width: calc(50% - 20px); /* Adjust width for two projects per row */
+            box-sizing: border-box;
             display: flex;
-            flex-direction: column; /* Stack elements vertically */
+            flex-direction: column;
+            align-items: center; /* Center align items */
         }
         .project:hover {
             background-color: #21262d;
         }
         .thumbnail {
-            width: 100%; /* Make the image fill the container */
             border-radius: 5px;
+            width: auto; /* Adjust width as needed */
+            max-height: 200px; /* Adjust height as needed */
         }
         .project-info {
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start; /* Align project info to the start (left) */
+            width: 100%;
+            text-align: center; /* Center the text */
         }
         .project-title {
             font-size: 1.2em;
-            color: #ffffff; /* White color for titles */
-            margin: 0 0 10px 0; /* Add some margin below the title */
+            color: #ffffff;
+            margin: 0 0 10px 0;
         }
         .project-link {
             text-decoration: none;
             color: #58a6ff;
-            margin: 5px 0; /* Reduce the vertical margin */
-            text-align: center;
-            padding: 8px 20px; /* Padding for the button */
+            margin: 5px 0;
+            padding: 8px 16px; /* Adjust padding for narrower buttons */
             background-color: #21262d;
             border-radius: 20px;
-            transition: background-color 0.2s ease;
+            display: inline-block; /* Make buttons inline */
         }
         .project-link:hover {
-            background-color: #30363d; /* Darken button on hover */
+            background-color: #30363d;
             text-decoration: underline;
         }
         @media screen and (max-width: 768px) {
-            /* Responsive design: Stack projects on top of each other on smaller screens */
+            /* Responsive design for smaller screens */
             .project {
                 width: 100%;
             }