tech-masters/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor projects section layout for improved readability and consistency, update navbar styles for better responsiveness, and remove unused image assets.

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-05-14 23:41:46 +03:00
parent 595a1e6bc5
commit 9a0d5aa7d5
3 changed files with 259 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
components/projects.html
View File

@@ -1,183 +1,156 @@
<section class="projects section-padding" id="section_4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-12 ms-auto">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
>
<img
src="images/white-desk-work-study-aesthetics.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Projects</h2>
</div>
</div>
<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="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="Easy Pay 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">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="Clothing E-commerce Platform" />
</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">Law Office</h3>
</div>
<a
href="images/projects/law-office-home.png"
class="popup-image"
>
<img
src="images/projects/law-office-home.png"
class="projects-image img-fluid"
alt="law office"
/>
</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">SVU E-commerce</h3>
</div>
<a
href="images/projects/svu-hw.png"
class="popup-image"
>
<img
src="images/projects/svu-hw.png"
class="projects-image img-fluid"
alt=""
/>
</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">NANS's CRM</h3>
</div>
<a
href="images/projects/nanas-main-dashboard.png"
class="popup-image"
>
<img
src="images/projects/nanas-main-dashboard.png"
class="projects-image img-fluid"
alt=""
/>
</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">Majsin's Restaurant</h3>
</div>
<a
href="images/projects/majsin-dashborad.png"
class="popup-image"
>
<img
src="images/projects/majsin-dashborad.png"
class="projects-image img-fluid"
alt=""
/>
</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">BPro's ERP System</h3>
</div>
<a href="images/projects/bpro-erp.jpg" class="popup-image">
<img
src="images/projects/bpro-erp.jpg"
class="projects-image img-fluid"
alt=""
/>
</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">Moneyout Bank</h3>
</div>
<a
href="images/projects/moneyout.png"
class="popup-image"
>
<img
src="images/projects/moneyout.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-12 ms-auto">
<div class="section-title-wrap d-flex justify-content-center align-items-center mb-4">
<img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
<h2 class="text-white ms-4 mb-0">Projects</h2>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
<div class="row">
<!-- Law Office Login -->
<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="Law Office Login System" />
</a>
</div>
</div>
<!-- Easy-pay Login -->
<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="Easy Pay Login System" />
</a>
</div>
</div>
<!-- Cloths Ecommerce -->
<div class="col-lg-4 col-md-6 col-12">
<div class="projects-thumb">
<div class="projects-info">
<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="Clothing E-commerce Platform" />
</a>
</div>
</div>
<!-- Law Office -->
<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</h3>
</div>
<a href="images/projects/law-office-home.png" class="popup-image">
<img src="images/projects/law-office-home.png" class="projects-image img-fluid" alt="law office" />
</a>
</div>
</div>
<!-- SVU E-commerce -->
<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">SVU E-commerce</h3>
</div>
<a href="images/projects/svu-hw.png" class="popup-image">
<img src="images/projects/svu-hw.png" class="projects-image img-fluid" alt="" />
</a>
</div>
</div>
<!-- NANS's CRM -->
<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">NANS's CRM</h3>
</div>
<a href="images/projects/nanas-main-dashboard.png" class="popup-image">
<img src="images/projects/nanas-main-dashboard.png" class="projects-image img-fluid" alt="" />
</a>
</div>
</div>
<!-- Majsin's Restaurant -->
<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">Majsin's Restaurant</h3>
</div>
<a href="images/projects/majsin-dashborad.png" class="popup-image">
<img src="images/projects/majsin-dashborad.png" class="projects-image img-fluid" alt="" />
</a>
</div>
</div>
<!-- BPro's ERP System -->
<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">BPro's ERP System</h3>
</div>
<a href="images/projects/bpro-erp.png" class="popup-image">
<img src="images/projects/bpro-erp.png" class="projects-image img-fluid" alt="" />
</a>
</div>
</div>
<!-- Moneyout Bank -->
<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">Moneyout Bank</h3>
</div>
<a href="images/projects/moneyout.png" class="popup-image">
<img src="images/projects/moneyout.png" class="projects-image img-fluid" alt="" />
</a>
</div>
</div>
</div>
</div>
<!-- Lightbox -->
<div class="lightbox">
<div class="lightbox-content">
<img src="" alt="" class="lightbox-image">
<span class="lightbox-close">&times;</span>
</div>
</div>
</section>