Spaces:

garywelz
/

programming_framework

Running

App Files Files Community

garywelz commited on Aug 19

Commit

26fe580

verified ·

1 Parent(s): e6397ce

Upload 2 files

Browse files

Files changed (2) hide show

README.md +8 -6
index.html +323 -188

README.md CHANGED Viewed

@@ -1,11 +1,13 @@
 ---
-title: Programming Framework
-emoji: 🚀
-colorFrom: blue
-colorTo: purple
-sdk: static
 pinned: false
-license: mit
 short_description: Cross-disciplinary methodology for complex systems
 ---

 ---
+title: "Programming Framework for Systematic Analysis"
+emoji: "🎨"
+colorFrom: "blue"
+colorTo: "green"
+sdk: "static"
+sdk_version: "latest"
+app_file: "index.html"
 pinned: false
+author: "garywelz"
 short_description: Cross-disciplinary methodology for complex systems
 ---

index.html CHANGED Viewed

@@ -3,206 +3,341 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Programming Framework</title>
-    <link rel="stylesheet" href="style.css">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
-    <script>mermaid.initialize({startOnLoad:true});</script>
 </head>
 <body>
     <div class="container">
-        <header>
-            <h1>🚀 Programming Framework</h1>
-            <p>A cross-disciplinary visualization methodology for complex systems using Mermaid Markdown and a universal five-color code.</p>
-        </header>
-        <nav class="tabs">
-            <button class="tab-btn active" data-tab="overview">Overview</button>
-            <button class="tab-btn" data-tab="examples">Examples</button>
-            <button class="tab-btn" data-tab="resources">Resources</button>
-        </nav>
-        <main>
-            <!-- Overview Tab -->
-            <div class="tab-content active" id="overview">
-                <div class="card">
-                    <h2>Universal Color Coding System</h2>
-                    <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; border-left: 4px solid #007bff;">
-                        <div style="overflow-x: auto;">
-                            <table style="width: 100%; border-collapse: collapse; margin: 1rem 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                                <thead>
-                                    <tr style="background: #007bff; color: white;">
-                                        <th style="padding: 1rem; text-align: left; border: 1px solid #dee2e6; font-weight: 600;">Color Category</th>
-                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Biology</th>
-                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Chemistry</th>
-                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Computer Science</th>
-                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Physics</th>
-                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Mathematics</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr style="background: rgba(255, 107, 107, 0.1);">
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
-                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #ff6b6b; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
-                                            Red<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#ff6b6b)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Triggers & Inputs</span>
-                                        </td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Environmental signals<br>Nutrient availability<br>Stress conditions<br>Hormonal cues</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Reactant supply<br>Temperature<br>Pressure<br>Catalyst addition</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Input data<br>User commands<br>System parameters<br>External APIs</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Energy input<br>Force application<br>Field strength<br>Initial conditions</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Axioms<br>Given conditions<br>Initial values<br>Boundary conditions</td>
-                                    </tr>
-                                    <tr style="background: rgba(255, 212, 59, 0.1);">
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
-                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #ffd43b; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
-                                            Yellow<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#ffd43b)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Structures & Objects</span>
-                                        </td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Enzymes<br>Receptor proteins<br>Regulatory complexes<br>Structural proteins</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Catalysts<br>Reaction vessels<br>Separation media<br>Analytical instruments</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Data structures<br>Algorithms<br>Functions<br>Classes</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Fields<br>Particles<br>Waves<br>Measurement devices</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Theorems<br>Methods<br>Formulas<br>Logical frameworks</td>
-                                    </tr>
-                                    <tr style="background: rgba(81, 207, 102, 0.1);">
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
-                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #51cf66; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
-                                            Green<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#51cf66)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Processing & Operations</span>
-                                        </td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Metabolic reactions<br>Signal transduction<br>Gene expression<br>Protein synthesis</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Chemical reactions<br>Equilibrium shifts<br>Phase changes<br>Kinetic processes</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Algorithm execution<br>Data processing<br>Logical operations<br>Control flow</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Wave propagation<br>Quantum operations<br>Energy transfer<br>Force interactions</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Logical steps<br>Calculations<br>Proof construction<br>Deductive reasoning</td>
-                                    </tr>
-                                    <tr style="background: rgba(116, 192, 252, 0.1);">
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
-                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #74c0fc; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
-                                            Blue<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#74c0fc)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Intermediates & States</span>
-                                        </td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Metabolites<br>Signaling molecules<br>Protein complexes<br>Regulatory states</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Reaction intermediates<br>Transition states<br>Product mixtures<br>Process streams</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Variables<br>Memory states<br>Function calls<br>Data transformations</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Quantum states<br>Energy levels<br>Wave functions<br>Measurement results</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Intermediate results<br>Sub-proofs<br>Calculated values<br>Logical states</td>
-                                    </tr>
-                                    <tr style="background: rgba(177, 151, 252, 0.1);">
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
-                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #b197fc; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
-                                            Violet<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#b197fc)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Products & Outputs</span>
-                                        </td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Biomolecules<br>Cellular responses<br>Organismal behaviors<br>Population changes</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Final products<br>Reaction yields<br>Process outputs<br>Analytical results</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Program outputs<br>Computed results<br>System responses<br>User interfaces</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Measured quantities<br>Physical phenomena<br>Energy states<br>System behaviors</td>
-                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Proven theorems<br>Mathematical results<br>Logical conclusions<br>Computed solutions</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <div style="background: #fff3cd; padding: 1rem; border-radius: 6px; margin-top: 1rem; border-left: 4px solid #ffc107;">
-                            <p style="margin: 0; font-size: 0.9em;"><strong>Note:</strong> Yellow nodes use black text for optimal readability, while all other colors use white text.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="card">
-                    <h2>Example: QuickSort Algorithm Process</h2>
-                    <p>This example demonstrates how the Programming Framework visualizes a computer science process using the universal color coding system:</p>
-                    <div class="mermaid">
-graph TD
-    A[Input Array] --> B[Choose Pivot]
-    B --> C[Partition Array]
-    C --> D[Recursive Sort Left]
-    C --> E[Recursive Sort Right]
-    D --> F[Merge Results]
-    E --> F
-    F --> G[Sorted Array]
-    style A fill:#ff6b6b,color:#fff
-    style B fill:#ffd43b,color:#000
-    style C fill:#51cf66,color:#fff
-    style D fill:#74c0fc,color:#fff
-    style E fill:#74c0fc,color:#fff
-    style F fill:#51cf66,color:#fff
-    style G fill:#b197fc,color:#fff
-                    </div>
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: .5rem 1rem; margin: 1rem 0 0; font-size: 10pt; color: #333;">
-                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
-                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#ff6b6b;"></span>Input Data
-                        </div>
-                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
-                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#ffd43b;"></span>Algorithm Structure
-                        </div>
-                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
-                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#51cf66;"></span>Processing Operations
-                        </div>
-                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
-                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#74c0fc;"></span>Intermediate States
-                        </div>
-                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
-                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#b197fc;"></span>Final Output
-                        </div>
-                    </div>
-                </div>
             </div>
-            <!-- Examples Tab -->
-            <div class="tab-content" id="examples">
-                <div class="card">
-                    <h2>Explore Examples</h2>
-                    <ul>
-                        <li><a href="programming_framework_article.html" target="_blank">Full article with biology examples</a></li>
-                        <li><a href="biology_processes.html" target="_blank">Biology processes (GLMP examples)</a></li>
-                        <li><a href="chemistry_examples.html" target="_blank">Chemistry examples</a></li>
-                        <li><a href="computer_science_processes.html" target="_blank">Computer Science processes</a></li>
-                        <li><a href="physics_processes.html" target="_blank">Physics processes</a></li>
-                        <li><a href="mathematics_processes.html" target="_blank">Mathematics processes</a></li>
-                    </ul>
                 </div>
             </div>
-            <!-- Resources Tab -->
-            <div class="tab-content" id="resources">
-                <div class="card">
-                    <h2>Resources</h2>
-                    <div class="resources-grid">
-                        <div class="resource">
-                            <h3>Documentation</h3>
-                            <ul>
-                                <li><a href="programming_framework_article.html" target="_blank">Academic Article</a></li>
-                                <li><a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank">GLMP Space (biology evidence base)</a></li>
-                                <li><a href="https://github.com/garywelz/glmp" target="_blank">GLMP GitHub</a></li>
-                            </ul>
-                        </div>
-                        <div class="resource">
-                            <h3>Discipline Pages</h3>
-                            <ul>
-                                <li><a href="biology_processes.html" target="_blank">Biology</a></li>
-                                <li><a href="chemistry_examples.html" target="_blank">Chemistry</a></li>
-                                <li><a href="computer_science_processes.html" target="_blank">Computer Science</a></li>
-                                <li><a href="physics_processes.html" target="_blank">Physics</a></li>
-                                <li><a href="mathematics_processes.html" target="_blank">Mathematics</a></li>
-                            </ul>
-                        </div>
                     </div>
                 </div>
             </div>
