From 814fb97207ecd124b036b6d12563c00147e6e8e5 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 14 May 2025 22:39:31 +0300 Subject: [PATCH] Update project descriptions, enhance image handling, and add lightbox functionality --- css/templatemo-first-portfolio-style.css | 139 +++++++++++++++++++---- index.html | 80 ++++++------- js/custom.js | 39 +++++++ 3 files changed, 186 insertions(+), 72 deletions(-) diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css index 6b16e9b..bbd4e13 100644 --- a/css/templatemo-first-portfolio-style.css +++ b/css/templatemo-first-portfolio-style.css @@ -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; } diff --git a/index.html b/index.html index f93c2d7..3669097 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@
Hello friend!
-

I’m available for freelance work.

+

I'm available for freelance work.

Let's begin -

Website -

Law-office Login

+

A secure login system for law office management with role-based access control and advanced security features.

+
+ View Demo + Source Code +
- - + Law Office Login System
-
Website -

Easy-pay Login

+

A modern payment system login interface with secure authentication and user-friendly design.

+
+ View Demo + Source Code +
- - + Easy Pay Login System
@@ -387,20 +383,16 @@
- Website - + E-commerce

Cloths Ecommerce

+

A full-featured e-commerce platform for clothing with advanced filtering and shopping cart functionality.

+
+ View Demo + Source Code +
- - - + + Clothing E-commerce Platform
@@ -409,10 +401,8 @@
Website -

Law Office

-
Website -

SVU E-commerce

-
Website -

NANS's CRM

-
Website -

Majsin's Restaurant

-
Website -

BPro's ERP System

-
Website -

Moneyout Bank

-
- - @@ -761,7 +739,7 @@ >Start a project -

I’m available for freelance projects

+

I'm available for freelance projects

@@ -932,12 +910,12 @@

Copyright © 2036 First Portfolio Company. All + >Copyright © 2025. All rights reserved. Design: - TemplateMoMohammed Al-Yaseen

@@ -954,5 +932,13 @@ + + +
+
+ × + +
+
diff --git a/js/custom.js b/js/custom.js index f47fefc..975ac6c 100644 --- a/js/custom.js +++ b/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);