shafaat.in/index.html
2021-11-16 15:34:38 +08:00

560 lines
31 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>
<!-- upto 2 directory depth-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>I'm Shafaat Khan</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;800&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;800&amp;display=swap" media="print" onload="this.media='all'"/>
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;800&amp;display=swap"/>
</noscript>
<link href="./css/font-awesome/css/all.min.css?ver=1.2.0" rel="stylesheet">
<link href="./css/bootstrap-icons/bootstrap-icons.css?ver=1.2.0" rel="stylesheet">
<link href="./css/bootstrap.min.css?ver=1.2.0" rel="stylesheet">
<link href="./css/aos.css?ver=1.2.0" rel="stylesheet">
<link href="./css/main.css?ver=1.2.0" rel="stylesheet">
<link href="./css/type.css" rel="stylesheet">
<link href="./css/terminal.css" rel="stylesheet">
<noscript>
<style type="text/css">
[data-aos] {
opacity: 1 !important;
transform: translate(0) scale(1) !important;
}
</style>
</noscript>
</head>
<body id="top">
<header class="bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="header-nav" role="navigation">
<div class="container"><a class="link-dark navbar-brand site-title mb-0" href="https://shafaat.in">Shafaat's Profile</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-2">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#experience">Experience</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="page-content">
<div id="content">
<header>
<div class="cover bg-light">
<div class="container px-3">
<div class="row">
<div class="col-lg-6 p-2"><img class="img-fluid" src="images/illustrations/hello3.svg" alt="hello"/></div>
<div class="col-lg-6">
<div class="mt-5">
<p class="lead text-uppercase mb-1">Hello!</p>
<h1 class="intro-title marker" data-aos="fade-left" data-aos-delay="50">Im Shafaat Khan</h1>
<!-- <p class="lead fw-normal mt-3" data-aos="fade-up" data-aos-delay="100">Lead Full-Stack Developer, Solution Architect & Freelancer (to be..)</p> -->
<!-- <div class="type-container lead fw-normal mt-3" data-aos="fade-up">
<p> iam> <span class="typed-text"></span><span class="cursor">&nbsp; </span>/iam></p>
</div> -->
<div class="fakeTerminal">
<div class=fakeMenu>
<div class="fakeButtons fakeClose"></div>
<div class="fakeButtons fakeMinimize"></div>
<div class="fakeButtons fakeZoom"></div>
</div>
<div class="fakeScreen">
<p class="line1">> <span class="typed-text"></span><span class="cursor"></span><span class="cursor4">_</span></p>
<!-- <p class="line2">MyRole> yo gulp-webapp<span class="cursor4">_</span></p> -->
<!-- <p class="line2">Out of the box I include HTML5 Boilerplate, jQuery, and a gulpfile.js to build your app.<span class="cursor2">_</span></p>
<p class="line3">[?] What more would you like? (Press space to select)<span class="cursor3">_</span></p>
<p class="line4">><span class="cursor4">_</span></p> -->
</div>
</div>
<div class="social-nav" data-aos="fade-up" data-aos-delay="200">
<nav role="navigation">
<ul class="nav justify-content-left">
<!-- <li class="nav-item"><a class="nav-link" href="https://twitter.com/templateflip" title="Twitter"><i class="fab fa-twitter"></i><span class="menu-title sr-only">Twitter</span></a></li> -->
<!-- <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/templateflip" title="Facebook"><i class="fab fa-facebook"></i><span class="menu-title sr-only">Facebook</span></a></li> -->
<!-- <li class="nav-item"><a class="nav-link" href="https://www.instagram.com/templateflip" title="Instagram"><i class="fab fa-instagram"></i><span class="menu-title sr-only">Instagram</span></a></li> -->
<li class="nav-item"><a class="nav-link" href="https://www.linkedin.com/in/shafaat-khan/" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i><span class="menu-title sr-only">LinkedIn</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://git.shafaat.in/" title="Repo" target="_blank"><i class="fab fa-github"></i><span class="menu-title sr-only">Git</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://api.whatsapp.com/send?phone=6585547055&text=Hi%20Shafaat!%20Just%20wanted%20to%20connect%20with%20you%20here%20on%20WhatsApp!" title="Repo"><i class="fab fa-whatsapp"></i><span class="menu-title sr-only">Whatsapp</span></a></li>
</ul>
</nav>
</div>
<div class="mt-3" data-aos="fade-up" data-aos-delay="200"><a class="btn btn-primary shadow-sm mt-1 hover-effect" href="#contact">Get In Touch <i class="fas fa-arrow-right"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="wave-bg"></div>
</header>
<div class="section pt-4 px-3 px-lg-4" id="about">
<div class="container-narrow">
<div class="row">
<div class="col-md-6">
<h2 class="h4 my-2">Hello! Im Shafaat Khan.</h2>
<p>I am passionate about software design and development. I am a skilled full-stack developer and very effecient in using Java and React technologies. I am a quick learner and a team worker that gets the job done. I can understand the business requirements and can quickly translate them technically to provide deliverables.</p>
<div class="row mt-3">
<!-- <div class="col-sm-2">
<div class="pb-1">Age:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">28</div>
</div> -->
<div class="col-sm-2">
<div class="pb-1">Email:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">shafaatali10@gmail.com</div>
</div>
<!-- <div class="col-sm-2">
<div class="pb-1">Skype:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">sk_developer-10@yahoo.com</div>
</div> -->
<div class="col-sm-2">
<div class="pb-1">Phone:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">+65 8554 7055</div>
</div>
<div class="col-sm-2">
<div class="pb-1">Address:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">Singapore</div>
</div>
<!-- <div class="col-sm-2">
<div class="pb-1">Staus:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">Available</div>
</div> -->
</div>
</div>
<div class="col-md-5 offset-md-1" data-aos="fade-left" data-aos-delay="100"><img class="avatar img-fluid mt-2" src="images/avatar.png" width="400" height="400" alt="Shafaat Khan"/></div>
</div>
</div>
</div>
<div class="section px-3 px-lg-4 pt-5" id="services">
<div class="container-narrow">
<div class="text-center mb-5">
<h2 class="marker marker-center">My Services</h2>
</div>
<div class="text-center">
<p class="mx-auto mb-3" style="max-width:600px"> I offer services for any applications requiring full-stack development. </p>
</div>
<div class="row py-3">
<div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="200"><img class="mb-2" src="images/services/frontend.png" width="96" height="96" alt="Frontend"/>
<div class="h5">Frontend</div>
</div>
<div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="100"><img class="mb-2" src="images/services/backend.png" width="96" height="96" alt="Backend"/>
<div class="h5">Backend</div>
</div>
<div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="300"><img class="mb-2" src="images/services/solution.png" width="96" height="96" alt="Solution Architect"/>
<div class="h5">Solutioning</div>
</div>
<div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="400"><img class="mb-2" src="images/services/cicd.png" width="96" height="96" alt="CI/CD"/>
<div class="h5">CI/CD</div>
</div>
</div>
</div>
</div>
<div class="section px-3 px-lg-4 pt-5" id="skills">
<div class="container-narrow">
<div class="text-center mb-5">
<h2 class="marker marker-center">My Skills</h2>
</div>
<div class="text-center">
<p class="mx-auto mb-3" style="max-width:600px">I am a quick learner and specialize in multitude of skills required for Web Application Development and Product Design</p>
</div>
<div class="bg-light p-3">
<div class="row">
<div class="col-md-5">
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">Java</span><span>90%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100" data-aos-anchor=".skills-section" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">Spring, Spring Boot</span><span>90%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="200" data-aos-anchor=".skills-section" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">JavaScript</span><span>80%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="300" data-aos-anchor=".skills-section" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">React</span><span>75%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="300" data-aos-anchor=".skills-section" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">HTML, CSS</span><span>75%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="400" data-aos-anchor=".skills-section" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">Node</span><span>70%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="500" data-aos-anchor=".skills-section" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">MySQL, MariaDB, Oracle, MSSQL</span><span>70%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="600" data-aos-anchor=".skills-section" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="py-1">
<div class="d-flex text-small fw-bolder"><span class="me-auto">Jenkins, Docker</span><span>60%</span></div>
<div class="progress my-1">
<div class="progress-bar bg-primary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="600" data-aos-anchor=".skills-section" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section px-2 px-lg-4 pt-5" id="portfolio">
<div class="container">
<div class="text-center mb-5">
<h2 class="marker marker-center">Portfolio </h2>
</div>
<div class="grid bp-gallery pb-3" data-aos="zoom-in-up" data-aos-delay="100">
<div class="grid-sizer"></div>
<div class="grid-item"><a href="https://www.dbs.com.sg/corporate/solutions/climateimpactx">
<figure class="portfolio-item"><img src="images/portfolio/cix-small.png" data-bp="images/portfolio/cix.png"/>
<figcaption>
<h4 class="h5 mb-0">Backend Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://dash.com.sg/">
<figure class="portfolio-item"><img src="images/portfolio/dash-small.png" data-bp="images/portfolio/dash.png" data-caption="Example of an optional caption."/>
<figcaption>
<h4 class="h5 mb-0">Full-Stack Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://www.abeeway.com/orange-business-services-implements-a-cutting-edge-covid-safety-solution-in-singapore-with-actility-abeeway/">
<figure class="portfolio-item"><img src="images/portfolio/facial-recog-small.png" data-bp="images/portfolio/facial-recog.png" data-caption="Example of an optional caption."/>
<figcaption>
<h4 class="h5 mb-0">Full-Stack Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://connectedsites.twimbit.com/iot-use-case-workforce-management">
<figure class="portfolio-item"><img src="images/portfolio/mcd-small.png" data-bp="images/portfolio/mcd.png"/>
<figcaption>
<h4 class="h5 mb-0">Full-Stack Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://www.emcsg.com/">
<figure class="portfolio-item"><img src="images/portfolio/emc-small.png" data-bp="images/portfolio/emc.png"/>
<figcaption>
<h4 class="h5 mb-0">Enterprise App Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://www.oracle.com/industries/hospitality/hotel-property-management/products/hotel-management-software/">
<figure class="portfolio-item"><img src="images/portfolio/opera-small.png" data-bp="images/portfolio/opera.png"/>
<figcaption>
<h4 class="h5 mb-0">Enterprise App Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="https://sanaacharts.com/">
<figure class="portfolio-item"><img src="images/portfolio/sanaacharts-small.png" data-bp="images/portfolio/sanaacharts.png"/>
<figcaption>
<h4 class="h5 mb-0">Frontend Development</h4>
<div>Visit link here</div>
</figcaption>
</figure></a></div>
<div class="grid-item"><a href="#">
<figure class="portfolio-item"><img src="images/portfolio/traccar-small.png" data-bp="images/portfolio/traccar.png"/>
<figcaption>
<h4 class="h5 mb-0">Product Customization</h4>
</figcaption>
</figure></a></div>
</div>
</div>
</div>
<div class="section px-3 px-lg-4 pt-5" id="experience">
<div class="container-narrow">
<div class="text-center mb-5">
<h2 class="marker marker-center">Experience</h2>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-right" data-aos-delay="100">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Senior Software Developer</h3>
<div class="text-muted text-small">NCS. <small>(2020-2021)</small></div>
</div><img src="images/experience/ncs.png" width="auto" height="34"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-left" data-aos-delay="300">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Software Engineer</h3>
<div class="text-muted text-small">Orange Business Services. <small>(2018-2020)</small></div>
</div><img src="images/experience/obs.png" width="auto" height="48"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-right" data-aos-delay="200">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Senior Consultant</h3>
<div class="text-muted text-small">Oracle. <small>(2016-2017)</small></div>
</div><img src="images/experience/oracle.png" width="auto" height="48"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-left" data-aos-delay="400">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Senior Software Engineer</h3>
<div class="text-muted text-small">Orange Business Services. <small>(2014-2016)</small></div>
</div><img src="images/experience/obs.png" width="auto" height="48"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-left" data-aos-delay="400">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Senior Software Engineer</h3>
<div class="text-muted text-small">Tech Mahindra. <small>(2014-2014)</small></div>
</div><img src="images/experience/techm.png" width="auto" height="48"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-left" data-aos-delay="400">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Programmer Analyst</h3>
<div class="text-muted text-small">Cognizant Technology Solutions. <small>(2011-2014)</small></div>
</div><img src="images/experience/cts.png" width="auto" height="24"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="card mb-3" data-aos="fade-left" data-aos-delay="400">
<div class="card-header px-3 py-2">
<div class="d-flex justify-content-between">
<div>
<h3 class="h5 mb-1">Support Engineer</h3>
<div class="text-muted text-small">CSS Corp. <small>(2010-2011)</small></div>
</div><img src="images/experience/css.png" width="auto" height="30"/>
</div>
</div>
<!-- <div class="card-body px-3 py-2">
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- <div class="section px-3 px-lg-4 pt-5" id="testimonials">
<div class="container-narrow">
<div class="text-center mb-5">
<h2 class="marker marker-center">Client Testimonials</h2>
</div>
<div class="row">
<div class="col-md-6 mb-5" data-aos="fade-right" data-aos-delay="100">
<div class="d-flex ms-md-3"><span><i class="fas fa-2x fa-quote-left"></i></span><span class="m-2">Walter displays exemplary professionalism and is able to take on challenges. He learns quickly and is an asset to any team.</span></div>
<div class="d-flex justify-content-end align-items-end">
<div class="text-end me-2">
<div class="fw-bolder">Aiyana</div>
<div class="text-small">CEO / Web Design Company</div>
</div><img class="me-md-3 rounded" src="images/testimonials/client1.jpg" width="96" height="96" alt="client 1"/>
</div>
</div>
<div class="col-md-6 mb-5" data-aos="fade-left" data-aos-delay="300">
<div class="d-flex ms-md-3"><span><i class="fas fa-2x fa-quote-left"></i></span><span class="m-2">Walter displays exemplary professionalism and is able to take on challenges. He learns quickly and is an asset to any team.</span></div>
<div class="d-flex justify-content-end align-items-end">
<div class="text-end me-2">
<div class="fw-bolder">Alexander</div>
<div class="text-small">CEO / Web Design Company</div>
</div><img class="me-md-3 rounded" src="images/testimonials/client2.jpg" width="96" height="96" alt="client 1"/>
</div>
</div>
<div class="col-md-6 mb-5" data-aos="fade-right" data-aos-delay="200">
<div class="d-flex ms-md-3"><span><i class="fas fa-2x fa-quote-left"></i></span><span class="m-2">Walter is a great co-worker and problem solver. He is quick to extend his helping hand and makes a good team player.</span></div>
<div class="d-flex justify-content-end align-items-end">
<div class="text-end me-2">
<div class="fw-bolder">Ariya</div>
<div class="text-small">Web Developer</div>
</div><img class="me-md-3 rounded" src="images/testimonials/client3.jpg" width="96" height="96" alt="client 1"/>
</div>
</div>
<div class="col-md-6 mb-5" data-aos="fade-left" data-aos-delay="400">
<div class="d-flex ms-md-3"><span><i class="fas fa-2x fa-quote-left"></i></span><span class="m-2">Walter is a great co-worker and problem solver. He is quick to extend his helping hand and makes a good team player.</span></div>
<div class="d-flex justify-content-end align-items-end">
<div class="text-end me-2">
<div class="fw-bolder">Braiden</div>
<div class="text-small">Web Designer</div>
</div><img class="me-md-3 rounded" src="images/testimonials/client4.jpg" width="96" height="96" alt="client 1"/>
</div>
</div>
</div>
</div>
</div> -->
<div class="section px-2 px-lg-4 pb-4 pt-5 mb-5" id="contact">
<div class="container-narrow">
<div class="text-center mb-5">
<h2 class="marker marker-center">Contact Me</h2>
</div>
<div class="row">
<div class="col-md-6" data-aos="zoom-in" data-aos-delay="100">
<div class="bg-light my-2 p-3 pt-2">
<form action="https://apps.shafaat.in/common/form/contact/send-message" method="POST" name="messageForm" id="message-form">
<div class="form-group my-2">
<label for="name" class="form-label fw-bolder">Name*</label>
<input class="form-control" type="text" id="name" name="name" required>
</div>
<div class="form-group my-2">
<label for="phone" class="form-label fw-bolder">Phone</label>
<input class="form-control" type="text" id="phone" name="phone">
</div>
<div class="form-group my-2">
<label for="email" class="form-label fw-bolder">Email*</label>
<input class="form-control" type="email" id="email" name="email" required>
</div>
<div class="form-group my-2">
<label for="message" class="form-label fw-bolder">Message*</label>
<textarea class="form-control" style="resize: none;" id="message" name="message" rows="4" required></textarea>
</div>
<button class="btn btn-primary mt-2" type="submit" id="form-button">Send</button>
</form>
</div>
</div>
<div class="col-md-6" data-aos="fade-left" data-aos-delay="300">
<div class="mt-3 px-1">
<!-- <div class="h5">Lets talk how I can help you!</div> -->
<div class="h5">Lets talk! </div>
<p>If you like my profile and want to avail my services then drop me a message using the contact form. You may also drop me a message to stay in touch.</p>
<p>Or get in touch using my email, skype or my contact number.</p>
<p>See you!</p>
</div>
<div class="mt-53 px-1">
<div class="row">
<div class="col-sm-2">
<div class="pb-1">Email:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">shafaatali10@gmail.com</div>
</div>
<div class="col-sm-2">
<div class="pb-1">Phone:</div>
</div>
<div class="col-sm-10">
<div class="pb-1 fw-bolder">+65 8554 7055</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 pb-4 text-center bg-light">
<div class="container">
<div class="my-3">
<div class="h4">Shafaat Khan</div>
<p>Lead Full-Stack Developer & Solution Architect</p>
<div class="social-nav">
<nav role="navigation">
<ul class="nav justify-content-center">
</ul>
</nav>
</div>
</div>
<div class="text-small text-secondary">
<div class="mb-1">&copy; All rights reserved.</div>
<div style="display: none;">
<!-- Make sure to buy a license for the template before removing the line below. Buy license on https://templateflip.com/ -->Design - <a href="https://templateflip.com/" target="_blank">TemplateFlip</a></div>
</div>
</div>
</footer></div>
</div>
<div id="scrolltop"><a class="btn btn-secondary" href="#top"><span class="icon"><i class="fas fa-angle-up fa-x"></i></span></a></div>
<script src="./scripts/imagesloaded.pkgd.min.js?ver=1.2.0"></script>
<script src="./scripts/masonry.pkgd.min.js?ver=1.2.0"></script>
<script src="./scripts/BigPicture.min.js?ver=1.2.0"></script>
<script src="./scripts/purecounter.min.js?ver=1.2.0"></script>
<script src="./scripts/bootstrap.bundle.min.js?ver=1.2.0"></script>
<script src="./scripts/aos.min.js?ver=1.2.0"></script>
<script src="./scripts/main.js?ver=1.2.0"></script>
<script src="./scripts/type.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>