From a0301d7a8e137bd83ace61226ec4ac0f9003d6f6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 16 Sep 2025 15:01:21 +0000
Subject: [PATCH] Fix: Correct asset and component pathing for GitHub Pages

Resolves issues with assets and components not loading on the deployed site.

- Renames component files (e.g., `_header.html` to `header.html`) to prevent them from being ignored by Jekyll.
- Updates `script.js` to use the new component filenames.
- Adds a `<base href="/static-magic/">` tag to all HTML files to ensure that all absolute paths are resolved relative to the site's root in its subdirectory.
- Adjusts stylesheet links in `index.html` and `games/index.html` to be compatible with the new base URL.
---
 docs/features/browser-apis.html       | 5 +++--
 docs/features/clipboard.html          | 5 +++--
 docs/features/drag-drop.html          | 5 +++--
 docs/features/filter-search.html      | 5 +++--
 docs/features/forms.html              | 5 +++--
 docs/features/json-viewer.html        | 5 +++--
 docs/features/live-js-runner.html     | 5 +++--
 docs/features/markdown-converter.html | 5 +++--
 docs/features/mermaid-diagrams.html   | 5 +++--
 docs/features/notes-app.html          | 5 +++--
 docs/features/page-state.html         | 5 +++--
 docs/features/spa-routing.html        | 5 +++--
 docs/features/theme-switcher.html     | 5 +++--
 docs/{_footer.html => footer.html}    | 0
 docs/games/clicker.html               | 5 +++--
 docs/games/drag-drop-puzzle.html      | 5 +++--
 docs/games/index.html                 | 7 ++++---
 docs/games/maze.html                  | 5 +++--
 docs/games/memory-match.html          | 5 +++--
 docs/games/number-guessing.html       | 5 +++--
 docs/games/rock-paper-scissors.html   | 5 +++--
 docs/games/simon-says.html            | 5 +++--
 docs/games/tic-tac-toe.html           | 5 +++--
 docs/games/typing-speed.html          | 5 +++--
 docs/games/wordle.html                | 5 +++--
 docs/guides/best-practices.html       | 5 +++--
 docs/guides/markdown-usage.html       | 5 +++--
 docs/guides/resources.html            | 5 +++--
 docs/{_header.html => header.html}    | 0
 docs/index.html                       | 1 +
 docs/{_nav.html => nav.html}          | 0
 docs/script.js                        | 6 +++---
 docs/tools/tech-tools.html            | 5 +++--
 33 files changed, 89 insertions(+), 60 deletions(-)
 rename docs/{_footer.html => footer.html} (100%)
 rename docs/{_header.html => header.html} (100%)
 rename docs/{_nav.html => nav.html} (100%)
diff --git a/docs/features/browser-apis.html b/docs/features/browser-apis.html
index 8c52951..9da362e 100644
--- a/docs/features/browser-apis.html
+++ b/docs/features/browser-apis.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Browser API Demos - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -111,7 +112,7 @@ <h4>Code</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       // Geolocation
       const geoBtn = document.getElementById("geo-btn");
diff --git a/docs/features/clipboard.html b/docs/features/clipboard.html
index 8f3c2ff..df0450d 100644
--- a/docs/features/clipboard.html
+++ b/docs/features/clipboard.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clipboard Interaction - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #copy-text {
         width: 100%;
@@ -99,7 +100,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const copyText = document.getElementById("copy-text");
       const copyBtn = document.getElementById("copy-btn");
