feat(hero): add typemachine

src/components/Typemachine/Typemachine.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+
+interface TypeMachineProps {
+    sentences: string[]
+}
+
+const TIMOUT_BETWEEN_CHARACTERS = 70;
+const TIMOUT_BETWEEN_SENTENCES = 2600;
+
+export function TypeMachine ({ sentences, } : TypeMachineProps) {
+    const [currentSentence, setCurrentSentence] = useState("");
+    const [sentenceIndex, setSentenceIndex] = useState(0);
+    const [charIndex, setCharIndex] = useState(0);
+
+    useEffect(() => {
+        if (sentenceIndex < sentences.length) {
+            if (charIndex < sentences[sentenceIndex].length) {
+                const timeout = setTimeout(() => {
+                    setCurrentSentence(current => current + sentences[sentenceIndex][charIndex]);
+                    setCharIndex(charIndex + 1);
+                }, TIMOUT_BETWEEN_CHARACTERS);
+                return () => clearTimeout(timeout);
+            } else {
+                const timeout = setTimeout(() => {
+                    setCurrentSentence("");
+                    setCharIndex(0);
+                    setSentenceIndex(sentenceIndex + 1);
+                }, TIMOUT_BETWEEN_SENTENCES);
+                return () => clearTimeout(timeout);
+            }
+        } else {
+            setSentenceIndex(0);
+        }
+    }, [charIndex, sentenceIndex, sentences]);
+
+    return (
+        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: "600", whiteSpace: "pre" }}>
+            {currentSentence}
+        </div>
+    );
+}

src/sections/Hero/Hero.scss

@@ -141,6 +141,7 @@
     color: colors.$teal;
     font-size: 2rem;
     font-weight: 500;
+    min-height: 25px;
   }
 
   &__actions {

src/sections/Hero/Hero.tsx

@@ -4,6 +4,7 @@ import "./Hero.scss";
 import { Link } from "react-scroll";
 
 import { Navigation, Profile } from "../../components";
+import { TypeMachine } from "../../components/Typemachine/Typemachine";
 
 export function Hero () {
     return (
@@ -15,7 +16,11 @@ export function Hero () {
                         Pierre<br />Pernigotto<span>.</span>
                     </h1>
                     <h2 className='section-hero__subcontent'>
-                    Ingénieur Systèmes, Réseaux & Cybersécurité  chez <a href="https://www.fivesgroup.com/fr/energy-cryogenics" target="_blank" rel="noreferrer">Fives Cryo</a>.
+                        <TypeMachine sentences={[
+                            "Ingénieur Systèmes chez Fives Cryo.",
+                            "Ingénieur Réseaux chez Fives Cryo.",
+                            "Ingénieur Cybersécurité chez Fives Cryo.",
+                        ]} />
                     </h2>
                     <div className="section-hero__actions">
                         <Link

src/styles/_fonts.scss

@@ -69,3 +69,11 @@
   font-weight: 900;
   src: url('/fonts/outfit-black.woff2') format('woff2');
 }
+
+@font-face {
+  font-display: swap;
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/jetbrainsmono-medium') format('woff2');
+}