Update project descriptions, enhance image handling, and add lightbox functionality
This commit is contained in:
Mohammed Al-yaseen
@@ -752,36 +752,23 @@ strong {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-image,
|
||||
.projects-thumb:focus .projects-image {
|
||||
transform: rotate(0) translateY(0);
|
||||
.projects-info {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-thumb .popup-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.projects-image {
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
transform: rotate(10deg) translateY(80px);
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
|
||||
.projects-image {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-image {
|
||||
transform: scale(1.05);
|
||||
.projects-thumb:hover .projects-info {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.projects-title {
|
||||
margin-bottom: 20px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-title {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.projects-tag {
|
||||
@@ -790,6 +777,108 @@ strong {
|
||||
color: var(--secondary-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: rgba(20, 183, 137, 0.1);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.projects-description {
|
||||
color: var(--p-color);
|
||||
font-size: 14px;
|
||||
margin-top: 15px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-description {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.projects-links {
|
||||
margin-top: 15px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-links {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.projects-link {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: var(--secondary-color);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-link:hover {
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.projects-image {
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
transition: all 0.5s ease;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.projects-thumb:hover .projects-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Lightbox styles */
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.lightbox.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lightbox-image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
color: var(--white-color);
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
@@ -1065,7 +1154,7 @@ strong {
|
||||
|
||||
.custom-btn,
|
||||
.navbar .custom-btn {
|
||||
font-size: var(--copyright-text-font-size);
|
||||
font-size: var(--copyright-font-size);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
|
||||
80
index.html
80
index.html
@@ -100,7 +100,7 @@
|
||||
<h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4">I’m available for freelance work.</h2>
|
||||
<h2 class="mb-4">I'm available for freelance work.</h2>
|
||||
<p class="mb-4">
|
||||
<a class="custom-btn btn custom-link" href="#section_2"
|
||||
>Let's begin</a
|
||||
@@ -346,40 +346,36 @@
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Law-office Login</h3>
|
||||
<p class="projects-description">A secure login system for law office management with role-based access control and advanced security features.</p>
|
||||
<div class="projects-links">
|
||||
<a href="#" class="projects-link">View Demo</a>
|
||||
<a href="#" class="projects-link">Source Code</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="images/projects/law-office-login.png" class="popup-image">
|
||||
<img
|
||||
src="images/projects/law-office-login.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
<img src="images/projects/law-office-login.png" class="projects-image img-fluid" alt="Law Office Login System" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Easy-pay Login</h3>
|
||||
<p class="projects-description">A modern payment system login interface with secure authentication and user-friendly design.</p>
|
||||
<div class="projects-links">
|
||||
<a href="#" class="projects-link">View Demo</a>
|
||||
<a href="#" class="projects-link">Source Code</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="images/projects/easy-pay-login.png" class="popup-image">
|
||||
<img
|
||||
src="images/projects/easy-pay-login.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
<img src="images/projects/easy-pay-login.png" class="projects-image img-fluid" alt="Easy Pay Login System" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -387,20 +383,16 @@
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<small class="projects-tag">E-commerce</small>
|
||||
<h3 class="projects-title">Cloths Ecommerce</h3>
|
||||
<p class="projects-description">A full-featured e-commerce platform for clothing with advanced filtering and shopping cart functionality.</p>
|
||||
<div class="projects-links">
|
||||
<a href="#" class="projects-link">View Demo</a>
|
||||
<a href="#" class="projects-link">Source Code</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/cloths-e-commerce.png"
|
||||
class="popup-image"
|
||||
>
|
||||
<img
|
||||
src="images/projects/cloths-e-commerce.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
<a href="images/projects/cloths-e-commerce.png" class="popup-image">
|
||||
<img src="images/projects/cloths-e-commerce.png" class="projects-image img-fluid" alt="Clothing E-commerce Platform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -409,10 +401,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Law Office</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/law-office-home.png"
|
||||
class="popup-image"
|
||||
@@ -430,10 +420,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">SVU E-commerce</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/svu-hw.png"
|
||||
class="popup-image"
|
||||
@@ -451,10 +439,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">NANS's CRM</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/nanas-main-dashboard.png"
|
||||
class="popup-image"
|
||||
@@ -472,10 +458,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Majsin's Restaurant</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/majsin-dashborad.png"
|
||||
class="popup-image"
|
||||
@@ -493,10 +477,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">BPro's ERP System</h3>
|
||||
</div>
|
||||
|
||||
<a href="images/projects/bpro-erp.jpg" class="popup-image">
|
||||
<img
|
||||
src="images/projects/bpro-erp.jpg"
|
||||
@@ -511,10 +493,8 @@
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Moneyout Bank</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/moneyout.png"
|
||||
class="popup-image"
|
||||
@@ -527,8 +507,6 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -761,7 +739,7 @@
|
||||
>Start a project</strong
|
||||
>
|
||||
|
||||
<p class="mb-0">I’m available for freelance projects</p>
|
||||
<p class="mb-0">I'm available for freelance projects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -932,12 +910,12 @@
|
||||
<div class="copyright-text-wrap">
|
||||
<p class="mb-0">
|
||||
<span class="copyright-text"
|
||||
>Copyright © 2036 <a href="#">First Portfolio</a> Company. All
|
||||
>Copyright © 2025. All
|
||||
rights reserved.</span
|
||||
>
|
||||
Design:
|
||||
<a rel="sponsored" href="https://templatemo.com" target="_blank"
|
||||
>TemplateMo</a
|
||||
<a rel="sponsored" href="https://mohammed-alyaseen.github.io/portfolio" target="_blank"
|
||||
>Mohammed Al-Yaseen</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
@@ -954,5 +932,13 @@
|
||||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="js/magnific-popup-options.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
<!-- Add Lightbox HTML -->
|
||||
<div class="lightbox">
|
||||
<div class="lightbox-content">
|
||||
<span class="lightbox-close">×</span>
|
||||
<img src="" alt="" class="lightbox-image">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
39
js/custom.js
39
js/custom.js
@@ -70,4 +70,43 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add lightbox functionality
|
||||
const lightbox = document.querySelector('.lightbox');
|
||||
const lightboxImage = document.querySelector('.lightbox-image');
|
||||
const lightboxClose = document.querySelector('.lightbox-close');
|
||||
const projectImages = document.querySelectorAll('.popup-image');
|
||||
|
||||
projectImages.forEach(image => {
|
||||
image.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const imgSrc = image.getAttribute('href');
|
||||
const imgAlt = image.querySelector('img').getAttribute('alt');
|
||||
|
||||
lightboxImage.setAttribute('src', imgSrc);
|
||||
lightboxImage.setAttribute('alt', imgAlt);
|
||||
lightbox.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
});
|
||||
|
||||
lightboxClose.addEventListener('click', () => {
|
||||
lightbox.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
if (e.target === lightbox) {
|
||||
lightbox.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Close lightbox with Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
|
||||
lightbox.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
})(window.jQuery);
|
||||
|
||||
Reference in New Issue
Block a user