AzitaRahimi/final-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portfolio-herosection

Browse Source
This commit is contained in:
Azita Rahimi
2026-06-21 15:53:51 +03:30
parent 0ed14827ce
commit 5e13b30b4c
4 changed files with 29 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
portfolio.html
View File

@@ -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">

11
src/assets/css/portfolio-responsive.css
View File

@@ -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;
}
}

11
src/assets/css/portfolio.css
View File

@@ -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;

183
src/assets/js/portfolio.js
View File

@@ -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', () => {