Improved texts and profile pic added

src/styles/components/About.module.scss

@@ -87,18 +87,15 @@
   width: 100px;
   height: 100px;
   border-radius: 50%;
-  background: linear-gradient(135deg, $color-primary 0%, $color-primary-mid 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  overflow: hidden;
   box-shadow: 0 0 30px rgb(var(--color-primary-mid) / 0.3);
 }
 
-.avatarInner {
-  font-size: $text-xl;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 0.05em;
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
 .meta {
@@ -110,7 +107,7 @@
 
 .metaLine {
   display: flex;
-  justify-content: space-between;
+  align-items: flex-start;
   font-size: $text-sm;
   color: $color-text-muted;
   border-bottom: 1px solid $color-border;
@@ -125,8 +122,27 @@
   font-family: $font-mono;
   color: $color-text-dim;
   font-size: $text-xs;
+  flex-shrink: 0;
+  width: 7.5rem;
 }
 
-.green {
-  color: #4ade80;
+.metaValue {
+  text-align: left;
+}
+
+.metaLinks {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: $space-2;
+
+  a {
+    color: $color-accent;
+    text-decoration: none;
+    font-size: $text-xs;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }