Fixed mobile formatting for hero-by line

archive/v1/index.html

@@ -69,8 +69,6 @@
                 </div>
                 <div class="intro">
                     <h3 id="introjump">About me</h3>
-                    <p class="v4-margin-note">The original
-                        about me section was full of nonsense memes and has been removed.</p>
                     <p>A cool website to show my projects</p>
                 </div>
 

style.css

@@ -1052,6 +1052,28 @@ footer a:hover {
         font-size: clamp(2.8rem, 12vw, 5rem);
     }
 
+    .hero-by-line {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        margin-bottom: 0.45rem;
+    }
+
+    .hero-by-line:last-child {
+        margin-bottom: 0;
+    }
+
+    .hero-by {
+        font-size: 0.86rem;
+        line-height: 1.5;
+    }
+
+    .hero-by-role {
+        font-size: 0.8rem;
+        line-height: 1.5;
+        opacity: 0.75;
+    }
+
     footer {
         flex-direction: column;
         gap: 0.5rem;