diff --git a/docs/features/drag-drop.html b/docs/features/drag-drop.html
index 6e7d8c4..481d9f6 100644
--- a/docs/features/drag-drop.html
+++ b/docs/features/drag-drop.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Drag and Drop UI - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       .drop-lanes {
         display: flex;
@@ -142,7 +143,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const draggables = document.querySelectorAll(".draggable");
       const lanes = document.querySelectorAll(".lane");
diff --git a/docs/features/filter-search.html b/docs/features/filter-search.html
index 9d2fcc8..8bb0887 100644
--- a/docs/features/filter-search.html
+++ b/docs/features/filter-search.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Filterable Lists & Search - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #search-input {
         width: 100%;
@@ -109,7 +110,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const searchInput = document.getElementById("search-input");
       const itemList = document.getElementById("item-list");
diff --git a/docs/features/forms.html b/docs/features/forms.html
index b03f199..e343eb4 100644
--- a/docs/features/forms.html
+++ b/docs/features/forms.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Forms Without Servers - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -101,7 +102,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const form = document.getElementById("greeting-form");
       const nameInput = document.getElementById("name-input");
diff --git a/docs/features/json-viewer.html b/docs/features/json-viewer.html
index 9df88df..92901ba 100644
--- a/docs/features/json-viewer.html
+++ b/docs/features/json-viewer.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       JSON Viewer / Formatter - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #json-input {
         width: 100%;
@@ -138,7 +139,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const jsonInput = document.getElementById("json-input");
       const formatBtn = document.getElementById("format-btn");
diff --git a/docs/features/live-js-runner.html b/docs/features/live-js-runner.html
index a46c48b..4aeac53 100644
--- a/docs/features/live-js-runner.html
+++ b/docs/features/live-js-runner.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Live JavaScript Runner - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #js-code {
         width: 100%;
@@ -109,7 +110,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const codeArea = document.getElementById("js-code");
       const runButton = document.getElementById("run-btn");
diff --git a/docs/features/markdown-converter.html b/docs/features/markdown-converter.html
index dd62b68..30c6270 100644
--- a/docs/features/markdown-converter.html
+++ b/docs/features/markdown-converter.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Markdown to HTML Converter - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       .converter-container {
         display: flex;
@@ -123,7 +124,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <!-- Include Showdown.js from a CDN -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
     <script>
diff --git a/docs/features/mermaid-diagrams.html b/docs/features/mermaid-diagrams.html
index 06f2898..3307000 100644
--- a/docs/features/mermaid-diagrams.html
+++ b/docs/features/mermaid-diagrams.html
@@ -1,13 +1,14 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Interactive Diagrams with Mermaid.js - Getting Interactive with GitHub
       Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -116,7 +117,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <!-- Include Mermaid.js from a CDN -->
     <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
     <script>
diff --git a/docs/features/notes-app.html b/docs/features/notes-app.html
index f783e75..b3704aa 100644
--- a/docs/features/notes-app.html
+++ b/docs/features/notes-app.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Persistent Notes App - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #note-input {
         width: 100%;
@@ -141,7 +142,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const noteInput = document.getElementById("note-input");
       const addNoteBtn = document.getElementById("add-note-btn");
diff --git a/docs/features/page-state.html b/docs/features/page-state.html
index e4112ac..01d16fc 100644
--- a/docs/features/page-state.html
+++ b/docs/features/page-state.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Page State Memory - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #state-form label {
         display: block;
@@ -151,7 +152,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const form = document.getElementById("state-form");
diff --git a/docs/features/spa-routing.html b/docs/features/spa-routing.html
index 589559c..2fd94d2 100644
--- a/docs/features/spa-routing.html
+++ b/docs/features/spa-routing.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Client-Side Routing (SPA-style) - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       .page-content {
         display: none;
@@ -135,7 +136,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const contentPages = document.querySelectorAll(".page-content");
diff --git a/docs/features/theme-switcher.html b/docs/features/theme-switcher.html
index 771f144..e7f43e5 100644
--- a/docs/features/theme-switcher.html
+++ b/docs/features/theme-switcher.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Theme Switcher (Light/Dark) - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -128,6 +129,6 @@ <h4>3. The JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/docs/_footer.html b/docs/footer.html
similarity index 100%
rename from docs/_footer.html
rename to docs/footer.html
diff --git a/docs/games/clicker.html b/docs/games/clicker.html
index fb84536..6706741 100644
--- a/docs/games/clicker.html
+++ b/docs/games/clicker.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clicker Game - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -119,7 +120,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const scoreDisplay = document.getElementById("score");
       const clickerBtn = document.getElementById("clicker-btn");
diff --git a/docs/games/drag-drop-puzzle.html b/docs/games/drag-drop-puzzle.html
index 9a66632..9f30c54 100644
--- a/docs/games/drag-drop-puzzle.html
+++ b/docs/games/drag-drop-puzzle.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Drag and Drop Puzzle - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .puzzle-container {
@@ -69,7 +70,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const piecePool = document.getElementById("piece-pool");
       const puzzleBoard = document.getElementById("puzzle-board");
diff --git a/docs/games/index.html b/docs/games/index.html
index 3791bfd..cf346bb 100644
--- a/docs/games/index.html
+++ b/docs/games/index.html
@@ -1,11 +1,12 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Games - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/games/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -84,6 +85,6 @@ <h3>Wordle Clone</h3>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/docs/games/maze.html b/docs/games/maze.html
index 830bc91..15430e8 100644
--- a/docs/games/maze.html
+++ b/docs/games/maze.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Maze Navigation - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -67,7 +68,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const mazeContainer = document.getElementById("maze-container");
       const restartBtn = document.getElementById("restart-btn");
diff --git a/docs/games/memory-match.html b/docs/games/memory-match.html
index 7a7e89d..8c7d49e 100644
--- a/docs/games/memory-match.html
+++ b/docs/games/memory-match.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Memory Match - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -105,7 +106,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const gameBoard = document.getElementById("memory-game-board");
       const statusDisplay = document.getElementById("game-status");
diff --git a/docs/games/number-guessing.html b/docs/games/number-guessing.html
index c5a19a7..e75fc6f 100644
--- a/docs/games/number-guessing.html
+++ b/docs/games/number-guessing.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Number Guessing Game - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +74,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const guessForm = document.getElementById("guess-form");
       const guessInput = document.getElementById("guess-input");
diff --git a/docs/games/rock-paper-scissors.html b/docs/games/rock-paper-scissors.html
index 21cc5a5..43f29a0 100644
--- a/docs/games/rock-paper-scissors.html
+++ b/docs/games/rock-paper-scissors.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Rock, Paper, Scissors - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -69,7 +70,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const choiceButtons = document.querySelectorAll(".choices button");
       const resultDisplay = document.getElementById("result");
diff --git a/docs/games/simon-says.html b/docs/games/simon-says.html
index a84ce3b..98d63b3 100644
--- a/docs/games/simon-says.html
+++ b/docs/games/simon-says.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Simon Says - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +74,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const pads = document.querySelectorAll(".simon-pad");
       const startBtn = document.getElementById("start-btn");
diff --git a/docs/games/tic-tac-toe.html b/docs/games/tic-tac-toe.html
index 0c50b81..93559ca 100644
--- a/docs/games/tic-tac-toe.html
+++ b/docs/games/tic-tac-toe.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tic Tac Toe - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -148,7 +149,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const statusDisplay = document.getElementById("game-status");
       const restartBtn = document.getElementById("restart-btn");
diff --git a/docs/games/typing-speed.html b/docs/games/typing-speed.html
index b8e4080..0c609f6 100644
--- a/docs/games/typing-speed.html
+++ b/docs/games/typing-speed.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Typing Speed Test - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -74,7 +75,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const sampleTextDisplay = document.getElementById("sample-text");
       const typingInput = document.getElementById("typing-input");
diff --git a/docs/games/wordle.html b/docs/games/wordle.html
index cee1d14..ed84ee4 100644
--- a/docs/games/wordle.html
+++ b/docs/games/wordle.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wordle Clone - Games</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +74,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const grid = document.getElementById("wordle-grid");
       const statusDisplay = document.getElementById("game-status");
diff --git a/docs/guides/best-practices.html b/docs/guides/best-practices.html
index 89fa77b..407e9fa 100644
--- a/docs/guides/best-practices.html
+++ b/docs/guides/best-practices.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Best Practices - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -99,6 +100,6 @@ <h2>Security</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/docs/guides/markdown-usage.html b/docs/guides/markdown-usage.html
index 30ec725..f704afe 100644
--- a/docs/guides/markdown-usage.html
+++ b/docs/guides/markdown-usage.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Markdown Usage - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -60,6 +61,6 @@ <h2>Live Conversion</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/docs/guides/resources.html b/docs/guides/resources.html
index 1fe5ea6..8adfa02 100644
--- a/docs/guides/resources.html
+++ b/docs/guides/resources.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resources - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -107,6 +108,6 @@ <h2>Tools & Platforms</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/docs/_header.html b/docs/header.html
similarity index 100%
rename from docs/_header.html
rename to docs/header.html
diff --git a/docs/index.html b/docs/index.html
index 9f714a4..12f8696 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Getting Interactive with GitHub Pages</title>
diff --git a/docs/_nav.html b/docs/nav.html
similarity index 100%
rename from docs/_nav.html
rename to docs/nav.html
diff --git a/docs/script.js b/docs/script.js
index 3f5d164..00a6def 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -57,9 +57,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const initializePage = async () => {
     // Define components to load
     const components = [
-      { url: "_header.html", id: "main-header" },
-      { url: "_nav.html", id: "main-nav" },
-      { url: "_footer.html", id: "main-footer" },
+      { url: "/header.html", id: "main-header" },
+      { url: "/nav.html", id: "main-nav" },
+      { url: "/footer.html", id: "main-footer" },
     ];
 
     // Load all components in parallel
diff --git a/docs/tools/tech-tools.html b/docs/tools/tech-tools.html
index c468267..41bd3f4 100644
--- a/docs/tools/tech-tools.html
+++ b/docs/tools/tech-tools.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/static-magic/">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tech Tools - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       .tool-nav {
         margin-bottom: 20px;
@@ -91,7 +92,7 @@ <h3>Text Counter</h3>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         // Tab switching logic
