Merge branch 'master' into tuhama

.vscode/settings.json

@@ -3,7 +3,9 @@
         "Almuthafar",
         "Ecommerce",
         "navheight",
+        "Tuhama",
         "yaseen",
         "Zoik"
-    ]
+    ],
+    "liveServer.settings.port": 5501
 }

components/about.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row">
       <div class="col-lg-6 col-12">
-        <img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid" alt="" />
+        <img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid object-fit-cover" alt="" />
       </div>
 
       <div class="col-lg-6 col-12 mt-5 mt-lg-0">
@@ -12,39 +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 dedicated software engineer with a passion for creating innovative solutions. 
+            👋 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.
-            My journey in the field of Information Technology began at the Arab International University
-            in 2016, where I pursued a Bachelor's Degree in Computer Software Engineering, 
-            graduating in 2021.
-            <br>
-            <h5> BPro Story </h5>   
-            Upon completion of my studies, I embarked on a project to develop an Enterprise Resource Planning (ERP) system. This
-            comprehensive system encompasses seven core components: Inventory Management,
-            Purchasing, Sales, Customer Relationship Management (CRM), Finance, Payments, and
-            Resources
             <br>
             <br>
-            <h5> Almuthafar Story </h5>
+            <h5> BPRO ERP (Current) </h5>
-            For <a href="https://www.bayantechnologies.com/"> Bayan Digital Hub </a> (Kuwaiti AWS startup, Oracle Partner ): Develop a platform for
+            <strong>Remote Senior Frontend Developer | Feb 2021 – Present</strong>
-            managing and tracking law case processes, clients, lawyers, and the administration processes, producing
+            <br>
-            the results as PDF reports, and making sure that the case processes run smoothly and
+            • Architecture & Optimization: Architected and led the implementation of core frontend modules, significantly improving code maintainability and scalability for the ERP platform.
-            organized.
+            <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> Big-dash Story </h5>
+            <h5> TURNSOLE LTD </h5>
-            Engaging in developing a comprehensive banking system ( for <a href="https://moneyout.com.tr"> Moneyout Elektronik Para ve
+            <strong>Remote Senior React Developer (Contract / Part-Time) | Nov 2023 – June 2024</strong>
-            Ödeme Hizmetleri A.Ş </a>) aimed at facilitating financial transactions across various branches,
+            <br>
-            incorporating digital wallet functionalities, and supporting transactions executed in
+            • Project Leadership: Spearheaded the end-to-end frontend development of a Pharmacy POS system using Next.js, React Query, and Zustand.
-            multiple currencies.
+            <br>
+            • Performance: Delivered a high-performance interface capable of handling high-volume transactions with minimal latency.
+            <br>
+            • Best Practices: Defined frontend architecture and drove technical decision-making, ensuring modern standards were met across the codebase.
             <br>
             <br>
-            <h5> Easy-pay Story </h5>
+            <h5> DIRECTORATE OF FINANCE (Government Agency) </h5>
-            For <a href="https://www.facebook.com/MONALISA.SYRIA"> Monalisa restaurant in Damascus </a>, the system includes managing reservations, tables,
+            <strong>Head of Analysis & Software Division (IT Department) | July 2008 – Jan 2021 | Homs, Syria</strong>
-            products, invoices, government tax integration, debits, and producing different types of reports like
+            <br>
-            sales and logs of payments.
+            • Division Leadership: Directed the IT division for over 12 years, overseeing software analysis, design, and implementation strategies.
+            <br>
+            • Full-Stack Development: Designed and programmed complex internal systems using Java Spring Boot, MySQL, and ReactJS.
+            <br>
+            • Key Project: Developed a Warehouse Management System (Public Repo: GitHub/WarehouseBackend).
+            <br>
+            • Operations: Managed IT support infrastructure and conducted technical training for agency employees.
+            <br>
+            <br>
+            <h5> FREELANCE </h5>
+            <strong>Remote Frontend Developer | Jan 2017 – Jan 2021</strong>
+            <br>
+            • Delivered custom frontend solutions for diverse clients, ensuring 100% responsiveness and cross-browser compatibility.
+            <br>
+            • Translated client requirements into user-friendly interfaces using HTML, CSS, and JavaScript.
+            <br>
+            <br>
+            <h5> SOFTNET </h5>
+            <strong>Java Applets Programmer | Aug 2007 – June 2008 | Damascus, Syria</strong>
+            <br>
+            • Contributed to the development of the MTZ Web ERP system using Java Applet technologies.
+            <br>
+            <br>
+            <strong>Education:</strong>
+            <br>
+            • 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>

