Make years of expierence an dynamic value

nuxt.config.ts

@@ -52,7 +52,7 @@ export default defineNuxtConfig({
   ],
   i18n: {
     // { vueI18n: './i18n.config.ts' }
-    // TODO: Revert to config file once the bug in 8.0.0-beta.11 has been fixed
+    // TODO: Revert to config file once the bug in 8.0.0-beta.11 has been fixed, see
     // https://github.com/nuxt-modules/i18n/issues/1990
     vueI18n: {
       legacy: false,
@@ -66,7 +66,7 @@ export default defineNuxtConfig({
             specializing in IT in 2009, where I learned C, Java, HTML and CSS.\
             Some years later, I pursued a degree in {bi} with a specialization\
             in Web and App development. I have acquired the majority of my knowledge through self-teaching\
-            while working on personal projects over the past ~15 years.',
+            while working on personal projects over the past ~{yearsOfExp} years.',
           bioTitle: 'My Journey as a Developer',
           bioSubtitle: 'Here\'s some of the tech that I\'ve worked with before:',
           getInTouch: 'Get in touch',
@@ -119,7 +119,7 @@ export default defineNuxtConfig({
             Nach dem Gymnasium habe ich mich 2009 dazu entschlossen, eine auf IT spezialisierte {htl} zu besuchen,\
             wo ich die Grundlagen in C, Java, HTML and CSS gelernt habe.\
             Ein paar Jahre später habe ich {bi} studiert - Wahlpflichtfächer Web- und App-Development.\
-            Den Großteil meines Wissens habe ich mir im Zuge persönlicher Projekte in den letzten ~15 Jahren\
+            Den Großteil meines Wissens habe ich mir im Zuge persönlicher Projekte in den letzten ~{yearsOfExp} Jahren\
             autodidaktisch angeeignet.',
           bioTitle: 'Mein Werdegang als Developer',
           bioSubtitle: 'Einige der Technologien, mit denen ich gearbeitet habe:',

pages/bio.vue

@@ -17,6 +17,9 @@
           <template v-slot:bi>
             <NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink>
           </template>
+          <template v-slot:yearsOfExp>
+            {{ yearsOfExp }}
+          </template>
         </i18n-t>
         <br/>
         <p>{{ $t('bioSubtitle') }}</p>
@@ -34,13 +37,13 @@
                 <v-col cols="auto" v-for="(value, index) in v" :key="index">
                   <v-btn
                     variant="text"
-                    :size="getButtonSize(value.level)"
+                    :size="brandIconSize(value.level)"
                     color="primary"
                     class="mx-1"
                     :href="`https://${value.url}`"
                     target="_blank"
                   >
-                    <v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
+                    <v-icon :icon="value.icon" :size="brandIconSize(value.level) - 10"></v-icon>
                   </v-btn>
                   <span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
                     {{ value.title }}
@@ -125,10 +128,17 @@ export default {
           data: Object.keys(os).sort().reverse().map(e => os[e])
         }
       ]
+    },
+    yearsOfExp () {
+      // startingYear = The year I started my first truly personal project (predecessor of Menacing Blue).
+      // Fun fact: I used Notepad++ and javac in cmd for coding rather than an IDE for like the first 6-12 months.
+      const startingYear = 2011
+      const currentYear = new Date().getFullYear()
+      return currentYear - startingYear
     }
   },
   methods: {
-    getButtonSize (level) {
+    brandIconSize (level) {
       const large = this.$vuetify.display.smAndDown ? 64 : 96
       const medium = this.$vuetify.display.smAndDown ? 48 : 64
       const small = this.$vuetify.display.smAndDown ? 32 : 48