I am currently in the process of building a portfolio website using Bootstrap 4, animate.css, typed.js and my own custom css.
When testing the site on localhost through VS Code, everything appears to be functioning correctly. However, upon viewing the site on Github pages, none of the styles or JavaScript effects are working as expected. I have double-checked all the links in the head tag and they seem to be correct, but I’d appreciate another set of eyes on this issue. Please review the code snippet below for reference.
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,400,700,900|Titillium:100,200,400,700,900+Web&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- JS -->
<script src="/js/typed.js"></script>
<title>Ryan Mottram Online Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light sticky-top animated slideInDown">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="me.html">Ryan Mottram</a>
... // omitted for brevity
<li class="dropdown-item">Computer Science Project</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid animated">
<div id="container">
<h2 class="typing-anim"><span class="type"></span></h2>
... // omitted for brevity
<script src="/js/particles.js"></script>
<script src="/js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
...
</body>
</html>