WebIndex/components/card/IntroCard.vue

<script lang="ts" setup>
interface Widget {
  icon: string[]
  url: string
  title: string
}
// Const welcomeWords = ['你好👋，很高兴认识你！']

const littleWidget: Widget[] = [
  {
    icon: ['fab', 'qq'],
    url: 'tencent://message/?uin=1922471905&Site=&Menu=yes',
    title: 'QQ',
  },
  {
    icon: ['fab', 'github-alt'],
    url: 'https://github.com/Aurora1949',
    title: 'Github',
  },
  {
    icon: ['fab', 'weibo'],
    url: 'https://weibo.com/u/7923648952',
    title: '微博',
  },
  {
    icon: ['fab', 'steam-symbol'],
    url: 'https://steamcommunity.com/id/cantyonion/',
    title: 'Steam',
  },
]
</script>

<template>
  <div class="container my-16 flex w-full">
    <!-- 头像部分 -->
    <div class="hidden h-32 w-32 overflow-hidden rounded-full bg-white hover:animate-pulse sm:block">
      <img
        alt=""
        src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640"
      >
    </div>

    <!--  文字部分  -->
    <div class="container flex flex-1 flex-col justify-between px-4 sm:px-8">
      <div class="text-4xl">
        Jeffrey Hsu
      </div>
      <div class="text-2xl text-gray-400">
        你好👋，很高兴认识你！
      </div>
      <!--      <vue-typed-js :strings="['First text', 'Second Text']"> -->
      <!--        <h1 class="typing"></h1> -->
      <!--      </vue-typed-js> -->
      <div class="flex gap-4 text-xl">
        <a
          v-for="item in littleWidget"
          :key="item.url"
          :href="item.url"
          :title="item.title"
          class="flex h-10 w-10 items-center justify-center rounded-full bg-green-400 text-white transition-all hover:scale-125"
        >
          <font-awesome-icon :icon="item.icon" />
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>