Compare commits
2 Commits
master
...
5e3d897255
| Author | SHA1 | Date | |
|---|---|---|---|
|
5e3d897255 | ||
|
|
e5bae28b53 |
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@@ -3,7 +3,9 @@
|
|||||||
"Almuthafar",
|
"Almuthafar",
|
||||||
"Ecommerce",
|
"Ecommerce",
|
||||||
"navheight",
|
"navheight",
|
||||||
|
"Tuhama",
|
||||||
"yaseen",
|
"yaseen",
|
||||||
"Zoik"
|
"Zoik"
|
||||||
]
|
],
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
}
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6 col-12">
|
<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 object-fit-cover" alt="" />
|
<img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||||
@@ -12,71 +12,27 @@
|
|||||||
<img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
|
<img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="pt-2 mb-3">A little bit about Mohammed</h3>
|
<h3 class="pt-2 mb-3">A little bit about Tuhama</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
👋 Greetings! I'm Mohammed, a Results-oriented Senior Frontend Engineer with 5+ years of experience building enterprise-scale web applications (Banking, ERP, Legal), specializing in React, Next.js, Angular, and TypeScript.
|
👋 Greetings I'm Tuhama, a passionate software engineer with a creative approach to problem-solving.
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
My journey in the field of Information Technology began at the Arab International University
|
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,
|
in 2016, where I pursued a Bachelor's Degree in Computer Software Engineering,
|
||||||
graduating in 2021.
|
graduating in 2021.
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<h5> BPro Story </h5>
|
||||||
<h5> Dataline - Law Firm (Current) </h5>
|
Upon completion of my studies, I embarked on a project to develop an Enterprise Resource Planning (ERP) system. This
|
||||||
<strong>Frontend Developer (Full-time) | [31/08/2025 - Current] | Qatar</strong>
|
comprehensive system encompasses seven core components: Inventory Management,
|
||||||
<br>
|
Purchasing, Sales, Customer Relationship Management (CRM), Finance, Payments, and
|
||||||
• Led the design and development of a full-scale law firm management system
|
Resources
|
||||||
<br>
|
|
||||||
• Built interactive dashboards, reusable CRUD templates, and automated reporting
|
|
||||||
<br>
|
|
||||||
• Implemented Azure AD authentication using MSAL
|
|
||||||
<br>
|
|
||||||
• Integrated Microsoft 365 services (SharePoint, Microsoft Graph)
|
|
||||||
<br>
|
|
||||||
• Designed role-based access control for sensitive legal data
|
|
||||||
<br>
|
|
||||||
• Managed CI/CD and production deployment using Firebase Hosting
|
|
||||||
<br>
|
|
||||||
<a href="https://dataline-qa.com/" target="_blank">Website: dataline-qa.com</a>
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<h5> Easy-pay - ERP System </h5>
|
<h5> Almuthafar Story </h5>
|
||||||
<strong>Frontend Developer (Full-time) | [06/2024 - 06/2025] | Damascus</strong>
|
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>
|
||||||
• Developed ERP features for reservations, invoicing, and inventory management
|
|
||||||
<br>
|
|
||||||
• Implemented government tax integration and financial reporting
|
|
||||||
<br>
|
|
||||||
• Built dashboards for sales, inventory, payments, and accounting logs
|
|
||||||
<br>
|
|
||||||
• Collaborated with backend teams to ensure data accuracy and consistency
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h5> Big-dash - Banking System </h5>
|
|
||||||
<strong>Frontend Developer (Full-time) | [09/2023 - 11/2024] | Turkey</strong>
|
|
||||||
<br>
|
|
||||||
• Developed an enterprise banking system supporting multi-currency transactions and digital wallets
|
|
||||||
<br>
|
|
||||||
• Built user-friendly interfaces using Angular and Angular Material
|
|
||||||
<br>
|
|
||||||
• Managed complex application state using NgRx
|
|
||||||
<br>
|
|
||||||
• Implemented theme customization and reusable UI components
|
|
||||||
<br>
|
|
||||||
<a href="https://big-dash.tu" target="_blank">Website: big-dash.tu</a>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h5> Almuthafar - Law Office Management System </h5>
|
|
||||||
<strong>Frontend Developer (Freelance) | [03/2023 - 06/2023] | Kuwait</strong>
|
|
||||||
<br>
|
|
||||||
For <a href="https://almuthafargroup.com/" target="_blank">Bayan Digital Hub</a> (Kuwaiti AWS startup, Oracle Partner): Developed 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> BPro - ERP System </h5>
|
|
||||||
<strong>Frontend Developer (Full-time) | [03/2021 - 10/2023] | Dubai, UAE</strong>
|
|
||||||
<br>
|
|
||||||
Developed an Enterprise Resource Planning (ERP) system encompassing seven core components: Inventory Management, Purchasing, Sales, Customer Relationship Management (CRM), Finance, Payments, and Resources. Responsibilities included designing intuitive interfaces using the Antd UI library, ensuring secure financial calculations through Big.js library, and end-to-end testing utilizing Cypress.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-lg-12 col-md-12 col-12">
|
<div class="col-lg-10 col-md-12 col-12">
|
||||||
<div class="contact-wrapper">
|
<div class="contact-wrapper">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Contact Info Cards -->
|
<!-- Contact Info Cards -->
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contact-info-content">
|
<div class="contact-info-content">
|
||||||
<h4>Location</h4>
|
<h4>Location</h4>
|
||||||
<p>Damascus, Syria</p>
|
<p>Homs, Syria</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contact-info-content">
|
<div class="contact-info-content">
|
||||||
<h4>Email</h4>
|
<h4>Email</h4>
|
||||||
<p><a href="mailto:mohammed.o.alyaseen@gmail.com">mohammed.o.alyaseen@gmail.com</a></p>
|
<p><a href="mailto:hello@company.com">hello@company.com</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contact-info-content">
|
<div class="contact-info-content">
|
||||||
<h4>Phone</h4>
|
<h4>Phone</h4>
|
||||||
<p><a href="tel:+963-962-469-482">+963-962-469-482</a></p>
|
<p><a href="tel:+963-966-381-266">+963-966-381-266</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -52,12 +52,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contact-info-content">
|
<div class="contact-info-content">
|
||||||
<h4>Name</h4>
|
<h4>Name</h4>
|
||||||
<p>Mohammed Al-yaseen</p>
|
<p>Tuhama</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Company Ad -->
|
<!-- Company Ad -->
|
||||||
<!-- <div class="tech-masters-ad">
|
<div class="tech-masters-ad">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
<i class="bi bi-cpu"></i>
|
<i class="bi bi-cpu"></i>
|
||||||
@@ -66,22 +66,27 @@
|
|||||||
<p>Your Trusted Partner in Digital Innovation</p>
|
<p>Your Trusted Partner in Digital Innovation</p>
|
||||||
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
|
|
||||||
<div class="contact-social">
|
<div class="contact-social">
|
||||||
<h4>Follow Me</h4>
|
<h4>Follow Me</h4>
|
||||||
<div class="social-icon">
|
<div class="social-icon">
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item">
|
<li class="list-inline-item">
|
||||||
<a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" class="social-icon-link" target="_blank">
|
<a href="#" class="social-icon-link">
|
||||||
<i class="bi bi-linkedin"></i>
|
<i class="bi bi-linkedin"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-inline-item">
|
<li class="list-inline-item">
|
||||||
<a href="https://github.com/mohammed-alyaseen" class="social-icon-link" target="_blank">
|
<a href="#" class="social-icon-link">
|
||||||
<i class="bi bi-github"></i>
|
<i class="bi bi-github"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<a href="#" class="social-icon-link">
|
||||||
|
<i class="bi bi-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,19 +10,19 @@
|
|||||||
<div class="profile-body">
|
<div class="profile-body">
|
||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Name</span>
|
<span class="profile-small-title">Name</span>
|
||||||
<span class="profile-value">Mohammed Al-yaseen</span>
|
<span class="profile-value">Tuhama Qleshi</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Birthday</span>
|
<span class="profile-small-title">Birthday</span>
|
||||||
<span class="profile-value">Jun 1, 1998</span>
|
<span class="profile-value">Sep 21, 1983</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Phone</span>
|
<span class="profile-small-title">Phone</span>
|
||||||
<span class="profile-value">
|
<span class="profile-value">
|
||||||
<a href="tel:+963-962-469-482" class="profile-link">
|
<a href="tel:+963-966-381-266" class="profile-link">
|
||||||
<i class="bi bi-telephone-fill me-2"></i>+963-962-469-482
|
<i class="bi bi-telephone-fill me-2"></i>+963-966-381-266
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -30,8 +30,8 @@
|
|||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Email</span>
|
<span class="profile-small-title">Email</span>
|
||||||
<span class="profile-value">
|
<span class="profile-value">
|
||||||
<a href="mailto:mohammed.o.alyaseen@gmail.com" class="profile-link">
|
<a href="mailto:tuhama9@gmail.com" class="profile-link">
|
||||||
<i class="bi bi-envelope-fill me-2"></i>mohammed.o.alyaseen@gmail.com
|
<i class="bi bi-envelope-fill me-2"></i>tuhama9@gmail.com
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -39,31 +39,16 @@
|
|||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Location</span>
|
<span class="profile-small-title">Location</span>
|
||||||
<span class="profile-value">
|
<span class="profile-value">
|
||||||
<i class="bi bi-geo-alt-fill me-2"></i>Damascus, Syria
|
<i class="bi bi-geo-alt-fill me-2"></i>Homs, Syria
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="profile-info-item">
|
|
||||||
<span class="profile-small-title">Website</span>
|
|
||||||
<span class="profile-value">
|
|
||||||
<a href="https://tech-masters.guru/portfolio/mohammed-alyaseen" class="profile-link" target="_blank">
|
|
||||||
<i class="bi bi-globe me-2"></i>tech-masters.guru/portfolio/mohammed-alyaseen
|
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-info-item">
|
<div class="profile-info-item">
|
||||||
<span class="profile-small-title">Social</span>
|
<span class="profile-small-title">Social</span>
|
||||||
<div class="profile-social-links">
|
<div class="profile-social-links">
|
||||||
<a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" class="profile-social-link" target="_blank">
|
<a href="https://github.com/Tuhama" 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>
|
<i class="bi bi-github"></i>
|
||||||
</a>
|
</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>
|
||||||
@@ -73,7 +58,7 @@
|
|||||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||||
<div class="about-thumb">
|
<div class="about-thumb">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6 col-6 featured-border-bottom pb-4">
|
<div class="col-lg-6 col-6 featured-border-bottom py-3">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">5+</strong>
|
<strong class="featured-numbers">5+</strong>
|
||||||
<p class="featured-text">Years of Experience</p>
|
<p class="featured-text">Years of Experience</p>
|
||||||
@@ -83,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-6 featured-border-start featured-border-bottom pb-4">
|
<div class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-3">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">5+</strong>
|
<strong class="featured-numbers">5+</strong>
|
||||||
<p class="featured-text">Happy Customers</p>
|
<p class="featured-text">Happy Customers</p>
|
||||||
@@ -95,7 +80,7 @@
|
|||||||
|
|
||||||
<div class="col-lg-6 col-6 pt-4">
|
<div class="col-lg-6 col-6 pt-4">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">10+</strong>
|
<strong class="featured-numbers">5+</strong>
|
||||||
<p class="featured-text">Projects Finished</p>
|
<p class="featured-text">Projects Finished</p>
|
||||||
<div class="featured-icon">
|
<div class="featured-icon">
|
||||||
<i class="bi bi-check-circle-fill"></i>
|
<i class="bi bi-check-circle-fill"></i>
|
||||||
@@ -103,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-6 featured-border-start pt-4">
|
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">7+</strong>
|
<strong class="featured-numbers">7+</strong>
|
||||||
<p class="featured-text">Digital Awards</p>
|
<p class="featured-text">Digital Awards</p>
|
||||||
|
|||||||
@@ -1,94 +1,14 @@
|
|||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Footer Brand & Description -->
|
<div class="col-lg-12 col-12">
|
||||||
<div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
|
<div class="copyright-text-wrap">
|
||||||
<div class="footer-brand">
|
<p class="mb-0">
|
||||||
<h3 class="footer-brand-name">Mohammed Al-yaseen</h3>
|
<span class="copyright-text">Copyright © 2024 <a href="#">Tuhama</a> Company. All rights reserved.</span>
|
||||||
<p class="footer-description">
|
<span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span>
|
||||||
Senior Frontend Developer passionate about building exceptional user experiences
|
|
||||||
and scalable web applications.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Quick Links -->
|
|
||||||
<div class="col-lg-2 col-md-6 col-12 mb-4 mb-lg-0">
|
|
||||||
<h4 class="footer-heading">Quick Links</h4>
|
|
||||||
<ul class="footer-menu">
|
|
||||||
<li class="footer-menu-item">
|
|
||||||
<a href="#section_1" class="footer-menu-link click-scroll">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-menu-item">
|
|
||||||
<a href="#section_2" class="footer-menu-link click-scroll">About</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-menu-item">
|
|
||||||
<a href="#section_3" class="footer-menu-link click-scroll">Services</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-menu-item">
|
|
||||||
<a href="#section_4" class="footer-menu-link click-scroll">Projects</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-menu-item">
|
|
||||||
<a href="#section_5" class="footer-menu-link click-scroll">Contact</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Contact Info -->
|
|
||||||
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
|
|
||||||
<h4 class="footer-heading">Get In Touch</h4>
|
|
||||||
<ul class="footer-contact">
|
|
||||||
<li class="footer-contact-item">
|
|
||||||
<i class="bi bi-envelope-fill"></i>
|
|
||||||
<a href="mailto:mohammed.o.alyaseen@gmail.com">mohammed.o.alyaseen@gmail.com</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-contact-item">
|
|
||||||
<i class="bi bi-telephone-fill"></i>
|
|
||||||
<a href="tel:+963-962-469-482">+963-962-469-482</a>
|
|
||||||
</li>
|
|
||||||
<li class="footer-contact-item">
|
|
||||||
<i class="bi bi-geo-alt-fill"></i>
|
|
||||||
<span>Damascus, Syria</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Media -->
|
|
||||||
<div class="col-lg-3 col-md-6 col-12">
|
|
||||||
<h4 class="footer-heading">Follow Me</h4>
|
|
||||||
<div class="footer-social">
|
|
||||||
<ul class="social-icon">
|
|
||||||
<li class="social-icon-item">
|
|
||||||
<a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/"
|
|
||||||
class="social-icon-link"
|
|
||||||
target="_blank"
|
|
||||||
aria-label="LinkedIn">
|
|
||||||
<i class="bi bi-linkedin"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="social-icon-item">
|
|
||||||
<a href="https://github.com/mohammed-alyaseen"
|
|
||||||
class="social-icon-link"
|
|
||||||
target="_blank"
|
|
||||||
aria-label="GitHub">
|
|
||||||
<i class="bi bi-github"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="social-icon-item">
|
|
||||||
<a href="https://www.facebook.com/profile.php?id=100010330412662"
|
|
||||||
class="social-icon-link"
|
|
||||||
target="_blank"
|
|
||||||
aria-label="Facebook">
|
|
||||||
<i class="bi bi-facebook"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Copyright -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -20,11 +20,11 @@
|
|||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">M</a>
|
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
|
||||||
|
|
||||||
<div class="d-flex align-items-center d-lg-none">
|
<div class="d-flex align-items-center d-lg-none">
|
||||||
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
||||||
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
|
<a class="custom-btn btn" href="#section_5"> +963-966-381-266 </a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
|
|
||||||
<div class="d-lg-flex align-items-center d-none ms-auto">
|
<div class="d-lg-flex align-items-center d-none ms-auto">
|
||||||
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
||||||
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
|
<a class="custom-btn btn" href="#section_5"> +963-966-381-266 </a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,25 +1,27 @@
|
|||||||
<section class="hero d-flex justify-content-center align-items-center" id="section_1">
|
<section class="hero d-flex justify-content-center align-items-center" id="section_1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12 col-12">
|
<div class="col-lg-7 col-12">
|
||||||
<div class="hero-text">
|
<div class="hero-text">
|
||||||
<div class="hero-title-wrap d-flex align-items-center mb-4">
|
<div class="hero-title-wrap d-flex align-items-center mb-4">
|
||||||
<div class="hero-image-wrapper position-relative me-4">
|
<img src="images/happy-bearded-young-man.jpg" class="avatar-image avatar-image-large img-fluid" alt="" />
|
||||||
<img src="images/happy-bearded-young-man.jpg" class="hero-image img-fluid object-fit-cover" alt="" />
|
<h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
|
||||||
</div>
|
|
||||||
<h5 class="hero-title mb-0">Hello friend!</h5>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="mb-4">Senior Frontend Engineer with 5+ years of experience</h2>
|
<h2 class="mb-4">I'm available for freelance work.</h2>
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
<a class="custom-btn btn custom-link" href="#section_2">Let's begin</a>
|
<a class="custom-btn btn custom-link" href="#section_2">Let's begin</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||||
<path fill="#6c757d" 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>
|
<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>
|
</svg>
|
||||||
</section>
|
</section>
|
||||||
@@ -130,19 +130,6 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -11,13 +11,13 @@ https://templatemo.com/tm-578-first-portfolio
|
|||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
:root {
|
:root {
|
||||||
--white-color: #ffffff;
|
--white-color: #ffffff;
|
||||||
--primary-color: #6c757d;
|
--primary-color: #ff69b4; /* Hot pink */
|
||||||
--secondary-color: #14b789;
|
--secondary-color: #ffb6c1; /* Light pink */
|
||||||
--section-bg-color: #f9f9f9;
|
--section-bg-color: #fff5f7; /* Very light pink */
|
||||||
--dark-color: #000000;
|
--dark-color: #4a4a4a; /* Softer dark color */
|
||||||
--p-color: #717275;
|
--p-color: #666666;
|
||||||
--border-color: #e9eaeb;
|
--border-color: #ffd1dc; /* Light pink border */
|
||||||
--featured-border-color: #727aab;
|
--featured-border-color: #ff69b4;
|
||||||
|
|
||||||
--body-font-family: "DM Sans", sans-serif;
|
--body-font-family: "DM Sans", sans-serif;
|
||||||
|
|
||||||
@@ -143,9 +143,10 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title-wrap {
|
.section-title-wrap {
|
||||||
background: var(--secondary-color);
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||||
border-radius: var(--border-radius-small);
|
border-radius: var(--border-radius-small);
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
@@ -261,9 +262,10 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.custom-btn {
|
.custom-btn {
|
||||||
background: var(--secondary-color);
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||||
border-radius: var(--border-radius-large);
|
border: none;
|
||||||
color: var(--white-color);
|
color: var(--white-color);
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
}
|
}
|
||||||
@@ -314,7 +316,7 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar.scrolled {
|
.navbar.scrolled {
|
||||||
background: var(--primary-color);
|
background: rgba(83, 93, 161, 0.95);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
@@ -515,34 +517,12 @@ strong {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-image-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 340px;
|
|
||||||
height: 340px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image-wrapper .hero-image {
|
|
||||||
position: relative !important;
|
|
||||||
top: auto !important;
|
|
||||||
right: auto !important;
|
|
||||||
left: auto !important;
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid var(--white-color);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: auto !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 22;
|
z-index: 22;
|
||||||
top: -44px;
|
top: -44px;
|
||||||
width: 340px;
|
width: 340px;
|
||||||
height: 340px !important;
|
height: 340px;
|
||||||
right: 67px;
|
right: 67px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 5px solid #FFF;
|
border: 5px solid #FFF;
|
||||||
@@ -572,12 +552,6 @@ strong {
|
|||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
ABOUT
|
ABOUT
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
|
|
||||||
.object-fit-cover {
|
|
||||||
object-fit: cover;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-thumb {
|
.profile-thumb {
|
||||||
background: var(--white-color);
|
background: var(--white-color);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
@@ -586,6 +560,11 @@ strong {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-thumb:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
.profile-title {
|
.profile-title {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
@@ -721,11 +700,11 @@ strong {
|
|||||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .about-image:hover {
|
.about-image:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
filter: brightness(1.3) contrast(1.2) saturate(1.2);
|
filter: brightness(1.3) contrast(1.2) saturate(1.2);
|
||||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
|
box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
|
||||||
} */
|
}
|
||||||
|
|
||||||
.about-thumb {
|
.about-thumb {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
@@ -769,6 +748,10 @@ strong {
|
|||||||
transition: all ease 0.2s;
|
transition: all ease 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clients-image:hover {
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
SERVICES
|
SERVICES
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
@@ -1067,10 +1050,10 @@ strong {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .contact-info-card:hover {
|
.contact-info-card:hover {
|
||||||
transform: translateX(10px);
|
transform: translateX(10px);
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
} */
|
}
|
||||||
|
|
||||||
.contact-info-icon {
|
.contact-info-icon {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
@@ -1094,7 +1077,6 @@ strong {
|
|||||||
|
|
||||||
.contact-info-content {
|
.contact-info-content {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-info-content h4 {
|
.contact-info-content h4 {
|
||||||
@@ -1296,26 +1278,10 @@ strong {
|
|||||||
SITE FOOTER
|
SITE FOOTER
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
.site-footer {
|
.site-footer {
|
||||||
background: linear-gradient(135deg, rgba(83, 93, 161, 0.05) 0%, rgba(20, 183, 137, 0.05) 100%);
|
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 1px solid var(--border-color);
|
||||||
padding-top: 60px;
|
padding-top: 50px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 50px;
|
||||||
position: relative;
|
text-align: center;
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-footer::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background: linear-gradient(90deg,
|
|
||||||
transparent 0%,
|
|
||||||
rgba(20, 183, 137, 0.3) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-title {
|
.site-footer-title {
|
||||||
@@ -1324,324 +1290,52 @@ strong {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer Brand */
|
|
||||||
.footer-brand {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-brand-name {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--dark-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-description {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--p-color);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Headings */
|
|
||||||
.footer-heading {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--dark-color);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-heading::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 3px;
|
|
||||||
background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Menu */
|
|
||||||
.footer-menu {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-item {
|
|
||||||
list-style: none;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-link {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--p-color);
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-link::before {
|
|
||||||
content: '→';
|
|
||||||
position: absolute;
|
|
||||||
left: -20px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-link:hover {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
padding-left: 20px;
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-link:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Contact */
|
|
||||||
.footer-contact {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--p-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item i {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 12px;
|
|
||||||
margin-top: 2px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item a {
|
|
||||||
color: var(--p-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item a:hover {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item span {
|
|
||||||
color: var(--p-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Social */
|
|
||||||
.footer-social {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon-item {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon-link {
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
line-height: 45px;
|
|
||||||
text-align: center;
|
|
||||||
border: 2px solid var(--border-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
color: var(--p-color);
|
|
||||||
background: var(--white-color);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon-link:hover {
|
|
||||||
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
|
|
||||||
border-color: transparent;
|
|
||||||
color: var(--white-color);
|
|
||||||
transform: translateY(-5px) scale(1.1);
|
|
||||||
box-shadow: 0 8px 20px rgba(20, 183, 137, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Copyright */
|
|
||||||
.copyright-text-wrap {
|
|
||||||
margin-top: 40px;
|
|
||||||
padding-top: 30px;
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright-text-wrap p,
|
.copyright-text-wrap p,
|
||||||
.copyright-text {
|
.copyright-text {
|
||||||
font-size: 14px;
|
font-size: var(--copyright-font-size);
|
||||||
color: var(--p-color);
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text {
|
.copyright-text {
|
||||||
padding: 0;
|
border-right: 1px solid var(--border-color);
|
||||||
margin: 0;
|
padding-right: 25px;
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text-wrap a {
|
.copyright-text-wrap a {
|
||||||
font-weight: 600;
|
font-weight: var(--font-weight-bold);
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright-text-wrap a:hover {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Responsive Styles */
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.site-footer {
|
|
||||||
padding-top: 50px;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-brand {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-heading {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-heading::after {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu {
|
.footer-menu {
|
||||||
text-align: center;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-item {
|
.footer-menu-item {
|
||||||
|
list-style: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 8px 10px 8px;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-link {
|
.footer-menu-link {
|
||||||
padding: 8px 16px;
|
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 20px;
|
border-radius: var(--border-radius-medium);
|
||||||
background: var(--white-color);
|
font-size: var(--copyright-font-size);
|
||||||
}
|
font-weight: var(--font-weight-medium);
|
||||||
|
display: inline-block;
|
||||||
.footer-menu-link::before {
|
vertical-align: top;
|
||||||
display: none;
|
text-align: center;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
min-width: 70px;
|
||||||
|
transition: transform 0.3s ease, color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-link:hover {
|
.footer-menu-link:hover {
|
||||||
padding-left: 16px;
|
|
||||||
transform: none;
|
|
||||||
background: var(--secondary-color);
|
background: var(--secondary-color);
|
||||||
color: var(--white-color);
|
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
color: var(--white-color);
|
||||||
|
transform: translateY(-3px);
|
||||||
.footer-contact {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.site-footer {
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-brand-name {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-description {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-heading {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-item {
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-link {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item {
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-contact-item i {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-social .social-icon-link {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright-text-wrap {
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright-text {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
@@ -2053,9 +1747,9 @@ strong {
|
|||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .about-image:hover {
|
.about-image:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
} */
|
}
|
||||||
|
|
||||||
/* Enhance projects section */
|
/* Enhance projects section */
|
||||||
.projects-thumb {
|
.projects-thumb {
|
||||||
@@ -2111,7 +1805,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar.scrolled {
|
.navbar.scrolled {
|
||||||
background-color: var(--primary-color);
|
background-color: rgba(83, 93, 161, 0.95);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 152 KiB |
18
index.html
18
index.html
@@ -6,7 +6,7 @@
|
|||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
<meta name="author" content="TemplateMo" />
|
<meta name="author" content="TemplateMo" />
|
||||||
|
|
||||||
<title>Mohammed Al-yaseen</title>
|
<title>Tuhama Qleshi</title>
|
||||||
|
|
||||||
<!-- CSS FILES -->
|
<!-- CSS FILES -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about"></section>
|
<section id="about"></section>
|
||||||
<!-- <aside class="about-ad">
|
<aside class="about-ad">
|
||||||
<div class="horizontal-ad-banner">
|
<div class="horizontal-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -47,11 +47,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside> -->
|
</aside>
|
||||||
|
|
||||||
<!-- Featured Section -->
|
<!-- Featured Section -->
|
||||||
<section id="featured"></section>
|
<section id="featured"></section>
|
||||||
<!-- <aside class="featured-ad">
|
<aside class="featured-ad">
|
||||||
<div class="feature-ad-banner">
|
<div class="feature-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -64,11 +64,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside> -->
|
</aside>
|
||||||
|
|
||||||
<!-- Projects Section -->
|
<!-- Projects Section -->
|
||||||
<section id="projects"></section>
|
<section id="projects"></section>
|
||||||
<!-- <aside class="projects-ad">
|
<aside class="projects-ad">
|
||||||
<div class="horizontal-ad-banner">
|
<div class="horizontal-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -83,11 +83,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside> -->
|
</aside>
|
||||||
|
|
||||||
<!-- Services Section -->
|
<!-- Services Section -->
|
||||||
<section id="services"></section>
|
<section id="services"></section>
|
||||||
<!-- <aside class="services-ad">
|
<aside class="services-ad">
|
||||||
<div class="feature-ad-banner">
|
<div class="feature-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside> -->
|
</aside>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact"></section>
|
<section id="contact"></section>
|
||||||
|
|||||||
Reference in New Issue
Block a user