seo

archive/portfolio.html

@@ -566,13 +566,13 @@
                     <!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-facebook" class="text-xl"></ion-icon>
                     </a> -->
-                    <a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
+                    <a href="https://www.instagram.com/sportcreative_cz/" target="_blank" aria-label="Instagram" alt="Instagram" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-instagram" class="text-xl"></ion-icon>
                     </a>
                     <!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-twitter" class="text-xl"></ion-icon>
                     </a> -->
-                    <a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
+                    <a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" aria-label="LinkedIn" alt="LinkedIn" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-linkedin" class="text-xl"></ion-icon>
                     </a>
                 </div>

index.html

@@ -950,7 +950,7 @@
             
             <!-- Masita -->
             <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social">
-                <img src="assets/images/masita.png" alt="Masita" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/masita.jpg" alt="Masita" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">Masita</h3>
                     <p class="text-gray-200">Kompletní správa sociálních sítí</p>
@@ -961,8 +961,8 @@
             </div>
 
             <!-- FC Bizoni UH -->
-            <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web foto video">
+            <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web sprava-webu foto video">
-                <img src="assets/images/bizoni.png" alt="FC Bizoni UH" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/bizoni.jpg" alt="FC Bizoni UH" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">FC Bizoni UH</h3>
                     <p class="text-gray-200">Kompletní digitální marketing</p>
@@ -977,7 +977,7 @@
 
             <!-- FK Kofola Krnov -->
             <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="sprava-webu social video">
-                <img src="assets/images/krnov.png" alt="FK Kofola Krnov" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/krnov.jpg" alt="FK Kofola Krnov" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">FK Kofola Krnov</h3>
                     <p class="text-gray-200">Komplexní digitální marketing</p>
@@ -990,8 +990,8 @@
             </div>
 
             <!-- Penalty -->
-            <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web foto video">
+            <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social">
-                <img src="assets/images/penalty.png" alt="Penalty" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/penalty.jpg" alt="Penalty" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">Penalty</h3>
                     <p class="text-gray-200">Sociální sítě</p>
@@ -1003,7 +1003,7 @@
 
             <!-- Zeusport -->
             <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
-                <img src="assets/images/zeus.png" alt="Zeusport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/zeus.jpg" alt="Zeusport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">Zeusport</h3>
                     <p class="text-gray-200">Webové stránky a sociální sítě</p>
@@ -1016,7 +1016,7 @@
             
             <!-- Revvisport -->
             <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
-                <img src="assets/images/revvi.png" alt="Revvisport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/revvi.jpg" alt="Revvisport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">Revvisport</h3>
                     <p class="text-gray-200">Webové stránky a sociální sítě</p>
@@ -1030,7 +1030,7 @@
 
             <!-- SKUP Olomouc -->
             <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="video social">
-                <img src="assets/images/skup.png" alt="SKUP Olomouc" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
+                <img src="assets/images/skup.jpg" alt="SKUP Olomouc" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
                 <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
                     <h3 class="text-white text-xl font-bold">SKUP Olomouc</h3>
                     <p class="text-gray-200">Komplexní správa sociálních sítí a tvorba videí</p>
@@ -1170,13 +1170,13 @@
                     <!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-facebook" class="text-xl"></ion-icon>
                     </a> -->
-                    <a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
+                    <a href="https://www.instagram.com/sportcreative_cz/" target="_blank" aria-label="Instagram" alt="Instagram" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-instagram" class="text-xl"></ion-icon>
                     </a>
                     <!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-twitter" class="text-xl"></ion-icon>
                     </a> -->
-                    <a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
+                    <a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" aria-label="LinkedIn" alt="LinkedIn" class="text-gray-400 hover:text-white transition duration-150">
                         <ion-icon name="logo-linkedin" class="text-xl"></ion-icon>
                     </a>
                 </div>

script.js

@@ -123,95 +123,92 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Portfolio filtering functionality - only run if elements exist
     const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
