made mobile layout for bio

components/bio/BioHeading.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.grid">
-    <div>
+    <div :class="$style.image">
       <img src="~/assets/svg/howdy.svg" />
     </div>
 
@@ -16,6 +16,19 @@
         numerous other frameworks for the most of my time, but I'm also capable
         of doing <b>Typescript</b> and <b>Golang</b> backend.
       </p>
+
+      <div :class="$style.buttons">
+        <UiActionButton
+          href="https://github.com/muerwre"
+          target="_blank"
+          variant="outline"
+        >
+          Visit my Github
+          <template v-slot:suffix>
+            <IconsArrowRight width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+      </div>
     </div>
   </div>
 </template>
@@ -23,10 +36,17 @@
 <script lang="ts" setup></script>
 
 <style lang="scss" module>
+@import "@/assets/css/mixins";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-column-gap: 40px;
+
+  @include desktop {
+    display: flex;
+    flex-direction: column-reverse;
+  }
 }
 
 .text {
@@ -35,5 +55,35 @@
   b {
     color: var(--color-text);
   }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  @include desktop {
+    text-align: center;
+    padding-bottom: 20px;
+  }
+}
+
+.image {
+  text-align: center;
+
+  img {
+    width: 100%;
+
+    @include desktop {
+      max-width: 75vh;
+      max-height: 50vh;
+    }
+  }
+}
+
+.buttons {
+  margin-top: 50px;
+
+  @include desktop {
+    margin-top: 20px;
+  }
 }
 </style>