components/ad-placements.html

@@ -0,0 +1 @@
+ 

components/ads.html

@@ -0,0 +1,37 @@
+<!-- Vertical Ad Banner -->
+<div class="vertical-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-rocket-takeoff"></i>
+    </div>
+    <h4>Company</h4>
+    <p>Transform Your Business with Our Solutions</p>
+    <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Horizontal Ad Banner -->
+<div class="horizontal-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-graph-up-arrow"></i>
+    </div>
+    <div class="ad-text">
+      <h4>Boost Your Growth</h4>
+      <p>Partner with Company for Digital Excellence</p>
+    </div>
+    <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Feature Ad Banner -->
+<div class="feature-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-shield-check"></i>
+    </div>
+    <h4>Secure Solutions</h4>
+    <p>Trusted by Industry Leaders</p>
+    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div> 

components/contact.html

@@ -1,29 +1,136 @@
 <section class="contact section-padding" id="section_5">
   <div class="container">
-    <div class="row">
+    <div class="row justify-content-center">
-      <div class="col-12">
+      <div class="col-lg-8 col-md-10 col-12 text-center">
         <div class="section-title-wrap d-flex justify-content-center align-items-center mb-5">
-          <img src="images/happy-bearded-young-man.jpg" class="avatar-image img-fluid" alt="" />
+          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
-
+          <h2 class="text-white ms-4 mb-0">Get In Touch</h2>
-          <h2 class="text-white ms-4 mb-0">Contact Me</h2>
+        </div>
       </div>
     </div>
 
-      <div class="col-lg-8 col-12 mx-auto">
+    <div class="row justify-content-center">
-        <div class="custom-form contact-form" action="#" method="post" role="form">
+      <div class="col-lg-12 col-md-12 col-12">
+        <div class="contact-wrapper">
+          <div class="row">
+            <!-- Contact Info Cards -->
+            <div class="col-lg-4 col-md-12 col-12">
+              <div class="contact-info-cards">
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-geo-alt"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Location</h4>
+                    <p>Homs, Syria</p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-envelope"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Email</h4>
+                    <p><a href="mailto:tuhama.gh.qlyshi@gmail.com">tuhama.gh.qlyshi@gmail.com</a></p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-telephone"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Phone</h4>
+                    <p><a href="tel:+963-966-381-266">+963-966-381-266</a></p>
+                  </div>
+                </div>
+
+                <div class="contact-info-card">
+                  <div class="contact-info-icon">
+                    <i class="bi bi-person"></i>
+                  </div>
+                  <div class="contact-info-content">
+                    <h4>Name</h4>
+                    <p>Tuhama Qlyshi</p>
+                  </div>
+                </div>
+
+                <!-- Company Ad -->
+                <!-- <div class="tech-masters-ad">
+                  <div class="ad-content">
+                    <div class="ad-icon">
+                      <i class="bi bi-cpu"></i>
+                    </div>
+                    <h4>Company</h4>
+                    <p>Your Trusted Partner in Digital Innovation</p>
+                    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+                  </div>
+                </div> -->
+
+                <div class="contact-social">
+                  <h4>Follow Me</h4>
+                  <div class="social-icon">
+                    <ul class="list-inline">
+                      <li class="list-inline-item">
+                        <a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" class="social-icon-link" target="_blank">
+                          <i class="bi bi-linkedin"></i>
+                        </a>
+                      </li>
+                      <li class="list-inline-item">
+                        <a href="https://github.com/Tuhama" class="social-icon-link" target="_blank">
+                          <i class="bi bi-github"></i>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Contact Form -->
+            <div class="col-lg-8 col-md-12 col-12">
+              <div class="contact-form">
+                <h3 class="form-title">Send Me a Message</h3>
+                <form class="custom-form" action="#" method="post" role="form">
                   <div class="row">
                     <div class="col-lg-6 col-md-6 col-12">
