index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Swapnil Singh</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
  <meta name="google-site-verification" content="0_DGQ3SetPOa7eI6bBvjo06lttQEH-gAs_W6NoAqEsY" />
</head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <nav class="social-links">
          <a class="social-links__link" href="http://github.com/embibeswapnil" target="_blank" title="Github">
            <img class="social-links__link-img" src="img/github.svg">
          </a>
          <a class="social-links__link"  href="http://twitter.com/swapkats" target="_blank" title="Twitter">
            <img class="social-links__link-img" src="img/twitter.svg">
          </a>
          <a class="social-links__link"  href="mailto:mail@swapnilsingh.me" title="Email">
            <img class="social-links__link-img" src="img/mail.svg">
          </a>
          <a class="social-links__link"  href="swapnil_singh_resume.pdf" target="_blank" title="Download Resume">
            <img class="social-links__link-img" src="img/internet43.svg">
          </a>
          <a class="social-links__link"  href="http://blog.swapnilsingh.me/" target="_blank" title="Blog">
            <img class="social-links__link-img" src="img/writing.svg">
          </a>
        </nav>
        <!-- Add your site or application content here -->
        <div class="cloud-container"></div>
        <div class="left-gradient"></div>
        <p class="storyline">
          Hey there! I'm Swapnil Singh. I build web stuff. After I finished my college I always wanted to build awesome web experiences. I started building webapps as a backend developer and very soon I realised that I prefer talking to my users than servers. I've switched to frontend development and loved it. I love getting my hands dirty at design and I feel 9 out 10 websites I visit everyday have a serious feel to them and I wish to make lot of happy websites. Besides working as a frontend developer I also am a professional KFC eater. I love beer, Rock 'N' Roll, beach and my guitar. As of frontend I usually work with HTML, CSS, JavaScript, AngularJS, D3, SASS and Illustrator. Check out my <a href="http://github.com/embibeswapnil" target="_blank">Github</a> for personal stuff I've worked on so far. If you want to build awesome stuff together, feel free to reach me by <a href="mailto:thisisnotaid@gmail.com">mail</a> or <a href="http://twitter.com/biryani_hunter" target="_blank">twitter.</a>
        </p>
        <div class="right-gradient"></div>
        <span class="scroll-helper">></span>
        <svg class="fp before-load" version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-11 -53 103.4 235" enable-background="new -11 -53 103.4 235" xml:space="preserve">
          <g id="Fancy_pants">
            <path id="Hair" stroke="#000000" stroke-miterlimit="10" d="M8.9,7.6c-0.1,0.2-0.9,2.1-1.3,3C4.4,6.6,8.4-26,20.4-36.1c0,0-4.2,12-2,20.6C19-14.2,23.1-54,67.7-46.8c0,0-16,2.6-16,19c0,0,12.9-9.8,32.5-3.8c0,0-28.3,4.6-24.9,20.8C59.3-10.7,29.6-28.8,8.9,7.6z">
              <animate id="hair-back" begin="indefinite" attributeName="d" dur="50ms" to="M8.9,7.6c-0.1,0.2-0.9,2.1-1.3,3c2.4-5.8,7.1-31.1-2.4-43.1c0,0,21.8-1.7,17.5,12.5c0.6,1.4,11.7-10-7.5-28.5c0,0,36.4,4.3,36.5,20.8c0,0,8.5-0.3,9.5-15.5c0,0,16.8,25.8-1.9,32.5C59.3-10.7,29.6-28.8,8.9,7.6z" fill="freeze"/>
              <animate id="hair-front" begin="indefinite" attributeName="d" dur="50ms" to="M8.9,7.6c-0.1,0.2-0.9,2.1-1.3,3C4.4,6.6,8.4-26,20.4-36.1c0,0-4.2,12-2,20.6C19-14.2,23.1-54,67.7-46.8c0,0-16,2.6-16,19c0,0,12.9-9.8,32.5-3.8c0,0-28.3,4.6-24.9,20.8C59.3-10.7,29.6-28.8,8.9,7.6z"  fill="freeze"/>
            </path>
            <circle id="Face" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="39.9" cy="16" r="32.6"/>
            <g id="Eyes">
              <circle id="Right_eye" cx="49" cy="1.8" r="3.6"/>
              <circle id="Left_eye" cx="30.9" cy="1.8" r="3.6"/>
            </g>
            <path id="Smile" fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M29.3,28c0,0,3.8,5.3,10.1,6.2"/>
            <g id="Open_mouth_1_" display="none">
              <path display="inline" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M83.2,44.1c-0.9,0.4-0.8,0.2-1.6-0.2
                c-6-3.2-9.8-8.1-10-13.8c-0.2-9.9,11-18.2,25-18.5c1.4,0,0.3,0,1.6,0c1.5,0-0.1,1.4,1,1.6"/>
              <path display="inline" fill="#FFFFFF" d="M83.1,45.1c-0.9,0.4,0.1-0.6-0.7-1.1c-6.1-3.1-10-8.2-10.1-13.8
                C72,20.4,83.4,11.6,97.9,11.8c1.4,0,0.4-0.1,1.8,0.1c1.1,0.1,0.5-0.3,0.4-0.7C100.1,11.1,104.3,34.2,83.1,45.1z"/>
            </g>
            <line id="Spine" fill="none" stroke="#000000" stroke-miterlimit="10" x1="39.5" y1="48.6" x2="39.5" y2="118.8"/>
            <g id="Left_hand">
              <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="35.5" y1="56" x2="10.1" y2="85.6"/>
              <ellipse transform="matrix(-0.8413 0.5405 -0.5405 -0.8413 63.3733 155.9995)" cx="8.8" cy="87.3" rx="2.8" ry="1.3"/>
            </g>
            <g id="Right_hand">
              <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="43.4" y1="56" x2="68.8" y2="85.6"/>
              <ellipse transform="matrix(0.8416 0.5401 -0.5401 0.8416 58.2451 -24.0053)" cx="70" cy="87.3" rx="2.8" ry="1.3"/>
            </g>
            <polygon id="Left_leg" fill="#E98F24" stroke="#000000" stroke-miterlimit="10" points="48.8,118.8 29.6,118.8 18.5,163.4
              47.5,163.4  "/>
            <polyline id="Right_leg" fill="#E98F24" stroke="#000000" stroke-miterlimit="10" points="41.4,163.4 70.5,163.4 48.8,118.8
              29.6,118.8  "/>
            <g id="Belt_1_">
              <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M48.9,119.2c1.2,0.2,1.8,0.4,1.8,0.7
                c0,0.7-5.1,1.2-11.4,1.2c-6.3,0-11.4-0.5-11.4-1.2c0-0.2,0.6-0.5,1.7-0.6"/>
              <path d="M50.8,119.8c0.8-0.1,1.9,5.7,1.9,5.7c0,0.8-5.9,1.4-13.1,1.4c-7.2,0-13.1-0.6-13.1-1.4c0,0,0.7-4.2,1.4-5.7
                C27.8,119.8,37.6,121.8,50.8,119.8z"/>
              <g>
                <ellipse fill="#E3C734" stroke="#000000" stroke-miterlimit="10" cx="40.4" cy="123.9" rx="6" ry="3.3"/>
                <path d="M42.1,121.4c0.2,0.2,0.7,0.6,0.8,0.8c0,0.2,0.1,0.4-0.2,0.7c-0.3,0.3-1.1,0.4-1.2-0.2c-0.1-0.6-0.2-1.3-0.2-1.4
                  c0,0,0,0-0.1,0c-0.2,0.2-0.5,0.7-0.5,0.7h-0.4c-0.1-0.2-0.4-0.6-0.5-0.7c0,0-0.1,0-0.1,0c0,0-0.1,0.8-0.2,1.4
                  c-0.1,0.6-0.9,0.4-1.2,0.2c-0.3-0.3-0.2-0.5-0.2-0.7c0-0.2,0.6-0.6,0.8-0.8c-2.1,0.3-3.6,1.3-3.6,2.5c0,0.8,0.8,1.6,2.1,2.1
                  c-0.3-0.4-0.4-0.9-0.1-1.1c0.3-0.2,0.9,0,1.3,0.5c0.1,0.1,0.1,0.1,0.1,0.2c0-0.2,0-0.4,0.2-0.5c0.3-0.2,0.9,0.1,1.3,0.7
                  c0.1,0.2,0.2,0.4,0.3,0.6c0.1-0.2,0.2-0.4,0.3-0.6c0.4-0.6,1-0.9,1.3-0.7c0.1,0.1,0.2,0.3,0.2,0.5c0-0.1,0.1-0.1,0.1-0.2
                  c0.5-0.5,1.1-0.7,1.3-0.5c0.2,0.2,0.2,0.7-0.2,1.2c1.3-0.5,2.2-1.2,2.2-2.1C45.7,122.7,44.2,121.7,42.1,121.4z"/>
              </g>
            </g>
            <line id="Leg_crack" fill="none" stroke="#000000" stroke-miterlimit="10" x1="38.4" y1="148" x2="43.2" y2="162.9"/>
            <g id="Left_pant_folds">
              <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="23.9" y1="155.4" x2="33.6" y2="155.4"/>
              <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="28.7" y1="151.4" x2="33.6" y2="153.1"/>
            </g>
            <line id="Right_pant_folds" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.5" y1="159.1" x2="57.9" y2="154.1"/>
          </g>
          <g id="Skateboard">
            <g id="Board">
              <path fill="#5B382A" d="M88,158c0-0.3-0.2-0.4-0.4-0.2l-0.3,0.2c-0.2,0.1-0.6,0.4-0.9,0.5c0,0-8.3,4.9-12,4.9c-4.4,0-32,0-32,0
                c-0.3,0-0.5,0-0.5,0c0,0,0,0-0.1,0c-1.8,0-28,0-32.5,0c-3.7,0-12-4.9-12-4.9c-0.2-0.1-0.6-0.4-0.9-0.5l-0.3-0.2
                c-0.2-0.1-0.4,0-0.4,0.2l0,1.3c0,0.3,0,0.5,0.1,0.5c0.1,0,0.3,0.2,0.5,0.3c0,0,8.4,5.6,13,5.6c0.5,0,1.5,0,1.5,0
                c0.3,0,0.5,0.1,0.5,0.2s0.2,0.2,0.5,0.2h0.9c0.3,0,0.6,0.2,0.8,0.4l0.7,0.8c0.2,0.2,0.4,0.4,0.5,0.5c0.1,0.1,0.3,0,0.6-0.1
                l1.5-0.8c0.2-0.1,0.6-0.1,0.9,0l1.7,0.8c0.2,0.1,0.5,0.2,0.6,0.1c0.1-0.1,0.3-0.2,0.5-0.4l1.7-1.1c0.2-0.1,0.6-0.3,0.9-0.3
                s0.5-0.1,0.5-0.2s0.2-0.2,0.5-0.2h17.2c0.3,0,0.5,0,0.5,0c0,0,0,0,0.1,0c1,0,17.6,0,17.6,0c0.3,0,0.5,0.1,0.5,0.2s0.2,0.2,0.5,0.2
                h0.9c0.3,0,0.6,0.2,0.8,0.4l0.7,0.8c0.2,0.2,0.4,0.4,0.5,0.5c0.1,0.1,0.3,0,0.6-0.1l1.5-0.8c0.2-0.1,0.6-0.1,0.9,0l1.7,0.8
                c0.2,0.1,0.5,0.2,0.6,0.1c0.1-0.1,0.3-0.2,0.5-0.4l1.7-1.1c0.2-0.1,0.6-0.3,0.9-0.3c0.2,0,0.4-0.1,0.4-0.2s0.2-0.2,0.5-0.2
                c0,0,1.1,0,1.6,0c4.6,0,13-5.5,13-5.5c0.2-0.2,0.5-0.3,0.5-0.3c0.1,0,0.1-0.3,0.1-0.5L88,158z M20.1,167.2
                c-0.2,0.1-0.6,0.2-0.9,0.1l-3.6-0.1c-0.3,0.1-0.6,0-0.8-0.2l-0.4-0.4c-0.2-0.2-0.1-0.4,0.2-0.4h6.6c0.3,0,0.3,0.1,0.1,0.3
                L20.1,167.2z M68.8,167.2c-0.2,0.1-0.6,0.2-0.9,0.1l-3.6-0.1c-0.3,0.1-0.6,0-0.8-0.2l-0.4-0.4c-0.2-0.2-0.1-0.4,0.2-0.4h6.6
                c0.3,0,0.3,0.1,0.1,0.3L68.8,167.2z"/>
            </g>
            <path id="wheel_1_" d="M17.5,166.8c-2.8,0-5,2.2-5,5c0,2.8,2.3,5,5,5c2.8,0,5-2.2,5-5C22.5,169,20.3,166.8,17.5,166.8z M17.5,169.8
              c1.1,0,2,0.9,2,1.9c0,1.1-0.9,1.9-2,1.9c-1.1,0-2-0.9-2-1.9C15.5,170.7,16.4,169.8,17.5,169.8z M13.2,171.8c0-2.2,1.7-4.1,4-4.3
              v1.6c-1.3,0.2-2.3,1.3-2.3,2.6c0,1.3,1,2.4,2.3,2.6v1.6C14.9,175.8,13.2,174,13.2,171.8z M17.9,176v-1.6c1.3-0.2,2.3-1.3,2.3-2.6
              c0-1.3-1-2.4-2.3-2.6v-1.6c2.2,0.2,4,2,4,4.3C21.8,174,20.1,175.8,17.9,176z"/>
            <path id="wheel" d="M66,166.8c-2.8,0-5,2.2-5,5c0,2.7,2.2,5,5,5c2.8,0,5-2.2,5-5C71,169,68.7,166.8,66,166.8z M66,169.8
              c1.1,0,2,0.9,2,1.9s-0.9,1.9-2,1.9c-1.1,0-2-0.9-2-1.9C64,170.7,64.9,169.8,66,169.8z M61.7,171.7c0-2.2,1.7-4.1,3.9-4.2v1.6
              c-1.3,0.2-2.3,1.3-2.3,2.6s1,2.4,2.3,2.6v1.6C63.4,175.8,61.7,174,61.7,171.7z M66.3,176v-1.6c1.3-0.2,2.3-1.3,2.3-2.6
              s-1-2.4-2.3-2.6v-1.6c2.2,0.2,3.9,2,3.9,4.2S68.5,175.8,66.3,176z"/>
          </g>
        </svg>
        <div class="road"></div>
        <section class="icons">
          <img src="img/web.svg" class="eatable web" color="#e74c3c">
          <img src="img/cap.svg" class="eatable cap" color="#666666">
          <img src="img/awesome.svg" class="eatable awesome" color="#3498db">
          <img src="img/console.svg" class="eatable console" color="#40D47E">
          <img src="img/servers.svg" class="eatable servers" color="#9b59b6">
          <img src="img/frontend.svg" class="eatable frontend" color="#f39c12">
          <img src="img/design.svg" class="eatable design" color="#f1c40f">
          <img src="img/serious.svg" class="eatable serious" color="#f22133">
          <img src="img/happy.svg" class="eatable happy" color="#f1c40f">
          <img src="img/chicken.svg" class="eatable chicken" color="#f39c12">
          <img src="img/github.svg" class="eatable github" color="#064F7D">
          <img src="img/beer.svg" class="eatable beer" color="#BA5F2A">
          <img src="img/guitar.svg" class="eatable guitar" color="#F1B344">
          <img src="img/Html5.png" class="eatable html5" color="#d35400">
          <img src="img/css3.png" class="eatable css3" color="#1572b6">
          <img src="img/js.png" class="eatable js" color="#F3D03F">
          <img src="img/ng.png" class="eatable ng" color="#E52838">
          <img src="img/d3.png" class="eatable d3" color="#666666">
          <img src="img/sass.png" class="eatable sass" color="#52B3D9">
          <img src="img/illustrator.png" class="eatable illustrator" color="#FBA625">
          <img src="img/mail.svg" class="eatable mail" color="#1abc9c">
          <img src="img/twitter.svg" class="eatable twitter" color="#4099ff">
        </section>
        <!--<script src="js/vendor/snap.svg.js"></script>-->
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
        <!-- <script src="js/main.js"></script> -->
        <script src="js/app.js"></script>
    </body>
</html>