Add light theme styles and implement theme toggle functionality; create Noto and Moon Gaming project pages

2026-09-08 11:23:17 +00:00 · 2026-07-24 15:22:35 -05:00
parent 9bab6e7ad1
commit 8469c133b6
3 changed files with 421 additions and 3 deletions
@@ -23,6 +23,59 @@
      --cyan: #06b6d4;
    }

+    [data-theme="lite"] {
+      --bg: #faf8f5;
+      --surface: #ffffff;
+      --surface-hover: #f3f0ec;
+      --border: #e8e4df;
+      --text: #1a1a1a;
+      --text-dim: #6b6560;
+      --accent: #7c6aef;
+      --accent-glow: rgba(124, 106, 239, 0.08);
+      --green: #2db87a;
+      --purple: #a06be8;
+      --cyan: #1ab0c4;
+    }
+
+    [data-theme="lite"] .bg-grid {
+      background-image:
+        linear-gradient(rgba(124, 106, 239, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(124, 106, 239, 0.03) 1px, transparent 1px);
+    }
+
+    [data-theme="lite"] .bg-glow { opacity: 0.04; filter: blur(160px); }
+
+    [data-theme="lite"] .hero h1 .gradient {
+      background: linear-gradient(135deg, #7c6aef, #a06be8, #1ab0c4);
+      -webkit-background-clip: text;
+      background-clip: text;
+    }
+
+    [data-theme="lite"] .project-card:hover {
+      box-shadow: 0 8px 32px rgba(124, 106, 239, 0.1);
+    }
+
+    [data-theme="lite"] .btn-primary:hover {
+      box-shadow: 0 0 30px rgba(124, 106, 239, 0.2);
+    }
+
+    [data-theme="lite"] .btn-secondary:hover {
+      border-color: #c8c3be;
+    }
+
+    [data-theme="lite"] .contact-card:hover {
+      box-shadow: 0 4px 20px rgba(124, 106, 239, 0.08);
+    }
+
+    [data-theme="lite"] .skill-tag:hover {
+      background: var(--accent-glow);
+      border-color: var(--accent);
+    }
+
+    [data-theme="lite"] .achievement {
+      background: var(--surface);
+    }
+
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
@@ -91,6 +144,27 @@

    .nav-links a:hover { color: var(--text); }

+    .theme-toggle {
+      background: none;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 6px;
+      cursor: pointer;
+      color: var(--text-dim);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.2s, border-color 0.2s;
+    }
+
+    .theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }
+
+    .theme-toggle svg { width: 18px; height: 18px; }
+
+    .theme-toggle .icon-moon { display: none; }
+    [data-theme="lite"] .theme-toggle .icon-sun { display: none; }
+    [data-theme="lite"] .theme-toggle .icon-moon { display: block; }
+
    .hero {
      padding: 80px 0 60px;
    }
@@ -112,7 +186,7 @@
      width: 7px;
      height: 7px;
      border-radius: 50%;
-      background: #ef4444;
+      background: var(--green);
      animation: pulse 2s ease-in-out infinite;
    }

@@ -485,13 +559,17 @@
        <a href="#skills">Skills</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle lite mode">
+          <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+        </button>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-badge">
        <span class="dot"></span>
-        taking time off 
+        Available to collaborate
      </div>
      <h1>Hi, I'm <span class="gradient">Miles</span></h1>
      <p>Developer and 3D artist interested in coding, games, and websites. Currently learning backend development with JavaScript.</p>
@@ -667,7 +745,7 @@
            <div class="project-icon">
              <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>
-            <span class="project-lang">HTML</span>
+            <span class="project-lang" style="border: 1px solid var(--cyan); color: var(--cyan); background: transparent;">Community Project</span>
          </div>
          <h3>FEDL</h3>
          <p>Geometry Dash demon list site with ranked levels, run submissions, admin moderation, and community features.</p>
@@ -680,7 +758,24 @@
            <span>Live</span>
          </div>
        </a>
+        <a href="projects/noto.html" class="project-card">
+          <div class="project-header">
+            <div class="project-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+            </div>
+            <span class="project-lang" style="border: 1px solid var(--green); color: var(--green); background: transparent;">Active Development</span>
+          </div>
+          <h3>Noto</h3>
+          <p>AI-powered note-taking app built with Flutter and Dart. Features Cortex AI integration, Markdown support, and Pi compatibility.</p>
+          <div class="project-meta">
+            <span>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              1
+            </span>
+            <span>MIT License</span>

+          </div>
+        </a>
        <a href="projects/nova.html" class="project-card">
          <div class="project-header">
            <div class="project-icon">
@@ -776,6 +871,25 @@
            <span>MIT License</span>
          </div>
        </a>