-              <input type="text" name="name" id="name" class="form-control" placeholder="Name" required="" />
+                      <div class="form-floating">
+                        <input type="text" name="name" id="name" class="form-control" placeholder="Name" required />
+                        <label for="name">Name</label>
+                      </div>
                     </div>
 
                     <div class="col-lg-6 col-md-6 col-12">
-              <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email" required="" />
+                      <div class="form-floating">
+                        <input type="email" name="email" id="email" class="form-control" placeholder="Email" required />
+                        <label for="email">Email</label>
+                      </div>
                     </div>
 
                     <div class="col-12">
-              <textarea name="message" rows="6" class="form-control" id="message" placeholder="Message"></textarea>
+                      <div class="form-floating">
+                        <input type="text" name="subject" id="subject" class="form-control" placeholder="Subject" required />
+                        <label for="subject">Subject</label>
+                      </div>
+                    </div>
 
-              <button type="submit" class="form-control">Send Message</button>
+                    <div class="col-12">
+                      <div class="form-floating">
+                        <textarea name="message" id="message" class="form-control" placeholder="Message" required></textarea>
+                        <label for="message">Message</label>
+                      </div>
+                    </div>
+
+                    <div class="col-12">
+                      <button type="submit" class="custom-btn custom-border-btn">
+                        <span>Send Message</span>
+                        <i class="bi bi-arrow-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
             </div>
           </div>
         </div>

components/featured.html

@@ -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">
+                <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>
               </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.alyaseen.it@gmail.com" class="profile-link">
+                <a href="mailto:tuhama.gh.qlyshi@gmail.com" class="profile-link">
-                  <i class="bi bi-envelope-fill me-2"></i>mohammed.alyaseen.it@gmail.com
+                  <i class="bi bi-envelope-fill me-2"></i>tuhama.gh.qlyshi@gmail.com
                 </a>
               </span>
             </div>
@@ -39,22 +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>Istanbul, Turkey
+                <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">
+                <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>
                 </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>
@@ -64,9 +58,9 @@
       <div class="col-lg-6 col-12 mt-5 mt-lg-0">
         <div class="about-thumb">
           <div class="row">
-            <div class="col-lg-6 col-6 featured-border-bottom py-3">
+            <div class="col-lg-6 col-6 featured-border-bottom pb-4">
               <div class="featured-item">
-                <strong class="featured-numbers">4+</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>
@@ -74,7 +68,7 @@
               </div>
             </div>
 
-            <div class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-3">
+            <div class="col-lg-6 col-6 featured-border-start featured-border-bottom pb-4">
               <div class="featured-item">
                 <strong class="featured-numbers">5+</strong>
                 <p class="featured-text">Happy Customers</p>
@@ -86,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>
@@ -94,7 +88,7 @@
               </div>
             </div>
 
-            <div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
+            <div class="col-lg-6 col-6 featured-border-start pt-4">
               <div class="featured-item">
                 <strong class="featured-numbers">7+</strong>
                 <p class="featured-text">Digital Awards</p>

components/footer.html

@@ -1,14 +1,94 @@
 <footer class="site-footer">
   <div class="container">
     <div class="row">
-      <div class="col-lg-12 col-12">
+      <!-- Footer Brand & Description -->
-        <div class="copyright-text-wrap">
+      <div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
-          <p class="mb-0">
+        <div class="footer-brand">
-            <span class="copyright-text">Copyright © 2024 <a href="#">Mohammed</a> Company. All rights reserved.</span>
+          <h3 class="footer-brand-name">Tuhama Qlyshi</h3>
-            <span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span>
+          <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> 

components/header.html

@@ -20,11 +20,11 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
+    <a href="index.html" class="navbar-brand mx-auto mx-lg-0">M</a>
 
     <div class="d-flex align-items-center d-lg-none">
       <i class="navbar-icon bi-telephone-plus me-3"></i>
-      <a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
+      <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>

components/hero.html

