prime8dev

commit 5cda611e21bdf7a17fa639c39c5eb2836b687e6e
parent fe49fe784bd963996f4fbaa6750d1884d94301ff
Author: Damian Myrda <damian@prime8.dev>
Date:   Wed, 21 Jan 2026 21:41:50 -0600

fix: improve mobile/tablet contact layout and use profile pic as favicon

Diffstat:
M
web/public/favicon.png
 | 
0

M
web/src/components/tabs/About.astro
 | 
51
+++++++++++++++++++++++++++------------------------

2 files changed, 27 insertions(+), 24 deletions(-)
diff --git a/web/public/favicon.png b/web/public/favicon.png
Binary files differ.
diff --git a/web/src/components/tabs/About.astro b/web/src/components/tabs/About.astro
@@ -23,8 +23,6 @@ const { wakaTimeData } = Astro.props;
         class="profile-image"
         src="/me.jpg"
         alt="Damian Myrda - Software Engineer and high school senior from Chicago"
-        width="280"
-        height="280"
         loading="eager"
       />
       <div class="contact-box">
@@ -44,7 +42,7 @@ const { wakaTimeData } = Astro.props;
           <a
             href={contact.linkedin}
             target="_blank"
-            rel="noopener noreferrer me">...in/damian-myrda</a
+            rel="noopener noreferrer me">linkedin.com/in/damian-myrda</a
           >
         </div>
       </div>
@@ -170,7 +168,6 @@ const { wakaTimeData } = Astro.props;
   .contact-box {
     border: 1px solid var(--border);
     padding: 12px;
-    width: 100%;
     max-width: 280px;
   }
 
@@ -185,6 +182,7 @@ const { wakaTimeData } = Astro.props;
     display: flex;
     margin-bottom: 4px;
     font-size: 12px;
+    min-width: 0;
   }
 
   .contact-item .label {
@@ -196,6 +194,11 @@ const { wakaTimeData } = Astro.props;
   .contact-item a {
     color: var(--light-blue);
     text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
   }
 
   .contact-item a:hover {
@@ -300,24 +303,38 @@ const { wakaTimeData } = Astro.props;
     }
 
     .about-left {
+      display: flex;
+      flex-direction: row;
       width: 100%;
       border-right: none;
       border-bottom: 1px solid var(--border);
       padding: 16px;
-      flex-direction: row;
-      flex-wrap: wrap;
       gap: 16px;
     }
 
     .profile-image {
       width: 120px;
-      max-width: 120px;
+      min-width: 60px;
+      flex-shrink: 1;
       height: 120px;
+      align-self: flex-start;
+      object-fit: cover;
+      object-position: center;
     }
 
     .contact-box {
       flex: 1;
-      min-width: 200px;
+      max-width: none;
+      min-width: 0;
+    }
+
+    .contact-item .label {
+      width: 70px;
+    }
+
+    .contact-item a {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .about-right {
@@ -368,22 +385,8 @@ const { wakaTimeData } = Astro.props;
   }
 
   @media (max-width: 480px) {
-    .about-left {
-      flex-direction: row;
-      align-items: stretch;
-    }
-
-    .profile-image {
-      width: 100px;
-      min-width: 100px;
-      max-width: 100px;
-      height: auto;
-      object-fit: cover;
-    }
-
-    .contact-box {
-      flex: 1;
-      max-width: none;
+    .contact-item .label {
+      display: none;
     }
   }
 </style>