index.html

<!DOCTYPE html>
<html>
<head>
<title>Sumit</title>
 <meta charset="utf-8">

 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<html lang="en">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet"  href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
	
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>


<nav class="navbar navbar-expand-lg text-capatilized fixed-top" id="mainNav">
    <div class="container-fluid data-aos="fade-up"
    ">
      <a class="navbar-brand  " href="#page-top"><h3 class="font-weight-bolder text-dark">Sumit</h3></a>
      <button class="navbar-toggler navbar-toggler-right  text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarRes" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu

      </button>
      <div class="collapse navbar-collapse " id="navbarRes">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 text-dark " href="#landing-page">home</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 text-dark" href="#about">About</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 r text-dark" href="#skill-aria">skills</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 r text-dark" href="#Project-aria">work</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 r text-dark" href="#contact">contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</head>


<body >
  
<div id="landing-page">
<div class="container-fluid " data-aos="fade-down">
<div class="row">

	<div class="col-md-8" >
			 <h1 class="mytex ">Hi,</h1>
							<h1 class="mytext0 "> I'am <span class="my-span">sumit</span></h1>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

							<h2 class="mytext1  ">full stack Developer</h2>
								<a  href="#" class="btn btn-primary btn-lg " onclick="window.open('mycv.docx.pdf')">Get CV</a>
								<a href="https://www.linkedin.com/in/sumitdimathur" class="btn btn-outline-success btn-lg   " target="_blank">Hire Me </a>

</div>

<div class="col-md-4">

	<img class="myimg " src="gi.png" alt="">

</div>
</div>
</div>
</div>


<div id="about">
<div class="container-fluid "data-aos="fade-down">
  <h1 class="ab-text">About</h1>
<div class="row">
<div class="col-md-4">
	
		<img class="img1 " src="ab.png">
</div>
<div class="col-md-8">
	
	<p class="ab1">
Hi there , My Name is Sumit I am from Delhi 
I have completed My Diploma Engineering from AIT Delhi-92 . Now I have done my B.C.A.  I do have Strong knowledge about software development & Web App Development. I want enhance My career as a Software Engineer.<br>
Thank You.
</p>

</div>

</div>

</div>
</div> 

<section id="skill-aria">
 
<div class="container-fluid" data-aos="fade-down">

	<div class="row ">

							<h2 class="my-t "> Skills  </h2>

</div>


</div>


<br>

<div class="container" data-aos="fade-down">
  <div class="row">
    <div class="col-md-6 ">
      <h2 class="text-uppercase font-weight-bolder px-md-1">Frontend</h2>
      <hr>
      <!-- <h3 class="text-uppercase font-weight-bold  px-md-1  " style="color: #495464">Bootstrap <i class="fab fa-bootstrap" " style="color: #602C50"></i></h3>
        <div class="progress ">
  <div  class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90%" aria-valuemin="0" aria-valuemax="100" >90%</div>
</div>
  <br>
 <h3 class="text-uppercase font-weight-bold px-md-1 " style="color: #495464">css <i class="fab fa-css3-alt" " style="color:#4070F4 "></i></h3>
        <div class="progress ">
  <div class="progress-bar bg-primary wow fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85%" aria-valuemin="0" aria-valuemax="100">85%</div>
</div><br>
 <h3 class="text-uppercase font-weight-bold px-md-1 " style="color: #495464">html <i class="fab fa-html5" style="color: #E44D26"></i></h3>
        <div class="progress ">
  <div class="progress-bar bg-primary wow fadeInLeft  " role="progressbar" style="width: 80%" aria-valuenow="80%" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<br>
<h3 class="text-uppercase font-weight-bold px-md-1  " style="color: #495464 ">React.js <i class="fab fa-react" style="color: #264de4 "></i></h3>
        <div class="progress ">
  <div class="progress-bar bg-primary wow fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85%" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>

    </div> -->

    <h3 class="progress-title">HTML5</h3>
            <div class="progress">
                <div class="progress-bar" style="width:85%; background:#f7810e;">85%
                    
                    
                </div>
            </div>
            <h3 class="progress-title">CSS3</h3>
            <div class="progress orange">
                <div class="progress-bar" style="width:70%; background:#254BDD;">70%
                    
                </div>
            </div>
            <h3 class="progress-title">Bootstrap</h3>
            <div class="progress pink">
                <div class="progress-bar" style="width:70%; background:#563D7C;">75%
                    
                </div>

            </div>  
            <h3 class="progress-title">React JS</h3>
            <div class="progress pink">
                <div class="progress-bar" style="width:60%; background:#61DBFB;">60%
                    
                </div>

            </div>  


    </div>
    <div class="col-md-6">
      <h2 class="text-uppercase font-weight-bolder px-md-1  ">Backend</h2>
      <hr>
     
