Boostrap Scroll Spy is not working

Question

I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone checkout my html file and see if they can determine what's wrong and provide me some solutions to this problem?

Here is the link to my github account for this: https://github.com/thlee1122/profile

Here is how my current navigation section in the html file look like:

body data-spy="scroll" data-target="#navbar-example">
        <div class = "header">
            <div class = "container">
                <div class="video-section">
                    <video autoplay muted loop>
                        <source src="macbook.mp4" type="video/mp4">
                    </video>

                    <div class="section-content container">
                        <h1>Tae Hoon Lee</h1>
                        <hr></hr>
                        <h4>Interactive Portfolio</h4>
                        <!--<p><a class="btn" href="#">Email Me</a></p>-->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="main" id="profile-intro">
            <div class="container">
                <h1>Profile</h1>
                <h3>I'm a creative Front end developer.</h3>
                <hr></hr>
            </div>
        </div>

        <div id="top" class="jumbotron">
            <a href="#profile" class="scroll-down">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </a>

            <div class="navbar navbar-default" id="navbar-example" role="navigation">
                <div>
                    <div class="navbar-header"></div>
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#profile">Profile</a>
                            </li>

                            <li class>
                                <a href="#experiences">Experiences</a>
                            <li>
                            
                            <li class>
                                <a href="#skills">Skills</a>
                            </li>

                            <li class>
                                <a href="#projects">Projects</a>
                            </li>

                            <li class>
                                <a href="#contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
  </body>

This github repository includes html, css, and js files.