@@ -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="" />
+            <div class="hero-image-wrapper position-relative me-4">
-            <h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
+              <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">I'm available for freelance work.</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> 

components/projects.html

@@ -2,21 +2,17 @@
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-md-8 col-12 ms-auto">
-          <div
+        <div class="section-title-wrap d-flex justify-content-center align-items-center mb-4">
-            class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
+          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
-          >
-            <img
-              src="images/white-desk-work-study-aesthetics.jpg"
-              class="avatar-image img-fluid"
-              alt=""
-            />
-
           <h2 class="text-white ms-4 mb-0">Projects</h2>
         </div>
       </div>
+    </div>
 
     <div class="clearfix"></div>
 
+    <div class="row">
+      <!-- Law Office Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -34,6 +30,7 @@
         </div>
       </div>
 
+      <!-- Easy-pay Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -51,6 +48,7 @@
         </div>
       </div>
 
+      <!-- Cloths Ecommerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -68,116 +66,78 @@
         </div>
       </div>
 
+      <!-- Law Office -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Law Office</h3>
           </div>
-            <a
+          <a href="images/projects/law-office-home.png" class="popup-image">
-              href="images/projects/law-office-home.png"
+            <img src="images/projects/law-office-home.png" class="projects-image img-fluid" alt="law office" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/law-office-home.png"
-                class="projects-image img-fluid"
-                alt="law office"
-              />
           </a>
         </div>
       </div>
 
+      <!-- SVU E-commerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">SVU E-commerce</h3>
           </div>
-            <a
+          <a href="images/projects/svu-hw.png" class="popup-image">
-              href="images/projects/svu-hw.png"
+            <img src="images/projects/svu-hw.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/svu-hw.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- NANS's CRM -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">NANS's CRM</h3>
           </div>
-            <a
+          <a href="images/projects/nanas-main-dashboard.png" class="popup-image">
-              href="images/projects/nanas-main-dashboard.png"
+            <img src="images/projects/nanas-main-dashboard.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/nanas-main-dashboard.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- Majsin's Restaurant -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Majsin's Restaurant</h3>
           </div>
-            <a
+          <a href="images/projects/majsin-dashborad.png" class="popup-image">
-              href="images/projects/majsin-dashborad.png"
+            <img src="images/projects/majsin-dashborad.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/majsin-dashborad.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- BPro's ERP System -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">BPro's ERP System</h3>
           </div>
-            <a href="images/projects/bpro-erp.jpg" class="popup-image">
+          <a href="images/projects/bpro-erp.png" class="popup-image">
-              <img
+            <img src="images/projects/bpro-erp.png" class="projects-image img-fluid" alt="" />
-                src="images/projects/bpro-erp.jpg"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
+    </div>
+  </div>
 
-        <div class="col-lg-4 col-md-6 col-12">
+  <!-- Lightbox -->
-          <div class="projects-thumb">
+  <div class="lightbox">
-            <div class="projects-info">
+    <div class="lightbox-content">
-              <small class="projects-tag">Website</small>
+      <img src="" alt="" class="lightbox-image">
-              <h3 class="projects-title">Moneyout Bank</h3>
+      <span class="lightbox-close">&times;</span>
-            </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>
+</section>
-    </div>
-  </section>

index.html

@@ -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" />
@@ -23,31 +23,91 @@
   </head>
 
   <body>
-    <!-- Include Header -->
+    <!-- Header -->
     <div id="header"></div>
 
     <main>
-      <!-- Include Hero Section -->
+      <!-- Hero Section -->
-      <div id="hero"></div>
+      <section id="hero"></section>
 
-      <!-- Include About Section -->
+      <!-- About Section -->
-      <div id="about"></div>
+      <section id="about"></section>
+      <!-- <aside class="about-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-graph-up-arrow"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Boost Your Growth</h4>
+              <p>Partner with Company for Digital Excellence</p>
+            </div>
+            <a href="#" class="ad-link"
+              >Get Started <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside> -->
 
