bug fix, content finalize, rm uneeded files

css/style.css

@@ -383,6 +383,18 @@ a {
     filter: saturate(1.1) contrast(1.1) hue-rotate(5deg);
 }
 
+/* show only on touch devices */
+@media (hover: none),
+(hover: on-demand),
+(-moz-touch-enabled: 1),
+(pointer:coarse) {
+    .project-tile:hover {
+        transform: none;
+        box-shadow: none;
+        filter: none;
+    }
+}
+
 .project-tile::before {
     content: "";
     position: absolute;

js/tiles.js

@@ -6,7 +6,6 @@ const projectTilesContainer = document.getElementById('project-tiles-container')
 const projectModal = document.getElementById('project-modal');
 const modalTitle = document.getElementById('modal-title');
 const modalPhoto = document.getElementById('modal-photo');
-// const modalYear = document.getElementById('modal-year');
 const modalRole = document.getElementById('modal-role');
 const modalDescription = document.getElementById('modal-description');
 const modalVideo = document.getElementById('modal-video');
@@ -25,12 +24,11 @@ const pixelMoveThreshold = 5;
 
 function init() {
     // Generate project tiles dynamically
-    projectData
-    .sort((a, b) => new Date(b.year) - new Date(a.year))
-    .forEach(project => {
+    projectData.sort((a, b) => new Date(b.year) - new Date(a.year));
+    projectData.splice(0, 2, projectData[1], projectData[0]);
+    projectData.forEach(project => {
         const projectTile = document.createElement('div');
         projectTile.classList.add('project-tile');
-        //projectTile.style.touchAction = 'pan-y';
 
         projectTile.innerHTML = `
             <h3>${project.title} - ${project.year}</h3>
@@ -41,8 +39,6 @@ function init() {
         projectTile.addEventListener('click', () => {
             if (scrollCooledDown) {
                 modalTitle.textContent = project.title;
-                // modalPhoto.src = project.photo;
-                // modalYear.textContent = project.year;
                 modalRole.innerHTML = project.role.map(role => `<li>${role}</li>`).join('');
                 modalDescription.innerHTML = project.description;
 
@@ -83,31 +79,24 @@ function init() {
 
     // Close modal when close button is clicked
     closeBtn.addEventListener('click', () => {
+        stopVideos();
         projectModal.style.display = 'none';
     });
 
     projectTilesContainer.addEventListener('pointerdown', startDragging);
     projectTilesContainer.addEventListener('pointermove', dragging);
     projectTilesContainer.addEventListener('pointerup', stopDragging);
     projectTilesContainer.addEventListener('pointerleave', stopDragging);
-    //projectTilesContainer.addEventListener('pointercancel', stopDragging);
-
 }
 
 function startDragging(event) {
-    console.log("\nStart dragging: " + event.pageX);
-
     if (event.button !=0 ) return; // Check if left mouse button is pressed
     startPosition = event.pageX - projectTilesContainer.offsetLeft;
     scrollLeft = projectTilesContainer.scrollLeft;
-
-
     isDragging = true;  
   }
 
   function dragging(event) {
-    console.log("\ndragging and isDragging is: " + isDragging);
-
     if (!isDragging ) return;  
 
     const currentPosition = event.pageX - projectTilesContainer.offsetLeft;
@@ -122,15 +111,22 @@ function startDragging(event) {
   }
 
   function stopDragging(event) {
-    console.log("\nStop dragging: " + event.pageX);
 
-    //isDragging = false;
-    //if (event.button !== 0) return; // Check if left mouse button is released
-    //setTimeout(() => {
     isDragging = false;
     //}, 30); // Adjust the delay (in milliseconds) as needed
     setTimeout(() => {
         scrollCooledDown = true;
     }, scrollCoolDown);  }
 
+
+    function stopVideos() {
+        const videos = document.querySelectorAll('#project-modal video, #project-modal iframe');
+        videos.forEach(video => {
+            const iframes = document.querySelectorAll('#project-modal iframe');
+            iframes.forEach(iframe => {
+              iframe.parentNode.removeChild(iframe);
+            });
+        });
+      }
+
   init();