Adding the right images and changing some descriptions.

This reverts commit d745be248d.

README.md

@@ -9,7 +9,7 @@ Pure static front-end site served by nginx. No build step required.
 
 ```
 public/               Site root (served by nginx)
-├── index.html        Single page: home, about, apps, games
+├── index.html        Single page: home, about, apps, hosted, games
 ├── favicon.ico
 └── assets/
     ├── css/          douwco.css (branding), style.css (layout)

public/assets/img/icons/hosted_icon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 272" width="192" height="272">
+    <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="#78e0a1"/>
+            <stop offset="1" stop-color="#47bcdf"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" stroke="url(#g)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="20" y="30" width="152" height="90" rx="18"/>
+        <rect x="20" y="152" width="152" height="90" rx="18"/>
+        <circle cx="52" cy="75" r="7" fill="url(#g)" stroke="none"/>
+        <circle cx="52" cy="197" r="7" fill="url(#g)" stroke="none"/>
+        <path d="M92 75h48"/>
+        <path d="M92 197h48"/>
+    </g>
+</svg>

public/assets/js/index.js

@@ -2,9 +2,8 @@ document.addEventListener('DOMContentLoaded', () => {
     setupNavigationHighlight();
     setupNavigationClicks();
     setupCopyright();
-    setupProjectCards();
-    setupAppsCarousel();
-    setupGameCards();
+    setupServiceSections();
+    setupCards();
 });
 
 function setupNavigationHighlight() {
@@ -47,206 +46,26 @@ function setupCopyright() {
     document.getElementById('copyright').textContent = `© ${new Date().getFullYear()} - douwco.be`;
 }
 
-function setupProjectCards() {
-    const projectCards = document.querySelectorAll('.project-card-new');
+/* Unified expandable card system, shared by the About Me and My Games grids.
+   Clicking a card expands it (spanning two grid columns); clicking again or
+   picking another card in the same grid collapses it. */
+function setupCards() {
+    const cards = document.querySelectorAll('.game-card');
 
-    projectCards.forEach(card => {
-        const shortDesc = card.querySelector('.project-card-short-desc');
-        const fullContent = card.querySelector('.project-card-content');
-        const toggleIcon = card.querySelector('.toggle-icon');
-        
-        if (!shortDesc || !fullContent || !toggleIcon) return;
-        
-        const toggleCard = (event) => {
-            if (event.target.tagName === 'A') {
+    cards.forEach(card => {
+        card.addEventListener('click', (event) => {
+            if (event.target.closest('a')) {
                 return;
             }
 
+            const grid = card.closest('.games-grid, .about-me-projects-grid');
             const isExpanded = card.classList.contains('expanded');
 
-            if (isExpanded) {
-                card.classList.remove('expanded');
-                toggleIcon.textContent = '+';
-            } else {
-                card.classList.add('expanded');
-                toggleIcon.textContent = '−';
+            if (grid) {
+                grid.querySelectorAll('.game-card').forEach(c => c.classList.remove('expanded'));
             }
 
-            event.stopPropagation();
-        };
-        
-        card.addEventListener('click', toggleCard);
-        toggleIcon.addEventListener('click', toggleCard);
-    });
-}
-
-function setupAppsCarousel() {
-    const carousel = document.getElementById('apps-carousel');
-    const carouselContainer = carousel ? carousel.closest('.carousel-container-full') : null;
-    const items = document.querySelectorAll('#apps-carousel .carousel-item-full');
-    const prevBtn = carouselContainer ? carouselContainer.querySelector('.carousel-nav-full.prev') : null;
-    const nextBtn = carouselContainer ? carouselContainer.querySelector('.carousel-nav-full.next') : null;
-    const screenshotImg = document.getElementById('apps-screenshot-img');
-    const description = document.getElementById('apps-description');
-    const title = document.getElementById('apps-title');
-    const goToAppBtn = document.getElementById('apps-link');
-    
-    if (!carousel || items.length === 0) return;
-    
-    const services = [
-        {
-            name: 'Gitea',
-            screenshot: '/assets/img/gitea_screenshot.png',
-            description: 'Self-hosted Git service with a simple and lightweight interface.',
-            url: 'https://gitea.douwco.be'
-        },
-        {
-            name: 'Nextcloud',
-            screenshot: '/assets/img/nextcloud_screenshot.png',
-            description: 'Private file hosting and collaboration platform with powerful features.',
-            url: 'https://nextcloud.douwco.be'
-        },
-        {
-            name: 'Penpot',
-            screenshot: '/assets/img/penpot_screenshot.png',
-            description: 'Open-source design and prototyping platform for teams.',
-            url: 'https://penpot.douwco.be'
-        },
-        {
-            name: 'Beszel',
-            screenshot: '/assets/img/beszel_screenshot.png',
-            description: 'Custom service management and monitoring dashboard.',
-            url: 'https://beszel.douwco.be'
-        },
-        {
-            name: 'Wattif',
-            screenshot: '/assets/img/wattif_screenshot.png',
-            description: 'Energy monitoring and analysis tool for smart homes.',
-            url: 'https://wattif.douwco.be'
-        }
-    ];
-    
-    let currentIndex = 0;
-    let isAnimating = false;
-    
-    function updateCarousel() {
-        if (isAnimating) return;
-        isAnimating = true;
-        
-        items.forEach((item, index) => {
-            const isSelected = index === currentIndex;
-            item.setAttribute('data-selected', isSelected.toString());
-        });
-        
-        const service = services[currentIndex];
-        
-        if (description) description.classList.remove('active');
-        if (screenshotImg) screenshotImg.classList.remove('active');
-        if (title) title.classList.remove('active');
-        if (goToAppBtn) goToAppBtn.classList.remove('active');
-        
-        setTimeout(() => {
-            if (screenshotImg) {
-                screenshotImg.src = service.screenshot;
-            }
-            if (title) {
-                title.textContent = service.name;
-            }
-            if (description) {
-                description.innerHTML = `<p>${service.description}</p>`;
-            }
-            if (goToAppBtn) {
-                goToAppBtn.href = service.url;
-            }
-            
-            setTimeout(() => {
-                if (description) description.classList.add('active');
-                if (screenshotImg) screenshotImg.classList.add('active');
-                if (title) title.classList.add('active');
-                if (goToAppBtn) goToAppBtn.classList.add('active');
-                isAnimating = false;
-            }, 50);
-        }, 300);
-    }
-    
-    function rotateCarousel(direction) {
-        if (isAnimating) return;
-        
-        currentIndex = (currentIndex + direction + items.length) % items.length;
-        updateCarousel();
-    }
-    
-    if (prevBtn) {
-        prevBtn.addEventListener('click', () => rotateCarousel(-1));
-    }
-    
-    if (nextBtn) {
-        nextBtn.addEventListener('click', () => rotateCarousel(1));
-    }
-    
-    items.forEach((item, index) => {
-        item.addEventListener('click', () => {
-            if (isAnimating) return;
-            currentIndex = index;
-            updateCarousel();
-        });
-    });
-    
-    let touchStartX = 0;
-    let touchEndX = 0;
-    
-    if (carousel) {
-        carousel.addEventListener('touchstart', (e) => {
-            touchStartX = e.changedTouches[0].screenX;
-        }, { passive: true });
-        
-        carousel.addEventListener('touchend', (e) => {
-            touchEndX = e.changedTouches[0].screenX;
-            handleSwipe();
-        }, { passive: true });
-    }
-    
-    function handleSwipe() {
-        if (isAnimating) return;
-        
-        const swipeThreshold = 50;
-        const diff = touchStartX - touchEndX;
-        
-        if (Math.abs(diff) > swipeThreshold) {
-            if (diff > 0) {
-                rotateCarousel(1);
-            } else {
-                rotateCarousel(-1);
-            }
-        }
-    }
-    
-    if (carousel) {
-        carousel.addEventListener('wheel', (e) => {
-            if (isAnimating) return;
-            e.preventDefault();
-            if (e.deltaY > 0) {
-                rotateCarousel(1);
-            } else {
-                rotateCarousel(-1);
-            }
-        }, { passive: false });
-    }
-    
-    updateCarousel();
-}
-
-function setupGameCards() {
-    const gameCards = document.querySelectorAll('.game-card');
-    
-    gameCards.forEach(card => {
-        card.addEventListener('click', (event) => {
-            const isExpanded = card.classList.contains('expanded');
-            
-            if (isExpanded) {
-                card.classList.remove('expanded');
-            } else {
-                gameCards.forEach(c => c.classList.remove('expanded'));
+            if (!isExpanded) {
                 card.classList.add('expanded');
             }
 
@@ -261,3 +80,47 @@ function setupGameCards() {
         }
     });
 }
+
+function setupServiceSections() {
+    document.querySelectorAll('.service-section').forEach(section => {
+        const items = section.querySelectorAll('.service-selector-item');
+        const visualImg = section.querySelector('.service-visual-img');
+        const title = section.querySelector('.service-title');
+        const description = section.querySelector('.service-description');
+        const link = section.querySelector('.go-to-app-button');
+
+        if (items.length === 0 || !visualImg || !title || !description || !link) return;
+
+        let isAnimating = false;
+
+        const applyItem = (item) => {
+            visualImg.src = item.dataset.image;
+            visualImg.alt = item.dataset.name;
+            title.textContent = item.dataset.name;
+            description.textContent = item.dataset.description;
+            link.href = item.dataset.url;
+        };
+
+        const selectItem = (item) => {
+            if (isAnimating || item.classList.contains('selected')) return;
+            isAnimating = true;
+
+            items.forEach(i => i.classList.toggle('selected', i === item));
+
+            visualImg.classList.add('fading');
+            setTimeout(() => {
+                applyItem(item);
+                requestAnimationFrame(() => {
+                    visualImg.classList.remove('fading');
+                    setTimeout(() => {
+                        isAnimating = false;
+                    }, 300);
+                });
+            }, 300);
+        };
+
+        items.forEach(item => {
+            item.addEventListener('click', () => selectItem(item));
+        });
+    });
+}