+
+        <a href="projects/moon-gaming.html" class="project-card">
+          <div class="project-header">
+            <div class="project-icon">
+              <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"/><line x1="8" y1="10" x2="8" y2="14"/><circle cx="17" cy="11" r="1"/><circle cx="15" cy="13" r="1"/></svg>
+            </div>
+            <span class="project-lang">HTML</span>
+          </div>
+          <h3>Moon Gaming</h3>
+          <p>Game hub showcasing original games with 1,542+ commits. Browse, play, and explore a growing library of browser games.</p>
+          <div class="project-meta">
+            <span>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              1,542
+            </span>
+            <span>MIT License</span>
+          </div>
+        </a>
+
      </div>
    </section>

@@ -836,5 +950,16 @@
      Built by Miles &middot; 2026
    </footer>
  </div>
+  <script>
+    const toggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    const saved = localStorage.getItem('theme');
+    if (saved) html.setAttribute('data-theme', saved);
+    toggle.addEventListener('click', () => {
+      const next = html.getAttribute('data-theme') === 'lite' ? '' : 'lite';
+      if (next) { html.setAttribute('data-theme', next); localStorage.setItem('theme', next); }
+      else { html.removeAttribute('data-theme'); localStorage.removeItem('theme'); }
+    });
+  </script>
 </body>
 </html>
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Moon Gaming | Miles Wolf Allen</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="bg-grid"></div>
+  <div class="bg-glow bg-glow-1"></div>
+  <div class="bg-glow bg-glow-2"></div>
+
+  <div class="container">
+    <nav>
+      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <div class="nav-links">
+        <a href="../index.html#about">About</a>
+        <a href="../index.html#skills">Skills</a>
+        <a href="../index.html#projects">Projects</a>
+        <a href="../index.html#contact">Contact</a>
+      </div>
+    </nav>
+
+    <section class="project-hero">
+      <div class="breadcrumb">
+        <a href="../index.html">Home</a>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+        <span>Moon Gaming</span>
+      </div>
+
+      <h1>Moon Gaming</h1>
+      <p class="tagline">A game hub showcasing original browser games with 1,542+ commits. Browse, play, and explore a growing library of HTML5 games.</p>
+
+      <div class="project-meta-bar">
+        <a href="https://github.com/mileswolfallen2/moon-gaming" class="meta-chip primary" target="_blank">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
+          View on GitHub
+        </a>
+        <span class="meta-chip">HTML</span>
+        <span class="meta-chip">MIT License</span>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">About</h2>
+      <p class="section-subtitle">A passion project for browser-based gaming</p>
+
+      <div class="feature-grid">
+        <div class="feature-card">
+          <h3>
+            <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"/><line x1="8" y1="10" x2="8" y2="14"/><circle cx="17" cy="11" r="1"/><circle cx="15" cy="13" r="1"/></svg>
+            Game Library
+          </h3>
+          <p>Browse a curated collection of original browser games, all playable directly in your browser with no downloads required.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <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>
+            HTML5 Powered
+          </h3>
+          <p>All games built with HTML5 Canvas and JavaScript — instant play on any device with a modern browser.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            Actively Maintained
+          </h3>
+          <p>1,542+ commits and counting. Regular updates with new games, features, and polish.</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Tech Stack</h2>
+
+      <div class="tech-grid">
+        <div class="tech-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/></svg>
+            Frontend
+          </h3>
+          <div class="tech-list">
+            <code>HTML5</code>
+            <code>JavaScript</code>
+            <code>Canvas API</code>
+            <code>CSS3</code>
+          </div>
+        </div>
+        <div class="tech-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+            Features
+          </h3>
+          <div class="tech-list">
+            <code>Game Engine</code>
+            <code>Sprite Rendering</code>
+            <code>Collision Detection</code>
+            <code>Sound Effects</code>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Quick Start</h2>
+      <div class="code-block">
+        <div class="code-header">
+          <span>Terminal</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+        </div>
+        <pre><code><span class="code-comment"># Clone the repository</span>
+<span class="code-prompt">$</span> git clone https://github.com/mileswolfallen2/moon-gaming.git
+<span class="code-prompt">$</span> cd moon-gaming
+
+<span class="code-comment"># Open in browser</span>
+<span class="code-prompt">$</span> open index.html</code></pre>
+      </div>
+    </section>
+
+    <a href="../index.html" class="back-link">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+      Back to Home
+    </a>
+  </div>
+</body>
+</html>
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Noto | Miles Wolf Allen</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="bg-grid"></div>
+  <div class="bg-glow bg-glow-1"></div>
+  <div class="bg-glow bg-glow-2"></div>
+
+  <div class="container">
+    <nav>
+      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <div class="nav-links">
+        <a href="../index.html#about">About</a>
+        <a href="../index.html#skills">Skills</a>
+        <a href="../index.html#projects">Projects</a>
+        <a href="../index.html#contact">Contact</a>
+      </div>
+    </nav>
+
+    <section class="project-hero">
+      <div class="breadcrumb">
+        <a href="../index.html">Home</a>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+        <span>Noto</span>
+      </div>
+
+      <h1>Noto</h1>
+      <p class="tagline">A cross-platform note-taking app powered by Cortex AI. Brain dump, voice notes, universal search, and 8 themes. Built with Flutter.</p>
+
+      <div class="project-meta-bar">
+        <a href="https://github.com/mileswolfallen2/Noto" class="meta-chip primary" target="_blank">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
+          View on GitHub
+        </a>
+        <a href="https://noto.fedl.site" class="meta-chip" target="_blank">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+          website
+        </a>
+        <span class="meta-chip" style="border-color: var(--green); color: var(--green);">Active Development</span>
+        <span class="meta-chip">Dart</span>
+        <span class="meta-chip">MIT License</span>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Features</h2>
+      <p class="section-subtitle">Your second brain, everywhere</p>
+
+      <div class="feature-grid">
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            Brain Dump
+          </h3>
+          <p>Type and forget. Auto-saves instantly so you never lose a thought.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            AI Timeline
+          </h3>
+          <p>Every note auto-sorted by time with date grouping for easy navigation.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1.27c.34-.6.99-1 1.73-1a2 2 0 110 4c-.74 0-1.39-.4-1.73-1H20a7 7 0 01-7 7v1.27c.6.34 1 .99 1 1.73a2 2 0 11-4 0c0-.74.4-1.39 1-1.73V20a7 7 0 01-7-7H2.73c-.34.6-.99 1-1.73 1a2 2 0 110-4c.74 0 1.39.4 1.73 1H4a7 7 0 017-7V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/></svg>
+            Cortex AI
+          </h3>
+          <p>Cloud (OpenAI) or local (Ollama) AI for summaries, cleanup, explanation, quizzing, and chat.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></svg>
+            Voice Notes
+          </h3>
+          <p>Record audio, auto-transcribe via Whisper API, and save as structured notes.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            Universal Search
+          </h3>
+          <p>Full-text search across all notes with voice input support.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
+            8 Themes
+          </h3>
+          <p>Dark, Light, Midnight, Solarized, Nord, Dracula, Tokyo Night, and Gruvbox.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+            AI Tab
+          </h3>
+          <p>Dedicated Cortex screen with full notes context for free-form conversation.</p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            Cross-Platform
+          </h3>
+          <p>iOS, Android, macOS, Windows, and Linux. One codebase, everywhere.</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">AI Configuration</h2>
+      <div class="feature-grid">
+        <div class="feature-card">
+          <h3>Cloud (OpenAI)</h3>
+          <p>Enter your API key. Uses gpt-4o-mini for chat and whisper-1 for voice transcription.</p>
+        </div>
+        <div class="feature-card">
+          <h3>Local (Ollama)</h3>
+          <p>Run Ollama locally with gemma3:4b or any model. Default URL: 127.0.0.1:11434.</p>
+        </div>
+        <div class="feature-card">
+          <h3>Router</h3>
+          <p>Point to a custom endpoint for AI inference.</p>
+        </div>
+        <div class="feature-card">
+          <h3>None</h3>
+          <p>AI features disabled. Use Noto as a plain note-taking app.</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Tech Stack</h2>
+      <div class="tech-stack">
+        <span class="tech-badge">Dart (74.4%)</span>
+        <span class="tech-badge">C++ (11.2%)</span>
+        <span class="tech-badge">CMake (8.6%)</span>
+        <span class="tech-badge">Swift (3.1%)</span>
+        <span class="tech-badge">Flutter</span>
+        <span class="tech-badge">Riverpod</span>
+        <span class="tech-badge">Hive</span>
+        <span class="tech-badge">OpenAI API</span>
+        <span class="tech-badge">Ollama</span>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Quick Start</h2>
+      <div class="code-block">
+        <span class="comment"># Prerequisites: Flutter 3.44+</span><br><br>
+        <span class="cmd">flutter pub get</span><br>
+        <span class="cmd">flutter run -d macos</span>     <span class="comment"># macOS</span><br>
+        <span class="cmd">flutter run -d &lt;device&gt;</span>  <span class="comment"># other devices</span>
+      </div>
+    </section>
+
+    <footer>
+      <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2025
+    </footer>
+  </div>
+</body>
+</html>