-      <!-- Include Featured Section -->
+      <!-- Featured Section -->
-      <div id="featured"></div>
+      <section id="featured"></section>
+      <!-- <aside class="featured-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <h4>Secure Solutions</h4>
+            <p>Trusted by Industry Leaders</p>
+            <a href="#" class="ad-link"
+              >Learn More <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside> -->
 
-      <!-- Include Projects Section -->
+      <!-- Projects Section -->
-      <div id="projects"></div>
+      <section id="projects"></section>
+      <!-- <aside class="projects-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-lightning-charge"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Fast Development</h4>
+              <p>Accelerate Your Project Timeline</p>
+            </div>
+            <a href="#" class="ad-link"
+              >Start Now <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside> -->
 
-      <!-- Include Services Section -->
+      <!-- Services Section -->
-      <div id="services"></div>
+      <section id="services"></section>
+      <!-- <aside class="services-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <h4>Premium Services</h4>
+            <p>Expert Solutions for Your Business</p>
+            <a href="#" class="ad-link"
+              >Discover More <i class="bi bi-arrow-right"></i
+            ></a>
+          </div>
+        </div>
+      </aside> -->
 
-      <!-- Include Contact Section -->
+      <!-- Contact Section -->
-      <div id="contact"></div>
+      <section id="contact"></section>
     </main>
 
-    <!-- Include Footer -->
+    <!-- Footer -->
-    <div id="footer"></div>
+    <footer id="footer"></footer>
 
     <!-- JAVASCRIPT FILES -->
     <script src="js/jquery.min.js"></script>
@@ -57,19 +117,26 @@
     <script src="js/jquery.magnific-popup.min.js"></script>
     <script src="js/magnific-popup-options.js"></script>
     <script src="js/custom.js"></script>
+    <script src="js/cat-animation.js"></script>
 
     <!-- Load Components -->
     <script>
       $(document).ready(function () {
-        // Load components
+        const components = {
-        $("#header").load("components/header.html");
+          header: "components/header.html",
-        $("#hero").load("components/hero.html");
+          hero: "components/hero.html",
-        $("#about").load("components/about.html");
+          about: "components/about.html",
-        $("#featured").load("components/featured.html");
+          featured: "components/featured.html",
-        $("#services").load("components/services.html");
+          services: "components/services.html",
-        $("#projects").load("components/projects.html");
+          projects: "components/projects.html",
-        $("#contact").load("components/contact.html");
+          contact: "components/contact.html",
-        $("#footer").load("components/footer.html");
+          footer: "components/footer.html",
+        };
+
+        // Load all components
+        Object.entries(components).forEach(([id, path]) => {
+          $(`#${id}`).load(path);
+        });
       });
     </script>
   </body>

js/cat-animation.js

