WordPress Developer Portfolio
400+ Projects Built, Optimized, and Ranking

`; } function renderGrid() { const grid = document.getElementById('mySpeedGrid'); if (!grid) return; const totalPages = Math.ceil(speedProjects.length / ITEMS_PER_PAGE); if (currentPage > totalPages) currentPage = 1; const start = (currentPage - 1) * ITEMS_PER_PAGE; const pageItems = speedProjects.slice(start, start + ITEMS_PER_PAGE); grid.innerHTML = pageItems.map((proj, i) => ` `).join(''); // Pagination const pagesContainer = document.getElementById('mySpeedPages'); if (pagesContainer) { pagesContainer.innerHTML = ''; for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.className = 'my-speed-page-btn' + (i === currentPage ? ' active' : ''); btn.textContent = i; btn.onclick = () => { currentPage = i; renderGrid(); }; pagesContainer.appendChild(btn); } } const prevBtn = document.getElementById('mySpeedPrev'); const nextBtn = document.getElementById('mySpeedNext'); if (prevBtn) prevBtn.disabled = currentPage === 1; if (nextBtn) nextBtn.disabled = currentPage === totalPages || totalPages === 0; const info = document.getElementById('mySpeedInfo'); if (info) { const end = Math.min(start + ITEMS_PER_PAGE, speedProjects.length); info.textContent = `Showing ${start + 1}-${end} of ${speedProjects.length} projects`; } // Re-attach mobile touch handlers initSpeedTouchHandlers(); } window.mySpeedPage = function(dir) { const totalPages = Math.ceil(speedProjects.length / ITEMS_PER_PAGE); currentPage = Math.max(1, Math.min(totalPages, currentPage + dir)); renderGrid(); document.getElementById('speed').scrollIntoView({ behavior: 'smooth', block: 'start' }); }; // ═══════════════════════════════════════════════════════════════ // MOBILE TOUCH HANDLERS // ═══════════════════════════════════════════════════════════════ function initSpeedTouchHandlers() { const prevBtn = document.getElementById('mySpeedPrev'); const nextBtn = document.getElementById('mySpeedNext'); if (prevBtn) { prevBtn.removeEventListener('touchend', handleSpeedPrevTouch); prevBtn.addEventListener('touchend', handleSpeedPrevTouch, { passive: false }); } if (nextBtn) { nextBtn.removeEventListener('touchend', handleSpeedNextTouch); nextBtn.addEventListener('touchend', handleSpeedNextTouch, { passive: false }); } // Page number buttons document.querySelectorAll('#mySpeedPages .my-speed-page-btn').forEach(btn => { btn.addEventListener('touchend', function(e) { e.preventDefault(); e.stopPropagation(); const page = parseInt(this.textContent); if (!isNaN(page)) { currentPage = page; renderGrid(); } }, { passive: false }); }); } function handleSpeedPrevTouch(e) { e.preventDefault(); e.stopPropagation(); if (!e.currentTarget.disabled) { mySpeedPage(-1); } } function handleSpeedNextTouch(e) { e.preventDefault(); e.stopPropagation(); if (!e.currentTarget.disabled) { mySpeedPage(1); } } // ═══════════════════════════════════════════════════════════════ // EVENT DELEGATION - Better Mobile Click Handling // ═══════════════════════════════════════════════════════════════ document.addEventListener('click', function(e) { const pageBtn = e.target.closest('.my-speed-page-btn'); if (pageBtn && !pageBtn.disabled) { e.preventDefault(); if (pageBtn.id === 'mySpeedPrev') { mySpeedPage(-1); } else if (pageBtn.id === 'mySpeedNext') { mySpeedPage(1); } else { const page = parseInt(pageBtn.textContent); if (!isNaN(page)) { currentPage = page; renderGrid(); } } } }, true); // Initialize if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { renderGrid(); initSpeedTouchHandlers(); }); } else { renderGrid(); initSpeedTouchHandlers(); } })();