560 lines
31 KiB
HTML
560 lines
31 KiB
HTML
|
<!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&display=swap"/>
|
|||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;800&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&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">I’m 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"> </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! I’m 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">Let’s talk how I can help you!</div> -->
|
|||
|
|
<div class="h5">Let’s 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">© 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>
|