Compare commits
5 Commits
e6f4178346
...
tuhama
| Author | SHA1 | Date | |
|---|---|---|---|
| d88eab95d2 | |||
| 2985df3d43 | |||
| d0a0fcceb4 | |||
|
5e3d897255 | ||
|
|
e5bae28b53 |
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@@ -3,7 +3,9 @@
|
||||
"Almuthafar",
|
||||
"Ecommerce",
|
||||
"navheight",
|
||||
"Tuhama",
|
||||
"yaseen",
|
||||
"Zoik"
|
||||
]
|
||||
],
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@@ -12,71 +12,67 @@
|
||||
<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>
|
||||
<h3 class="pt-2 mb-3">A little bit about Tuhama</h3>
|
||||
|
||||
<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 Senior Frontend Developer with 15+ years of software engineering experience, specializing in the React ecosystem with a strong background in Java Spring Boot. Proven track record of architecting scalable frontend solutions, leading technical teams, and driving code quality strategies. Combines deep technical expertise with project planning skills to deliver end-to-end web applications.
|
||||
<br>
|
||||
<br>
|
||||
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.
|
||||
<h5> BPRO ERP (Current) </h5>
|
||||
<strong>Remote Senior Frontend Developer | Feb 2021 – Present</strong>
|
||||
<br>
|
||||
• Architecture & Optimization: Architected and led the implementation of core frontend modules, significantly improving code maintainability and scalability for the ERP platform.
|
||||
<br>
|
||||
• Quality Assurance: Established and enforced a comprehensive testing strategy using Cypress E2E tests, resulting in a measurable reduction in production bug reports.
|
||||
<br>
|
||||
• Team Leadership: Mentored a team of 3 junior developers, conducting code reviews and pair programming sessions to foster a culture of technical excellence.
|
||||
<br>
|
||||
• Process Improvement: Managed the frontend repository, approving pull requests to ensure strict adherence to best practices and coding standards.
|
||||
<br>
|
||||
• Product Strategy: Collaborated closely with product designers to translate complex business requirements into functional feature planning and technical specifications.
|
||||
<br>
|
||||
<br>
|
||||
<h5> Dataline - Law Firm (Current) </h5>
|
||||
<strong>Frontend Developer (Full-time) | [31/08/2025 - Current] | Qatar</strong>
|
||||
<h5> TURNSOLE LTD </h5>
|
||||
<strong>Remote Senior React Developer (Contract / Part-Time) | Nov 2023 – June 2024</strong>
|
||||
<br>
|
||||
• Led the design and development of a full-scale law firm management system
|
||||
• Project Leadership: Spearheaded the end-to-end frontend development of a Pharmacy POS system using Next.js, React Query, and Zustand.
|
||||
<br>
|
||||
• Built interactive dashboards, reusable CRUD templates, and automated reporting
|
||||
• Performance: Delivered a high-performance interface capable of handling high-volume transactions with minimal latency.
|
||||
<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>
|
||||
• Best Practices: Defined frontend architecture and drove technical decision-making, ensuring modern standards were met across the codebase.
|
||||
<br>
|
||||
<br>
|
||||
<h5> Easy-pay - ERP System </h5>
|
||||
<strong>Frontend Developer (Full-time) | [06/2024 - 06/2025] | Damascus</strong>
|
||||
<h5> DIRECTORATE OF FINANCE (Government Agency) </h5>
|
||||
<strong>Head of Analysis & Software Division (IT Department) | July 2008 – Jan 2021 | Homs, Syria</strong>
|
||||
<br>
|
||||
• Developed ERP features for reservations, invoicing, and inventory management
|
||||
• Division Leadership: Directed the IT division for over 12 years, overseeing software analysis, design, and implementation strategies.
|
||||
<br>
|
||||
• Implemented government tax integration and financial reporting
|
||||
• Full-Stack Development: Designed and programmed complex internal systems using Java Spring Boot, MySQL, and ReactJS.
|
||||
<br>
|
||||
• Built dashboards for sales, inventory, payments, and accounting logs
|
||||
• Key Project: Developed a Warehouse Management System (Public Repo: GitHub/WarehouseBackend).
|
||||
<br>
|
||||
• Collaborated with backend teams to ensure data accuracy and consistency
|
||||
• Operations: Managed IT support infrastructure and conducted technical training for agency employees.
|
||||
<br>
|
||||
<br>
|
||||
<h5> Big-dash - Banking System </h5>
|
||||
<strong>Frontend Developer (Full-time) | [09/2023 - 11/2024] | Turkey</strong>
|
||||
<h5> FREELANCE </h5>
|
||||
<strong>Remote Frontend Developer | Jan 2017 – Jan 2021</strong>
|
||||
<br>
|
||||
• Developed an enterprise banking system supporting multi-currency transactions and digital wallets
|
||||
• Delivered custom frontend solutions for diverse clients, ensuring 100% responsiveness and cross-browser compatibility.
|
||||
<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>
|
||||
• Translated client requirements into user-friendly interfaces using HTML, CSS, and JavaScript.
|
||||
<br>
|
||||
<br>
|
||||
<h5> Almuthafar - Law Office Management System </h5>
|
||||
<strong>Frontend Developer (Freelance) | [03/2023 - 06/2023] | Kuwait</strong>
|
||||
<h5> SOFTNET </h5>
|
||||
<strong>Java Applets Programmer | Aug 2007 – June 2008 | Damascus, Syria</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.
|
||||
• Contributed to the development of the MTZ Web ERP system using Java Applet technologies.
|
||||
<br>
|
||||
<br>
|
||||
<h5> BPro - ERP System </h5>
|
||||
<strong>Frontend Developer (Full-time) | [03/2021 - 10/2023] | Dubai, UAE</strong>
|
||||
<strong>Education:</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.
|
||||
• Master of Software Engineering | Al Baath University, Syria | 2014 – 2020 (Thesis: Client-side web application security)
|
||||
<br>
|
||||
• Bachelor of Software Engineering | Al Baath University, Syria | 2002 – 2007 (Thesis: Software Watermarking)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<div class="contact-info-content">
|
||||
<h4>Location</h4>
|
||||
<p>Damascus, Syria</p>
|
||||
<p>Homs, Syria</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="contact-info-content">
|
||||
<h4>Email</h4>
|
||||
<p><a href="mailto:mohammed.o.alyaseen@gmail.com">mohammed.o.alyaseen@gmail.com</a></p>
|
||||
<p><a href="mailto:tuhama.gh.qlyshi@gmail.com">tuhama.gh.qlyshi@gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="contact-info-content">
|
||||
<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>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
<div class="contact-info-content">
|
||||
<h4>Name</h4>
|
||||
<p>Mohammed Al-yaseen</p>
|
||||
<p>Tuhama Qlyshi</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="https://github.com/mohammed-alyaseen" class="social-icon-link" target="_blank">
|
||||
<a href="https://github.com/Tuhama" class="social-icon-link" target="_blank">
|
||||
<i class="bi bi-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -10,19 +10,19 @@
|
||||
<div class="profile-body">
|
||||
<div class="profile-info-item">
|
||||
<span class="profile-small-title">Name</span>
|
||||
<span class="profile-value">Mohammed Al-yaseen</span>
|
||||
<span class="profile-value">Tuhama Qlyshi</span>
|
||||
</div>
|
||||
|
||||
<div class="profile-info-item">
|
||||
<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 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 href="tel:+963-966-381-266" class="profile-link">
|
||||
<i class="bi bi-telephone-fill me-2"></i>+963-966-381-266
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="profile-info-item">
|
||||
<span class="profile-small-title">Email</span>
|
||||
<span class="profile-value">
|
||||
<a href="mailto:mohammed.o.alyaseen@gmail.com" class="profile-link">
|
||||
<i class="bi bi-envelope-fill me-2"></i>mohammed.o.alyaseen@gmail.com
|
||||
<a href="mailto:tuhama.gh.qlyshi@gmail.com" class="profile-link">
|
||||
<i class="bi bi-envelope-fill me-2"></i>tuhama.gh.qlyshi@gmail.com
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -39,31 +39,16 @@
|
||||
<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>Damascus, 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>
|
||||
<i class="bi bi-geo-alt-fill me-2"></i>Homs, Syria
|
||||
</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">
|
||||
<a href="https://github.com/Tuhama" 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>
|
||||
@@ -75,7 +60,7 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-6 featured-border-bottom pb-4">
|
||||
<div class="featured-item">
|
||||
<strong class="featured-numbers">5+</strong>
|
||||
<strong class="featured-numbers">15+</strong>
|
||||
<p class="featured-text">Years of Experience</p>
|
||||
<div class="featured-icon">
|
||||
<i class="bi bi-briefcase-fill"></i>
|
||||
@@ -95,7 +80,7 @@
|
||||
|
||||
<div class="col-lg-6 col-6 pt-4">
|
||||
<div class="featured-item">
|
||||
<strong class="featured-numbers">10+</strong>
|
||||
<strong class="featured-numbers">5+</strong>
|
||||
<p class="featured-text">Projects Finished</p>
|
||||
<div class="featured-icon">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
|
||||
@@ -1,14 +1,94 @@
|
||||
<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 © 2026 <a href="#">Mohammed Al-yaseen</a>. All rights reserved.</span>
|
||||
<!-- <span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span> -->
|
||||
<!-- Footer Brand & Description -->
|
||||
<div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
|
||||
<div class="footer-brand">
|
||||
<h3 class="footer-brand-name">Tuhama Qlyshi</h3>
|
||||
<p class="footer-description">
|
||||
Senior Frontend Developer passionate about building exceptional user experiences
|
||||
and scalable web applications.
|
||||
</p>
|
||||
</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:tuhama.gh.qlyshi@gmail.com">tuhama.gh.qlyshi@gmail.com</a>
|
||||
</li>
|
||||
<li class="footer-contact-item">
|
||||
<i class="bi bi-telephone-fill"></i>
|
||||
<a href="tel:+963-966-381-266">+963-966-381-266</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/tuhama-qlyshi-6016b1161/"
|
||||
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/tuhama-qlyshi"
|
||||
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/tuhama.qlyshi"
|
||||
class="social-icon-link"
|
||||
target="_blank"
|
||||
aria-label="Facebook">
|
||||
<i class="bi bi-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<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>
|
||||
<a class="custom-btn btn" href="#section_5"> +963-966-381-266 </a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<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>
|
||||
<a class="custom-btn btn" href="#section_5"> +963-966-381-266 </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
<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="col-lg-12 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 class="hero-image-wrapper position-relative me-4">
|
||||
<img src="images/happy-bearded-young-man.jpg" class="hero-image img-fluid object-fit-cover" alt="" />
|
||||
</div>
|
||||
<h5 class="hero-title mb-0">Hello friend!</h5>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4">Senior Frontend Engineer with 5+ years of experience</h2>
|
||||
<h2 class="mb-4">Senior Frontend Developer with 15+ years of experience</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>
|
||||
<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>
|
||||
</svg>
|
||||
</section>
|
||||
@@ -130,19 +130,6 @@
|
||||
</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>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ https://templatemo.com/tm-578-first-portfolio
|
||||
-----------------------------------------*/
|
||||
:root {
|
||||
--white-color: #ffffff;
|
||||
--primary-color: #535da1;
|
||||
--primary-color: #6c757d;
|
||||
--secondary-color: #14b789;
|
||||
--section-bg-color: #f9f9f9;
|
||||
--dark-color: #000000;
|
||||
@@ -143,9 +143,10 @@ strong {
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
background: var(--secondary-color);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: 10px 30px;
|
||||
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
@@ -261,9 +262,10 @@ strong {
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
background: var(--secondary-color);
|
||||
border-radius: var(--border-radius-large);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border: none;
|
||||
color: var(--white-color);
|
||||
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 12px 24px;
|
||||
}
|
||||
@@ -314,7 +316,7 @@ strong {
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(83, 93, 161, 0.95);
|
||||
background: var(--primary-color);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px 0;
|
||||
@@ -515,12 +517,34 @@ strong {
|
||||
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 {
|
||||
position: absolute;
|
||||
z-index: 22;
|
||||
top: -44px;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
height: 340px !important;
|
||||
right: 67px;
|
||||
border-radius: 100%;
|
||||
border: 5px solid #FFF;
|
||||
@@ -1274,10 +1298,26 @@ strong {
|
||||
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);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
text-align: center;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
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 {
|
||||
@@ -1286,52 +1326,324 @@ strong {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.copyright-text-wrap p,
|
||||
.copyright-text {
|
||||
font-size: var(--copyright-font-size);
|
||||
/* Footer Brand */
|
||||
.footer-brand {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
/* border-right: 1px solid var(--border-color); */
|
||||
padding-right: 25px;
|
||||
margin-right: 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;
|
||||
}
|
||||
|
||||
.copyright-text-wrap a {
|
||||
font-weight: var(--font-weight-bold);
|
||||
.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: inline-block;
|
||||
vertical-align: top;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-menu-link {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: var(--copyright-font-size);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--p-color);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 14px;
|
||||
min-width: 70px;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
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 {
|
||||
background: var(--secondary-color);
|
||||
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(-3px);
|
||||
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 {
|
||||
font-size: 14px;
|
||||
color: var(--p-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.copyright-text-wrap a {
|
||||
font-weight: 600;
|
||||
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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-menu-item {
|
||||
display: inline-block;
|
||||
margin: 0 8px 10px 8px;
|
||||
}
|
||||
|
||||
.footer-menu-link {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
background: var(--white-color);
|
||||
}
|
||||
|
||||
.footer-menu-link::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-menu-link:hover {
|
||||
padding-left: 16px;
|
||||
transform: none;
|
||||
background: var(--secondary-color);
|
||||
color: var(--white-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
@@ -1801,7 +2113,7 @@ html {
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background-color: rgba(83, 93, 161, 0.95);
|
||||
background-color: var(--primary-color);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 152 KiB |
@@ -6,7 +6,7 @@
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="TemplateMo" />
|
||||
|
||||
<title>Mohammed Al-yaseen</title>
|
||||
<title>Tuhama Qlyshi</title>
|
||||
|
||||
<!-- CSS FILES -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
||||
Reference in New Issue
Block a user