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

53
components/about.html Normal file
View File

@@ -0,0 +1,53 @@
<section class="about section-padding" id="section_2">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid" alt="" />
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<div class="about-thumb">
<div class="section-title-wrap d-flex justify-content-end align-items-center mb-4">
<h2 class="text-white me-4 mb-0">My Story</h2>
<img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
</div>
<h3 class="pt-2 mb-3">A little bit about Mohammed</h3>
<p>
👋 Greetings I'm Mohammed, a dedicated software engineer with a passion for creating innovative solutions.
My journey in the field of Information Technology began at the Arab International University
in 2016, where I pursued a Bachelor's Degree in Computer Software Engineering,
graduating in 2021.
<br>
<h5> BPro Story </h5>
Upon completion of my studies, I embarked on a project to develop an Enterprise Resource Planning (ERP) system. This
comprehensive system encompasses seven core components: Inventory Management,
Purchasing, Sales, Customer Relationship Management (CRM), Finance, Payments, and
Resources
<br>
<br>
<h5> Almuthafar Story </h5>
For <a href="https://www.bayantechnologies.com/"> Bayan Digital Hub </a> (Kuwaiti AWS startup, Oracle Partner ): Develop a platform for
managing and tracking law case processes, clients, lawyers, and the administration processes, producing
the results as PDF reports, and making sure that the case processes run smoothly and
organized.
<br>
<br>
<h5> Big-dash Story </h5>
Engaging in developing a comprehensive banking system ( for <a href="https://moneyout.com.tr"> Moneyout Elektronik Para ve
Ödeme Hizmetleri A.Ş </a>) aimed at facilitating financial transactions across various branches,
incorporating digital wallet functionalities, and supporting transactions executed in
multiple currencies.
<br>
<br>
<h5> Easy-pay Story </h5>
For <a href="https://www.facebook.com/MONALISA.SYRIA"> Monalisa restaurant in Damascus </a>, the system includes managing reservations, tables,
products, invoices, government tax integration, debits, and producing different types of reports like
sales and logs of payments.
</p>
</div>
</div>
</div>
</div>
</section>

33
components/contact.html Normal file
View File

@@ -0,0 +1,33 @@
<section class="contact section-padding" id="section_5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-wrap d-flex justify-content-center align-items-center mb-5">
<img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
<h2 class="text-white ms-4 mb-0">Contact Me</h2>
</div>
</div>
<div class="col-lg-8 col-12 mx-auto">
<div class="custom-form contact-form" action="#" method="post" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required="" />
</div>
<div class="col-lg-6 col-md-6 col-12">
<input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email" required="" />
</div>
<div class="col-12">
<textarea name="message" rows="6" class="form-control" id="message" placeholder="Message"></textarea>
<button type="submit" class="form-control">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

111
components/featured.html Normal file
View File

