Update index.html

Author: steam-bell-92

web-app/index.html

@@ -503,283 +503,6 @@ <h2 class="section-heading">Projects <span id="projectCountBadge"></span></h2>
         Surprise Me
       </button>
     </div>
-
-    <div class="projects-grid">
-      <!-- ═══ GAMES ═══ -->
-      <div class="project-card" data-category="games" data-project="blackjack-21" data-tags="game,cards,strategy,21,blackjack">
-        <img class="card-banner" src="assets/banners/blackjack21.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>BlackJack 21</h3>
-        <p>Beat the dealer with strategy!</p>
-        <div class="card-metrics"><span>🃏 52 cards</span><span>🎯 21</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="rock-paper-scissor" data-tags="game,random,choice,strategy,decision">
-        <img class="card-banner" src="assets/banners/rock-paper-scissor.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Rock Paper Scissors</h3>
-        <p>Battle against the computer!</p>
-        <div class="card-metrics"><span>⚔️ Best of 5</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="dice-rolling" data-tags="game,random,animation,probability">
-        <img class="card-banner" src="assets/banners/dice-rolling.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Dice Rolling</h3>
-        <p>Roll the dice with 3D animation!</p>
-        <div class="card-metrics"><span>🎲 2 dice</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="coin-flip" data-tags="game,random,animation,probability,heads,tails">
-        <img class="card-banner" src="assets/banners/coin-flip.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Coin Flip</h3>
-        <p>Heads or tails with spinning animation!</p>
-        <div class="card-metrics"><span>🪙 50/50</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="number-guessing" data-tags="game,logic,loops,conditional,guess">
-        <img class="card-banner" src="assets/banners/number-guessing.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Number Guessing</h3>
-        <p>Guess the secret number!</p>
-        <div class="card-metrics"><span>🎯 1–100</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="hangman" data-tags="game,word,letters,logic,string">
-        <img class="card-banner" src="assets/banners/hangman.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Hangman</h3>
-        <p>Classic word-guessing game!</p>
-        <div class="card-metrics"><span>📝 6 lives</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="word-scramble" data-tags="game,word,scramble,letters">
-        <img class="card-banner" src="assets/banners/word-scramble.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Word Scramble</h3>
-        <p>Unscramble words before time runs out!</p>
-        <div class="card-metrics"><span>🔤 3 rounds</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="flames" data-tags="game,relationship,flames,fun">
-        <img class="card-banner" src="assets/banners/flames.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>FLAMES Game</h3>
-        <p>Discover your relationship status!</p>
-        <div class="card-metrics"><span>💖 6 outcomes</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="dots-boxes" data-tags="game,strategy,ai,boxes">
-        <img class="card-banner" src="assets/banners/dots-boxes.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Dots &amp; Boxes AI</h3>
-        <p>Challenge friends or AI in strategy!</p>
-        <div class="card-metrics"><span>🧠 AI mode</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="password-forge" data-tags="game,password,typing,survival">
-        <img class="card-banner" src="assets/banners/password-forge.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Password Forge</h3>
-        <p>Survive evolving firewall password rules!</p>
-        <div class="card-metrics"><span>🔐 10 levels</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="math-quiz" data-tags="game,math,quiz,mcq,lives">
-        <img class="card-banner" src="assets/banners/math-quiz.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Math Quiz</h3>
-        <p>MCQ quiz with lives and difficulty levels!</p>
-        <div class="card-metrics"><span>🧮 4 levels</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="snake-game" data-tags="game,snake,classic,arcade">
-        <img class="card-banner" src="assets/banners/snake-game.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Snake Game</h3>
-        <p>Classic snake — eat, grow, survive!</p>
-        <div class="card-metrics"><span>🐍 Classic</span><span>🏆 High score</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="emoji-memory" data-tags="game,memory,emoji,matching">
-        <img class="card-banner" src="assets/banners/emoji-memory.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Emoji Memory Game</h3>
-        <p>Test your memory with matching emojis!</p>
-        <div class="card-metrics"><span>🧩 16 tiles</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="whack-a-mole" data-tags="game,whack,mole,arcade,reaction">
-        <img class="card-banner" src="assets/banners/whack-a-mole.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Whack-a-Mole</h3>
-        <p>Hit the moles before they disappear!</p>
-        <div class="card-metrics"><span>🔨 30s</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="flappy-game" data-tags="game,flappy,bird,arcade,endless">
-        <img class="card-banner" src="assets/banners/flappy-game.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Flappy Game</h3>
-        <p>Dodge the incoming balls and survive!</p>
-        <div class="card-metrics"><span>🐤 Endless</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="2048-game" data-tags="game,puzzle,2048,logic,tiles">
-        <img class="card-banner" src="assets/banners/2048-game.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>2048 Game</h3>
-        <p>Combine tiles and reach 2048!</p>
-        <div class="card-metrics"><span>🔢 4×4</span></div>
-      </div>
-      <div class="project-card" data-category="games" data-project="tic-tac-toe" data-tags="game,tic-tac-toe,strategy,ai">
-        <img class="card-banner" src="assets/banners/tic-tac-toe.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="gamepad-2"></svg> Game</span>
-        <h3>Tic Tac Toe</h3>
-        <p>Classic 3-in-a-row with AI!</p>
-        <div class="card-metrics"><span>❌ 3×3</span></div>
-      </div>
-
-      <!-- ═══ MATH ═══ -->
-      <div class="project-card" data-category="math" data-project="fibonacci" data-tags="math,sequence,series,loops,recursion">
-        <img class="card-banner" src="assets/banners/fibonacci.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Fibonacci Series</h3>
-        <p>Generate Fibonacci sequences!</p>
-        <div class="card-metrics"><span>🔢 Spiral viz</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="progression-recognizer" data-tags="math,sequence,progression,arithmetic,geometric">
-        <img class="card-banner" src="assets/banners/progression-recognizer.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>AP/GP/AGP/HP Recognizer</h3>
-        <p>Identify progression types from any sequence.</p>
-        <div class="card-metrics"><span>📊 4 types</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="pascal-triangle" data-tags="math,triangle,visualization,recursion">
-        <img class="card-banner" src="assets/banners/pascal-triangle.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Pascal's Triangle</h3>
-        <p>Beautiful hexagon visualization!</p>
-        <div class="card-metrics"><span>🔺 12 rows</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="armstrong" data-tags="math,number,digits,power">
-        <img class="card-banner" src="assets/banners/armstrong.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Armstrong Numbers</h3>
-        <p>Check special number properties!</p>
-        <div class="card-metrics"><span>🔢 3 digits</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="calculator" data-tags="math,calculator,arithmetic,operations">
-        <img class="card-banner" src="assets/banners/calculator.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Calculator</h3>
-        <p>Your mathematical companion!</p>
-        <div class="card-metrics"><span>🧮 Full-featured</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="collatz" data-tags="math,conjecture,algorithm,sequence">
-        <img class="card-banner" src="assets/banners/collatz.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Collatz Conjecture</h3>
-        <p>Explore the 3n+1 problem!</p>
-        <div class="card-metrics"><span>🔢 Graph viz</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="prime-analyzer" data-tags="math,prime,factors,algorithm">
-        <img class="card-banner" src="assets/banners/prime-analyzer.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Prime Analyzer</h3>
-        <p>All-in-one prime number toolkit!</p>
-        <div class="card-metrics"><span>🔢 Factorizer</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="projectile-motion" data-tags="math,physics,motion,calculation">
-        <img class="card-banner" src="assets/banners/projectile-motion.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Projectile Motion</h3>
-        <p>Calculate TOF, Hmax, Range!</p>
-        <div class="card-metrics"><span>🚀 Physics</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="coordinate-polar-transform" data-tags="math,coordinate,transformation,geometry">
-        <img class="card-banner" src="assets/banners/coordinate-polar-transform.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Coordinate to Polar</h3>
-        <p>Transform Cartesian (x, y) into polar (r, θ).</p>
-        <div class="card-metrics"><span>📐 Geometry</span></div>
-      </div>
-      <div class="project-card" data-category="math" data-project="derivative-calculator" data-tags="math,calculus,derivative,polynomial">
-        <img class="card-banner" src="assets/banners/derivative-calculator.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="sigma"></svg> Math</span>
-        <h3>Derivative Calculator</h3>
-        <p>Compute 1st/nth polynomial derivatives.</p>
-        <div class="card-metrics"><span>📈 Calculus</span></div>
-      </div>
-
-      <!-- ═══ UTILITIES ═══ -->
-      <div class="project-card" data-category="utilities" data-project="morse-code" data-tags="utility,morse,translation,communication">
-        <img class="card-banner" src="assets/banners/morse-code.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Morse Code</h3>
-        <p>Translate with lights &amp; sound!</p>
-        <div class="card-metrics"><span>📡 Audio</span></div>
-      </div>
-      <div class="project-card" data-category="utilities" data-project="tower-of-hanoi" data-tags="utility,puzzle,recursion,algorithm">
-        <img class="card-banner" src="assets/banners/tower-of-hanoi.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Tower of Hanoi</h3>
-        <p>Solve the classic puzzle!</p>
-        <div class="card-metrics"><span>🗼 3 pegs</span></div>
-      </div>
-      <div class="project-card" data-category="utilities" data-project="number-converter" data-tags="utility,converter,decimal,binary,octal,hex">
-        <img class="card-banner" src="assets/banners/number-converter.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Number Converter</h3>
-        <p>Convert Dec, Bin, Oct, and Hex!</p>
-        <div class="card-metrics"><span>🔢 4 bases</span></div>
-      </div>
-      <div class="project-card" data-category="utilities" data-project="typing-speed-tester" data-tags="utility,typing,speed,test,wpm">
-        <img class="card-banner" src="assets/banners/typing-speed-tester.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Typing Speed Tester</h3>
-        <p>Test your WPM and accuracy!</p>
-        <div class="card-metrics"><span>⌨️ WPM</span></div>
-      </div>
-      <div class="project-card" data-category="utilities" data-project="color-palette" data-tags="utility,color,palette,css,design,theme">
-        <img class="card-banner" src="assets/banners/color-palette.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Color Palette Suggestor</h3>
-        <p>Generate palettes + CSS snippets for any mood!</p>
-        <div class="card-metrics"><span>🎨 CSS ready</span></div>
-      </div>
-      <div class="project-card" data-category="utilities" data-project="productive-pet" data-tags="utility,pet,productivity,pomodoro">
-        <img class="card-banner" src="assets/banners/productive-pet.jpg" alt="" loading="lazy">
-        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-        <span class="card-category"><svg class="cat-icon" data-lucide="wrench"></svg> Utility</span>
-        <h3>Productivity Pet</h3>
-        <p>A virtual pet that grows as you work!</p>
-        <div class="card-metrics"><span>🐾 Pomodoro</span></div>
-      </div>
-    </div>
-
-    <div class="empty-state" id="emptyState" style="display: none;">
-      <p class="empty-state-title">No projects found</p>
-      <p class="empty-state-hint" id="emptyStateHint">Try adjusting your search or category filter.</p>
-    </div>
   </div>
 </section>