Have you ever wondered how to integrate a typing effect in your Hugo Academic theme easily? It shouldn’t be too difficult. That’s also what I thought when I started with it. One quick disclosure before getting started: I’ve never been professionally trained in HTML, CSS, or JS. So for someone more proficient in this field, it might seem to be a straightforward task. Here’s my approach that eventually worked for me:
If you want it as an interactive effect in the “About” section (an HTML document), you will need to adjust it. I heavily relied on the great step-by-step guide by Isabella Benabaye to get a centered avatar without the biography.
As a careful reader, you will just have realized that the biography section (including my education) is now missing. That’s why I added an “About me” section (again inspired by Isabella’s source code). I tweaked it a bit so that it fits my personal preferences.
Now comes the typing magic! ✨ I’ve tried typed.js first but couldn’t get it working on my own site. I then discovered TypeIt.js and basically followed the guideline.
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
to the top part of your about.html
(stored in themes/hugo-academic/layouts/partials/widgets
)about.html
file: <p class="multipleStrings"></p>
. This will be something like a place holder, and we still need to define what you want to include.multipleStrings
, add the following lines of code to the bottom of the about.html
file:<script>
new TypeIt(".multipleStrings", {
strings: ["This is a great string.", "But here is a better one."],
breakLines: false,
loop: true,
speed: 50
}).go();
</script>
about.html
and render the page.And voilà, that’s what you get: