From d73ac305ebde369cbc9643a22a17c435290527a0 Mon Sep 17 00:00:00 2001
From: mileswa1q22 <mileswolfallen4@hotmail.com>
Date: Sat, 25 Jul 2026 16:32:15 -0500
Subject: [PATCH] Add project highlights section and update project stats

- Introduced a new "Project Highlights" section in index.html with detailed stats for FEDL and OmniEmu 2.0.
- Implemented a grid layout for other projects with highlight cards.
- Enhanced project pages (decompilations, fedl, geode-mod, issue-tracker, moon-gaming, music-app, noto, nova, omniemu, rhythm-game) to display GitHub stats (stars, forks, issues, language).
- Updated styles in style.css for the new stats bar, including animations and responsive design adjustments.
- Changed the site logo from "miles.dev" to "milesallen.site" in the navigation.
---
 index.html                   | 301 ++++++++++++++++++++++++++++++++++-
 projects/decompilations.html |  27 ++++
 projects/fedl.html           |  62 +++++++-
 projects/geode-mod.html      |  27 ++++
 projects/issue-tracker.html  |  27 ++++
 projects/moon-gaming.html    |  27 ++++
 projects/music-app.html      |  27 ++++
 projects/noto.html           |  27 ++++
 projects/nova.html           |  27 ++++
 projects/omniemu.html        |  27 ++++
 projects/rhythm-game.html    |  27 ++++
 projects/style.css           |  73 ++++++++-
 12 files changed, 667 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 9b4c67a..07caf7f 100644
--- a/index.html
+++ b/index.html
@@ -546,6 +546,172 @@
       gap: 4px;
     }
 
+    /* HIGHLIGHTS */
+    .hl-group { margin-bottom: 28px; }
+    .hl-group:last-child { margin-bottom: 0; }
+    .hl-group-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-family: 'Fraunces', serif;
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--text);
+      margin-bottom: 12px;
+      letter-spacing: -0.02em;
+    }
+    .hl-group-dot {
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+    .hl-group-dot.blue { background: var(--accent); box-shadow: 0 0 8px rgba(14,165,233,0.5); }
+    .hl-group-dot.green { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,0.5); }
+    .hl-group-dot.orange { background: var(--orange); box-shadow: 0 0 8px rgba(249,115,22,0.5); }
+    .hl-divider {
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--border), transparent);
+      margin: 8px 0 24px;
+    }
+    .hl-hero {
+      background: var(--surface);
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      overflow: hidden;
+      margin-bottom: 20px;
+      position: relative;
+      transition: border-color 0.3s, box-shadow 0.3s;
+    }
+    .hl-hero::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .hl-hero:hover::before { opacity: 1; }
+    .hl-hero:hover {
+      border-color: rgba(14, 165, 233, 0.3);
+      box-shadow: 0 0 40px rgba(14, 165, 233, 0.1);
+    }
+    .hl-hero-header {
+      padding: 24px 28px 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .hl-hero-dot {
+      width: 10px; height: 10px;
+      border-radius: 50%;
+      display: inline-block;
+      flex-shrink: 0;
+    }
+    .hl-hero-dot.blue { background: var(--accent); box-shadow: 0 0 10px rgba(14,165,233,0.6); }
+    .hl-hero-dot.green { background: var(--green); box-shadow: 0 0 10px rgba(52,211,153,0.6); }
+    .hl-hero-name {
+      font-family: 'Fraunces', serif;
+      font-size: 1.8rem;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      color: var(--text);
+      line-height: 1;
+    }
+    .hl-hero-stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      padding: 20px 0 0;
+    }
+    .hl-hero-stat {
+      text-align: center;
+      padding: 16px 12px 20px;
+      border-right: 1px solid var(--border);
+      transition: background 0.3s;
+    }
+    .hl-hero-stat:last-child { border-right: none; }
+    .hl-hero-stat:hover { background: rgba(255,255,255,0.02); }
+    .hl-hero-stat .hl-number {
+      font-family: 'Fraunces', serif;
+      font-size: 2rem;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      line-height: 1;
+      margin-bottom: 6px;
+    }
+    .hl-hero-stat .hl-label {
+      font-size: 0.72rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--text-dim);
+    }
+    @media (max-width: 768px) {
+      .hl-hero-stats { grid-template-columns: repeat(2, 1fr); }
+      .hl-hero-stat:nth-child(2) { border-right: none; }
+      .hl-hero-stat:nth-child(1),
+      .hl-hero-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
+      .hl-hero-name { font-size: 1.4rem; }
+    }
+    .highlights-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 14px;
+    }
+    .highlight-card {
+      background: var(--surface);
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 22px 20px;
+      position: relative;
+      overflow: hidden;
+      transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
+    }
+    .highlight-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .highlight-card:hover::before { opacity: 1; }
+    .highlight-card:hover {
+      border-color: rgba(14, 165, 233, 0.3);
+      box-shadow: 0 0 30px rgba(14, 165, 233, 0.12);
+      transform: translateY(-2px);
+    }
+    .hl-icon {
+      width: 36px; height: 36px;
+      display: flex; align-items: center; justify-content: center;
+      border-radius: 10px;
+      margin-bottom: 14px;
+    }
+    .hl-icon svg { width: 20px; height: 20px; }
+    .hl-icon.blue { background: rgba(14,165,233,0.12); color: var(--accent); }
+    .hl-icon.green { background: rgba(52,211,153,0.12); color: var(--green); }
+    .hl-icon.orange { background: rgba(249,115,22,0.12); color: var(--orange); }
+    .hl-number {
+      font-family: 'Fraunces', serif;
+      font-size: 2rem;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      line-height: 1;
+      margin-bottom: 4px;
+    }
+    .hl-number.blue { color: var(--accent); }
+    .hl-number.green { color: var(--green); }
+    .hl-number.orange { color: var(--orange); }
+    .hl-label {
+      font-size: 0.78rem;
+      color: var(--text-dim);
+      font-weight: 500;
+      line-height: 1.3;
+    }
+
     /* CONTACT */
     .contact-grid {
       display: grid;
@@ -652,6 +818,7 @@
       .stats-bar { gap: 24px; }
       .stat-num { font-size: 1.6rem; }
       .projects-grid { grid-template-columns: 1fr; }
+      .highlights-grid { grid-template-columns: repeat(2, 1fr); }
       .nav-links a:not(.theme-btn) { display: none; }
     }
   </style>
@@ -665,7 +832,7 @@
     <nav>
       <a href="#" class="nav-logo">
         <span class="dot"></span>
-        miles.dev
+        milesallen.site
       </a>
       <div class="nav-links">
         <a href="#about">About</a>
@@ -893,6 +1060,97 @@
       </div>
     </section>
 
+    <section id="highlights" class="section reveal">
+      <div class="section-divider"></div>
+      <div class="section-header">
+        <h2>Project Highlights</h2>
+        <p>What my projects have achieved</p>
+      </div>
+
+      <div class="hl-hero">
+        <div class="hl-hero-header">
+          <span class="hl-hero-dot blue"></span>
+          <span class="hl-hero-name">FEDL</span>
+        </div>
+        <div class="hl-hero-stats">
+          <div class="hl-hero-stat">
+            <div class="hl-number blue" id="hl-fedl-runs">--</div>
+            <div class="hl-label">Verified Runs</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number green" id="hl-fedl-levels">--</div>
+            <div class="hl-label">Ranked Levels</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number orange" id="hl-fedl-players">--</div>
+            <div class="hl-label">Ranked Players</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number blue" id="hl-fedl-videos">--</div>
+            <div class="hl-label">YouTube Videos</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hl-hero">
+        <div class="hl-hero-header">
+          <span class="hl-hero-dot green"></span>
+          <span class="hl-hero-name">OmniEmu 2.0</span>
+        </div>
+        <div class="hl-hero-stats">
+          <div class="hl-hero-stat">
+            <div class="hl-number blue">20+</div>
+            <div class="hl-label">Emulators Supported</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number green">3</div>
+            <div class="hl-label">Platforms (Win/Mac/Linux)</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number orange">0.3.2</div>
+            <div class="hl-label">Latest Release</div>
+          </div>
+          <div class="hl-hero-stat">
+            <div class="hl-number blue">TS</div>
+            <div class="hl-label">Built with TypeScript</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hl-divider"></div>
+
+      <div class="hl-group">
+        <div class="hl-group-label"><span class="hl-group-dot" style="background:var(--text-dim)"></span>Other Projects</div>
+        <div class="highlights-grid">
+          <div class="highlight-card">
+            <div class="hl-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"/></svg></div>
+            <div class="hl-number blue">3</div>
+            <div class="hl-label">Nova Interfaces</div>
+          </div>
+          <div class="highlight-card">
+            <div class="hl-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
+            <div class="hl-number green">5</div>
+            <div class="hl-label">Noto AI Features</div>
+          </div>
+          <div class="highlight-card">
+            <div class="hl-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="12" x2="10" y2="12"/><circle cx="17" cy="11" r="1"/><circle cx="15" cy="13" r="1"/></svg></div>
+            <div class="hl-number orange">1.5k+</div>
+            <div class="hl-label">Moon Gaming Commits</div>
+          </div>
+          <div class="highlight-card">
+            <div class="hl-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div>
+            <div class="hl-number blue">Ad-free</div>
+            <div class="hl-label">Music App Playback</div>
+          </div>
+          <div class="highlight-card">
+            <div class="hl-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+            <div class="hl-number green">MIT</div>
+            <div class="hl-label">Licensed Across Projects</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <section id="contact" class="section reveal">
       <div class="section-divider"></div>
       <div class="section-header">
@@ -953,12 +1211,20 @@
     fetch('https://api.github.com/users/mileswolfallen2')
       .then(r => r.json())
       .then(u => {
-        document.getElementById('s-repos').textContent = u.public_repos;
+        document.getElementById('s-repos').textContent = u.public_repos || '147';
         document.getElementById('s-stars').textContent = '--';
-        document.getElementById('s-followers').textContent = u.followers;
-        document.getElementById('s-following').textContent = u.following;
-        document.getElementById('p-repos').textContent = u.public_repos;
-        document.getElementById('p-followers').textContent = u.followers;
+        document.getElementById('s-followers').textContent = u.followers || '13';
+        document.getElementById('s-following').textContent = u.following || '37';
+        document.getElementById('p-repos').textContent = u.public_repos || '147';
+        document.getElementById('p-followers').textContent = u.followers || '13';
+      })
+      .catch(() => {
+        document.getElementById('s-repos').textContent = '147';
+        document.getElementById('s-stars').textContent = '--';
+        document.getElementById('s-followers').textContent = '13';
+        document.getElementById('s-following').textContent = '37';
+        document.getElementById('p-repos').textContent = '147';
+        document.getElementById('p-followers').textContent = '13';
       });
 
     fetch('https://api.github.com/users/mileswolfallen2/repos?per_page=100')
@@ -967,6 +1233,29 @@
         const total = repos.reduce((a, r) => a + r.stargazers_count, 0);
         document.getElementById('s-stars').textContent = total;
         document.getElementById('p-stars').textContent = total;
+      })
+      .catch(() => {});
+
+    // FEDL live stats
+    Promise.all([
+      fetch('https://server.fedl.site/fedl/api/runs').then(r => r.json()),
+      fetch('https://server.fedl.site/fedl/api/list').then(r => r.json())
+    ])
+      .then(([runs, listData]) => {
+        const approved = runs.filter(r => r.status === 'approved');
+        document.getElementById('hl-fedl-runs').textContent = approved.length.toLocaleString();
+        const levels = Array.isArray(listData) ? listData : (listData.items || []);
+        document.getElementById('hl-fedl-levels').textContent = levels.length;
+        const players = new Set(approved.map(r => r.accountUsername || r.playerName)).size;
+        document.getElementById('hl-fedl-players').textContent = players.toLocaleString();
+        const videos = new Set(approved.map(r => r.videoUrl).filter(Boolean)).size;
+        document.getElementById('hl-fedl-videos').textContent = videos.toLocaleString();
+      })
+      .catch(() => {
+        document.getElementById('hl-fedl-runs').textContent = '3,839';
+        document.getElementById('hl-fedl-levels').textContent = '341';
+        document.getElementById('hl-fedl-players').textContent = '250+';
+        document.getElementById('hl-fedl-videos').textContent = '3,800+';
       });
   </script>
 </body>
diff --git a/projects/decompilations.html b/projects/decompilations.html
index abff477..6c06cf8 100644
--- a/projects/decompilations.html
+++ b/projects/decompilations.html
@@ -47,6 +47,24 @@
         <span class="meta-chip">HTML</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -107,6 +125,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/Decompilations-web')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/fedl.html b/projects/fedl.html
index cebe29f..2abb81b 100644
--- a/projects/fedl.html
+++ b/projects/fedl.html
@@ -13,7 +13,7 @@
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -42,11 +42,28 @@
           Live Site
         </a>
         <span class="meta-chip">HTML / JS / CSS</span>
-        <span class="meta-chip">196 commits</span>
-        <span class="meta-chip">2 stars</span>
       </div>
     </section>
 
+    <div class="stats-bar">
+      <div class="stat-item">
+        <div class="stat-value accent" id="fedl-levels">--</div>
+        <div class="stat-label">Levels</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value green" id="fedl-runs">--</div>
+        <div class="stat-label">Runs Submitted</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value orange" id="fedl-commits">196</div>
+        <div class="stat-label">Commits</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value" id="fedl-stars">2</div>
+        <div class="stat-label">Stars</div>
+      </div>
+    </div>
+
     <section class="reveal">
       <div class="section-divider"></div>
       <h2 class="section-title">What It Includes</h2>
@@ -149,6 +166,45 @@
       entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
     }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+    const API = 'https://server.fedl.site/fedl/api';
+
+    fetch(`${API}/list`)
+      .then(r => r.json())
+      .then(data => {
+        const items = data.items || [];
+        document.getElementById('fedl-levels').textContent = items.length;
+      })
+      .catch(() => {
+        document.getElementById('fedl-levels').textContent = '150+';
+      });
+
+    fetch(`${API}/runs`)
+      .then(r => r.json())
+      .then(data => {
+        const runs = Array.isArray(data) ? data : [];
+        document.getElementById('fedl-runs').textContent = runs.length;
+      })
+      .catch(() => {
+        document.getElementById('fedl-runs').textContent = '--';
+      });
+
+    fetch('https://api.github.com/repos/mileswolfallen2/fedl')
+      .then(r => r.json())
+      .then(data => {
+        if (data.stargazers_count != null) {
+          document.getElementById('fedl-stars').textContent = data.stargazers_count;
+        }
+        if (data.default_branch) {
+          fetch(`https://api.github.com/repos/mileswolfallen2/fedl/commits?sha=${data.default_branch}&per_page=1`)
+            .then(r => {
+              const total = r.headers.get('x-total-count');
+              if (total) document.getElementById('fedl-commits').textContent = total;
+            })
+            .catch(() => {});
+        }
+      })
+      .catch(() => {});
   </script>
 </body>
 </html>
diff --git a/projects/geode-mod.html b/projects/geode-mod.html
index b1f426c..e76c163 100644
--- a/projects/geode-mod.html
+++ b/projects/geode-mod.html
@@ -44,6 +44,24 @@
         <span class="meta-chip">C++</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -139,6 +157,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/FEDL-Geode-mod')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/issue-tracker.html b/projects/issue-tracker.html
index f4ee974..6443c20 100644
--- a/projects/issue-tracker.html
+++ b/projects/issue-tracker.html
@@ -43,6 +43,24 @@
         <span class="meta-chip">HTML / JavaScript</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -104,6 +122,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/Issue-tracker')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/moon-gaming.html b/projects/moon-gaming.html
index f5ea329..1283580 100644
--- a/projects/moon-gaming.html
+++ b/projects/moon-gaming.html
@@ -43,6 +43,24 @@
         <span class="meta-chip">HTML</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -130,6 +148,15 @@
     </a>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/moon-gaming')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/music-app.html b/projects/music-app.html
index 2d498c1..0bf8c95 100644
--- a/projects/music-app.html
+++ b/projects/music-app.html
@@ -47,6 +47,24 @@
         <span class="meta-chip">JavaScript</span>
         <span class="meta-chip">Apache-2.0</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -124,6 +142,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/music-app')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/noto.html b/projects/noto.html
index 58d3531..649ca6c 100644
--- a/projects/noto.html
+++ b/projects/noto.html
@@ -48,6 +48,24 @@
         <span class="meta-chip">Dart</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -170,6 +188,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/Noto')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/nova.html b/projects/nova.html
