Hello! I have recently followed a video form freecodecamp that shows how to create a 2D interactive portfolio. I have done this and it works locally but when I uploaded my project to a repo and created a github page nothing that uses Kaboom renders. I tried to do that workflow a couple times but I don’t understand what that actually does. A second issue is I have a main static portfolio page, and all the links that worked locally now do not work. I am a little lost and really want to resolve this so I can start job hunting. The github page is here Practice Portfolio Page
the github repo is here GitHub - evangwalker/Evan-Walker-Porfolio-Website
here is the static html
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Practice Portfolio Page</title>
<link rel="stylesheet" href="style_static.css">
</head>
<body>
<main id="main">
<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=Fuggles&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=Tourney:ital,wght@1,300&display=swap" rel="stylesheet">
<nav id="navbar">
<ul>
<li>
<a href="#about-section" class="nav-links">About
</a>
</li>
<li>
<a href="#projects-main" class="nav-links">Projects
</a>
</nav>
<section id="welcome-section">
<h1>Evan Walker Portfolio</h1>
<a href="index_interactive.html" class="profile-link" id="interactive">Interactive Site
</a>
<section class="contact" id="contact">
<a href="https://github.com/evangwalker/Evan-Walker-Porfolio-Website.git"
target="_blank"
class="profile-link"
id="profile-link">
GitHub
</a>
<a href="https://www.linkedin.com/in/evan-walker-2966991a9/"
target="_blank"
class="profile-link"
id="profile-link">Linked-In
</a>
</section>
<p class="profile-link">
evangibsonwalker@gmail.com
</p>
</section>
<section id="about-section">
<h3>About</h3>
<p>Born in Owen Sound, Ontario in 1991; I spent the first year of my life toiling on a farm before we packed up and moved to the big city (Toronto) for work. At the age of 3, I had already mastered the ablility to be a complete nuisance to my parents while being an absolute angel to our neighbor so she would give my brother and I raspberries she grew. <br/><br/>As time went on I decided to get older, eventually finding myself thriving in the Electromagnetic Engineering Technician course at George Brown College. I had a great time learning how to program PLC's and arduinos and learning the basics of electric and hydrolic circuits. My interest was piqued after taking a physics class, so after I graduated I went back to high school to improve my grades then enrolled in the University of Toronto, where I eventually earned a Physics Specialist Degree. <br/><br/>Since then I have been building up my technical skill set by learning various computer languages and improving upon my statistics and data analysis techniques. I have spent the last 2 years working as a Software Tester for plato, building on my troubleshooting and investigative experience. <br/><br/>Thank you for reading!</p>
</section>
<section id="projects-main">
<header id="section-header">Check out my projects!</header>
<section id="projects">
<section id="web-dev">
<header id="web-dev-header">Web Development</header>
<div class="project-grid">
<a href="/web_dev/bar_chart/index.html"
target="_blank"
class="project-tile"
>
<p>Bar Chart</p>
<iframe height="300" style="width: 100%;" title="Bar Chart" src="/Projects/web_dev/bar_chart/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/web_dev/drum_machine/index.html"
target="_blank"
class="project-tile">
<p>Drum Machine</p>
<iframe height="300" style="width: 100%;" title="Drum Machine" src="/Projects/web_dev/drum_machine/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/web_dev/random_quote/index.html"
target="_blank"
class="project-tile">
<p>Random Quote Machine</p>
<iframe height="300" style="width: 100%;" title="Random Quote Machine" src="/Projects/web_dev/random_quote/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/web_dev/detweilers_logo/index.html"
target="_blank"
class="project-tile">
<p>CSS Band Logo</p>
<iframe height="300" style="width: 100%;" title="CSS Band Logo" src="/Projects/web_dev/detweilers_logo/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
</div>
</section>
<section id="data-science">
<header id="data-science-header">Data Science</header>
<div class="project-grid">
<a href="https://github.com/evangwalker/Evan-Walker-Porfolio-Website/blob/main/Projects/data_science/App_Profile_from_apple_store_and_google_play.ipynb"
target="_blank"
class="project-tile"
>
<p>App Profile</p>
<iframe height="300" style="width: 100%;" title="Tribute Page" src="/Projects/data_science/App_Profile_from_apple_store_and_google_play.ipynb" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/data_science/gradientboostedtrees.ipynb"
target="_blank"
class="project-tile">
<p>Gradient Boosted Trees Introductory Project</p>
<iframe height="300" style="width: 100%;" title="Survey Form" src="/Projects/data_science/gradientboostedtrees.ipynb" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/data_science/Hacker_news_post_analysis.ipynb"
target="_blank"
class="project-tile">
<p>Hacker News Post Analysis</p>
<iframe height="300" style="width: 100%;" title="Product Landing Page" src="/Projects/data_science/Hacker_news_post_analysis.ipynb" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</a>
<a href="/Projects/data_science/UFOsightings.pptx"
target="_blank"
class="project-tile">
<p>UFO Sightings</p>
<img height="300" style="width: 100%;" src="/ufo_sightings_cover.png">
</a>
</div>
</section>
</section>
</section>
</main>
</body>
</html>`
and here is the html for the interactive portfolio
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<style>
@font-face {
font-family: monogram;
src: url(monogram.ttf);
}
body {
font-family: monogram, monospace;
font-size: 2rem;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#textbox {
position: absolute;
left: 10%;
right: 10%;
bottom: 2vh;
min-height: 10vh;
background: white;
border-radius: 3px;
outline-style: solid;
padding: 1rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
word-spacing: 0.2rem;
filter: drop-shadow(0 0 0.75 rbg(112, 112, 112));
}
.ui-text {
margin: 0;
user-select: none;
}
.ui-close-btn {
font-family: inherit;
border-style: none;
border-radius: 3px;
padding: 1rem;
font-size: inherit;
}
.btn-container {
align-self: flex-end;
margin-top: 1rem;
}
.note {
position: absolute;
left: 5%;
top: 1vh;
display: flex;
flex-direction: column;
color: rgb(238, 238, 238);
user-select: none;
}
</style>
<div id="app">
<div id="ui">
<p class="note">Tap/Click around to move</p>
<div id="textbox-container" style="display: none">
<div id="textbox">
<p id="dialogue" class="ui-text"></p>
<div class="btn-container">
<button id="close" class="ui-close-btn">Close</button>
</div>
</div>
</div>
</div>
<canvas id="game"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
I really appreciate taking the time to help me. Thanks!