diff --git a/public/fonts/jetbrainsmono-medium.woff2 b/public/fonts/jetbrainsmono-medium.woff2 new file mode 100644 index 0000000..95d746a Binary files /dev/null and b/public/fonts/jetbrainsmono-medium.woff2 differ diff --git a/src/components/Typemachine/Typemachine.tsx b/src/components/Typemachine/Typemachine.tsx new file mode 100644 index 0000000..bb6ad12 --- /dev/null +++ b/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 ( +
+ {currentSentence} +
+ ); +} diff --git a/src/sections/Hero/Hero.scss b/src/sections/Hero/Hero.scss index 46687ab..3bb15cf 100644 --- a/src/sections/Hero/Hero.scss +++ b/src/sections/Hero/Hero.scss @@ -141,6 +141,7 @@ color: colors.$teal; font-size: 2rem; font-weight: 500; + min-height: 25px; } &__actions { diff --git a/src/sections/Hero/Hero.tsx b/src/sections/Hero/Hero.tsx index 5e290c8..372732a 100644 --- a/src/sections/Hero/Hero.tsx +++ b/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
Pernigotto.

- Ingénieur Systèmes, Réseaux & Cybersécurité chez Fives Cryo. +