@@ -0,0 +1,279 @@
+class Cat {
+  constructor(canvas, x, y, scale = 1, color = 'default') {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.x = x;
+    this.y = y;
+    this.scale = scale;
+    this.color = color;
+    this.direction = 1;
+    this.speed = 2;
+    this.frame = 0;
+    this.frameCount = 8;
+    this.frameWidth = 64;
+    this.frameHeight = 64;
+    this.isPaused = false;
+    this.pauseTimer = 0;
+    this.pauseDuration = 0;
+    this.pawPrints = [];
+    this.lastPawPrint = 0;
+    this.lastMeow = 0;
+    this.meowCooldown = 3000; // 3 seconds between meows
+    
+    // Initialize sounds with error handling
+    this.sounds = {
+      meow: null,
+      purr: null,
+      paw: null
+    };
+
+    // Create audio elements with error handling
+    try {
+      this.sounds.meow = new Audio('sounds/meow.wav');
+
+      // Set volume for each sound
+      this.sounds.meow.volume = 0.05;
+      this.sounds.paw.volume = 0;
+
+      // Add error handling for each sound
+      Object.entries(this.sounds).forEach(([key, sound]) => {
+        if (sound) {
+          sound.addEventListener('error', (e) => {
+            console.warn(`Error loading ${key} sound:`, e);
+          });
+        }
+      });
+    } catch (error) {
+      console.warn('Error initializing sounds:', error);
+    }
+  }
+
+  playSound(soundName) {
+    try {
+      const sound = this.sounds[soundName];
+      if (sound) {
+        sound.currentTime = 0;
+        sound.play().catch(error => {
+          console.warn(`Error playing ${soundName} sound:`, error);
+        });
+      }
+    } catch (error) {
+      console.warn(`Error playing ${soundName} sound:`, error);
+    }
+  }
+
+  update() {
+    if (this.isPaused) {
+      this.pauseTimer++;
+      if (this.pauseTimer >= this.pauseDuration) {
+        this.isPaused = false;
+        this.pauseTimer = 0;
+      }
+      return;
+    }
+
+    // Random pause and meow
+    if (Math.random() < 0.005) {
+      this.isPaused = true;
+      this.pauseDuration = Math.random() * 100 + 100;
+      
+      // Random meow during pause
+      if (Date.now() - this.lastMeow > this.meowCooldown) {
+        this.playSound('meow');
+        this.lastMeow = Date.now();
+      }
+    }
+
+    // Update position
+    this.x += this.speed * this.direction;
+    
+    // Change direction at edges
+    if (this.x >= this.canvas.width - this.frameWidth * this.scale) {
+      this.direction = -1;
+      this.playSound('paw');
+    } else if (this.x <= 0) {
+      this.direction = 1;
+      this.playSound('paw');
+    }
+
+    // Update animation frame
+    this.frame = (this.frame + 0.2) % this.frameCount;
+
+    // Add paw prints with sound
+    if (Date.now() - this.lastPawPrint > 200) {
+      this.addPawPrint();
+      this.lastPawPrint = Date.now();
+      // Play paw sound occasionally
+      if (Math.random() < 0.3) {
+        this.playSound('paw');
+      }
+    }
+
+    // Update paw prints
+    this.pawPrints = this.pawPrints.filter(print => {
+      print.opacity -= 0.02;
+      return print.opacity > 0;
+    });
+  }
+
+  draw() {
+    // Draw paw prints
+    this.pawPrints.forEach(print => {
+      this.ctx.globalAlpha = print.opacity;
+      this.ctx.fillStyle = '#000';
+      this.ctx.beginPath();
+      this.ctx.arc(print.x, print.y, 3, 0, Math.PI * 2);
+      this.ctx.fill();
+    });
+    this.ctx.globalAlpha = 1;
+
+    // Draw cat
+    this.ctx.save();
+    this.ctx.translate(this.x, this.y);
+    this.ctx.scale(this.direction * this.scale, this.scale);
+    
+    // Draw cat body
+    this.ctx.fillStyle = this.color === 'default' ? '#666' : 
+                        this.color === 'orange' ? '#FFA500' : '#000';
+    
+    // Body
+    this.ctx.beginPath();
+    this.ctx.ellipse(32, 40, 20, 15, 0, 0, Math.PI * 2);
+    this.ctx.fill();
+    
+    // Head
+    this.ctx.beginPath();
+    this.ctx.arc(15, 35, 12, 0, Math.PI * 2);
+    this.ctx.fill();
+    
+    // Ears
+    this.ctx.beginPath();
+    this.ctx.moveTo(8, 28);
+    this.ctx.lineTo(5, 20);
+    this.ctx.lineTo(12, 28);
+    this.ctx.fill();
+    
+    this.ctx.beginPath();
+    this.ctx.moveTo(22, 28);
+    this.ctx.lineTo(25, 20);
+    this.ctx.lineTo(18, 28);
+    this.ctx.fill();
+    
+    // Tail
+    this.ctx.beginPath();
+    this.ctx.moveTo(52, 40);
+    this.ctx.quadraticCurveTo(60, 30, 65, 40);
+    this.ctx.strokeStyle = this.ctx.fillStyle;
+    this.ctx.lineWidth = 4;
+    this.ctx.stroke();
+    
+    // Legs (animated)
+    const legOffset = Math.sin(this.frame * 0.5) * 5;
+    this.ctx.beginPath();
+    this.ctx.moveTo(25, 55);
+    this.ctx.lineTo(25, 55 + legOffset);
+    this.ctx.moveTo(35, 55);
+    this.ctx.lineTo(35, 55 - legOffset);
+    this.ctx.moveTo(45, 55);
+    this.ctx.lineTo(45, 55 + legOffset);
+    this.ctx.strokeStyle = this.ctx.fillStyle;
+    this.ctx.lineWidth = 3;
+    this.ctx.stroke();
+    
+    this.ctx.restore();
+  }
+
+  addPawPrint() {
+    const offset = this.direction === 1 ? 20 : -20;
+    this.pawPrints.push({
+      x: this.x + offset,
+      y: this.y + this.frameHeight * this.scale - 5,
+      opacity: 0.5
+    });
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.frameWidth * this.scale &&
+           y >= this.y && 
+           y <= this.y + this.frameHeight * this.scale;
+  }
+
+  interact(x, y) {
+    if (this.isPointInside(x, y)) {
+      this.isPaused = true;
+      this.pauseDuration = 100;
+      
+      // Play purr sound when petted
+      this.playSound('purr');
+      
+      // Occasionally meow when petted
+      if (Math.random() < 0.3 && Date.now() - this.lastMeow > this.meowCooldown) {
+        this.playSound('meow');
+        this.lastMeow = Date.now();
+      }
+      
+      return true;
+    }
+    return false;
+  }
+}
+
+// Initialize cat animation
+document.addEventListener('DOMContentLoaded', function() {
+  const container = document.createElement('div');
+  container.id = 'cat-container';
+  container.style.cssText = `
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+    z-index: 9999;
+  `;
+  document.body.appendChild(container);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = 100;
+  container.appendChild(canvas);
+
+  const ctx = canvas.getContext('2d');
+  const cats = [
+    new Cat(canvas, 0, 20, 1, 'default'),
+    new Cat(canvas, 200, 10, 0.8, 'orange'),
+    new Cat(canvas, 400, 30, 1.2, 'black')
+  ];
+
+  // Handle window resize
+  window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+  });
+
+  // Handle mouse interaction
+  canvas.style.pointerEvents = 'auto';
+  canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    cats.forEach(cat => {
+      cat.interact(x, y);
+    });
+  });
+
+  // Animation loop
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    cats.forEach(cat => {
+      cat.update();
+      cat.draw();
+    });
+    
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+});

