diff --git a/src/assets/css/portfolio-responsive.css b/src/assets/css/portfolio-responsive.css
index cb31767..18d8bf1 100644
--- a/src/assets/css/portfolio-responsive.css
+++ b/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;
+ }
}
diff --git a/src/assets/css/portfolio.css b/src/assets/css/portfolio.css
index 3a8df1b..9d70cd8 100644
--- a/src/assets/css/portfolio.css
+++ b/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;
diff --git a/src/assets/js/portfolio.js b/src/assets/js/portfolio.js
index b03f449..99ea28a 100644
--- a/src/assets/js/portfolio.js
+++ b/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', () => {