making it mobile friendly

css/sections/hero.css

@@ -5,17 +5,18 @@
     padding: var(--space-2xl);
     width: 100%;
     display: grid;
-    grid-template-columns: 200px 1fr;
+    grid-template-columns: 180px minmax(0, 1fr);
     gap: var(--space-xl);
     align-items: center;
     animation: fadeInUp 0.8s var(--ease-out-expo);
 }
 
 .hero-details {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
     gap: var(--space-sm);
-    align-items: flex-start;
+    align-items: stretch;
+    min-width: 0;
     width: 100%;
     justify-content: flex-start;
 }
@@ -153,7 +154,6 @@
 /* ------------------------------------------------------------------ */
 @media (max-width: 1024px) {
     .hero-details {
-        flex-direction: column;
         gap: var(--space-xl);
     }
 
@@ -166,6 +166,10 @@
         width: 100%;
         align-items: stretch;
     }
+
+    .tech-tags {
+        justify-content: center;
+    }
 }
 
 @media (max-width: 768px) {
@@ -176,8 +180,13 @@
         text-align: center;
     }
 
+    .hero-details {
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--space-lg);
+    }
+
     .name {
-        font-size: var(--text-xl);
+        font-size: var(--text-2xl);
     }
 
     .social-links {
@@ -191,35 +200,24 @@
         padding: var(--space-lg) var(--space-md);
     }
 
-    .name {
-        font-size: var(--text-lg);
-    }
-
     .social-links {
-        gap: var(--space-xs);
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--space-sm);
     }
 
     .social-link {
         padding: var(--space-sm) var(--space-md);
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
         min-width: 0;
-        flex: 1;
-        max-width: calc(50% - 6px);
         justify-content: center;
     }
 
-    .social-link span {
-        display: none;
+    .social-link:last-child {
+        grid-column: 1 / -1;
     }
 
     .social-link i {
         font-size: 16px;
     }
 }
-
-@media (max-width: 380px) {
-    .social-link {
-        max-width: calc(100% / 2 - 6px);
-        padding: var(--space-sm);
-    }
-}

css/sections/homelab.css

@@ -1,5 +1,4 @@
 .homelab-section {
-    margin-top: var(--space-md);
     padding: var(--space-xl) var(--space-lg);
     background: rgba(20, 20, 30, 0.10);
     backdrop-filter: blur(48px);
@@ -7,8 +6,8 @@
     border-radius: var(--border-radius-large);
     box-shadow: var(--shadow-md), var(--inset-shadow);
     border: 1px solid var(--glass-border);
-    min-width: 26rem;
-    max-width: 26rem;
+    min-width: 0;
+    width: 100%;
     align-self: stretch;
     display: flex;
     flex-direction: column;
@@ -220,12 +219,11 @@
     .homelab-buttons {
         gap: var(--space-sm);
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
     }
 
     .homelab-btn {
         width: 100%;
-        max-width: 200px;
         justify-content: center;
     }
 }

css/sections/profile.css

@@ -262,6 +262,26 @@
 /* ------------------------------------------------------------------ */
 /* Responsive                                                          */
 /* ------------------------------------------------------------------ */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .profile-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-xl);
+    }
+
+    .profile-container .profile-info {
+        margin-top: 0;
+        align-items: flex-start;
+        text-align: left;
+    }
+
+    .profile-container .avatar {
+        margin: 0;
+        flex-shrink: 0;
+    }
+}
+
 @media (max-width: 1024px) {
     .profile-info {
         align-items: center;
@@ -304,7 +324,7 @@
     }
 
     .profile-info-item {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
         flex-direction: row;
         gap: var(--space-xs);
     }
@@ -327,6 +347,6 @@
     }
 
     .profile-info-item {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
     }
-}
+}

css/sections/projects.css

@@ -1,5 +1,4 @@
 .projects-section {
-    flex: 0 0 340px;
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
@@ -10,8 +9,8 @@
     border-radius: var(--border-radius-large);
     box-shadow: var(--shadow-md), var(--inset-shadow);
     border-bottom: 1px solid var(--glass-border);
-    min-width: 380px;
-    max-width: 440px;
+    min-width: 0;
+    width: 100%;
     align-self: stretch;
 }
 
@@ -112,13 +111,11 @@
     flex-wrap: nowrap;
 }
 
-/* Keep long titles from pushing icons to a new line */
+/* Let titles wrap while keeping the action links available. */
 .project-title > span:first-child {
     flex: 1 1 auto;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
 }
 
 .project-icon-link {
@@ -150,12 +147,16 @@
 /* Responsive                                                          */
 /* ------------------------------------------------------------------ */
 @media (max-width: 1024px) {
-    .projects-section {
-        flex: unset;
-        max-width: 100%;
-        margin-left: 0;
-        margin-top: var(--space-xl);
-        min-width: unset;
+    .project-icon-link {
+        width: 44px;
+        height: 44px;
+    }
+}
+
+@media (pointer: coarse) {
+    .project-icon-link {
+        width: 44px;
+        height: 44px;
     }
 }
 
@@ -179,7 +180,7 @@
     }
 
     .projects-title {
-        font-size: var(--text-sm);
+        font-size: var(--text-md);
     }
 
     .project {
@@ -191,7 +192,7 @@
     }
 
     .project-desc {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
     }
 
     .project-icons {
@@ -205,7 +206,7 @@
     }
 
     .project-title {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
         flex-direction: row;
         align-items: center;
         gap: var(--space-xs);