Spaces:

danielrosehill
/

AI-Project-Index

Running

danielrosehill Claude commited on Oct 26, 2025

Commit

f1ce0e5

1 Parent(s): 9f442c4

Replace emojis with Font Awesome icons and add top navigation bar

- Replaced amateur-looking emoji icons with professional Font Awesome icons
- Added sticky top navigation bar with category tabs for easier navigation
- Updated all 12 category pages with consistent header and navigation
- Improved header layout with GitHub and Website links
- Added responsive design for mobile navigation
- Created update_pages.py script to automate page updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Files changed (15) hide show

automation.html +28 -3
claude-code.html +28 -3
context.html +28 -3
demos.html +28 -2
documentation.html +28 -3
frameworks.html +28 -3
gemini.html +28 -3
index.html +40 -18
mcp.html +28 -3
miscellaneous.html +28 -3
pocs.html +28 -3
style.css +94 -6
system-prompts.html +28 -3
update_pages.py +132 -0
utilities.html +28 -3

automation.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Automation & Workflows - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>🔄 Automation & Workflows</h1>
             <p class="subtitle">N8N workflows and automation tools</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Automation & Workflows - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">N8N workflows and automation tools</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html" class="active"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

claude-code.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code Projects - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>💻 Claude Code Projects</h1>
             <p class="subtitle">Projects built with and for Claude Code CLI</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code Projects - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Projects built with and for Claude Code CLI</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html" class="active"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

context.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Context & Prompt Libraries - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>📚 Context & Prompt Libraries</h1>
             <p class="subtitle">Context repositories and prompt collections</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Context & Prompt Libraries - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Context repositories and prompt collections</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html" class="active"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

demos.html CHANGED Viewed

@@ -4,18 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Demos - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>Demos</h1>
             <p class="subtitle">Demonstrations of AI concepts and applications</p>
         </div>
     </header>
     <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search demo projects..." />

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Demos - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Demonstrations of AI concepts and applications</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html" class="active"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
     <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search demo projects..." />

documentation.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Documentation & Indexes - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>📖 Documentation & Indexes</h1>
             <p class="subtitle">Documentation projects and resource indexes</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Documentation & Indexes - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Documentation projects and resource indexes</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html" class="active"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

frameworks.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Frameworks & Tools - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>🛠️ Frameworks & Tools</h1>
             <p class="subtitle">Frameworks, tools, and utilities for AI development</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Frameworks & Tools - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Frameworks, tools, and utilities for AI development</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html" class="active"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

gemini.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gemini Projects - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>✨ Gemini Projects</h1>
             <p class="subtitle">Projects leveraging Google's Gemini AI</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gemini Projects - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Projects leveraging Google's Gemini AI</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html" class="active"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

index.html CHANGED Viewed

@@ -4,21 +4,43 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Projects Index - Daniel Rosehill</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>AI Projects Index</h1>
-            <p class="subtitle">A comprehensive collection of AI tools, agents, and utilities</p>
-            <div class="header-links">
-                <a href="https://github.com/danielrosehill" target="_blank">GitHub</a>
-                <a href="https://github.com/danielrosehill/Github-Master-Index" target="_blank">Master Index</a>
-                <a href="https://danielrosehill.com" target="_blank">Website</a>
             </div>
         </div>
     </header>
     <main class="container">
         <section class="search-section">
             <input type="text" id="searchInput" placeholder="Search projects..." />
@@ -26,7 +48,7 @@
         <section class="categories-grid">
             <div class="category-card" data-category="demos">
-                <div class="category-icon">🎯</div>
                 <h2>Demos</h2>
                 <p class="count">17 projects</p>
                 <p>Demonstrations of AI concepts and applications</p>
@@ -34,7 +56,7 @@
             </div>
             <div class="category-card" data-category="pocs">
-                <div class="category-icon">🔬</div>
                 <h2>POCs</h2>
                 <p class="count">12 projects</p>
                 <p>Proof of concepts for AI systems and workflows</p>
@@ -42,7 +64,7 @@
             </div>
             <div class="category-card" data-category="system-prompts">
-                <div class="category-icon">⚙️</div>
                 <h2>System Prompts</h2>
                 <p class="count">30 projects</p>
                 <p>System prompts for configuring AI assistants and agents</p>
