Files
portfolio/index.html
2024-12-05 08:26:02 +03:00

959 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="TemplateMo" />
<title>Mohammed Al-yaseen</title>
<!-- CSS FILES -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-icons.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/templatemo-first-portfolio-style.css" rel="stylesheet" />
<link rel="icon" href="images/logo.png" />
</head>
<body>
<section class="preloader">
<div class="spinner">
<span class="spinner-rotate"></span>
</div>
</section>
<nav class="navbar navbar-expand-lg">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</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>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-lg-5">
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_2">About</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_3">Services</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_4">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_5">Contact</a>
</li>
</ul>
<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>
</div>
</div>
</div>
</nav>
<main>
<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="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>
<h2 class="mb-4">Im available for freelance work.</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">
<!-- TODO: apply Style in case implementing the hero image -->
<!-- <div class="hero-image-wrap"></div> -->
<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>
</svg>
</section>
<section class="about section-padding" id="section_2">
<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=""
/>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<div class="about-thumb">
<div
class="section-title-wrap d-flex justify-content-end align-items-center mb-4"
>
<h2 class="text-white me-4 mb-0">My Story</h2>
<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>
<p>
👋 Greetings I'm Mohammed, a dedicated software engineer with a passion for creating innovative solutions.
My journey in the field of Information Technology began at the Arab International University
in 2016, where I pursued a Bachelor's Degree in Computer Software Engineering,
graduating in 2021.
<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>
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>
<h5> Big-dash Story </h5>
Engaging in developing a comprehensive banking system ( for <a href="https://moneyout.com.tr"> Moneyout Elektronik Para ve
Ödeme Hizmetleri A.Ş </a>) aimed at facilitating financial transactions across various branches,
incorporating digital wallet functionalities, and supporting transactions executed in
multiple currencies.
<br>
<br>
<h5> Easy-pay Story </h5>
For <a href="https://www.facebook.com/MONALISA.SYRIA"> Monalisa restaurant in Damascus </a>, the system includes managing reservations, tables,
products,
invoices, government tax integration, debits, and producing different types of reports like
sales and logs of payments.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="featured section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<div class="profile-thumb">
<div class="profile-title">
<h4 class="mb-0">Information</h4>
</div>
<div class="profile-body">
<p>
<span class="profile-small-title">Name</span>
<span>Mohammed Al-yaseen</span>
</p>
<p>
<span class="profile-small-title">Birthday</span>
<span>Jun 1, 1998</span>
</p>
<p>
<span class="profile-small-title">Phone</span>
<span
><a href="tel:+963-962-469-482">
+963-962-469-482
</a></span
>
</p>
<p>
<span class="profile-small-title">Email</span>
<span
><a href="mailto:mohammed.alyaseen.it@gmail.com"
>mohammed.alyaseen.it@gmail.com</a
></span
>
</p>
</div>
</div>
</div>
<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-2">
<strong class="featured-numbers">4+</strong>
<p class="featured-text">Years of Experiences</p>
</div>
<div
class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-2"
>
<strong class="featured-numbers">5</strong>
<p class="featured-text">Happy Customers</p>
</div>
<div class="col-lg-6 col-6 pt-4">
<strong class="featured-numbers">10</strong>
<p class="featured-text">Project Finished</p>
</div>
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
<strong class="featured-numbers">7+</strong>
<p class="featured-text">Digital Awards</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<section class="clients section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12 col-12">
<h3 class="text-center mb-5">Companies I've had worked</h3>
</div>
<div class="col-lg-2 col-4 ms-auto clients-item-height">
<img
src="images/clients/cachet.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/guitar-center.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/tokico.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/shopify.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 me-auto clients-item-height">
<img
src="images/clients/profil-rejser.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
</div>
</div>
</section>
-->
<section class="projects section-padding" id="section_4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-12 ms-auto">
<div
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=""
/>
<h2 class="text-white ms-4 mb-0">Projects</h2>
</div>
</div>
<div class="clearfix"></div>
<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 Login</h3>
</div>
<a href="images/projects/law-office-login.png" class="popup-image">
<img
src="images/projects/law-office-login.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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">Easy-pay Login</h3>
</div>
<a href="images/projects/easy-pay-login.png" class="popup-image">
<img
src="images/projects/easy-pay-login.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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">Cloths Ecommerce</h3>
</div>
<a
href="images/projects/cloths-e-commerce.png"
class="popup-image"
>
<img
src="images/projects/cloths-e-commerce.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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
href="images/projects/law-office-home.png"
class="popup-image"
>
<img
src="images/projects/law-office-home.png"
class="projects-image img-fluid"
alt="law office"
/>
</a>
</div>
</div>
<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
href="images/projects/svu-hw.png"
class="popup-image"
>
<img
src="images/projects/svu-hw.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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
href="images/projects/nanas-main-dashboard.png"
class="popup-image"
>
<img
src="images/projects/nanas-main-dashboard.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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
href="images/projects/majsin-dashborad.png"
class="popup-image"
>
<img
src="images/projects/majsin-dashborad.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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">
<img
src="images/projects/bpro-erp.jpg"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<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>
</section>
<section class="services section-padding" id="section_3">
<div class="container">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
>
<img
src="images/handshake-man-woman-after-signing-business-contract-closeup.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Services</h2>
</div>
<div class="row pt-lg-5">
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Websites</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$2,400</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You may want to explore Too CSS for great collection of
free HTML CSS templates.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-globe"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Branding</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,200</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You can explore more CSS templates on TemplateMo website
by browsing through different tags.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-lightbulb"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Ecommerce</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$3,600</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
If you need a customized ecommerce website for your
business, feel free to discuss with me.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-phone"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">SEO</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,450</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
To list your website first on any search engine, we will
work together. First Portfolio is one-page CSS Template
for free download.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-google"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact section-padding" id="section_5">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-12">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
>
<img
src="images/aerial-view-man-using-computer-laptop-wooden-table.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Say Hi</h2>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-3 col-md-6 col-12 pe-lg-0">
<div
class="contact-info contact-info-border-start d-flex flex-column"
>
<strong class="site-footer-title d-block mb-3">Services</strong>
<ul class="footer-menu">
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Websites</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Branding</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Ecommerce</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">SEO</a>
</li>
</ul>
<strong class="site-footer-title d-block mt-4 mb-3"
>Stay connected</strong
>
<ul class="social-icon">
<li class="social-icon-item">
<a
href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/"
class="social-icon-link bi-linkedin"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://github.com/mohammed-alyaseen"
class="social-icon-link bi-github"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://www.facebook.com/profile.php?id=100010330412662"
class="social-icon-link bi-facebook"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://www.youtube.com/templatemo"
class="social-icon-link bi-youtube"
target="_blank"
></a>
</li>
</ul>
<strong class="site-footer-title d-block mt-4 mb-3"
>Start a project</strong
>
<p class="mb-0">Im available for freelance projects</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 ps-lg-0">
<div class="contact-info d-flex flex-column">
<strong class="site-footer-title d-block mb-3">About</strong>
<p class="mb-2">
Mohammed is a professional web developer. Feel free to get in
touch with me.
</p>
<strong class="site-footer-title d-block mt-4 mb-3"
>Email</strong
>
<p style="word-break: break-all">
<a href="mailto:mohammed.alyaseen.it@gmail.com">
mohammed.alyaseen.it@gmail.com
</a>
</p>
<strong class="site-footer-title d-block mt-4 mb-3"
>Call</strong
>
<p class="mb-0">
<a href="tel:+963-962-469-482"> +963-962-469-482 </a>
</p>
</div>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<form
action="#"
method="get"
class="custom-form contact-form"
role="form"
>
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<div class="form-floating">
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="Name"
required=""
/>
<label>Name</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-floating">
<input
type="email"
name="email"
id="email"
pattern="[^ @]*@[^ @]*"
class="form-control"
placeholder="Email address"
required=""
/>
<label>Email address</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="website"
type="checkbox"
class="form-check-input"
id="inlineCheckbox1"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox1">
<i class="bi-globe form-check-icon"></i>
<span class="form-check-label-text">Websites</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="branding"
type="checkbox"
class="form-check-input"
id="inlineCheckbox2"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox2">
<i class="bi-lightbulb form-check-icon"></i>
<span class="form-check-label-text">Branding</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="ecommerce"
type="checkbox"
class="form-check-input"
id="inlineCheckbox3"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox3">
<i class="bi-phone form-check-icon"></i>
<span class="form-check-label-text">Ecommerce</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline me-0">
<input
name="seo"
type="checkbox"
class="form-check-input"
id="inlineCheckbox4"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox4">
<i class="bi-google form-check-icon"></i>
<span class="form-check-label-text">SEO</span>
</label>
</div>
</div>
<div class="col-lg-12 col-12">
<div class="form-floating">
<textarea
class="form-control"
id="message"
name="message"
placeholder="Tell me about the project"
></textarea>
<label>Tell me about the project</label>
</div>
</div>
<div class="col-lg-3 col-12 ms-auto">
<button type="submit" class="form-control">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<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 © 2036 <a href="#">First Portfolio</a> Company. All
rights reserved.</span
>
Design:
<a rel="sponsored" href="https://templatemo.com" target="_blank"
>TemplateMo</a
>
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- JAVASCRIPT FILES -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/click-scroll.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/custom.js"></script>
</body>
</html>