portfolio-herosection

portfolio.html

@@ -153,9 +153,14 @@
         </div>
 
         <section class="hero-section">
-          <video autoplay muted loop playsinline>
+          <video class="desktop-file" autoplay muted loop playsinline>
             <source src="./src/assets/images/high.mp4" type="video/mp4" />
           </video>
+
+          <video class="mobile-file" autoplay muted loop playsinline>
+            <source src="./src/assets/images/high.mp4" type="vido1.mp4" />
+          </video>
+
           <div class="container-hero">
             <div class="hero-content">
               <div class="hero-category">

src/assets/css/portfolio-responsive.css

@@ -246,6 +246,7 @@
     padding-right: 19px;
     padding-bottom: 122px;
     margin-top: 78px;
+    
   }
 
   .hero-section video,
@@ -441,4 +442,14 @@
     padding: 0;
     margin: 0 auto;
   }
+  .desktop-file {
+    display: none;
+  }
+  .mobile-file {
+    display: block;
+    width: 100%;
+  }
+   .hero-section {
+     aspect-ratio: 9 / 17;
+  }
 }

src/assets/css/portfolio.css

@@ -20,7 +20,9 @@ section[class*='-section'] {
 .hero-section {
   position: relative;
   width: 100%;
-  height: 100vh;
+   aspect-ratio: 16 / 8;
+   max-height: 725px;
+  /* height: clamp(500px, 70vh, 725px); */
   overflow: hidden;
   display: flex;
   align-items: end;
@@ -56,6 +58,13 @@ section[class*='-section'] {
     linear-gradient(106.84deg, rgba(0, 63, 97, 0) 0%, rgba(0, 20, 31, 0.6) 94.22%),
     linear-gradient(0deg, rgba(0, 20, 31, 0.15), rgba(0, 20, 31, 0.15));
 }
+.desktop-file{
+  display: block;
+  width: 100%;
+}
+.mobile-file{
+  display: none;
+}
 .hero-content {
   position: relative;
   z-index: 2;

src/assets/js/portfolio.js

@@ -768,21 +768,12 @@ document.querySelectorAll('.close-popup').forEach((btn) => {
   });
 });
 
-// overlay?.addEventListener('click', (e) => {
-//   if (e.target === overlay) {
-//     overlay.classList.remove('active');
-//     document.body.style.overflow = '';
-//   }
-// });
 
 function openImagePopup(src) {
   // const img = imagePopup?.querySelector('img');
   const img = imagePopup.querySelector('.img-popup-img');
   const video = imagePopup.querySelector('.video-popup-player');
 
-  // if (img && src) {
-  //   img.src = src;
-  // }
   video.pause();
   // video.src = '';
   video.style.display = 'none';
@@ -810,9 +801,7 @@ function openVideoPopup(src, poster = '') {
 
   video.style.display = 'block';
   video.pause();
-  // if (poster) {
+
-  //   video.poster = poster;
-  // }
   video.removeAttribute('poster');
 
   if (poster) {
@@ -820,8 +809,6 @@ function openVideoPopup(src, poster = '') {
   }
   video.src = src;
   video.load();
-  // video.currentTime = 0;
-  // video.play();
 
   imagePopup.classList.add('active');
   document.body.style.overflow = 'hidden';
@@ -879,12 +866,7 @@ document.addEventListener('DOMContentLoaded', () => {
   renderMedia(mediaData);
 });
 
-// document.querySelectorAll('.wrapper').forEach((item) => {
+
-//   item.addEventListener('click', (e) => {
-//     e.preventDefault();
-//     openPortfolioPopup();
-//   });
-// });
 document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => {
   e.preventDefault();
   openPopupByIndex(0);
@@ -956,121 +938,7 @@ document.addEventListener('DOMContentLoaded', () => {
   updateUI();
 });
 
-// const relatedCards = [
-//   ...document.querySelectorAll('[data-related-section="gallery"] .related-card'),
-// ];
 
-// let currentPopupIndex = 0;
-
-// function openPopupByIndex(index) {
-//   const card = relatedCards[index];
-//   if (!card) return;
-
-//   currentPopupIndex = index;
-//   const media = card.querySelector('.media-container');
-
-//   if (!media) return;
-//   const type = media.dataset.type;
-//   const src = media.dataset.src;
-
-//   if (type === 'image') {
-//     const popupImg = imagePopup.querySelector('.img-wrapper img');
-
-//     if (popupImg) {
-//       popupImg.src = src;
-//     }
-
-//     imagePopup.classList.add('active');
-//   } else if (type === 'video') {
-//     return;
-//   }
-
-//   document.body.style.overflow = 'hidden';
-
-//   updatePopupButtons();
-// }
-
-// function updatePopupButtons() {
-//   const allPopups = document.querySelectorAll('.portfolio-popup.active');
-
-//   allPopups.forEach((popup) => {
-//     const nextBtn = popup.querySelector('.next-popup');
-//     const prevBtn = popup.querySelector('.prev-popup');
-
-//     if (!nextBtn || !prevBtn) return;
-
-//     if (currentPopupIndex <= 0) {
-//       prevBtn.classList.add('disabled');
-//     } else {
-//       prevBtn.classList.remove('disabled');
-//     }
-//     if (currentPopupIndex >= relatedCards.length - 1) {
-//       nextBtn.classList.add('disabled');
-//     } else {
-//       nextBtn.classList.remove('disabled');
-//     }
-//   });
-// }
-
-// relatedCards.forEach((card, index) => {
-//   card.addEventListener('click', (e) => {
-//     if (e.target.closest('.play-btn')) return;
-//     if (e.target.closest('.related-content p')) return;
-//     openPopupByIndex(index);
-//   });
-// });
-// document.querySelectorAll('.next-popup').forEach((btn) => {
-//   btn.addEventListener('click', () => {
-//     if (currentPopupIndex >= relatedCards.length - 1) return;
-
-//     currentPopupIndex++;
-//     overlay.classList.remove('active');
-//     imagePopup.classList.remove('active');
-//     openPopupByIndex(currentPopupIndex);
-//   });
-// });
-
-// document.querySelectorAll('.prev-popup').forEach((btn) => {
-//   btn.addEventListener('click', () => {
-//     if (currentPopupIndex <= 0) return;
-
-//     currentPopupIndex--;
-//     overlay.classList.remove('active');
-//     imagePopup.classList.remove('active');
-
-//     openPopupByIndex(currentPopupIndex);
-//   });
-// });
-
-// window.addEventListener('keydown', (e) => {
-//   const popupIsOpen =
-//     overlay.classList.contains('active') || imagePopup.classList.contains('active');
-
-//   if (!popupIsOpen) return;
-
-//   if (e.key === 'ArrowRight') {
-//     if (currentPopupIndex < relatedCards.length - 1) {
-//       currentPopupIndex++;
-//       overlay.classList.remove('active');
-//       imagePopup.classList.remove('active');
-//       openPopupByIndex(currentPopupIndex);
-//     }
-//   }
-
-//   if (e.key === 'ArrowLeft') {
-//     if (currentPopupIndex > 0) {
-//       currentPopupIndex--;
-//       overlay.classList.remove('active');
-//       imagePopup.classList.remove('active');
-//       openPopupByIndex(currentPopupIndex);
-//     }
-//   }
-//   if (e.key === 'Escape') {
-//     overlay.classList.remove('active');
-//     imagePopup.classList.remove('active');
-//     document.body.style.overflow = '';
-//   }
-// });
 const relatedCards = [
   ...document.querySelectorAll('[data-related-section="gallery"] .related-card'),
 ];
@@ -1089,27 +957,6 @@ const galleryItems = [
   ),
 ];
 
-// function openPopupByIndex(index) {
-//   const card = relatedCards[index];
-
-//   if (!card) return;
-
-//   currentPopupIndex = index;
-
-//   const media = card.querySelector('.media-container');
-
-//   const type = media.dataset.type;
-//   const src = media.dataset.src;
-//   const poster = media.dataset.poster;
-
-//   if (type === 'video') {
-//     openVideoPopup(src, poster);
-//   } else {
-//     openImagePopup(src);
-//   }
-
-//   updatePopupButtons();
-// }
 
 function openPopupByIndex(index) {
   const item = galleryItems[index];
@@ -1140,17 +987,7 @@ function openPopupByIndex(index) {
 
   updatePopupButtons();
 }
-// function updatePopupButtons() {
-//   const nextBtn = imagePopup.querySelector('.next-popup');
-//   const prevBtn = imagePopup.querySelector('.prev-popup');
 
-//   if (!nextBtn || !prevBtn) return;
-// prevBtn.disabled = currentPopupIndex === 0;
-// nextBtn.disabled = currentPopupIndex === galleryItems.length - 1;
-
-// prevBtn.classList.toggle('disabled', currentPopupIndex === 0);
-// nextBtn.classList.toggle('disabled', currentPopupIndex === galleryItems.length - 1);
-// }
 function updatePopupButtons() {
   document.querySelectorAll('.next-popup').forEach((btn) => {
     btn.disabled = currentPopupIndex === galleryItems.length - 1;
@@ -1164,13 +1001,7 @@ function updatePopupButtons() {
     btn.classList.toggle('disabled', currentPopupIndex === 0);
   });
 }
-// relatedCards.forEach((card, index) => {
-//   card.addEventListener('click', (e) => {
-//     if (e.target.closest('.play-btn')) return;
 
-//     openPopupByIndex(index);
-//   });
-// });
 document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => {
   e.preventDefault();
   openPopupByIndex(0);
@@ -1183,17 +1014,7 @@ relatedCards.forEach((card, index) => {
     openPopupByIndex(index + 1);
   });
 });
-// imagePopup.querySelector('.next-popup').addEventListener('click', () => {
-//   if (currentPopupIndex >= galleryItems.length - 1) return;
 
-//   openPopupByIndex(currentPopupIndex + 1);
-// });
-
-// imagePopup.querySelector('.prev-popup').addEventListener('click', () => {
-//   if (currentPopupIndex <= 0) return;
-
-//   openPopupByIndex(currentPopupIndex - 1);
-// });
 
 document.querySelectorAll('.next-popup').forEach((btn) => {
   btn.addEventListener('click', () => {