Updated the styling for the webpage

webiu-ui/src/app/components/profile-card/profile-card.component.scss

@@ -1,80 +1,101 @@
 .profile-box {
     display: flex;
-    border: solid 1px #e0e0e0;
-    box-shadow: 10px 10px 30px 10px #0505051a;
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     width: 100%;
     max-width: 350px;
-    max-height: 650px;
-    min-height: 300px;
+    padding: 20px;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
-}
-
-.profile-img {
-    width: 40%;
-    height: 40%;
+    background-color: #ffffff;
+  }
+
+  .profile-img {
+    width: 120px;
+    height: 120px;
     border-radius: 50%;
-    border: solid 0.2px;
-}
-
-.profile-info {
+    border: solid 2px #e0e0e0;
+    object-fit: cover;
+    margin-bottom: 15px;
+  }
+
+  .profile-username {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin: 8px 0;
+    color: #333;
+  }
+
+  .profile-contributions {
+    font-size: 1em;
+    color: #777;
+    margin-bottom: 15px;
+  }
+
+  .profile-info {
     display: flex;
     width: 100%;
     gap: 10%;
     justify-content: center;
     margin-top: 10px;
-}
-
-.profile-github {
+    font-size: 0.9em;
+    color: #555;
+  }
+
+  .profile-github {
     display: flex;
     align-items: center;
     gap: 10px;
     border-radius: 5px;
-    background: var(--Gray-6, #eeecec);
+    background: #f5f5f5;
     padding: 8px 12px;
     justify-content: center;
-    margin-top: 5%;
-}
-
-.github-icon {
+    margin-top: 20px;
+    width: 100%;
+    max-width: 180px;
+  }
+
+  .github-icon {
     display: flex;
     justify-content: center;
     align-items: center;
-}
-
-.github-username {
-    display: flex;
-    align-items: center;
-    color: black;
-}
-
-/* Media Queries */
-@media (max-width: 1200px) {
-    .contributers-context {
-        grid-template-columns: repeat(3, 1fr);
+  }
+
+  .github-username {
+    color: #000;
+    font-weight: 500;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* Media Queries */
+  @media (max-width: 768px) {
+    .profile-box {
+      max-width: 100%;
     }
-    .contributors-main {
-        margin-left: 15%;
+  }
+
+  @media (max-width: 500px) {
+    .profile-box {
+      padding: 15px;
     }
-    .box {
-        width: 100%;
-        height: 100%;
+
+    .profile-img {
+      width: 100px;
+      height: 100px;
     }
-}
-
-@media (max-width: 992px) {
-    .box {
-        width: 80%;
-        height: 80%;
+
+    .profile-username {
+      font-size: 1em;
     }
-}
-
-@media (max-width: 500px) {
-    .box {
-        width: 70%;
-        height: 70%;
+
+    .profile-info {
+      font-size: 0.8em;
     }
-}
+  }
+