-        </main>
-    </div>
-    <script>
-        // Tab functionality
-        document.querySelectorAll('.tab-btn').forEach(button => {
-            button.addEventListener('click', () => {
-                document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-                document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
-                button.classList.add('active');
-                const tabId = button.getAttribute('data-tab');
-                document.getElementById(tabId).classList.add('active');
-            });
-        });
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Programming Framework - Systematic Analysis of Complex Systems</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .main-content {
+            background: white;
+            border-radius: 15px;
+            padding: 40px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            margin-bottom: 30px;
+        }
+        .overview {
+            margin-bottom: 40px;
+        }
+        .overview h2 {
+            color: #667eea;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .overview p {
+            font-size: 1.1rem;
+            margin-bottom: 15px;
+            text-align: justify;
+        }
+        .color-system {
+            margin-bottom: 40px;
+        }
+        .color-system h2 {
+            color: #667eea;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .color-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        .color-card {
+            border-radius: 10px;
+            padding: 20px;
+            color: white;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            transition: transform 0.3s ease;
+        }
+        .color-card:hover {
+            transform: translateY(-5px);
+        }
+        .color-card h3 {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+        }
+        .color-card p {
+            font-size: 1rem;
+            opacity: 0.9;
+        }
+        .red { background: linear-gradient(135deg, #ff6b6b, #ee5a52); }
+        .yellow { background: linear-gradient(135deg, #ffd43b, #fcc419); color: #333; }
+        .green { background: linear-gradient(135deg, #51cf66, #40c057); }
+        .blue { background: linear-gradient(135deg, #74c0fc, #4dabf7); }
+        .violet { background: linear-gradient(135deg, #b197fc, #9775fa); }
+        .resources {
+            margin-bottom: 40px;
+        }
+        .resources h2 {
+            color: #667eea;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .resource-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+        }
+        .resource-card {
+            background: #f8f9fa;
+            border-radius: 10px;
+            padding: 25px;
+            text-align: center;
+            border: 2px solid #e9ecef;
+            transition: all 0.3s ease;
+        }
+        .resource-card:hover {
+            border-color: #667eea;
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .resource-card h3 {
+            color: #667eea;
+            margin-bottom: 10px;
+            font-size: 1.3rem;
+        }
+        .resource-card p {
+            margin-bottom: 15px;
+            color: #666;
+        }
+        .resource-card a {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 25px;
+            transition: background 0.3s ease;
+        }
+        .resource-card a:hover {
+            background: #5a6fd8;
+        }
+        .footer {
+            background: rgba(255,255,255,0.1);
+            color: white;
+            text-align: center;
+            padding: 30px;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+        }
+        .footer h3 {
+            margin-bottom: 15px;
+            font-size: 1.5rem;
+        }
+        .footer p {
+            margin-bottom: 5px;
+            opacity: 0.9;
+        }
+        .footer a {
+            color: #ffd43b;
+            text-decoration: none;
+        }
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            .main-content {
+                padding: 20px;
+            }
+            .color-grid {
+                grid-template-columns: 1fr;
+            }
+            .resource-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>
 <body>
     <div class="container">
+        <div class="header">
+            <h1>🎨 Programming Framework</h1>
+            <p>Systematic Analysis of Complex Systems Across Disciplines</p>
+        </div>
+        <div class="main-content">
+            <div class="overview">
+                <h2>Project Overview</h2>
+                <p>The Programming Framework is a systematic visualization methodology for analyzing complex systems across disciplines using Mermaid Markdown and a universal five-color code.</p>
+                <p>Complex systems across biology, chemistry, and physics exhibit remarkable similarities in their organizational principles despite operating at vastly different scales and domains. Traditional analysis methods often remain siloed within specific disciplines, limiting our ability to identify common patterns and computational logic that govern system behavior.</p>
+                <p>Here, we present the Programming Framework, a systematic methodology that translates complex system dynamics into standardized computational representations using Mermaid Markdown syntax and LLM processing.</p>
             </div>
+            <div class="color-system">
+                <h2>Universal Color Coding System</h2>
+                <p style="text-align: center; margin-bottom: 20px; font-size: 1.1rem;">The framework uses a standardized five-color system across all disciplines:</p>
+                <div class="color-grid">
+                    <div class="color-card red">
+                        <h3>🔴 Red (#ff6b6b)</h3>
+                        <p><strong>Triggers & Inputs</strong><br>
+                        Environmental signals, reactants, input data, energy sources, axioms</p>
+                    </div>
+                    <div class="color-card yellow">
+                        <h3>🟡 Yellow (#ffd43b)</h3>
+                        <p><strong>Structures & Objects</strong><br>
+                        Enzymes, catalysts, data structures, fields, theorems</p>
+                    </div>
+                    <div class="color-card green">
+                        <h3>🟢 Green (#51cf66)</h3>
+                        <p><strong>Processing & Operations</strong><br>
+                        Metabolic reactions, chemical reactions, algorithms, quantum operations</p>
+                    </div>
+                    <div class="color-card blue">
+                        <h3>🔵 Blue (#74c0fc)</h3>
+                        <p><strong>Intermediates & States</strong><br>
+                        Metabolites, intermediates, variables, states, measurement results</p>
+                    </div>
+                    <div class="color-card violet">
+                        <h3>🟣 Violet (#b197fc)</h3>
+                        <p><strong>Products & Outputs</strong><br>
+                        Biomolecules, final products, program outputs, phenomena, proven results</p>
+                    </div>
                 </div>
             </div>
+            <div class="resources">
+                <h2>Key Resources & Documentation</h2>
+                <div class="resource-grid">
+                    <div class="resource-card">
+                        <h3>📚 Complete Documentation</h3>
+                        <p>Detailed methodology, implementation guidelines, and theoretical foundation</p>
+                        <a href="README.md">View README</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>🧬 Biology Processes</h3>
+                        <p>Biological system analysis with GLMP integration and examples</p>
+                        <a href="biology_processes.html">Explore Biology</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>⚗️ Chemistry Examples</h3>
+                        <p>Chemical reaction mechanisms and process visualizations</p>
+                        <a href="chemistry_examples.html">Explore Chemistry</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>💻 Computer Science</h3>
+                        <p>Algorithm and computational process analysis</p>
+                        <a href="computer_science_processes.html">Explore CS</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>⚛️ Physics Processes</h3>
+                        <p>Physical system dynamics and quantum processes</p>
+                        <a href="physics_processes.html">Explore Physics</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>📐 Mathematics</h3>
+                        <p>Mathematical proof and calculation processes</p>
+                        <a href="mathematics_processes.html">Explore Math</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>📖 Academic Article</h3>
+                        <p>Comprehensive framework documentation and methodology</p>
+                        <a href="programming_framework_article.html">Read Article</a>
+                    </div>
+                    <div class="resource-card">
+                        <h3>🔬 GLMP Foundation</h3>
+                        <p>Original biological systems analysis project</p>
+                        <a href="https://huggingface.co/spaces/garywelz/glmp">Visit GLMP</a>
                     </div>
                 </div>
             </div>
+        </div>
+        <div class="footer">
+            <h3>About the Author</h3>
+            <p><strong>Gary Welz</strong></p>
+            <p>Retired Faculty Member</p>
+            <p>John Jay College, CUNY (Department of Mathematics and Computer Science)</p>
+            <p>Borough of Manhattan Community College, CUNY</p>
+            <p>CUNY Graduate Center (New Media Lab)</p>
+            <p>Email: <a href="mailto:gwelz@jjay.cuny.edu">gwelz@jjay.cuny.edu</a></p>
+        </div>
+    </div>
 </body>
 </html>