index 961f199..6d86c80 100644
--- a/projects/nova.html
+++ b/projects/nova.html
@@ -52,6 +52,24 @@
         <span class="meta-chip">Python</span>
         <span class="meta-chip">MIT License</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -153,6 +171,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/nova')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/omniemu.html b/projects/omniemu.html
index 002c9b5..5c495a2 100644
--- a/projects/omniemu.html
+++ b/projects/omniemu.html
@@ -49,6 +49,24 @@
         <span class="meta-chip">MIT License</span>
         <span class="meta-chip">v0.3.2</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -188,6 +206,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/OmniEmu2.0')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/rhythm-game.html b/projects/rhythm-game.html
index b50294a..019136a 100644
--- a/projects/rhythm-game.html
+++ b/projects/rhythm-game.html
@@ -49,6 +49,24 @@
         <span class="meta-chip">64 commits</span>
         <span class="meta-chip">1 star</span>
       </div>
+      <div class="stats-bar">
+        <div class="stat-item">
+          <div class="stat-value accent" id="gh-stars">--</div>
+          <div class="stat-label">Stars</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value green" id="gh-forks">--</div>
+          <div class="stat-label">Forks</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value orange" id="gh-issues">--</div>
+          <div class="stat-label">Issues</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="gh-lang">--</div>
+          <div class="stat-label">Language</div>
+        </div>
+      </div>
     </section>
 
     <section class="reveal">
@@ -118,6 +136,15 @@
     </footer>
   </div>
 <script>
+    fetch('https://api.github.com/repos/mileswolfallen2/new-game')
+      .then(r => r.json())
+      .then(d => {
+        if (d.stargazers_count != null) document.getElementById('gh-stars').textContent = d.stargazers_count;
+        if (d.forks_count != null) document.getElementById('gh-forks').textContent = d.forks_count;
+        if (d.open_issues_count != null) document.getElementById('gh-issues').textContent = d.open_issues_count;
+        if (d.language) document.getElementById('gh-lang').textContent = d.language;
+      })
+      .catch(() => {});
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
diff --git a/projects/style.css b/projects/style.css
index aac4a8a..e743bf8 100644
--- a/projects/style.css
+++ b/projects/style.css
@@ -199,14 +199,78 @@ nav {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
-  box-shadow: 0 0 20px rgba(124, 92, 255, 0.3);
+  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
 }
 .meta-chip.primary:hover {
-  background: #6a4ae8;
-  box-shadow: 0 0 30px rgba(124, 92, 255, 0.5);
+  background: #0284c7;
+  box-shadow: 0 0 30px rgba(14, 165, 233, 0.5);
   transform: translateY(-1px);
 }
 
+/* STATS BAR */
+.stats-bar {
+  display: flex;
+  gap: 0;
+  margin-top: 32px;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--surface);
+  backdrop-filter: blur(12px);
+  position: relative;
+  z-index: 1;
+}
+.stats-bar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 14px;
+  padding: 1px;
+  background: linear-gradient(
+    var(--rainbow-angle, 90deg),
+    #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff00ff, #ff0000
+  );
+  background-size: 300% 300%;
+  animation: rainbowShift 6s linear infinite;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 1;
+}
+@keyframes rainbowShift {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 300% 50%; }
+}
+.stat-item {
+  flex: 1;
+  padding: 20px 24px;
+  text-align: center;
+  border-right: 1px solid var(--border);
+  transition: background 0.3s;
+}
+.stat-item:last-child { border-right: none; }
+.stat-item:hover { background: rgba(255, 255, 255, 0.02); }
+.stat-value {
+  font-family: 'Fraunces', serif;
+  font-size: 1.8rem;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  color: var(--text);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.stat-value.accent { color: var(--accent); }
+.stat-value.green { color: var(--green); }
+.stat-value.orange { color: var(--orange); }
+.stat-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+}
+
 section { padding: 48px 0; }
 
 .section-divider {
@@ -390,4 +454,7 @@ footer a { color: var(--accent); text-decoration: none; }
   .project-hero h1 { font-size: 2rem; }
   .nav-links { display: none; }
   .feature-grid { grid-template-columns: 1fr; }
+  .stats-bar { flex-direction: column; }
+  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
+  .stat-item:last-child { border-bottom: none; }
 }