Title

package-lock.json

@@ -1,18 +1,21 @@
 {
-  "name": "nerdslab",
+  "name": "website",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "nerdslab",
+      "name": "website",
       "version": "0.0.0",
       "dependencies": {
+        "@tsparticles/vue3": "^3.0.1",
+        "jquery": "^3.7.1",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.0",
+        "@types/jquery": "^3.5.32",
         "@types/node": "^22.9.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/tsconfig": "^0.5.1",
@@ -1144,12 +1147,64 @@
       "integrity": "sha512-twLQ77zevtxobBOD4ToAtVmuYrpeYUh3qh+TEp+08IWhpsrIflVHqQ1F1CiPxQGL7doCdBIOOCF+1Tm833faNg==",
       "dev": true
     },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.7.1.tgz",
+      "integrity": "sha512-GYzBgq/oOE9YJdOL1++MoawWmYg4AvVct6CIrJGx84ZRb3U2owYmLsRGabYl0qX1CWWOvUG569043RJmyp/vQA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true
+    },
+    "node_modules/@tsparticles/vue3": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/vue3/-/vue3-3.0.1.tgz",
+      "integrity": "sha512-BxaSZ0wtxq33SDsrqLkLWoV88Jd5BnBoYjyVhKSNzOLOesCiG8Z5WQC1QZGTez79l/gBe0xaCDF0ng1e2iKJvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "@tsparticles/engine": "^3.0.3",
+        "vue": "^3.3.13"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
+      "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.10.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.0.tgz",
@@ -1159,6 +1214,12 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
+      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1938,6 +1999,11 @@
         "node": ">=16"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nerdslab",
+  "name": "website",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -11,11 +11,14 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@tsparticles/vue3": "^3.0.1",
+    "jquery": "^3.7.1",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/jquery": "^3.5.32",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",

src/assets/main.css

@@ -33,3 +33,7 @@ a,
     padding: 0 2rem;
   }
 }*/
+
+p, h1, h2, h3, h4, h5{
+  color: #F5F5F5;
+}

src/components/Home/TypewriterWelcome.vue

@@ -1,16 +1,47 @@
 <script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+    const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
 
+
+    const jobTitles = ["Computer Science student", "AI enthousiast", "Full-stack web developer"];
+    let currentJob = ref('');
+    let currentChar = 0;
+    let currentTitle = 0;
+    
+    async function startTypewriter(){
+        let recursive = async ()=>{
+            if(currentChar > jobTitles[currentTitle].length-1){
+                //We finished to write this title
+                //Let's wait a little, so user can read it
+                await delay(1500);
+
+                currentChar = 0;
+                currentTitle = (currentTitle+1) % jobTitles.length;
+                currentJob.value = ''; // Clear of wrote value
+            }
+            currentJob.value = currentJob.value + jobTitles[currentTitle][currentChar];
+            currentChar++;
+            await delay(400);
+            recursive();
+        }
+        recursive();
+    }
+
+    onMounted(() => {
+        startTypewriter();
+    });
 </script>
 
 <template>
     <div class="typewriter_welcome">
 
         <div class="typewriter">
-            <h1>Were projects are built</h1>
+            <h1>Hi ! It's Kévin Sailly</h1>
+            <br><h2 class="job_title">{{currentJob}}</h2>
         </div>
 
         <div class="picture">
-            <img src="https://picsum.photos/900/600"/>
+            <img src="@/assets/welcome_picture.jpg" width="100%" height="100%"/>
         </div>
 
     </div>
@@ -22,18 +53,46 @@
         border: 2px green dotted;
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap-reverse;
     }
 
     .typewriter{
         border: 2px yellow dotted;
         display: flex;
-        align-items: center;
         justify-content: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        margin-left: 5vw;
+        width: 20vw;
+        min-width: 350px;
+        overflow:visible;
     }
     .typewriter h1{
+        font-size: 2.8em;
+    }
+    .job_title{
+        width: fit-content;
+        font-size: 1.8em;
+        animation: blink-caret .75s step-end infinite;
+        border-right: .15em solid orange;
     }
 
     .picture{
         border: 2px greenyellow dotted;
+        width: 25vw;
+        margin-right: 10vw;
+        min-width: 300px;
     }
+    .picture img{
+        border-radius: 50%;
+        border: 3px #976391 solid;
+    }
+
+    /* Animation */
+    /* The typewriter cursor effect */
+    @keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: orange; }
+    }
+
 </style>