index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Vedit Patel UI & Front-end Developer producing high quality responsive websites and exceptional user experience.">
    <meta name="keywords" content="vedit, patel, ui, frontend, developer,development, engineer, code, coding, software, web, design, greensboro, nc, south carolina">
    <meta name="author" content="Vedit Patel">

    <title>Vedit Patel</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
      <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/freelancer.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Vedit Patel</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead">
      <div class="container">
        <img class="img-fluid" src="img/portfolio/profile2.png" alt="">
        <div class="intro-text">
          <div class="intro-text-wrapper">
            <div class="intro-text-container">
              <h1>
      <span class="intro-text-1 start">
        👋
      </span>
                <span class="intro-text-2 start">
        Hi
      </span>
                <span class="intro-text-3 start">
        ,
      </span>
                <span class="intro-text-4 start">
        I'm Vedit Patel
      </span>
              </h1>
            </div>
          </div>
          <!--<span class="name">Vedit Patel</span>-->
          <hr class="star-light">
          <span class="skills">Web Developer - UI/Front-end Developer</span>
        </div>
      </div>
    </header>

    <!-- Portfolio Grid Section -->
    <section id="portfolio">
      <div class="container">
        <h2 class="text-center">Portfolio</h2>
        <hr class="star-primary">
        <div class="row">
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal1" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/design.png" alt="">
            </a>
          </div>
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal2" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/Task1.jpg" alt="">
            </a>
          </div>
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal3" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/task-2.png" alt="">
            </a>
          </div>
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal4" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/contacts.jpg" alt="">
            </a>
          </div>
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal5" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/cengage1.png" alt="">
            </a>
          </div>
          <div class="col-sm-4 portfolio-item">
            <a class="portfolio-link" href="#portfolioModal6" data-toggle="modal">
              <div class="caption">
                <div class="caption-content">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/cengage2.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section class="success" id="about">
      <div class="container">
        <h2 class="text-center">About</h2>
        <hr class="star-light">
        <div class="row">
          <div class="col-lg-4 ml-auto">
            <h5 class="text-center">eat(); code(); sleep(); repeat();</h5>
            <p>I wanted to create official portfolio website to show my set of skills with the awesome people who are interested in me.
            I am UI/Front-end developer who is able to work effectively in a team or on my own. I pride myself on being able to use my knowledge and initiative to deliver high quality results.</p>
          </div>
          <div class="col-lg-4 mx-auto">
            <p>I enjoy challenges and look for the opportunity to expand and develop my skill set. Coder part of me is experienced with <strong style="color:black">HTML/HTML5, CSS/CSS3, JAVASCRIPT, Typescript JQUERY, JSON, AJAX, BOOTSTRAP, ANGULARJS-1&2, Node.JS,
              NPM, Yarn, Bower, Gulp, SASS </strong> and of course Swearing at computer.</p>
          </div>
          <div class="col-lg-4 mr-auto">
            <h5 class="text-center">Geek Facts</h5>
            <p>Solid experience with Responsive Web Design and with Agile, JIRA and SCRUM. Just striving to become great at my Job! Who wants bigger things in life. In reality I am Jedi Master who worships master Yoda, wants to go live on Pandora, all while listening to trance music on his favorite Mac computer.
              <br>
              <!--<p class="text-center">-->
              <!--<i class="em em-100"></i>-->
              <!--<i class="em em-flag-in"></i>-->
              <!--<i class="em em-pray"></i></p>-->
          </div>
          <div class="col-lg-8 mx-auto text-center">
            <a href="documents/Vedit_Patel_Resume.pdf" download="Vedit_Patel_Resume.pdf" class="btn btn-lg btn-outline">
              <i class="fa fa-download"></i>
              Download Resume
            </a>
          </div>
        </div>
      </div>
      <div class="containerStorm">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 560">
          <path class="helmet__nose" d="M123.7,364.1c20.3,23.2,48,62.7,52.9,62.7c5,0,82.6-73.5,103.4-73.5s98.4,73.5,103.4,73.5c5,0,32.7-39.5,52.9-62.7c2.5-2.8,5-5.9,5.5-9.6c0.5-3.2-0.5-6.3-1.5-9.4c-3.7-11.3-11-28-11-28c-0.4-3.9-4.9-5.7-8.7-6.7c-34.3-9.7-66.9-24.9-96.3-45c-10.1-6.9-31.2-20.2-31.2-20.2s-9.2-6.7-13.2-5.5c-4-1.2-13.2,5.5-13.2,5.5s-21,13.3-31.2,20.2c-29.4,20.1-62.1,35.3-96.3,45c-3.8,1.1-8.2,2.8-8.7,6.7c0,0-7.2,16.7-11,28c-1,3-2,6.2-1.5,9.4C118.7,358.3,121.2,361.3,123.7,364.1z"/>
          <path class="helmet__skull" d="M548.7,354.3c-1.8-9.3-5.3-18.2-8.9-27c-4.1-10.2-8.2-20.5-13.8-30c-1.4-2.4-2.9-4.8-3.5-7.5c-0.5-2.3-0.3-4.6-0.1-6.9c0.6-7.9,1.2-15.8,1.9-23.7c0.2-2.1,0.3-4.2-0.3-6.2c-0.8-2.5-2.9-4.5-4.4-6.7c-2.8-4.1-3.6-9.1-4.3-14c-2.2-14.3-4.4-28.5-6.6-42.8c-0.9-5.7-2.5-12.4-7.8-14.6l-0.5,0.4c0.1-4.3,0.1-8.5-0.1-12.8C498,123.8,478,87.3,449.5,61c-28.5-26.3-65-42.9-102.8-51.7C316,2.1,288.3,0,279.4,0c-8.9,0-35.4,2.1-66.2,9.2C175.4,18,138.9,34.6,110.5,61C82,87.3,62,123.8,59.8,162.5c-0.2,4.3-0.3,8.5-0.1,12.8l-0.5-0.4c-5.3,2.3-6.9,8.9-7.8,14.6c-2.2,14.3-4.4,28.5-6.6,42.8c-0.8,4.9-1.6,9.9-4.3,14c-1.5,2.2-3.6,4.1-4.4,6.7c-0.7,2-0.5,4.1-0.3,6.2c0.6,7.9,1.2,15.8,1.9,23.7c0.2,2.3,0.4,4.7-0.1,6.9c-0.6,2.7-2.1,5.1-3.5,7.5c-5.6,9.5-9.7,19.8-13.8,30c-3.5,8.8-7.1,17.7-8.9,27c-2.4,12.5-1.5,25.3-0.6,38c1.5,20.5,3.4,41.7,13.3,59.6c4.8,8.8,11.4,16.4,17.8,24c13,15.2,26.1,30.5,39.1,45.7c8.7,10.2,17.6,20.5,28.6,28c8.8,6,16.9,10.3,29.7,10.3c12.8,0,111.1-34.8,140.7-34.8S409.8,560,420.7,560c10.9,0,20.9-4.3,29.7-10.3c11.1-7.6,19.9-17.9,28.6-28c13-15.2,26.1-30.5,39.1-45.7c6.5-7.6,13-15.3,17.8-24c9.9-18,11.8-39.2,13.3-59.6C550.2,379.6,551.1,366.8,548.7,354.3z M57.4,236.6c2-8.8,4-17.6,6.2-26.4c0.7,3.8,1.3,7.7,2,11.5l2-1.4c59.1-12.2,119.8-14.8,180.1-17.3c19.9-0.8,19.5-1.3,31.6-1.3s21.9,0.8,32.9,1.3c60.3,2.6,121,5.1,180.1,17.3l2,1.4c0.7-3.8,1.4-7.6,2-11.5c2.2,8.8,4.2,17.6,6.2,26.4c0.5,2.3,1,4.8-0.1,6.9c-1.9,3.7-7.3,3.5-11.1,2c-3.9-1.5-7.8-3.9-11.8-3.1c-4.3,0.9-6.9,5.1-9.1,8.9c-5,8.8-9.9,17.7-14.9,26.5c-2.3,4.1-4.7,8.6-3.8,13.2c1.1,6.6,8,10.2,13.6,13.8c6.8,4.3,12.9,9.9,17.8,16.3c1.2,1.6,2.4,3.4,2.8,5.4c0.3,2-0.3,4-0.9,5.9c-6.1,20.1-12.5,40.9-26.3,56.8c-5.9,6.8-13,12.5-20,18.1c-14,11.3-28.1,22.5-42.1,33.8c-4.8,3.8-10.4,6-16.6,6.7c-4.8-0.2-9-2.9-12.9-5.6c-17.2-12-32.5-26.8-50-38.3s-30.1-17.1-37.8-17.1s-19,5.5-36.5,17.1s-32.8,26.3-50,38.3c-3.9,2.7-8.2,5.4-12.9,5.6c-5.4,0.6-10.9-1.8-16.6-6.7c-14-11.3-28.1-22.5-42.1-33.8c-7-5.6-14.1-11.3-20-18.1C87.5,373.3,81,352.5,75,332.4c-0.6-1.9-1.2-3.9-0.9-5.9c0.3-2,1.5-3.8,2.8-5.4c4.9-6.4,11-12,17.8-16.3c5.6-3.6,12.4-7.2,13.6-13.8c0.8-4.6-1.6-9.1-3.8-13.2c-5-8.8-9.9-17.7-14.9-26.5c-2.1-3.8-4.8-8-9.1-8.9c-4.1-0.9-8,1.6-11.8,3.1c-3.9,1.5-9.2,1.7-11.1-2C56.4,241.4,56.9,238.9,57.4,236.6z M425,437.3c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L425,437.3z M441.8,458.3c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5l-20.6-15.6c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6C442.4,455.6,442.6,457.2,441.8,458.3z M432.3,431.4c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L432.3,431.4z M439.7,425.5c-1.1-0.8-1.3-2.4-0.5-3.5s2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L439.7,425.5z M447,419.7c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L447,419.7z M454.3,413.8c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L454.3,413.8z M461.6,408c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L461.6,408z M468.9,402.1c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L468.9,402.1z M476.2,396.2c-1.1-0.8-1.3-2.4-0.5-3.5c0.8-1.1,2.4-1.3,3.5-0.5l20.6,15.6c1.1,0.8,1.3,2.4,0.5,3.5c-0.5,0.7-1.2,1-2,1c-0.5,0-1.1-0.2-1.5-0.5L476.2,396.2z M68,413.7l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5L71,417.7c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C66.6,416.2,66.9,414.6,68,413.7z M63.7,411.9c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1c-0.8-1.1-0.6-2.7,0.5-3.5l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5L63.7,411.9z M75.3,419.6l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5l-20.6,15.6c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C74,422,74.2,420.4,75.3,419.6z M82.6,425.4l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5s0.6,2.7-0.5,3.5l-20.6,15.6c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C81.3,427.9,81.5,426.3,82.6,425.4z M89.9,431.3l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5L93,435.3c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C88.6,433.7,88.8,432.2,89.9,431.3z M97.2,437.2l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5l-20.6,15.6c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C95.9,439.6,96.1,438,97.2,437.2z M104.6,443l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5L107.6,447c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C103.2,445.5,103.4,443.9,104.6,443z M111.9,448.9l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5l-20.6,15.6c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C110.5,451.3,110.8,449.7,111.9,448.9z M119.2,454.7l20.6-15.6c1.1-0.8,2.7-0.6,3.5,0.5c0.8,1.1,0.6,2.7-0.5,3.5l-20.6,15.6c-0.5,0.3-1,0.5-1.5,0.5c-0.8,0-1.5-0.3-2-1C117.9,457.2,118.1,455.6,119.2,454.7z M14.8,370.7c0.4,0.1,0.6,0.5,0.9,0.9c4.5,6.8,6,15.6,3.8,23.5c-4-6.3-6.6-21.5-6.6-21.5C12.9,372.1,13.6,370.2,14.8,370.7z M541.9,427.2c-1.9,4.2-3,8.6-4.8,12.8c-2.6,5.9-5.9,11.5-10,16.5c-9.2,11.3-21.3,20.5-32.2,30.2c-11.5,10.3-22.9,20.9-34.7,30.9c-3.2,2.7-7.1,5.1-11.4,3c-3.2-1.5-4.9-4.8-6-8.1c-1,0.8-2,1.7-3,2.5c-8.6,6.8-18.7,12-29.9,9.6c-9.2-2-17.8-7.8-25.8-12.6c-7.8-4.7-15.4-9.6-23-14.6c-16-10.4-31.9-21.2-48.4-30.7c-6.7-3.9-13.6-7.7-20.8-10.6c-4.6-1.9-9.7-3.7-14.7-3.1c-6.1,0.8-12,3.7-17.4,6.4c-7.6,3.8-14.9,8.1-22.1,12.6c-16.5,10.2-32.5,21.3-48.8,31.8c-7.2,4.6-14.4,9.2-21.8,13.3c-9.2,5.2-18.8,9.9-29.7,7.2c-7.7-1.9-14.3-6.6-20.2-11.9c-1.1,3.3-2.8,6.6-6,8.1c-4.5,2.1-8.5-0.6-11.9-3.5c-11.6-9.9-22.8-20.3-34.2-30.5c-11-9.8-23.4-19.2-32.7-30.8c-3.9-4.9-7-10.2-9.5-15.9c-1.8-4.2-2.9-8.6-4.8-12.8c-0.8-1.8,1.1-4.7,3.2-3.2c23.4,17.8,46.2,36.6,68.1,56.3c10.3,9.3,20.2,19.3,30.6,28.4c5.1,4.4,10.8,8.7,17.3,10.7c7.6,2.3,14.6,0.3,21.5-3.2c32.4-16.4,60.5-40.3,92.4-57.7c9.4-5.2,21.1-12,32.3-10.1c13.4,2.3,26.2,10.7,37.7,17.6c16.2,9.7,31.8,20.3,47.7,30.6c7.4,4.8,14.8,9.5,22.3,13.9c9.2,5.4,19.3,11.9,30.4,9.2c11.6-2.8,20.5-12.7,28.8-20.6c9.4-8.9,18.9-17.7,28.6-26.2c19.3-17.1,39.3-33.4,59.9-49C540.8,422.5,542.7,425.4,541.9,427.2z M547.6,373.5c0,0-2.6,15.2-6.6,21.5c-2.1-7.9-0.7-16.7,3.8-23.5c0.2-0.3,0.5-0.7,0.9-0.9C546.9,370.2,547.6,372.1,547.6,373.5z"/>
        </svg>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
      <div class="container">
        <h2 class="text-center">Contact Me</h2>
        <hr class="star-primary">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
            <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
            <form name="sentMessage" id="contactForm" action="https://formspree.io/veditp8@gmail.com"
                  method="POST">
              <div class="control-group">
                <div class="form-group floating-label-form-group controls">
                  <label>Name</label>
                  <input class="form-control" id="name" name="name" type="text" placeholder="Name" required data-validation-required-message="Please enter your name.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls">
                  <label>Email Address</label>
                  <input class="form-control" id="email" name="_replyto" type="email" placeholder="Email Address" required data-validation-required-message="Please enter your email address.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls">
                  <label>Phone Number</label>
                  <input class="form-control" id="number" name="number" type="tel" placeholder="Phone Number" required data-validation-required-message="Please enter your phone number.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls">
                  <label>Message</label>
                  <textarea class="form-control" id="message" name="message" rows="5" placeholder="Message" required data-validation-required-message="Please enter a message."></textarea>
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <br>
              <div id="success"></div>
              <div class="form-group">
                <button type="submit" value="Send" class="btn btn-success btn-lg" id="sendMessageButton">Send</button>
                  <input type="hidden" name="_next" value="https://veditp8.github.io/VeditPatel/" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="text-center">
      <div class="footer-above">
        <div class="container">
          <div class="row">
            <div class="footer-col col-md-4">
              <h3>Location</h3>
              <p>Greensboro, NC</p>
            </div>
            <div class="footer-col col-md-4">
              <h3>Around the Web</h3>
              <ul class="list-inline">
                <li class="list-inline-item">
                  <a class="btn-social btn-outline" href="https://www.facebook.com/veditp1">
                    <i class="fa fa-fw fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="btn-social btn-outline" href="https://www.linkedin.com/in/vedit-p-38b26613b/">
                    <i class="fa fa-fw fa-linkedin"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="btn-social btn-outline" href="https://github.com/veditp8">
                    <i class="fa fa-fw fa-github"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="btn-social btn-outline" href="https://github.com/veditp8">
                    <i class="fa fa-fw fa-github"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="btn-social btn-outline" href="https://stackoverflow.com/users/8967057/vedit-p?tab=profile">
                    <i class="fa fa-stack-overflow"></i>
                  </a>
                </li>
              </ul>
            </div>
            <!--<div class="footer-col col-md-4">-->
              <!--<h3>About Freelancer</h3>-->
              <!--<p>Freelance is a free to use, open source Bootstrap theme created by-->
                <!--<a href="http://startbootstrap.com">Start Bootstrap</a>.</p>-->
            <!--</div>-->
          </div>
        </div>
      </div>
      <div class="footer-below">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              Copyright &copy; Vedit Patel 2017
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
    <div class="scroll-top d-lg-none">
      <a class="btn btn-primary js-scroll-trigger" href="#page-top">
        <i class="fa fa-chevron-up"></i>
      </a>
    </div>

    <!-- Portfolio Modals -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>Bootstrap Website</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/Bootstrap.png" alt="">
                  <p>Here I've created demo responsive Bootstrap website which is the most popular HTML, CSS, JS framework for developing responsive, mobile first project on the web.
                    Click on "Web Development" link below to see the demo!
                    </p>
                  <ul class="list-inline item-details">
                    <li>Date:
                      <strong>
                        <a href="#">Nov 2016</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://veditp8.github.io/Bootstrap_Website/">Web Development</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>Task Tracker-1</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/Task.png" alt="">
                  <p>This is sample Task Tracker in this I have used JQuery and Javascript. I've used JQuery to animate the titles and Javascript to input information in the form and display it on the table.
                    Click on "Web Application" link below to see the demo!</p>
                  <ul class="list-inline item-details">
                    <li>Date:
                      <strong>
                        <a href="#">Nov 2016</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://veditp8.github.io/TaskTracker1.0_Javascript_JQuery/">Web Application</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>Task Tracker-2</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/Task2.png" alt="">
                  <p>In this sample I have used simple design layout but utilize AngularJS framework for functionality same concept as other Task Tracker submit information into a form and display it on the table.
                    Click on "Web Application" link below to see the demo!</p>
                  <ul class="list-inline item-details">
                    <li>Date:
                      <strong>
                        <a href="#">Nov 2016</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://veditp8.github.io/TaskTracker2.0_AngularJS/">Web Application</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>My Contacts Form</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/myContacts.png" alt="">
                  <p>In this sample CRUD (Create, read, update and delete) application I have created a contact form using AngularJS framework, Node.js, NPM, Bootstrap and Firebase API. </p>
                  <ul class="list-inline item-details">
                    <li>Date:
                      <strong>
                        <a href="#">Jan 2017</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://github.com/veditp8/MyContacts">Single Page Application</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>Flashing The BCM</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/FlashBCM.png" alt="">
                  <p>I worked on this module as an activity developer. We as a team created simulated learning module for auto mechanics. This specific module is about testing the car battery.
                    Click on "Simulated Learning Module" link below to see the MAGIC!</p>
                  <ul class="list-inline item-details">
                    <li>Client:
                      <strong>
                        <a href="https://www.cengage.com/">Cengage Learning</a>
                      </strong>
                    </li>
                    <li>Date:
                      <strong>
                        <a href="#">Feb 2017</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://veditp8.github.io/Flashing_The_BCM/">Simulated Learning Module</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <h2>Heat Absorption</h2>
                  <hr class="star-primary">
                  <img class="img-fluid img-centered" src="img/portfolio/HeatAbsorb.png" alt="">
                  <p>I worked on this module as an activity developer. We as a team created simulated learning module for auto mechanics. This specific module is about testing the heat absorption (HVAC).
                  Click on "Simulated Learning Module" link below to see the MAGIC!</p>
                  <ul class="list-inline item-details">
                    <li>Client:
                      <strong>
                        <a href="https://www.cengage.com/">Cengage Learning</a>
                      </strong>
                    </li>
                    <li>Date:
                      <strong>
                        <a href="#">Feb 2017</a>
                      </strong>
                    </li>
                    <li>Service:
                      <strong>
                        <a href="https://veditp8.github.io/Heat_Absorption/">Simulated Learning Module</a>
                      </strong>
                    </li>
                  </ul>
                  <button class="btn btn-success" type="button" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                    Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact Form JavaScript -->
    <!--</script>-->
    <!--<script src="js/jqBootstrapValidation.js"></script>-->
    <!--<script src="js/contact_me.js"></script>-->

    <!-- Custom scripts for this template -->
    <script src="js/freelancer.min.js"></script>

  </body>

</html>