From 6697a6400f19d0383134d7644a9eef3a0b97e64f 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 14:37:58 +0000
Subject: [PATCH] Fix: Use relative paths for assets and components

Corrected asset paths across the site to be relative instead of absolute. This ensures that CSS, JavaScript, and HTML components load correctly when the site is hosted in a subdirectory, such as on GitHub Pages.

- Modified `docs/script.js` to fetch navigation components using relative paths.
- Updated all HTML files in subdirectories (`features`, `games`, `guides`, `tools`) to link to the main stylesheet and script using relative paths (`../`).
---
 docs/features/browser-apis.html       | 4 ++--
 docs/features/clipboard.html          | 4 ++--
 docs/features/drag-drop.html          | 4 ++--
 docs/features/filter-search.html      | 4 ++--
 docs/features/forms.html              | 4 ++--
 docs/features/json-viewer.html        | 4 ++--
 docs/features/live-js-runner.html     | 4 ++--
 docs/features/markdown-converter.html | 4 ++--
 docs/features/mermaid-diagrams.html   | 4 ++--
 docs/features/notes-app.html          | 4 ++--
 docs/features/page-state.html         | 4 ++--
 docs/features/spa-routing.html        | 4 ++--
 docs/features/theme-switcher.html     | 4 ++--
 docs/games/clicker.html               | 4 ++--
 docs/games/drag-drop-puzzle.html      | 4 ++--
 docs/games/index.html                 | 4 ++--
 docs/games/maze.html                  | 4 ++--
 docs/games/memory-match.html          | 4 ++--
 docs/games/number-guessing.html       | 4 ++--
 docs/games/rock-paper-scissors.html   | 4 ++--
 docs/games/simon-says.html            | 4 ++--
 docs/games/tic-tac-toe.html           | 4 ++--
 docs/games/typing-speed.html          | 4 ++--
 docs/games/wordle.html                | 4 ++--
 docs/guides/best-practices.html       | 4 ++--
 docs/guides/markdown-usage.html       | 4 ++--
 docs/guides/resources.html            | 4 ++--
 docs/script.js                        | 6 +++---
 docs/tools/tech-tools.html            | 4 ++--
 29 files changed, 59 insertions(+), 59 deletions(-)
diff --git a/docs/features/browser-apis.html b/docs/features/browser-apis.html
index 4a103da..8c52951 100644
--- a/docs/features/browser-apis.html
+++ b/docs/features/browser-apis.html
@@ -4,7 +4,7 @@
     <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 +111,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 663c380..8f3c2ff 100644
--- a/docs/features/clipboard.html
+++ b/docs/features/clipboard.html
@@ -4,7 +4,7 @@
     <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 +99,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 621078e..6e7d8c4 100644
--- a/docs/features/drag-drop.html
+++ b/docs/features/drag-drop.html
@@ -4,7 +4,7 @@
     <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 +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 draggables = document.querySelectorAll(".draggable");
       const lanes = document.querySelectorAll(".lane");
diff --git a/docs/features/filter-search.html b/docs/features/filter-search.html
index af833f3..9d2fcc8 100644
--- a/docs/features/filter-search.html
+++ b/docs/features/filter-search.html
@@ -6,7 +6,7 @@
     <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 +109,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 b1ce945..b03f199 100644
--- a/docs/features/forms.html
+++ b/docs/features/forms.html
@@ -4,7 +4,7 @@
     <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 +101,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 de9162a..9df88df 100644
--- a/docs/features/json-viewer.html
+++ b/docs/features/json-viewer.html
@@ -6,7 +6,7 @@
     <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 +138,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 3168e9a..a46c48b 100644
--- a/docs/features/live-js-runner.html
+++ b/docs/features/live-js-runner.html
@@ -6,7 +6,7 @@
     <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 +109,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 476d68b..dd62b68 100644
--- a/docs/features/markdown-converter.html
+++ b/docs/features/markdown-converter.html
@@ -6,7 +6,7 @@
     <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 +123,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 1be8a55..06f2898 100644