js/click-scroll.js

@@ -5,7 +5,9 @@ var sectionArray = [1, 2, 3, 4, 5];
 
 $.each(sectionArray, function (index, value) {
   $(document).scroll(function () {
-    var offsetSection = $("#" + "section_" + value).offset().top - 90;
+    var section = $("#" + "section_" + value);
+    if (section.length) {  // Check if section exists
+      var offsetSection = section.offset().top - 90;
       var docScroll = $(document).scrollTop();
       var docScroll1 = docScroll + 1;
 
@@ -15,12 +17,15 @@ $.each(sectionArray, function (index, value) {
         $(".navbar-nav .nav-item .nav-link").eq(index).addClass("active");
         $(".navbar-nav .nav-item .nav-link").eq(index).removeClass("inactive");
       }
+    }
   });
 
   $(".click-scroll")
     .eq(index)
     .click(function (e) {
-      var offsetClick = $("#" + "section_" + value).offset().top - 90;
+      var section = $("#" + "section_" + value);
+      if (section.length) {  // Check if section exists
+        var offsetClick = section.offset().top - 90;
         e.preventDefault();
         $("html, body").animate(
           {
@@ -28,6 +33,7 @@ $.each(sectionArray, function (index, value) {
           },
           300
         );
+      }
     });
 });
 

js/custom.js

@@ -77,6 +77,8 @@
   const lightboxClose = document.querySelector('.lightbox-close');
   const projectImages = document.querySelectorAll('.popup-image');
 
+  // Only initialize lightbox if elements exist
+  if (lightbox && lightboxImage && lightboxClose && projectImages.length > 0) {
     projectImages.forEach(image => {
       image.addEventListener('click', (e) => {
         e.preventDefault();
@@ -109,6 +111,7 @@
         document.body.style.overflow = '';
       }
     });
+  }
 
   // Sticky Navigation
   $(window).on('scroll', function() {

sounds/paw.mp3

@@ -0,0 +1 @@
+404: Not Found