add photo with hight resoltions and change the primary color

This commit is contained in:
2026-01-26 23:28:09 +03:00
parent e6f4178346
commit 2985df3d43
4 changed files with 432 additions and 44 deletions

View File

@@ -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">Mohammed Al-yaseen</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: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>
</footer>

View File

@@ -1,11 +1,13 @@
<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>
@@ -14,14 +16,10 @@
</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>