@@ -50,7 +72,7 @@
             </div>
             <div class="category-card" data-category="frameworks">
-                <div class="category-icon">🛠️</div>
                 <h2>Frameworks & Tools</h2>
                 <p class="count">29 projects</p>
                 <p>Frameworks, tools, and utilities for AI development</p>
@@ -58,7 +80,7 @@
             </div>
             <div class="category-card" data-category="claude-code">
-                <div class="category-icon">💻</div>
                 <h2>Claude Code Projects</h2>
                 <p class="count">15 projects</p>
                 <p>Projects built with and for Claude Code CLI</p>
@@ -66,7 +88,7 @@
             </div>
             <div class="category-card" data-category="mcp">
-                <div class="category-icon">🔌</div>
                 <h2>MCP Projects</h2>
                 <p class="count">7 projects</p>
                 <p>Model Context Protocol servers and implementations</p>
@@ -74,7 +96,7 @@
             </div>
             <div class="category-card" data-category="gemini">
-                <div class="category-icon">✨</div>
                 <h2>Gemini Projects</h2>
                 <p class="count">5 projects</p>
                 <p>Projects leveraging Google's Gemini AI</p>
@@ -82,7 +104,7 @@
             </div>
             <div class="category-card" data-category="automation">
-                <div class="category-icon">🔄</div>
                 <h2>Automation & Workflows</h2>
                 <p class="count">9 projects</p>
                 <p>N8N workflows and automation tools</p>
@@ -90,7 +112,7 @@
             </div>
             <div class="category-card" data-category="context">
-                <div class="category-icon">📚</div>
                 <h2>Context & Prompt Libraries</h2>
                 <p class="count">6 projects</p>
                 <p>Context repositories and prompt collections</p>
@@ -98,7 +120,7 @@
             </div>
             <div class="category-card" data-category="utilities">
-                <div class="category-icon">🔧</div>
                 <h2>Tools & Utilities</h2>
                 <p class="count">10 projects</p>
                 <p>Standalone tools and utility applications</p>
@@ -106,7 +128,7 @@
             </div>
             <div class="category-card" data-category="documentation">
-                <div class="category-icon">📖</div>
                 <h2>Documentation & Indexes</h2>
                 <p class="count">11 projects</p>
                 <p>Documentation projects and resource indexes</p>
@@ -114,7 +136,7 @@
             </div>
             <div class="category-card" data-category="miscellaneous">
-                <div class="category-icon">🌟</div>
                 <h2>Miscellaneous</h2>
                 <p class="count">32 projects</p>
                 <p>Various AI experiments and unique projects</p>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Projects Index - Daniel Rosehill</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
             </div>
+            <p class="subtitle">A comprehensive collection of AI tools, agents, and utilities</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html" class="active"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
     <main class="container">
         <section class="search-section">
             <input type="text" id="searchInput" placeholder="Search projects..." />
         <section class="categories-grid">
             <div class="category-card" data-category="demos">
+                <div class="category-icon"><i class="fas fa-flask"></i></div>
                 <h2>Demos</h2>
                 <p class="count">17 projects</p>
                 <p>Demonstrations of AI concepts and applications</p>
             </div>
             <div class="category-card" data-category="pocs">
+                <div class="category-icon"><i class="fas fa-lightbulb"></i></div>
                 <h2>POCs</h2>
                 <p class="count">12 projects</p>
                 <p>Proof of concepts for AI systems and workflows</p>
             </div>
             <div class="category-card" data-category="system-prompts">
+                <div class="category-icon"><i class="fas fa-cog"></i></div>
                 <h2>System Prompts</h2>
                 <p class="count">30 projects</p>
                 <p>System prompts for configuring AI assistants and agents</p>
             </div>
             <div class="category-card" data-category="frameworks">
+                <div class="category-icon"><i class="fas fa-toolbox"></i></div>
                 <h2>Frameworks & Tools</h2>
                 <p class="count">29 projects</p>
                 <p>Frameworks, tools, and utilities for AI development</p>
             </div>
             <div class="category-card" data-category="claude-code">
