Why isn't my JavaScript effects showing on web browser upon loading?

Question

Hello I need help with fixing my personal portfolio site. It's been a while since I used JavaScript and I am also trying to familiarize myself with some popular js libraries. I'm using the anime.js library to move the letters in the span tag nested in the h2 tag from my index.html file. Here is my code:

main.js

import anime from '/Users/ceceliachollette-dickson/node_modules/animejs/lib/anime.es.js';

//Effect 14
// Wrap every letter in a span
var textWrapper = document.querySelector('.hello .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.hello .line',
    scaleX: [0,1],
    opacity: [0.5,1],
    easing: "easeInOutExpo",
    duration: 900
  }).add({
    targets: '.hello .letter',
    opacity: [0,1],
    translateX: [40,0],
    translateZ: 0,
    scaleX: [0.3, 1],
    easing: "easeOutExpo",
    duration: 800,
    offset: '-=600',
    delay: (el, i) => 150 + 25 * i
  }).add({
    targets: '.hello',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

styles.css

/*TODO: Make navbar sticky as you scroll down*/
/*TODO: Fix having navbar contents disappear when screen size minimizes, appear only when hamburger is clicked*/
.header{
    position: relative;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 0 25px;
    transition: 0.3s;
}

.logo a{
    display: block;
}

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    z-index: 1;
    transition: 0.5s;
}

.menu li{
    list-style-type: none!important;
}

.menu li a{
    display: block;
}

.menu li a:hover{
    color: red!important;
    box-shadow: 0 -5px 0px #F4C2C2 inset,
    500px 0 0 rgba(255,255,255,0.03) inset;
    padding: 35px 25px 45px 25px;
}

a:link, a:hover, a:visited{
    text-decoration:none!important;
}

a:link{
    color: white;
    width: 100px;
    height: 100px;
    margin-top: 30px; 
    display: inline-block;
}

a:visited {
    color: white!important;
}

.hamburger{
    position: relative;
    width: 30px;
    height: 4px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    z-index: 2;
    transition: 0.3s;
}

.hamburger:before,
.hamburger:after{
    content: "";
    position: absolute;
    height: 4px;
    right: 0;
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;
}

.hamburger:before{
    top: -10px;
    width: 20px;
}

.hamburger:after{
    top: 10px;
    width: 20px;
}

.toggle-menu {
    position: absolute;
    width: 30px;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
}

.hamburger, 
.toggle-menu {
    display: none;
}

.navbar input:checked ~ .hamburger{
    background: transparent;
}

.navbar input:checked ~ .hamburger:before {
    top: 0;
    transform: translateY(6px)
    rotateZ(-45deg);
    width: 30px;
}

.navbar input:checked ~ .hamburger:after {
    top: 0;
    transform: translateY(6px)
    rotateZ(45deg);
    width: 30px;
}

.navbar input:checked ~ .menu {
    right: 0;
    box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}

@media screen and (max-width: 992px) {
    .hamburger,
    .toggle-menu {
        display: block;
    }
    .header {
        padding: 10px 20px;
    }
    .menu{
        justify-content: start;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        /*width: ;
        height: ;
        padding-top: ;*/
    }
    .menu li {
        width: 100%;
    }
    .menu li a{
        padding: 12px 0;
        font-size: 20px;
    }

    body {
        height: 100vh;
    }
}

img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 350px;
    height: 350px;
    border: 2px solid #0e0810;
    display: block;
}

.hello {
    color: purple;
    margin-top: 50px;
    font-weight: 500;
    font-size: 2.5em;
}

.hello .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
}

/*TODO: Fix span line*/
.hello .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: #ff0000;
    transform-origin: 100% 100%;
    bottom: 0;
}
  
.hello .letter {
    display: inline-block;
    line-height: 1em;
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Cecelia Chollette-Dickson</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <!-- fav icon -->
        <link rel="stylesheet" href="favicon.css">
    </head>
    <body style="background-color: #F4C2C2;">
        <div class="container">
            <div class="row">
                <header class="header">
                    <!--Logo/SVG-->
                    <div class="logo">
                        <a></a>
                    </div>
                    <!--Navigation begins-->
                    <nav class="navbar">
                        <input type="checkbox" class="toggle-menu">
                        <div class="hamburger"></div>
                        <ul class="menu">
                            <li class="nav-item">
                                <a class="nav-link disabled" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="resume.html">Résumé</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="projects.html">Projects</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
            <!--Adjusted padding of bootstrap row, distance of content from navigation-->
            <div class="row" style="padding-top: 50px;">
                <div class="col-12 col-lg-6">
                        <!--Adjusted padding of top of col so that it's height is bit above my headshot--> 
                        <div style="padding-top: 60px;">
                            <h2 class="hello">
                                <span class="text-wrapper">
                                    <span class="letters">Nice to meet you, I'm Cecelia!</span>
                                    <span class="line"></span>
                                </span>
                            </h2>
                            <script type="text/javascript" src="main.js"></script>
                        </div>

Can anyone please tell me what I can do to have the effects show upon the page loading on web browser? I referenced from https://tobiasahlin.com/moving-letters/ if it helps. Also if you have any other suggestions for parts of my code that I'm clearly struggling with, all is welcomed.