@@ -0,0 +1,111 @@
<section class="featured section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<div class="profile-thumb">
<div class="profile-title">
<h4 class="mb-0">Personal Information</h4>
</div>
<div class="profile-body">
<div class="profile-info-item">
<span class="profile-small-title">Name</span>
<span class="profile-value">Mohammed Al-yaseen</span>
</div>
<div class="profile-info-item">
<span class="profile-small-title">Birthday</span>
<span class="profile-value">Jun 1, 1998</span>
</div>
<div class="profile-info-item">
<span class="profile-small-title">Phone</span>
<span class="profile-value">
<a href="tel:+963-962-469-482" class="profile-link">
<i class="bi bi-telephone-fill me-2"></i>+963-962-469-482
</a>
</span>
</div>
<div class="profile-info-item">
<span class="profile-small-title">Email</span>
<span class="profile-value">
<a href="mailto:mohammed.alyaseen.it@gmail.com" class="profile-link">
<i class="bi bi-envelope-fill me-2"></i>mohammed.alyaseen.it@gmail.com
</a>
</span>
</div>
<div class="profile-info-item">
<span class="profile-small-title">Location</span>
<span class="profile-value">
<i class="bi bi-geo-alt-fill me-2"></i>Istanbul, Turkey
</span>
</div>
<div class="profile-info-item">
<span class="profile-small-title">Social</span>
<div class="profile-social-links">
<a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" class="profile-social-link" target="_blank">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://github.com/mohammed-alyaseen" class="profile-social-link" target="_blank">
<i class="bi bi-github"></i>
</a>
<a href="https://www.facebook.com/profile.php?id=100010330412662" class="profile-social-link" target="_blank">
<i class="bi bi-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<div class="about-thumb">
<div class="row">
<div class="col-lg-6 col-6 featured-border-bottom py-3">
<div class="featured-item">
<strong class="featured-numbers">4+</strong>
<p class="featured-text">Years of Experience</p>
<div class="featured-icon">
<i class="bi bi-briefcase-fill"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-3">
<div class="featured-item">
<strong class="featured-numbers">5+</strong>
<p class="featured-text">Happy Customers</p>
<div class="featured-icon">
<i class="bi bi-people-fill"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-6 pt-4">
<div class="featured-item">
<strong class="featured-numbers">10+</strong>
<p class="featured-text">Projects Finished</p>
<div class="featured-icon">
<i class="bi bi-check-circle-fill"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
<div class="featured-item">
<strong class="featured-numbers">7+</strong>
<p class="featured-text">Digital Awards</p>
<div class="featured-icon">
<i class="bi bi-trophy-fill"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

14
components/footer.html Normal file
View File

@@ -0,0 +1,14 @@
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<div class="copyright-text-wrap">
<p class="mb-0">
<span class="copyright-text">Copyright © 2024 <a href="#">Mohammed</a> Company. All rights reserved.</span>
<span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span>
</p>
</div>
</div>
</div>
</div>
</footer>

59
components/header.html Normal file
View File

@@ -0,0 +1,59 @@
<!-- Preloader -->
<section class="preloader">
<div class="spinner">
<span class="spinner-rotate"></span>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
<div class="d-flex align-items-center d-lg-none">
<i class="navbar-icon bi-telephone-plus me-3"></i>
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-lg-5">
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_2">About</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_3">Services</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_4">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_5">Contact</a>
</li>
</ul>
<div class="d-lg-flex align-items-center d-none ms-auto">
<i class="navbar-icon bi-telephone-plus me-3"></i>
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
</div>
</div>
</div>
</nav>

27
components/hero.html Normal file
View File

@@ -0,0 +1,27 @@
<section class="hero d-flex justify-content-center align-items-center" id="section_1">
<div class="container">
<div class="row">
<div class="col-lg-7 col-12">
<div class="hero-text">
<div class="hero-title-wrap d-flex align-items-center mb-4">
<img src="images/happy-bearded-young-man.jpg" class="avatar-image avatar-image-large img-fluid" alt="" />
<h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
</div>
<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>
</p>
</div>
</div>
<div class="col-lg-5 col-12 position-relative">
<img src="images/National Geographic on Instagram Photo by Stephe.jpg" class="hero-image img-fluid" alt="" />
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#535da1" fill-opacity="1" d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
</svg>
</section>

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>

142
components/services.html Normal file
View File

@@ -0,0 +1,142 @@
<section class="services section-padding" id="section_3">
<div class="container">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
>
<img
src="images/handshake-man-woman-after-signing-business-contract-closeup.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Services</h2>
</div>
<div class="row pt-lg-5">
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Websites</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$2,400</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You may want to explore Too CSS for great collection of
free HTML CSS templates.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-globe"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Branding</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,200</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You can explore more CSS templates on TemplateMo website
by browsing through different tags.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-lightbulb"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Ecommerce</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$3,600</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
If you need a customized ecommerce website for your
business, feel free to discuss with me.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-phone"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">SEO</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,450</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
To list your website first on any search engine, we will
work together. First Portfolio is one-page CSS Template
for free download.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-google"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>