+                <div class="category-icon"><i class="fas fa-terminal"></i></div>
                 <h2>Claude Code Projects</h2>
                 <p class="count">15 projects</p>
                 <p>Projects built with and for Claude Code CLI</p>
             </div>
             <div class="category-card" data-category="mcp">
+                <div class="category-icon"><i class="fas fa-plug"></i></div>
                 <h2>MCP Projects</h2>
                 <p class="count">7 projects</p>
                 <p>Model Context Protocol servers and implementations</p>
             </div>
             <div class="category-card" data-category="gemini">
+                <div class="category-icon"><i class="fas fa-star"></i></div>
                 <h2>Gemini Projects</h2>
                 <p class="count">5 projects</p>
                 <p>Projects leveraging Google's Gemini AI</p>
             </div>
             <div class="category-card" data-category="automation">
+                <div class="category-icon"><i class="fas fa-sync"></i></div>
                 <h2>Automation & Workflows</h2>
                 <p class="count">9 projects</p>
                 <p>N8N workflows and automation tools</p>
             </div>
             <div class="category-card" data-category="context">
+                <div class="category-icon"><i class="fas fa-book"></i></div>
                 <h2>Context & Prompt Libraries</h2>
                 <p class="count">6 projects</p>
                 <p>Context repositories and prompt collections</p>
             </div>
             <div class="category-card" data-category="utilities">
+                <div class="category-icon"><i class="fas fa-wrench"></i></div>
                 <h2>Tools & Utilities</h2>
                 <p class="count">10 projects</p>
                 <p>Standalone tools and utility applications</p>
             </div>
             <div class="category-card" data-category="documentation">
+                <div class="category-icon"><i class="fas fa-file-alt"></i></div>
                 <h2>Documentation & Indexes</h2>
                 <p class="count">11 projects</p>
                 <p>Documentation projects and resource indexes</p>
             </div>
             <div class="category-card" data-category="miscellaneous">
+                <div class="category-icon"><i class="fas fa-ellipsis-h"></i></div>
                 <h2>Miscellaneous</h2>
                 <p class="count">32 projects</p>
                 <p>Various AI experiments and unique projects</p>

mcp.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MCP Projects - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>🔌 MCP Projects</h1>
             <p class="subtitle">Model Context Protocol servers and implementations</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MCP Projects - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Model Context Protocol servers and implementations</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html" class="active"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

miscellaneous.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Miscellaneous - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>🌟 Miscellaneous</h1>
             <p class="subtitle">Various AI experiments and unique projects</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Miscellaneous - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Various AI experiments and unique projects</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html" class="active"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

pocs.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>POCs - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>POCs</h1>
             <p class="subtitle">Proof of concepts for AI systems and workflows</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>POCs - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Proof of concepts for AI systems and workflows</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html" class="active"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

style.css CHANGED Viewed

@@ -35,22 +35,28 @@ body {
 header {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
-    padding: 2rem 0;
     box-shadow: var(--shadow);
-    margin-bottom: 3rem;
 }
 header h1 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary-color);