<!-- <h3 class="text-uppercase font-weight-bold px-md-1 " style="color: #495464 ">node.js<i class="fab fa-node-js" style="color: #264de4"></i></h3>

      <div class="progress ">
  <div class="progress-bar  bg-primary wow fadeInLeft" role="progressbar" style="width: 75%" aria-valuenow="75%" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<br>
<h3 class=" text-uppercase font-weight-bold px-md-1 " style="color:  #495464">Java<i class="fab fa-java " style="color: #f89820 "></i></h3>
 <div class="progress ">
  <div class="progress-bar  bg-primary wow fadeInLeft" role="progressbar" style="width: 65%" aria-valuenow="75%" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
<br>
<h3 class=" text-uppercase font-weight-bold px-md-1  " style="color: #495464" >MySql<i class="fas fa-database" style="color: #264de4"></i></h3>
<div class="progress ">
  <div class="progress-bar bg-primary  wow fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85%" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<br>
<h3 class="text-uppercase font-weight-bold px-md-1 " style="color: #495464 ">MongoDB<i class="fab fa-envira"style="color: #3C873A "></i></h3>
        <div class="progress ">
  <div class="progress-bar bg-primary wow fadeInLeft" role="progressbar" style="width: 80%" aria-valuenow="80%" aria-valuemin="0" aria-valuemax="100">80%</div>
</div> -->

<h3 class="progress-title">Node JS</h3>
            <div class="progress">
                <div class="progress-bar" style="width:65%; background:#6FBC4F;">65%
                    
                    
                </div>
            </div>
            <h3 class="progress-title">JavaScript</h3>
            <div class="progress">
                <div class="progress-bar" style="width:65%; background:#F7E019;">65%
                    
                    
                </div>
            </div>
            <h3 class="progress-title">Java</h3>
            <div class="progress">
                <div class="progress-bar" style="width:60%; background:#EC2025;">60%
                    
                    
                </div>
            </div>

            <h3 class="progress-title">MongoDB</h3>
            <div class="progress">
                <div class="progress-bar" style="width:75%; background:#6FBC4F;">75%
                    
                    
                </div>
            </div>


    </div>


  </div>


</div>
</section>

<br>


<section id="Project-aria">
<div class="container-fluid px-0" data-aos="fade-down">

<!-- Section heading -->
<h2 class="h1-responsive text-center text-capatilized font-weight-bold my-5">Work</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5"></p>

