displaying contact links as grid

components/contact/ContactInformation.vue

@@ -30,7 +30,7 @@ onMounted(() => (mail.value = atob(contacts.email)));
 .grid {
   width: auto;
   display: grid;
-  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(230px, auto));
   gap: 16px;
   align-items: flex-start;
   justify-content: flex-start;

constants/contacts.ts

@@ -2,4 +2,5 @@ export const contacts = {
   telegram: "vv4000",
   email: "Z290aGFtNDhAZ21haWwuY29t",
   github: "muerwre",
+  location: "Pavlodar, Rep. Kazakhstan",
 } as const;

pages/contacts.vue

@@ -2,7 +2,10 @@
   <article :class="$style.content">
     <div :class="$style.grid">
       <div :class="$style.text">
-        <h1>Write me a letter!</h1>
+        <h1 :class="$style.title">Write me a letter!</h1>
+        <div :class="$style.location">
+          <b>Current Location:</b> {{ contacts.location }}
+        </div>
 
         <div :class="$style.contacts">
           <ContactInformation />
@@ -17,7 +20,12 @@
 </template>
 
 <script lang="ts">
+import { contacts } from "~~/constants/contacts";
+
 export default {
+  data() {
+    return { contacts };
+  },
   scrollToTop: true,
   head() {
     return {
@@ -48,6 +56,10 @@ definePageMeta({ layout: "landing" });
 }
 
 .contacts {
-  margin-top: 40px;
+  margin-top: 60px;
+}
+
+.title {
+  margin-bottom: 10px;
 }
 </style>