-    const allPortfolioItems = document.querySelectorAll('.portfolio-item');
+    let allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
+
+    // Function to update portfolio items
+    function updatePortfolioItems() {
+        allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
+    }
 
     // Only run portfolio filtering if we have both buttons and items
     if (filterButtons.length > 0 && allPortfolioItems.length > 0) {
-        // Filter functionality
+        // Add click handler for each portfolio item
-        filterButtons.forEach(button => {
+        function setupPortfolioItemClick(item) {
-            button.addEventListener('click', function() {
+            item.addEventListener('click', function(e) {
-                // Remove active classes from all buttons
-                filterButtons.forEach(btn => {
-                    btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
-                    btn.classList.add('bg-white', 'text-gray-700');
-                });
-                
-                // Add appropriate active class based on button type
-                if (this.getAttribute('data-filter') === 'all') {
-                    this.classList.remove('bg-white', 'text-gray-700');
-                    this.classList.add('bg-sport-purple', 'text-white');
-                } else {
-                    this.classList.remove('bg-white', 'text-gray-700');
-                    this.classList.add('bg-sport-orange', 'text-white');
-                }
-                
-                const filterValue = this.getAttribute('data-filter');
-                
-                // Filter portfolio items
-                portfolioItems.forEach(item => {
-                    const categories = item.getAttribute('data-categories').split(' ');
-                    
-                    if (filterValue === 'all' || categories.includes(filterValue)) {
-                        item.style.display = 'block';
-                        // Add animation class
-                        item.classList.add('animate-fade-in');
-                        setTimeout(() => {
-                            item.classList.remove('animate-fade-in');
-                        }, 500);
-                    } else {
-                        item.style.display = 'none';
-                    }
-                });
-            });
-        });
-        
-        // Initialize portfolio with "all" selected and set initial button colors
-        filterButtons.forEach(btn => {
-            if (btn.getAttribute('data-filter') === 'all') {
-                btn.classList.remove('bg-white', 'text-gray-700');
-                btn.classList.add('bg-sport-purple', 'text-white');
-            } else {
-                btn.classList.remove('bg-sport-orange', 'text-white');
-                btn.classList.add('bg-white', 'text-gray-700');
-            }
-        });
-        
-        // Show all items initially
-        portfolioItems.forEach(item => {
-            item.style.display = 'block';
-        });
-        
-        // Portfolio item hover effects - using CSS for hover instead
-        // This ensures hover works regardless of filter state
-        portfolioItems.forEach(item => {
-            // Remove any existing mouseenter/mouseleave event listeners
-            const newItem = item.cloneNode(true);
-            item.parentNode.replaceChild(newItem, item);
-            
-            // Add click handler for each portfolio item
-            newItem.addEventListener('click', function(e) {
                 // Prevent the click from bubbling up to parent elements
                 e.stopPropagation();
                 
                 // Toggle a class to handle the overlay visibility on click
                 const overlay = this.querySelector('.portfolio-overlay');
                 if (overlay) {
-                    overlay.classList.toggle('opacity-0');
+                    const isOpening = overlay.classList.contains('opacity-0');
-                    overlay.classList.toggle('opacity-100');
                     
-                    // Close other open overlays
+                    // Close all overlays first
-                    portfolioItems.forEach(otherItem => {
+                    document.querySelectorAll('.portfolio-overlay').forEach(ov => {
-                        if (otherItem !== this) {
+                        ov.classList.add('opacity-0');
-                            const otherOverlay = otherItem.querySelector('.portfolio-overlay');
+                        ov.classList.remove('opacity-100');
-                            if (otherOverlay) {
-                                otherOverlay.classList.add('opacity-0');
-                                otherOverlay.classList.remove('opacity-100');
-                            }
-                        }
                     });
+                    
+                    // Toggle the clicked one if it was closed
+                    if (isOpening) {
+                        overlay.classList.remove('opacity-0');
+                        overlay.classList.add('opacity-100');
+                    }
                 }
             });
+        }
+
+
+        // Initialize portfolio items
+        allPortfolioItems.forEach(item => {
+            setupPortfolioItemClick(item);
         });
+
+        // Filter functionality
+        function filterPortfolio(filterValue) {
+            allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
+            
+            allPortfolioItems.forEach(item => {
+                const categories = item.getAttribute('data-categories').split(' ');
+                
+                if (filterValue === 'all' || categories.some(cat => cat === filterValue)) {
+                    item.style.display = 'block';
+                    item.classList.add('animate-fade-in');
+                    setTimeout(() => {
+                        item.classList.remove('animate-fade-in');
+                    }, 500);
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        }
+
+        // Add click handlers to filter buttons
+        filterButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                // Update active button styles
+                filterButtons.forEach(btn => {
+                    btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
+                    btn.classList.add('bg-white', 'text-gray-700');
+                });
+                
+                if (this.getAttribute('data-filter') === 'all') {
+                    this.classList.add('bg-sport-purple', 'text-white');
+                } else {
+                    this.classList.add('bg-sport-orange', 'text-white');
+                }
+                
+                // Apply the filter
+                const filterValue = this.getAttribute('data-filter');
+                filterPortfolio(filterValue);
+            });
+        });
+        
+        // Initialize with 'all' filter
+        const allButton = document.querySelector('.portfolio-filter-btn[data-filter="all"]');
+        if (allButton) {
+            allButton.click();
+        }
     }