-    margin-bottom: 0.5rem;
 }
 .subtitle {
-    font-size: 1.125rem;
     color: var(--text-secondary);
-    margin-bottom: 1rem;
 }
 .header-links {
@@ -64,12 +70,74 @@ header h1 {
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
 }
 .header-links a:hover {
     color: var(--hover-color);
 }
 /* Main Content */
 main {
     background: var(--background);
@@ -128,6 +196,11 @@ main {
 .category-icon {
     font-size: 2.5rem;
     margin-bottom: 1rem;
 }
 .category-card h2 {
@@ -289,12 +362,27 @@ footer a:hover {
 /* Responsive Design */
 @media (max-width: 768px) {
     header h1 {
         font-size: 1.75rem;
     }
     .subtitle {
-        font-size: 1rem;
     }
     .categories-grid {

 header {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
+    padding: 1.5rem 0;
     box-shadow: var(--shadow);
+}
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
 }
 header h1 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary-color);
+    margin: 0;
 }
 .subtitle {
+    font-size: 1rem;
     color: var(--text-secondary);
+    margin: 0;
 }
 .header-links {
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
+    white-space: nowrap;
 }
 .header-links a:hover {
     color: var(--hover-color);
 }
+.header-links i {
+    margin-right: 0.25rem;
+}
+/* Top Navigation */
+.top-nav {
+    background: var(--primary-color);
+    box-shadow: var(--shadow);
+    margin-bottom: 3rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+.nav-links {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    padding: 0.75rem 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary-color) transparent;
+}
+.nav-links::-webkit-scrollbar {
+    height: 4px;
+}
+.nav-links::-webkit-scrollbar-track {
+    background: transparent;
+}
+.nav-links::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+    border-radius: 2px;
+}
+.nav-links a {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.nav-links a:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+}
+.nav-links a.active {
+    background: rgba(255, 255, 255, 0.25);
+    color: white;
+    font-weight: 600;
+}
 /* Main Content */
 main {
     background: var(--background);
 .category-icon {
     font-size: 2.5rem;
     margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+.category-icon i {
+    display: block;
 }
 .category-card h2 {
 /* Responsive Design */
 @media (max-width: 768px) {
+    .header-top {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
     header h1 {
         font-size: 1.75rem;
     }
     .subtitle {
+        font-size: 0.9rem;
+    }
+    .header-links {
+        gap: 1rem;
+    }
+    .nav-links a {
+        font-size: 0.85rem;
+        padding: 0.5rem 0.75rem;
     }
     .categories-grid {

system-prompts.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>System Prompts - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>System Prompts</h1>
             <p class="subtitle">System prompts for configuring AI assistants and agents</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>System Prompts - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">System prompts for configuring AI assistants and agents</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html" class="active"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

update_pages.py ADDED Viewed

	@@ -0,0 +1,132 @@

+#!/usr/bin/env python3
+"""Script to update all category HTML pages with Font Awesome and navigation bar."""
+import re
+from pathlib import Path
+# Define category pages and their active nav items
+CATEGORIES = {
+    'pocs.html': 'POCs',
+    'system-prompts.html': 'System Prompts',
+    'frameworks.html': 'Frameworks',
+    'claude-code.html': 'Claude Code',
+    'mcp.html': 'MCP',
+    'gemini.html': 'Gemini',
+    'automation.html': 'Automation',
+    'context.html': 'Context',
+    'utilities.html': 'Utilities',
+    'documentation.html': 'Docs',
+    'miscellaneous.html': 'More'
+}
+# Subtitles for each category
+SUBTITLES = {
+    'pocs.html': 'Proof of concepts for AI systems and workflows',
+    'system-prompts.html': 'System prompts for configuring AI assistants and agents',
+    'frameworks.html': 'Frameworks, tools, and utilities for AI development',
+    'claude-code.html': 'Projects built with and for Claude Code CLI',
+    'mcp.html': 'Model Context Protocol servers and implementations',
+    'gemini.html': 'Projects leveraging Google\'s Gemini AI',
+    'automation.html': 'N8N workflows and automation tools',
+    'context.html': 'Context repositories and prompt collections',
+    'utilities.html': 'Standalone tools and utility applications',
+    'documentation.html': 'Documentation projects and resource indexes',
+    'miscellaneous.html': 'Various AI experiments and unique projects'
+}
+NAV_BAR = '''    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"{demos_active}><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"{pocs_active}><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"{system_prompts_active}><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"{frameworks_active}><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"{claude_code_active}><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"{mcp_active}><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"{gemini_active}><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"{automation_active}><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"{context_active}><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html"{utilities_active}><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"{documentation_active}><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"{miscellaneous_active}><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>'''
+def update_page(file_path: Path, active_nav: str, subtitle: str):
+    """Update a single category page."""
+    content = file_path.read_text()
+    # Add Font Awesome if not present
+    if 'font-awesome' not in content:
+        content = content.replace(
+            '<link rel="stylesheet" href="style.css">',
+            '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">\n    <link rel="stylesheet" href="style.css">'
+        )
+    # Update header structure
+    header_pattern = r'<header>.*?</header>'
+    new_header = f'''<header>
+        <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
+            <p class="subtitle">{subtitle}</p>
+        </div>
+    </header>'''
+    content = re.sub(header_pattern, new_header, content, flags=re.DOTALL)
+    # Create navigation with active state
+    active_states = {
+        'demos_active': ' class="active"' if active_nav == 'Demos' else '',
+        'pocs_active': ' class="active"' if active_nav == 'POCs' else '',
+        'system_prompts_active': ' class="active"' if active_nav == 'System Prompts' else '',
+        'frameworks_active': ' class="active"' if active_nav == 'Frameworks' else '',
+        'claude_code_active': ' class="active"' if active_nav == 'Claude Code' else '',
+        'mcp_active': ' class="active"' if active_nav == 'MCP' else '',
+        'gemini_active': ' class="active"' if active_nav == 'Gemini' else '',
+        'automation_active': ' class="active"' if active_nav == 'Automation' else '',
+        'context_active': ' class="active"' if active_nav == 'Context' else '',
+        'utilities_active': ' class="active"' if active_nav == 'Utilities' else '',
+        'documentation_active': ' class="active"' if active_nav == 'Docs' else '',
+        'miscellaneous_active': ' class="active"' if active_nav == 'More' else ''
+    }
+    nav_html = NAV_BAR.format(**active_states)
+    # Add navigation after header if not present
+    if '<nav class="top-nav">' not in content:
+        content = content.replace('</header>', f'</header>\n\n{nav_html}')
+    else:
+        # Replace existing nav
+        nav_pattern = r'<nav class="top-nav">.*?</nav>'
+        content = re.sub(nav_pattern, nav_html, content, flags=re.DOTALL)
+    # Remove old back link
+    content = re.sub(r'<a href="index.html" class="back-link">← Back to Index</a>\s*', '', content)
+    file_path.write_text(content)
+    print(f"Updated {file_path.name}")
+def main():
+    """Update all category pages."""
+    script_dir = Path(__file__).parent
+    for filename, active_nav in CATEGORIES.items():
+        file_path = script_dir / filename
+        if file_path.exists():
+            subtitle = SUBTITLES.get(filename, '')
+            update_page(file_path, active_nav, subtitle)
+        else:
+            print(f"Warning: {filename} not found")
+    print("\nAll pages updated successfully!")
+if __name__ == '__main__':
+    main()

utilities.html CHANGED Viewed

@@ -4,19 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tools & Utilities - AI Projects Index</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
-            <h1>🔧 Tools & Utilities</h1>
             <p class="subtitle">Standalone tools and utility applications</p>
         </div>
     </header>
-    <main class="container">
-        <a href="index.html" class="back-link">← Back to Index</a>
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tools & Utilities - AI Projects Index</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <div class="container">
+            <div class="header-top">
+                <h1>AI Projects Index</h1>
+                <div class="header-links">
+                    <a href="https://github.com/danielrosehill" target="_blank"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://danielrosehill.com" target="_blank"><i class="fas fa-globe"></i> Website</a>
+                </div>
+            </div>
             <p class="subtitle">Standalone tools and utility applications</p>
         </div>
     </header>
+    <nav class="top-nav">
+        <div class="container">
+            <div class="nav-links">
+                <a href="index.html"><i class="fas fa-home"></i> Home</a>
+                <a href="demos.html"><i class="fas fa-flask"></i> Demos</a>
+                <a href="pocs.html"><i class="fas fa-lightbulb"></i> POCs</a>
+                <a href="system-prompts.html"><i class="fas fa-cog"></i> System Prompts</a>
+                <a href="frameworks.html"><i class="fas fa-toolbox"></i> Frameworks</a>
+                <a href="claude-code.html"><i class="fas fa-terminal"></i> Claude Code</a>
+                <a href="mcp.html"><i class="fas fa-plug"></i> MCP</a>
+                <a href="gemini.html"><i class="fas fa-star"></i> Gemini</a>
+                <a href="automation.html"><i class="fas fa-sync"></i> Automation</a>
+                <a href="context.html"><i class="fas fa-book"></i> Context</a>
+                <a href="utilities.html" class="active"><i class="fas fa-wrench"></i> Utilities</a>
+                <a href="documentation.html"><i class="fas fa-file-alt"></i> Docs</a>
+                <a href="miscellaneous.html"><i class="fas fa-ellipsis-h"></i> More</a>
+            </div>
+        </div>
+    </nav>
+    <main class="container">
         <section class="search-section">
             <input type="text" id="projectSearch" placeholder="Search projects..." />
         </section>