Update index.html

index.html

@@ -4,79 +4,78 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vitaliy Sharandin Data Science Portfolio</title>
-    <style>
-        h1 {
-          align-items: center;
-        } 
+     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #0d1117; /* Dark background */
             color: #c9d1d9; /* Light text */
             margin: 0;
             padding: 0;
+            display: flex;
+            justify-content: center; /* Center content */
+            min-height: 100vh;
+            align-items: center; /* Center vertically */
         }
         .container {
-            max-width: 1200px; /* Adjust the max width as needed */
-            margin: 20px auto;
-            padding: 0 10px;
+            text-align: center; /* Center text for the title */
+            max-width: 1200px;
+            width: 100%; /* Full width */
+            margin-top: 20px;
         }
         .section-title {
             color: #ffffff;
-            margin: 10px 0;
-            text-align: center;
-            font-size: 2em; /* Bigger font for section titles */
+            font-size: 2em;
+            margin: 20px 0;
         }
         .project-row {
             display: flex;
             flex-wrap: wrap;
-            justify-content: center; /* Center the projects */
+            justify-content: space-around;
+            gap: 20px; /* Add gap between projects */
         }
         .project {
             border: 2px solid #30363d;
             border-radius: 10px;
             padding: 10px;
-            margin: 10px;
             background-color: #161b22;
-            width: calc(50% - 20px); /* Adjust width for two projects per row */
+            width: calc(50% - 40px); /* Adjust width for two projects per row */
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
-            align-items: center; /* Center align items */
+            align-items: center;
+            margin-bottom: 20px;
         }
         .project:hover {
             background-color: #21262d;
         }
         .thumbnail {
+            width: 100%; /* Adjust width as needed */
             border-radius: 5px;
-            width: auto; /* Adjust width as needed */
-            max-height: 400px; /* Adjust height as needed */
         }
         .project-info {
             width: 100%;
-            text-align: center; /* Center the text */
         }
         .project-title {
             font-size: 1.2em;
             color: #ffffff;
-            margin: 0 0 10px 0;
+            margin: 0;
         }
         .project-link {
             text-decoration: none;
             color: #58a6ff;
             margin: 5px 0;
-            padding: 8px 16px; /* Adjust padding for narrower buttons */
+            padding: 8px 16px;
             background-color: #21262d;
             border-radius: 20px;
-            display: inline-block; /* Make buttons inline */
+            display: inline-block;
         }
         .project-link:hover {
             background-color: #30363d;
             text-decoration: underline;
         }
         @media screen and (max-width: 768px) {
-            /* Responsive design for smaller screens */
             .project {
-                width: 100%;
+                width: 100%; /* Full width for smaller screens */
             }
         }
     </style>