Hey everyone I have been having trouble with loading my jQuery to my github pages, github says changes have been made but when im on the site, jQuery does not show up, I tried restarting github, updating, restarting vscode, but it tells me ReferenceError: '$' is not defined and because the cdn has not been updated on github. Any help would be appreciated Thank you. website: 'https://payad.github.io' on the html page called index2.html everything is there and on the repo but not when i navigate to the site.
const introH = $('#intro').width();
const parent = $('.flex').width();
$('#intro').animate({'margin-left':(parent/2-introH/2)}, 1500);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="styles2.css"> -->
<!-- <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Dancing+Script&family=Roboto:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles2.css">
<title>New Portfolio</title>
</head>
<body>
<header class="header1">
<!-- <canvas id="bgCanvas"></canvas> -->
<!-- <video>
<source src="video/153868659.mp4" type="video/mp4" loop autoplay preload="auto">
</video> -->
<!-- <h4 class="name">Peter Ayad</h4> -->
<!-- <nav class="navbar navbar-dark navbar-expand-md"> -->
<!-- <div class="nav_toggle" id="nav-toggle"> -->
<!-- <a href="#" class="navbar-brand">Peter Ayad</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks"> -->
<!-- <div class="collapse navbar-collapse" id="navLinks"></div> -->
<!-- <ul class="nav_menu" id="nav-menu"> -->
<!-- <ul class="navbar-nav">
<li class="nav-item"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
<li class="nav-item"><a href="" class="nav-link">Resume</a></li>
<li class="nav-item"><a href="" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="" class="nav-link">Contact</a></li>
</ul> -->
<!-- </div> -->
<!-- <i class="bx bxs-grid"> -->
<!-- <i class="bx bxs-grid" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></i> -->
<!-- </nav> -->
<!-- <h1 class="mainHeader">Welcome to Peter's Portfolio</h1> -->
</header>
<!-- <canvas id="bgCanvas"></canvas> -->
<!-- Courtesy of CodePen/Vincent Garreau -->
<!-- <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGxvQd" data-user="VincentGarreau" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/VincentGarreau/pen/bGxvQd">
particles.js</a> by Vincent Garreau (<a href="https://codepen.io/VincentGarreau">@VincentGarreau</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>-->
<!-- Courtesy of CodePen/Vincent Garreau -->
<div id="tsparticles"></div>
<section class="mainSection">
<div class="mainPage">
<div class="flex">
<!-- <span id="intro">Hello Im...</span> -->
<p id="intro">Hello Im</p>
<!-- <div><span class="name">Peter Ayad</span></div> -->
<!-- <span class="name"></span> -->
</div>
<div>
<p class="name"></p>
</div>
<p class="introParagraph">
<!-- Peter is a fullstck web developer and react designer. Emmerisve and beautiful websites and apps is his passion. -->
A web developer that is passionate about <span class="create">creating</span> and designing <strong>beautiful</strong>, <span class="immersive">immersive</span>, and <em>interactive</em> websites.
</p>
<!-- <p>Interested in working together? Want to know more about what I do? check out my projects below!</p> -->
<!-- <p>Check out my work</p> -->
<form action="projects.html">
<button id="divButton">Check out my work >></button>
</form>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script src="jquery-3.6.0.min.js"></script> -->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.37.4/tsparticles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="app2.js"></script>
</body>
</html>