ایجاد صفحه پیوندهای خود در Nuxt

<template>
  <div class="max-w-4xl mx-auto py-4 text-center">
    <h2 class="my-4 text-3xl font-display font-bold">
      Find me around the internet
    </h2>
    <ul
      class="flex flex-wrap justify-around max-w-lg mx-auto text-center list-none"
    >
      <li v-if="isHome" class="w-1/2 md:w-1/4 mt-4">
        <a href="https://terabytetiger.com/">
          <div>
            <font-awesome-icon
              :icon="['fas', 'home']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-purple-0"
            />
          </div>
          Blog
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://dev.to/terabytetiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'dev']"
              :style="{
                fontSize: '3rem',
              }"
            />
          </div>
          Dev.to
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://github.com/TerabyteTiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'github']"
              :style="{
                fontSize: '3rem',
              }"
            />
          </div>
          Github
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a rel="me" href="https://dftba.club/@TerabyteTiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'mastodon']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-blue-700"
            />
          </div>
          Mastodon
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://www.instagram.com/t.vanblargan/">
          <div>
            <font-awesome-icon
              :icon="['fab', 'instagram']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-pink-500"
            />
          </div>
          Instagram
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://www.youtube.com/channel/UCZeMnP2XoSh724u4v8Oskwg">
          <div>
            <font-awesome-icon
              :icon="['fab', 'youtube']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-red-500"
            />
          </div>
          YouTube
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Social",
  computed: {
    isHome() {
      return !(this.$route.fullPath === "/")
    },
  },
}
</script>

<template>
  <div class="bg-gradient-to-br from-blue-400 to-purple-400 w-screen h-screen p-12">
    <Nuxt />
  </div>
</template>

<template>
  <div class="">
    <img
      src="/profileImg.png"
      alt="(your alt text goes here)"
      class="rounded-full h-48 mx-auto mb-8 py-4 filter drop-shadow-2xl"
    />
    <div
      class="bg-white mx-auto w-7/8 lg:w-1/2 rounded-lg p-4 filter drop-shadow-2xl"
    >
      <Social></Social>
    </div>
  </div>
</template>

<script>
export default {
  layout: "links",
}
</script>