<!-- Grid row -->
<div class="row d-flex justify-content-center">

  <!-- Grid column -->
  <div class="col-md-6 col-xl-5 mb-4">
    <!--Featured image-->
    <div class="card-body">
    <div class="view overlay rounded z-depth-2">
      <img src="https://www.insideselfstorage.com/sites/insideselfstorage.com/files/styles/article_featured_retina/public/Hands-Give-Charity.jpg?itok=lPjb7i9m" class="img-fluid" alt="Sample project image">
      <a>
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>
    <!--Excerpt-->
    
      <a href="" class="green-text">
       
      </a>
      <h4 class=" font-weight-bold mb-3 text-danger">Charity Web App</h4>
      <p class="font-weight-bolder">Basic Charity Web App using instamojo Payment Gateway and integrated Newsletter plugin by using mail chimp API.</p>
      <a class="btn btn-success btn-rounded btn-md" href="https://young-falls-92278.herokuapp.com/" target="_blank"> VIEW WEBSITE</a>
      <a class="btn btn-primary btn-rounded btn-md" href="https://github.com/Mathur777/Charity-Website" target="_blank"> View Code</a>
    </div>
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="col-md-6 col-xl-5 mb-4">
    <!--Featured image-->
    <div class="card-body">
    <div class="view overlay rounded z-depth-2">
      <img src="https://images.spot.im/v1/production/xina6bkfnuq88fenerks" class="img-fluid" alt="Sample project image">
      <a>
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>
    <!--Excerpt-->
    
      
      <h4 class="font-weight-bold mb-3 text-danger">Covid-19 Tracker</h4>
      <p class="font-weight-bolder">I made this Covid-19 Tracker website using Node.js and Covid API.</p>
      
      <a class="btn btn-success btn-rounded btn-md" href=" https://fast-gorge-31141.herokuapp.com/" target="_blank"> VIEW WEBSITE</a>
      <a class="btn btn-primary btn-rounded btn-md" href="https://github.com/Mathur777/Covid-19Tracker" target="_blank"> View Code</a>
    </div>
  </div>
  <div class="col-md-6 col-xl-5 mb-4">
    <div class="card-body">
    <!--Featured image-->
    <div class="view overlay rounded z-depth-2">
      <img src="https://media3.s-nbcnews.com/i/newscms/2018_21/2442281/og-nbcnews1200x630_c986de7e1bb6ad2281723b692aa61990.png" class="img-fluid" alt="Sample project image">
      <a>
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>
    <!--Excerpt-->
   
      
      <h4 class="font-weight-bold mb-3 text-danger">News Web App</h4>
      <p class="font-weight-bolder">I made this News website using Node.js , NewsAPI and showing the all kind of News.  </p>
      <a class="btn btn-success btn-rounded btn-md" href=" https://fast-gorge-31141.herokuapp.com/" target="_blank"> VIEW WEBSITE</a>
      <a class="btn btn-primary btn-rounded btn-md" href="https://github.com/Mathur777/NewsApp" target="_blank"> View Code</a>
    </div>
  </div>


  <div class="col-md-6 col-xl-5 mb-4">
    <div class="card-body">
    <!--Featured image-->
    <div class="view overlay rounded z-depth-2">
      <img src="https://camo.githubusercontent.com/52f0704340a5d3eb3eea9367d1b071fc8854abe58ca38027757cdb6c58efdd0c/68747470733a2f2f692e696d6775722e636f6d2f6b4d7a473664462e706e67" class="img-fluid" alt="Sample project image">
      <a>
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>
    <!--Excerpt-->
   
      
      <h4 class="font-weight-bold mb-3 text-danger">TODO WebApp</h4>
      <p class="font-weight-bolder">I made TODO WebApp using Node.js and MongoDB.</p>
      <br>
      <a class="btn btn-success btn-rounded btn-md disabled" role="button" aria-disabled="true" href="#" target="_blank"> VIEW WEBSITE</a>
      <a class="btn btn-primary btn-rounded btn-md" href="https://github.com/Mathur777/TodoApp" target="_blank"> View Code</a>
    </div>
  </div>
  <!-- Grid column -->

</div>


</div>


</section>

<br>
<br>

<section id="contact">
  <div class="row">
    <div class="col-md-10 ">
      <h3 class="my-text ">get in touch</h3>
    </div>
  
  <div class="col-md-2 col-sm-12 ">
    <a href=" mailto: sumitmathurl777@gmail.com" target="_blank">
  <i class="far fa-envelope fa-2x text-danger m-f"></i></a>
  <a href="https://www.linkedin.com/in/sumitdimathur" target="_blank">
  <i class="fab fa-linkedin fa-2x px-3 "></i></a>
  <a href="https://github.com/Mathur777" target="_blank">
    <i class="fab fa-github fa-2x px-2 text-dark"></i></a>
    
  </div>
  </div>
 

</section>
<!-- Footer -->

<footer class="page-footer bg-dark ">

  <!-- Footer Elements -->
  <div class="container-fluid data-aos="fade-down" " >

    
  <div class="footer-copyright text-center py-3 font-weight-bold text-white "> Copyright  &copy 2021 All rights reserved | This Website made with 💓 by Sumit Mathur
    
  </div>
 
  </div>
  
 
</footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init({
    offset: 400,
    duration: 1000
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>


  <script src="./app.js"></script>


</body>
</html>