make id card responsive

components/Topbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="topbar">
-    <IdCard />
+    <IdCard v-if="lgAndUp" />
 
     <v-spacer />
 
@@ -41,9 +41,11 @@
 
 <script setup lang="ts">
   import ThemeSwitcher from "~/components/ThemeSwitcher.vue";
-  import type {Ref} from "@vue/reactivity";
+  import { useDisplay } from 'vuetify'
 
   const i18n = useI18n()
+
+  const { lgAndUp }= useDisplay()
 </script>
 
 <style scoped lang="scss">

pages/index.vue

@@ -5,6 +5,8 @@
   />
 
   <div class="banner">
+    <IdCard v-if="mdAndDown" class="mb-4" />
+
     <h1>
       {{ $t('Fullstack developer') }}
     </h1>
@@ -111,7 +113,7 @@
 
 <script setup lang="ts">
 
-import { useTheme } from 'vuetify'
+import { useDisplay, useTheme } from 'vuetify'
 import type { Ref } from '@vue/reactivity'
 import BadgeSection from '~/components/BadgeSection.vue'
 
@@ -126,6 +128,8 @@ const XP_YEARS = CURRENT_YEAR - START_YEAR
 
 const showLongIntro: Ref<boolean> = ref(false)
 
+const { mdAndDown } = useDisplay()
+
 const onContactMeClick = () => {
   window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
 }