Dynamic text component

src/components/home/dynamicOccupation.vue

@@ -0,0 +1,57 @@
+<template>
+  <h2>{{ displayedWorld }}</h2>
+</template>
+
+<script setup>
+    import { ref, onMounted, onUnmounted } from 'vue';
+
+    const props = defineProps({
+        sentences:{
+            type:Array,
+            required:true
+        },
+        speed:{
+            type:Number,
+            required:false,
+            default: 250
+        }
+    });
+
+    let active = ref(true);
+    let chosenWord = ref(0);
+    let currentLetter = ref(0);
+    let displayedWorld = ref("");
+
+    const tick = ()=>{
+        const word = props.sentences[chosenWord.value];
+        if(currentLetter.value < word.length){
+            //We still have letters to display
+            displayedWorld.value = displayedWorld.value + word.at(currentLetter.value);
+            currentLetter.value++;
+        }else{
+            //Next word, reset
+            displayedWorld.value = "";
+            currentLetter.value = 0;
+            chosenWord.value = (chosenWord.value+1) % props.sentences.length;
+        }
+
+        if(active.value) setTimeout(tick, props.speed);
+    }
+
+    onMounted(tick);
+
+    onUnmounted(()=>{active.value=false;})
+</script>
+
+<style scoped>
+
+    h2{
+        height: 1.5em;
+        font-size: 1.5em;
+        margin-top: 10px;
+        margin-bottom: 5px;
+        width: fit-content;
+        border-right: 2px solid #EAEAEA;
+    }
+
+</style>

src/components/home/welcome.vue

@@ -8,7 +8,7 @@
             <div id="name_div_right_container">
               <div class="test" id="welcome_text_div">
                 <h1>Hello ! I'm {{ $t('message.hello') }} </h1>
-                <h2>AI enthousiast</h2>
+                <dynamicOccupation id="dynamic_occupation" :sentences="occupations" />
               </div>
               <div id="social_networks" class="test">
                 <div class="network">
@@ -27,10 +27,10 @@
     </div> <!-- Welcome Div -->
 </template>
 
-<script>
+<script setup>
-export default {
+  import dynamicOccupation from './dynamicOccupation.vue';
 
-}
+  const occupations = ["AI enthousiast", "I don't know", "Test Hello World"]
 </script>
 
 <style scoped>
@@ -80,6 +80,8 @@ export default {
 }
 #welcome_text_div h1{
     margin-top: 100px;
+    margin-bottom: 10px;
+    font-size: 2em;
 }
 
 #social_networks{