translator attributions

Website/pages/links.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%">
+  <div class="pt-12">
     <h1 class="title-text">Project Links</h1>
 
     <div style="color: #999">
@@ -25,12 +25,28 @@
       selivano.d@gmail.com
     </v-btn>
 
-    <p id="credits" class="flex-row no-wrap">
-      Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990
+    <p style="color: #555" class="mt-8">
+      Site by <v-icon color="#555">mdi-discord</v-icon>
+      <a class="attr-link" href="https://github.com/Frontesque" target="_blank">
+        Front#2990
+      </a>
       <br />
       & <v-icon color="#555">mdi-discord</v-icon>
-      PickleNik#0864
+      <a class="attr-link" href="https://github.com/PickleNik" target="_blank">
+        PickleNik#0864
+      </a>
     </p>
+    <!-- Translators -->
+    <div style="color: #555; width: 250px">
+      Translators: <br />
+      <div
+        v-for="translator in translators"
+        :key="translator.tag"
+        class="d-flex"
+      >
+        {{ translator.lang }} - <v-spacer /> {{ translator.tag }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,20 +61,36 @@ export default {
       ? "swoop-left"
       : "swoop-right";
   },
-  data() {
-    return {
-      githubLink: "https://github.com/Anarios/return-youtube-dislike",
-      discordLink: "https://discord.gg/mYnESY4Md5",
-
-      emailLink: "mailto:selivano.d@gmail.com ",
-    };
-  },
+  data: () => ({
+    githubLink: "https://github.com/Anarios/return-youtube-dislike",
+    discordLink: "https://discord.gg/mYnESY4Md5",
+    emailLink: "mailto:selivano.d@gmail.com ",
+    translators: [
+      {
+        tag: "alexuspromago#9473",
+        lang: "Español",
+      },
+      {
+        tag: "trbatuhankara#7738",
+        lang: "Türkçe",
+      },
+      {
+        tag: "PickleNik#0864",
+        lang: "Русский",
+      }
+    ],
+  }),
 };
 </script>
 
-<style scoped>
-#credits {
-  transform: translate(0, 100%);
-  color: #555;
+<style>
+.attr-link {
+  color: #555 !important;
+  text-decoration: none;
+  transition: all 0.2s;
 }
-</style>
+.attr-link:hover {
+  text-decoration: underline;
+  color: #f77 !important;
+}
+</style>