Quality: Only.games.github Extra

loadGames(); Create games/snake/index.html :

header text-align: center; margin-bottom: 3rem;

.game-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.8rem; max-width: 1200px; margin: 0 auto; only.games.github

.game-title font-size: 1.3rem; font-weight: 600; margin: 0.75rem 0 0.25rem;

footer text-align: center; margin-top: 4rem; font-size: 0.8rem; color: #4a5568; loadGames(); Create games/snake/index

only.games.github Enable GitHub Pages in Settings > Pages > Source = main (root) .

async function loadGames() const res = await fetch('games.json'); const data = await res.json(); const grid = document.getElementById('gameGrid'); grid.innerHTML = data.games.map(game => ` <a href="$game.path" class="game-card" target="_top"> <div class="game-thumb">$game.thumb</div> <div class="game-title">$game.title</div> <div class="game-desc">$game.desc</div> </a> `).join(''); Create games/snake/index.html : header text-align: center

.game-thumb width: 100%; aspect-ratio: 16 / 9; background: #1e2533; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 3rem;