Use "Typewriter" effect on my website

Using Ghost
1

Hi everyone!
I’m a newbie on Ghost, hence my question which might sound stupid:
I just launched my website (jucos.fr) and I would like the title (Blog of an IT enthusiast - Creator of little things for iOS and macOS) to appear with the “Typewriter” effect (as described on the Ghost code injection tutorial page: How to use Code Injection in Ghost).
By following the steps described, nothing appears on the site.
I did manage to add some text with this effect (via this tutorial this time : Tutorial Intro | typewriter.js) but the text appears at the top of the page and I don’t see how to specify that I want to place it somewhere else…
Thanks in advance for your help,
Julien

2

Hi! Are you able to share the code that you’re using? It’ll help debug your site!

3

Hi, I come back from holidays :relaxed:

Here is the site Header (the 1st part just to change the font):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">

<style>
body {
        font-family: 'Ubuntu Mono', sans-serif;
        font-weight: 400;
    }
</style>

<style>
.cover-cta, .copyright, .menu-item-cta, .single-footer, .sticky, .header-right, .members-login {
    display: none;
    }

.social {
    display: flex;
    margin-bottom: 0rem;
    }

.logo-text {
    color: var(--brand-color); 
}
    
.cover-icon-image {
    width:150px;
}
</style>

<h2 id="typewriter">Typewriter</h2>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>
    const app = document.querySelector('h2#typewriter');

    const typewriter = new Typewriter(app, {
      loop: false,
      delay: 60,
      typingSpeed: 40,
      deleteSpeed: 40
    });

    typewriter
      .pauseFor(1000)
      .typeString("Work in progress ツ")
      .pauseFor(2000)
      .start();
</script>

And this is the site Footer (just for the green check mark on Mastodon):
<a rel="me" href="https://mastodon.social/@jucos"></a>

Thanks for your help ;)