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

Refactor index.html to modularize sections, implement sticky navigation, and enhance CSS styles for improved UI responsiveness

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-05-14 23:20:28 +03:00
parent 814fb97207
commit f62368672d
11 changed files with 830 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/projects.html Normal file
View File

@@ -0,0 +1,183 @@
<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>
</div>
</div>
</section>