--- a/docs/features/mermaid-diagrams.html
+++ b/docs/features/mermaid-diagrams.html
@@ -7,7 +7,7 @@
       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 +116,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 51759ae..f783e75 100644
--- a/docs/features/notes-app.html
+++ b/docs/features/notes-app.html
@@ -4,7 +4,7 @@
     <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 +141,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 fb3f3b1..e4112ac 100644
--- a/docs/features/page-state.html
+++ b/docs/features/page-state.html
@@ -4,7 +4,7 @@
     <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 +151,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 eaff669..589559c 100644
--- a/docs/features/spa-routing.html
+++ b/docs/features/spa-routing.html
@@ -6,7 +6,7 @@
     <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 +135,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 96b6d1d..771f144 100644
--- a/docs/features/theme-switcher.html
+++ b/docs/features/theme-switcher.html
@@ -6,7 +6,7 @@
     <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 +128,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/games/clicker.html b/docs/games/clicker.html
index ba06afe..fb84536 100644
--- a/docs/games/clicker.html
+++ b/docs/games/clicker.html
@@ -4,7 +4,7 @@
     <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 +119,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 abdb32d..9a66632 100644
--- a/docs/games/drag-drop-puzzle.html
+++ b/docs/games/drag-drop-puzzle.html
@@ -4,7 +4,7 @@
     <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 +69,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 926866b..3791bfd 100644
--- a/docs/games/index.html
+++ b/docs/games/index.html
@@ -4,7 +4,7 @@
     <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" />
   </head>
   <body>
@@ -84,6 +84,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 974bc6a..830bc91 100644
--- a/docs/games/maze.html
+++ b/docs/games/maze.html
@@ -4,7 +4,7 @@
     <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 +67,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 e6c004a..7a7e89d 100644
--- a/docs/games/memory-match.html
+++ b/docs/games/memory-match.html
@@ -4,7 +4,7 @@
     <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 +105,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 8499306..c5a19a7 100644
--- a/docs/games/number-guessing.html
+++ b/docs/games/number-guessing.html
@@ -4,7 +4,7 @@
     <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 +73,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 12f73d8..21cc5a5 100644
--- a/docs/games/rock-paper-scissors.html
+++ b/docs/games/rock-paper-scissors.html
@@ -4,7 +4,7 @@
     <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 +69,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 c4f0f9c..a84ce3b 100644
--- a/docs/games/simon-says.html
+++ b/docs/games/simon-says.html
@@ -4,7 +4,7 @@
     <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 +73,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 e2303e9..0c50b81 100644
--- a/docs/games/tic-tac-toe.html
+++ b/docs/games/tic-tac-toe.html
@@ -4,7 +4,7 @@
     <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 +148,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 7c68002..b8e4080 100644
--- a/docs/games/typing-speed.html
+++ b/docs/games/typing-speed.html
@@ -4,7 +4,7 @@
     <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 +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 sampleTextDisplay = document.getElementById("sample-text");
       const typingInput = document.getElementById("typing-input");
diff --git a/docs/games/wordle.html b/docs/games/wordle.html
index 9ba155e..cee1d14 100644
--- a/docs/games/wordle.html
+++ b/docs/games/wordle.html
@@ -4,7 +4,7 @@
     <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 +73,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 2be05c7..89fa77b 100644
--- a/docs/guides/best-practices.html
+++ b/docs/guides/best-practices.html
@@ -4,7 +4,7 @@
     <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 +99,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 f72c17f..30ec725 100644
--- a/docs/guides/markdown-usage.html
+++ b/docs/guides/markdown-usage.html
@@ -4,7 +4,7 @@
     <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 +60,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 b155b60..1fe5ea6 100644
--- a/docs/guides/resources.html
+++ b/docs/guides/resources.html
@@ -4,7 +4,7 @@
     <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 +107,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/script.js b/docs/script.js
index e9a7a21..3f5d164 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 7fa7315..c468267 100644
--- a/docs/tools/tech-tools.html
+++ b/docs/tools/tech-tools.html
@@ -4,7 +4,7 @@
     <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 +91,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
