florence.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

    <link href="css/styles.css" rel="stylesheet" />
    <title>Florence Haudin - Software Developer</title>
  </head>
  <body>
    <div id="content-head"></div>
    <div class="container-fluid fond fond5 parallax">
      <div class="container">
        <div class="col-md-10 col-md-push-1 fleche-retour">
          <a href="the-team.html"
            ><img class="fleche-gauche" src="img/fleche-gauche.svg" /><span
              >The team</span
            ></a
          >
        </div>
      </div>
    </div>
    <div class="container">
      <div class="col-md-8 col-md-push-2">
        <div class="fiche">
          <div class="text-center">
            <img
              src="img/avatar/Florence.jpg"
              srcset="img/avatar/Florence@2x.jpg 2x"
              class="img-circle avatar"
            />
            <h3>
              <strong>Florence Haudin</strong><br />
              Scientific Software Developer
            </h3>
            <div class="reseau">
                <a target="_blank" href="https://github.com/HaudinFlorence"><img class="twi-gith" src="img/github.svg"></a>
            </div>
            <p>@HaudinFlorence</p>
          </div>
          <div class="description">
            <p align="justify"  >Florence is a Scientific Software Engineer at QuantStack.  After a PhD in Physics, she was a post-doctoral researcher in different academic laboratories. She then worked as a research engineer at Vulcain Ingenierie's company. </p>
            <p align="justify"> Since she joinded QuantStack, she has started to contribute to the Jupyter Project, most particularly to :
             <ul>
              <small>
                <li>JupyterLab </li>
                <li>extensions for JupyterLab like the jupyterlab-theme-editor</li>
                 <li>ipyleaflet</li>
                <li>nbdime. </li>
              </small>
             </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="spacer big"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <div id="content-foot"></div>
    <script src="js/include-menus.js"></script>
    <script>
      function isInViewport(node) {
        var rect = node.getBoundingClientRect();
        return (
          (rect.height > 0 || rect.width > 0) &&
          rect.bottom >= 0 &&
          rect.right >= 0 &&
          rect.top <=
            (window.innerHeight || document.documentElement.clientHeight) &&
          rect.left <=
            (window.innerWidth || document.documentElement.clientWidth)
        );
      }

      $(window).scroll(function () {
        var scrolled = $(window).scrollTop();
        $(".parallax").each(function (index, element) {
          var initY = $(this).offset().top + 200;
          var height = $(this).height();
          var endY = initY + $(this).height();
          // Check if the element is in the viewport.
          var visible = isInViewport(this);
          if (visible) {
            var diff = scrolled - initY;
            var ratio = Math.round((diff / height) * 100);
            var move = parseInt(-(ratio * 1.5));
            //  if (move>90)move = 90;
            $(this).css("background-position", "center " + move + "px");
          }
        });

        $(".icons").each(function (index, element) {
          var visible = isInViewport(this);
          if (visible) {
            $(".icon-content").each(function (index, element) {
              $(this)
                .delay(index * 500)
                .fadeIn();
            });
          }
        });
      });
    </script>
  </body>
</html>