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

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 'animejs/lib/anime.es.js';

const anime = require('animejs');

//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: false})
  .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*/
.header{
    /*background-color: #F4C2C2; #FF8976; #FFCBA4;*/
    position: relative;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 0 25px;
    transition: 0.3s;
}

.logo a{
    display: block;
}

.navigation{
    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;
}

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

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

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

.navigation 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 {
        /*Chrome, Safari4+*/
        background: -webkit-gradient(linear, color-stop(5%,#FF8976), color-stop(#F4C2C2), color-stop(#C77398), color-stop(80%,purple), color-stop(90%,#1e1021));
        /*W3C*/
        background:linear-gradient(#FF8976 5%, #F4C2C2,#C77398, purple 80%,#1e1021 90%);
        /*Chrom10+, Safari5.1+*/
        background: -webkit-linear-gradient(#FF8976 5%, #F4C2C2,#C77398, purple 80%,#1e1021 90%); 
        /*FF3.6+*/
        background: -moz-linear-gradient(#FF8976 5%, #F4C2C2,#C77398, purple 80%,#1e1021 90%);
        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</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 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="anime.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
        <!-- fav icon -->
        <link rel="stylesheet" href="favicon.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <header class="header">
                    <!--Logo/SVG-->
                    <div class="logo">
                        <a></a>
                    </div>
                    <!--Navigation begins-->
                    <div class="navigation">
                        <input type="checkbox" class="toggle-menu">
                        <div class="hamburger"></div>
                        <ul class="menu">
                            <li class="nav-item">
                                <a class="nav-link disabled" href="/Users/cecelia/Documents/CeceliaPortfolio/index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/Users/cecelia/Documents/CeceliaPortfolio/resume.html">Résumé</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/Users/cecelia/Documents/CeceliaPortfolio/projects.html">Projects</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/Users/cecelia/Documents/CeceliaPortfolio/contact.html">Contact</a>
                            </li>
                        </ul>
                    </div>
                </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>

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.