index.html

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description"
    content="Santosh is an open web philanthropist, Tech Speaker at Mozilla and a Senior Development Engineer at Pramati. He eats Vanilla JS for Breakfast and tweets at @isantoshv. Santosh is a Mozilla Rep and a Participation leader at Mozilla and he loves working with a diverse group of people. He has given talks on WebVR, Cross-Platform extensions, Devtools, Firefox OS in the past. For his contributions to Mozilla, His name is listed in about:credits of every shipped Firefox Browser. When he is not glued to his computer you will find him reading books, watching movies, trying not to cook badly." />
  <meta name="author" content="Santosh Viswanatham" />

  <title>Santosh Viswanatham</title>
  
  <link rel="icon" type="image/x-icon" href="img/favicon.ico">

  <!-- Custom fonts for this theme -->
  <link href="vendor/fontawesome-free/css/all.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" />

  <!-- Theme CSS -->
  <link href="css/freelancer.min.css" rel="stylesheet" />
  <link rel="monetization" href="https://ilp.chimoney.com/santosh" />
</head>

<body id="page-top">
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top" aria-label="Santosh Viswanatham">Santosh
        Viswanatham</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="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <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 rounded js-scroll-trigger" href="#portfolio"
              aria-label="Skills">Skills</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about"
              aria-label="About me">About</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#videos"
              aria-label="Videos">Videos</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact"
              aria-label="Contact me">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Masthead -->
  <header class="masthead bg-primary text-white text-center">
    <div class="container d-flex align-items-center flex-column">
      <!-- Masthead Avatar Image -->
      <img class="masthead-avatar mb-5 profile-image" src="img/build/santosh.webp" alt="santosh viswanatham" />

      <!-- Masthead Heading -->
      <h1 class="masthead-heading text-uppercase mb-0">
        Santosh Viswanatham
      </h1>

      <!-- Icon Divider -->
      <div class="divider-custom divider-light">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="divider-custom-line"></div>
      </div>

      <!-- Masthead Subheading -->
      <p class="masthead-subheading font-weight-light mb-0">
        Javascript | Accessibility | Tech Speaker | Mozillian | Open Web |
        Dreamer
      </p>
    </div>
  </header>

  <!-- Portfolio Section -->
  <section class="page-section portfolio" id="portfolio">
    <div class="container">
      <!-- Portfolio Section Heading -->
      <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">
        Things I worked on
      </h2>

      <!-- Icon Divider -->
      <div class="divider-custom">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="divider-custom-line"></div>
      </div>

      <!-- Portfolio Grid Items -->
      <div class="row">
        <div class="col-sm-12 text-center skill-set">
          <img src="img/build/html.webp" width="80" alt="HTML" title="HTML" />
          <img src="img/build/css3.webp" width="80" alt="CSS3" title="CSS3" />
          <img src="img/build/js.webp" width="80" alt="javascript" title="javascript" />
          <img src="img/build/react.webp" width="80" alt="React" title="React" />
          <img src="img/build/angular.webp" width="80" alt="Angular" title="Angular" />
          <img src="img/build/redux.webp" width="136" alt="Redux" title="Redux" />
          <img src="img/build/ionic.svg" width="180" alt="ionic" title="ionic" />
          <img src="img/build/accessibility.webp" width="80" alt="accessibility" title="accessibility" />
          <img src="img/build/git.webp" width="158" alt="git" title="git" />
          <img src="img/build/aframe.webp" width="80" alt="aframe, webvr" title="aframe, webvr" />
          <img src="img/build/addon.webp" width="80" alt="addon" title="addon" />
          <img src="img/build/remirror.webp" width="80" alt="Remirror" title="Remirror" />
          <img src="img/build/java.webp" width="54" alt="java" title="java" />
          <img src="img/build/bootstrap.webp" width="80" alt="bootstrap" title="bootstrap" />
          <img src="img/build/photoshop.webp" width="80" alt="photoshop" title="photoshop" />
          <img src="img/build/mysql.webp" width="100" alt="mysql" title="mysql" />
          <img src="img/build/gulp.webp" width="80" alt="gulp" title="gulp" />
          <img src="img/build/nodejs.webp" width="80" alt="nodejs" title="nodejs" />
          <img src="img/build/angularjs.webp" width="80" alt="angularjs" title="angularjs" />
          <img src="img/build/canjs.webp" width="160" alt="canjs" title="canjs" />
          <img src="img/build/jquery.webp" width="80" alt="jquery" title="jquery" />
          <img src="img/build/mongodb.webp" width="80" alt="mongodb" title="mongodb" />
          <img src="img/build/sass.webp" width="80" alt="sass" title="sass" />
          <img src="img/build/leaflet.svg" width="230" alt="leaflet" title="leaflet" />
          <img src="img/build/visgl.webp" width="80" alt="visgl" title="visgl" />
          <img src="img/build/aggrid.webp" width="80px" alt="ag-grid" title="ag-grid" />
        </div>
      </div>
      <!-- /.row -->
      <div class="row my-5">
        <div class="col-sm-12 text-center">
          <h3>My Presentations</h3>
          <hr class="star-primary" />
          <p>
            <a href="http://slides.com/isantoshv/" target="_blank" rel="noopener">http://slides.com/isantoshv/</a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section class="page-section bg-primary text-white mb-0" id="about">
    <div class="container">
      <!-- About Section Heading -->
      <h2 class="page-section-heading text-center text-uppercase text-white">
        About Me
      </h2>

      <!-- Icon Divider -->
      <div class="divider-custom divider-light">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="divider-custom-line"></div>
      </div>

      <!-- About Section Content -->
      <div class="row">
        <div class="col-lg-12 biodata">
          <p>
            Hi, I am Santosh, a 28-year-old Engineer, and Tech
            Speaker. I work as a Software Engineer at <a href="https://heymarvin.com/" target="_blank">Marvin</a>,
            where I build products and solutions that help our customers become more user-focused. Previously I worked
            as a Senior Development Engineer at <a href="https://pramati.com/" target="_blank"> Pramati
              technologies</a>, Senior Javascript Developer
            at <a href="https://www.gaiansolutions.com/" target="_blank">Gaian Solutions</a> and Senior Frontend
            Developer at <a href="https://www.infosys.com/" target="_blank">Infosys</a>.
          </p>
          <p> Although I prefer to call
            myself a
            Framework Agnostic Developer, I'm
            skilled in working with a number of JavaScript Frameworks like React, Angular, Ionic, React Native, Angular
            JS, and CanJS. I have experience in working with several libraries and technologies that includes
            prosemirror, slatejs, Charts.js,
            Socket.io, Vis.gl, Highcharts, MapboxGL, Leaflet, Google Maps,
            Google Charts, WebExtensions, A-Frame, etc. I'm known for building
            quality products in less time and Improving product life cycle management by
            Introducing Automated tools, pipelines and technologies into the project.
          </p>
          <p>
            I also volunteer to Mozilla as a Tech Speaker, Mozilla Rep and
            Participation leader and I have been involved with Mozilla for
            more than 10 years now. As a Mozilla tech speaker, I speak and
            share about my own learnings from working with Open web
            technologies including Web VR, Web Extensions, PWA, Firefox
            Devtools, CSS Grid, Javascript Performance, etc. As an active
            contributor, my name is also listed in
            <span><a href="https://www.mozilla.org/credits/" target="_blank" rel="noopener">about:credits</a></span>
            of all shipped Firefox browsers.
          </p>
        </div>
      </div>

      <!-- About Section Button -->
      <!-- <div class="text-center mt-4">
        <a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/themes/freelancer/">
          <i class="fas fa-download mr-2"></i>
          Free Download!
        </a>
      </div> -->
    </div>
  </section>
  <!-- Videos Section -->
  <section id="videos">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>Recent Talks</h2>
          <!-- Icon Divider -->
          <div class="divider-custom divider-light">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon">
              <i class="fas fa-star"></i>
            </div>
            <div class="divider-custom-line"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Conference</th>
                <th scope="col">City</th>
                <th scope="col">Date</th>
                <th scope="col">Talk title</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>JSFoo Pune</td>
                <td>Pune, India</td>
                <td>Feb 28th, 2020</td>
                <td>Optional chaining and null coalescing: using ESNext already</td>
              </tr>
              <tr>
                <td>GDG Devfest Yangon</td>
                <td>Yangon, Myanmar</td>
                <td>Dec 8th, 2019</td>
                <td>Cross-browser add-ons with Extensions APIs</td>
              </tr>
              <tr>
                <td>Devoxx Morocco</td>
                <td>Agadir, Morocco</td>
                <td>Nov 11th-13th, 2019</td>
                <td>A Practical Approach to CSS Grid</td>
              </tr>
              <tr>
                <td>OpenTechSummit Thailand</td>
                <td>Bangkok, Thailand</td>
                <td>Oct 1st, 2nd, 2019</td>
                <td>Writing JavaScript with better Performance</td>
              </tr>
              <tr>
                <td>Fossconn India</td>
                <td>Belgaum, India</td>
                <td>Aug 29th, 2019</td>
                <td>Demystifying your webapp with Firefox Devtools</td>
              </tr>
              <tr>
                <td>Everest Hack</td>
                <td>Kathmandu, Nepal</td>
                <td>Jun 19th-20th, 2019</td>
                <td>WebXR: VR/AR on the Web</td>
              </tr>
              <tr>
                <td>HackonHills</td>
                <td>Hamirpur, India</td>
                <td>Mar 8th-10th, 2019</td>
                <td>WebXR: VR/AR on the Web</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <!-- DevFest Yangon, 2019-->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe src="https://www.youtube.com/embed/U5ShdQ9oma4" width="640" height="360" frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="DevFest Yangon, 2019"
              allowfullscreen></iframe>
          </div>
        </div>
        <!-- OpenTechSummit, Thailand, 2019 -->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe width="640" height="360" src="https://www.youtube.com/embed/RJcShRlASSc" frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="OpenTechSummit, Thailand, 2019"
              allowfullscreen></iframe>
          </div>
        </div>
        <!-- Voxxed Days Belgrade, 2017-->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe src="https://www.youtube.com/embed/BOU8sjalbww" width="640" height="360" frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="Voxxed Days Belgrade, 2017"
              allowfullscreen></iframe>
          </div>
        </div>
        <!-- We are Developers, 2017-->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe src="https://www.youtube.com/embed/CyNskMXTeS0?rel=0" width="640" height="360" frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="We are Developers, 2017"
              allowfullscreen></iframe>
          </div>
        </div>
        <!-- Fossasia Singapore, 2017-->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe src="https://www.youtube.com/embed/e4HbnJ_-u0o?ecver=2&start=126" width="640" height="360"
              frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="Fossasia Singapore, 2017"
              allowfullscreen></iframe>
          </div>
        </div>
        <!-- Community India meetup, 2017-->
        <div class="col-xs-12 col-md-6">
          <div style="position:relative;height:0;padding-bottom:56.25%">
            <iframe src="https://www.youtube.com/embed/yDXzAkc_FOA?ecver=2&start=272" width="640" height="360"
              frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              style="position:absolute;width:100%;height:100%;left:0" title="Community India meetup, 2017"
              allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Contact Section -->
  <section class="page-section" id="contact">
    <div class="container">
      <!-- Contact Section Heading -->
      <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">
        Contact Me
      </h2>

      <!-- Icon Divider -->
      <div class="divider-custom">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="divider-custom-line"></div>
      </div>

      <h3>Want to invite me as a speaker to your conference?</h3>
      <!-- Contact Section Form -->
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <iframe
            src="https://docs.google.com/forms/d/e/1FAIpQLSfFVouyCzWP1EVmbg9HOCoXDB7kf5KXDAy5YdFynWCb3FN6dA/viewform?embedded=true"
            width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0"
            title="Speaker Request form">Loading...</iframe>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer text-center">
    <div class="container">
      <div class="row">
        <!-- Footer Location -->
        <div class="col-lg-6 mb-5 mb-lg-0">
          <h4 class="text-uppercase mb-4">My Home</h4>
          <p class="lead mb-0">Hyderabad, <br />India, 500089</p>
        </div>

        <!-- Footer Social Icons -->
        <div class="col-lg-6 mb-5 mb-lg-0">
          <h4 class="text-uppercase mb-4">Connect with me</h4>
          <a class="btn btn-outline-light btn-social mx-1" href="https://www.facebook.com/isantoshv" target="_blank"
            rel="noopener" aria-label="Facebook">
            <i class="fab fa-fw fa-facebook-f"></i>
          </a>
          <a class="btn btn-outline-light btn-social mx-1" href="https://twitter.com/isantoshv" target="_blank"
            rel="noopener" aria-label="Twitter">
            <i class="fab fa-fw fa-twitter"></i>
          </a>
          <a class="btn btn-outline-light btn-social mx-1" href="https://www.linkedin.com/in/isantoshv/" target="_blank"
            rel="noopener" aria-label="LinkedIn">
            <i class="fab fa-fw fa-linkedin-in"></i>
          </a>
          <a class="btn btn-outline-light btn-social mx-1" href="https://github.com/viswanathamsantosh/" target="_blank"
            rel="noopener" aria-label="Github">
            <i class="fab fa-fw fa-github"></i>
          </a>
          <a class="btn btn-outline-light btn-social mx-1" href="https://mozillians.org/en-US/u/viswanathamsantosh/"
            target="_blank" rel="noopener" aria-label="Mozillians">
            <i class="fab fa-fw fa-firefox"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Copyright Section -->
  <section class="copyright py-4 text-center text-white">
    <div class="container">
      <small>Copyright &copy; Santosh 2021</small>
    </div>
  </section>

  <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  <div class="scroll-to-top d-lg-none position-fixed ">
    <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top" aria-label="Go to top">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/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 src="js/jqBootstrapValidation.js"></script>

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

</html>