From f62368672da01da87f348eb646b34e957cbdc813 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 14 May 2025 23:20:28 +0300 Subject: [PATCH] Refactor index.html to modularize sections, implement sticky navigation, and enhance CSS styles for improved UI responsiveness --- components/about.html | 53 ++ components/contact.html | 33 + components/featured.html | 111 +++ components/footer.html | 14 + components/header.html | 59 ++ components/hero.html | 27 + components/projects.html | 183 +++++ components/services.html | 142 ++++ css/templatemo-first-portfolio-style.css | 210 ++++- index.html | 928 +---------------------- js/custom.js | 9 + 11 files changed, 830 insertions(+), 939 deletions(-) create mode 100644 components/about.html create mode 100644 components/contact.html create mode 100644 components/featured.html create mode 100644 components/footer.html create mode 100644 components/header.html create mode 100644 components/hero.html create mode 100644 components/projects.html create mode 100644 components/services.html diff --git a/components/about.html b/components/about.html new file mode 100644 index 0000000..e6305ed --- /dev/null +++ b/components/about.html @@ -0,0 +1,53 @@ +
+
+
+
+ +
+ +
+
+
+

My Story

+ +
+ +

A little bit about Mohammed

+ +

+ 👋 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. +
+

BPro Story
+ 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 +
+
+
Almuthafar Story
+ For Bayan Digital Hub (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. +
+
+
Big-dash Story
+ Engaging in developing a comprehensive banking system ( for Moneyout Elektronik Para ve + Ödeme Hizmetleri A.Ş ) aimed at facilitating financial transactions across various branches, + incorporating digital wallet functionalities, and supporting transactions executed in + multiple currencies. +
+
+
Easy-pay Story
+ For Monalisa restaurant in Damascus , the system includes managing reservations, tables, + products, invoices, government tax integration, debits, and producing different types of reports like + sales and logs of payments. +

+
+
+
+
+
\ No newline at end of file diff --git a/components/contact.html b/components/contact.html new file mode 100644 index 0000000..e39b976 --- /dev/null +++ b/components/contact.html @@ -0,0 +1,33 @@ +
+
+
+
+
+ + +

Contact Me

+
+
+ +
+
+
+
+ +
+ +
+ +
+ +
+ + + +
+
+
+
+
+
+
\ No newline at end of file diff --git a/components/featured.html b/components/featured.html new file mode 100644 index 0000000..9fdac2d --- /dev/null +++ b/components/featured.html @@ -0,0 +1,111 @@ +
+
+
+
+
+
+

Personal Information

+
+ +
+
+ Name + Mohammed Al-yaseen +
+ +
+ Birthday + Jun 1, 1998 +
+ +
+ Phone + + + +963-962-469-482 + + +
+ +
+ Email + + + mohammed.alyaseen.it@gmail.com + + +
+ +
+ Location + + Istanbul, Turkey + +
+ +
+ Social +
+ + + + + + + + + +
+
+
+
+
+ +
+
+
+
+
+ 4+ +

Years of Experience

+
+ +
+
+
+ +
+
+ 5+ +

Happy Customers

+
+ +
+
+
+ +
+
+ 10+ +

Projects Finished

+
+ +
+
+
+ +
+
+ 7+ +

Digital Awards

+
+ +
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/components/footer.html b/components/footer.html new file mode 100644 index 0000000..c4e5701 --- /dev/null +++ b/components/footer.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/components/header.html b/components/header.html new file mode 100644 index 0000000..120ae51 --- /dev/null +++ b/components/header.html @@ -0,0 +1,59 @@ + +
+ +
+ + + \ No newline at end of file diff --git a/components/hero.html b/components/hero.html new file mode 100644 index 0000000..8290300 --- /dev/null +++ b/components/hero.html @@ -0,0 +1,27 @@ +
+
+
+
+
+
+ +
Hello friend!
+
+ +

I'm available for freelance work.

+

+ Let's begin +

+
+
+ +
+ +
+
+
+ + + + +
\ No newline at end of file diff --git a/components/projects.html b/components/projects.html new file mode 100644 index 0000000..75e48ef --- /dev/null +++ b/components/projects.html @@ -0,0 +1,183 @@ +
+
+
+
+
+ + +

Projects

+
+
+ +
+ +
+
+
+ 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 + +
+
+ +
+
+
+ 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 + +
+
+ +
+
+
+ Website +

Law Office

+
+ + law office + +
+
+ +
+
+
+ Website +

SVU E-commerce

+
+ + + +
+
+ +
+
+
+ Website +

NANS's CRM

+
+ + + +
+
+ +
+
+
+ Website +

Majsin's Restaurant

+
+ + + +
+
+ +
+
+
+ Website +

BPro's ERP System

+
+ + + +
+
+ +
+
+
+ Website +

Moneyout Bank

+
+ + + +
+
+
+
+
\ No newline at end of file diff --git a/components/services.html b/components/services.html new file mode 100644 index 0000000..5abfa48 --- /dev/null +++ b/components/services.html @@ -0,0 +1,142 @@ +
+
+
+
+
+ + +

Services

+
+ +
+
+
+
+

Websites

+ + +
+ +

+ You may want to explore Too CSS for great collection of + free HTML CSS templates. +

+ + Discover More + +
+ +
+
+
+ +
+
+
+

Branding

+ + +
+ +

+ You can explore more CSS templates on TemplateMo website + by browsing through different tags. +

+ + Discover More + +
+ +
+
+
+ +
+
+
+

Ecommerce

+ + +
+ +

+ If you need a customized ecommerce website for your + business, feel free to discuss with me. +

+ + Discover More + +
+ +
+
+
+ +
+
+
+

SEO

+ + +
+ +

+ To list your website first on any search engine, we will + work together. First Portfolio is one-page CSS Template + for free download. +

+ + Discover More + +
+ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css index bbd4e13..771e5f2 100644 --- a/css/templatemo-first-portfolio-style.css +++ b/css/templatemo-first-portfolio-style.css @@ -303,10 +303,22 @@ strong { height: auto !important; } -.is-sticky, -.is-sticky .navbar .container { +.navbar { + background: transparent; + position: fixed; + z-index: 9; + right: 0; + left: 0; + transition: all 0.3s; + padding-top: 15px; + padding-bottom: 0; +} + +.is-sticky { background: var(--white-color); - box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); + padding-top: 10px; + padding-bottom: 10px; } .is-sticky .navbar-brand, @@ -328,17 +340,6 @@ strong { color: var(--white-color); } -.navbar { - background: transparent; - position: absolute; - z-index: 9; - right: 0; - left: 0; - transition: all 0.3s; - padding-top: 15px; - padding-bottom: 0; -} - .navbar .container { border-radius: var(--border-radius-small); padding: 10px 25px; @@ -347,11 +348,20 @@ strong { .navbar-brand { font-size: var(--h4-font-size); font-weight: var(--font-weight-bold); + color: var(--white-color); + transition: all 0.3s ease; } -.navbar-brand, .navbar-brand:hover { - color: var(--white-color); + color: var(--secondary-color); +} + +.is-sticky .navbar-brand { + color: var(--primary-color); +} + +.is-sticky .navbar-brand:hover { + color: var(--secondary-color); } .navbar-expand-lg .navbar-nav .nav-link { @@ -363,34 +373,42 @@ strong { .navbar-nav .nav-link { display: inline-block; - color: var(--section-bg-color); + color: var(--white-color); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); text-transform: uppercase; position: relative; padding-top: 15px; padding-bottom: 15px; + transition: all 0.3s ease; +} + +.navbar-nav .nav-link:hover { + color: var(--secondary-color); +} + +.is-sticky .navbar-nav .nav-link { + color: var(--primary-color); +} + +.is-sticky .navbar-nav .nav-link:hover { + color: var(--secondary-color); } .navbar-nav .nav-link::after { content: ""; - background: transparent; + background: var(--secondary-color); position: absolute; bottom: 6px; right: 0; left: 0; - width: 100%; + width: 0; height: 2px; + transition: all 0.3s ease; } -.navbar-nav .nav-link.active::after, .navbar-nav .nav-link:hover::after { - background: var(--secondary-color); -} - -.navbar-nav .nav-link.active, -.navbar-nav .nav-link:hover { - color: var(--secondary-color); + width: 100%; } .navbar-toggler { @@ -550,33 +568,143 @@ strong { ABOUT -----------------------------------------*/ .profile-thumb { - border: 1px solid var(--border-color); - border-radius: var(--border-radius-medium); - position: relative; - overflow: hidden; + background: var(--white-color); + border-radius: 15px; + padding: 30px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.profile-thumb:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .profile-title { - border-bottom: 1px solid var(--border-color); - padding: 15px 30px; + margin-bottom: 25px; + padding-bottom: 15px; + border-bottom: 2px solid var(--border-color); +} + +.profile-title h4 { + color: var(--dark-color); + font-size: 24px; + font-weight: 600; +} + +.profile-info-item { + margin-bottom: 20px; + display: flex; + flex-direction: column; } .profile-small-title { - border-right: 1px solid var(--border-color); color: var(--primary-color); - font-weight: var(--font-weight-bold); - min-width: 140px; - margin-right: 10px; - padding: 13px 30px; - display: inline-block; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 5px; + opacity: 0.8; } -.profile-body p { - margin-bottom: 0; +.profile-value { + color: var(--p-color); + font-size: 16px; + font-weight: 500; } -.profile-body p:nth-of-type(even) { +.profile-link { + color: var(--secondary-color); + text-decoration: none; + transition: all 0.3s ease; +} + +.profile-link:hover { + color: var(--primary-color); +} + +.profile-social-links { + display: flex; + gap: 15px; + margin-top: 10px; +} + +.profile-social-link { + color: var(--primary-color); + font-size: 20px; + transition: all 0.3s ease; +} + +.profile-social-link:hover { + color: var(--secondary-color); + transform: translateY(-3px); +} + +.featured-item { + text-align: center; + padding: 20px; background: var(--white-color); + border-radius: 10px; + transition: all 0.3s ease; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.featured-item:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +.featured-numbers { + display: block; + font-size: 36px; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 10px; +} + +.featured-text { + color: var(--p-color); + font-size: 16px; + margin-bottom: 15px; +} + +.featured-icon { + font-size: 24px; + color: var(--secondary-color); + margin-top: 10px; +} + +.featured-border-bottom { + border-bottom: 1px solid var(--border-color); +} + +.featured-border-start { + border-left: 1px solid var(--border-color); +} + +/* Responsive Adjustments */ +@media (max-width: 991px) { + .profile-thumb { + margin-bottom: 30px; + } + + .featured-item { + margin-bottom: 20px; + } +} + +@media (max-width: 767px) { + .profile-info-item { + text-align: center; + } + + .profile-social-links { + justify-content: center; + } + + .featured-numbers { + font-size: 28px; + } } .about-image { diff --git a/index.html b/index.html index 3669097..b19dac4 100644 --- a/index.html +++ b/index.html @@ -23,906 +23,31 @@ -
- -
- - + +
-
-
-
-
-
-
- + +
-
Hello friend!
-
+ +
-

I'm available for freelance work.

-

- Let's begin -

-
-
+ + -
- - - -
-
-
+ +
- - - -
+ +
-
-
-
-
- -
- -
-
-
-

My Story

- - -
- -

A little bit about Mohammed

- -

- 👋 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. -
-

BPro Story
- 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 -
-
-
Almuthafar Story
- For Bayan Digital Hub (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.
-
-
Big-dash Story
- Engaging in developing a comprehensive banking system ( for Moneyout Elektronik Para ve - Ödeme Hizmetleri A.Ş ) aimed at facilitating financial transactions across various branches, - incorporating digital wallet functionalities, and supporting transactions executed in - multiple currencies. - -
-
-
Easy-pay Story
- For Monalisa restaurant in Damascus , the system includes managing reservations, tables, - products, - invoices, government tax integration, debits, and producing different types of reports like - sales and logs of payments. - - -

-
-
-
-
-
- -
-
-
-
-
-
-

Information

-
- -
-

- Name - Mohammed Al-yaseen -

- -

- Birthday - Jun 1, 1998 -

- -

- Phone - - +963-962-469-482 - -

- -

- Email - mohammed.alyaseen.it@gmail.com -

-
-
-
- -
-
-
-
- 4+ - -

Years of Experiences

-
- -
- 5 - -

Happy Customers

-
- -
- 10 - -

Project Finished

-
- -
- 7+ - -

Digital Awards

-
-
-
-
-
-
-
- - - -
-
-
-
-
- - -

Projects

-
-
- -
- -
-
-
- 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 - -
-
- -
-
-
- 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 - -
-
- -
-
-
- Website -

Law Office

-
- - law office - -
-
- -
-
-
- Website -

SVU E-commerce

-
- - - -
-
- -
-
-
- Website -

NANS's CRM

-
- - - -
-
- -
-
-
- Website -

Majsin's Restaurant

-
- - - -
-
- -
-
-
- Website -

BPro's ERP System

-
- - - -
-
- -
-
-
- Website -

Moneyout Bank

-
- - - -
-
-
-
-
- -
-
-
-
-
- - -

Services

-
- -
-
-
-
-

Websites

- - -
- -

- You may want to explore Too CSS for great collection of - free HTML CSS templates. -

- - Discover More - -
- -
-
-
- -
-
-
-

Branding

- - -
- -

- You can explore more CSS templates on TemplateMo website - by browsing through different tags. -

- - Discover More - -
- -
-
-
- -
-
-
-

Ecommerce

- - -
- -

- If you need a customized ecommerce website for your - business, feel free to discuss with me. -

- - Discover More - -
- -
-
-
- -
-
-
-

SEO

- - -
- -

- To list your website first on any search engine, we will - work together. First Portfolio is one-page CSS Template - for free download. -

- - Discover More - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
- - -

Say Hi

-
-
- -
- -
-
- Services - - - - Stay connected - - - - Start a project - -

I'm available for freelance projects

-
-
- -
-
- About - -

- Mohammed is a professional web developer. Feel free to get in - touch with me. -

- - Email - -

- - mohammed.alyaseen.it@gmail.com - -

- - Call - -

- +963-962-469-482 -

-
-
- -
-
-
-
-
- - - -
-
- -
-
- - - -
-
- -
-
- - - -
-
- -
-
- - - -
-
- -
-
- - - -
-
- -
-
- - - -
-
- -
-
- - - -
-
- -
- -
-
-
-
-
-
-
+ +
- + + @@ -933,12 +58,19 @@ - -
-
- × - -
-
+ + diff --git a/js/custom.js b/js/custom.js index 975ac6c..5e6f463 100644 --- a/js/custom.js +++ b/js/custom.js @@ -109,4 +109,13 @@ document.body.style.overflow = ''; } }); + + // Sticky Navigation + $(window).on('scroll', function() { + if ($(window).scrollTop() > 50) { + $('.navbar').addClass('is-sticky'); + } else { + $('.navbar').removeClass('is-sticky'); + } + }); })(window.jQuery);