|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 8 | + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> |
| 9 | + <!-- Bootstrap --> |
| 10 | + <link href="css/bootstrap.min.css" rel="stylesheet" /> |
| 11 | + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
| 12 | + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
| 13 | + <!--[if lt IE 9]> |
| 14 | + <script src="js/html5shiv.min.js"></script> |
| 15 | + <script src="js/respond.min.js"></script> |
| 16 | + <![endif]--> |
| 17 | + |
| 18 | + <link href="css/styles.css" rel="stylesheet" /> |
| 19 | + <title>Gabriela Vives - User Experience Researcher and Designer</title> |
| 20 | + </head> |
| 21 | + <body> |
| 22 | + <div id="content-head"></div> |
| 23 | + <div class="container-fluid fond fond5 parallax"> |
| 24 | + <div class="container"> |
| 25 | + <div class="col-md-10 col-md-push-1 fleche-retour"> |
| 26 | + <a href="the-team.html" |
| 27 | + ><img class="fleche-gauche" src="img/fleche-gauche.svg" /><span |
| 28 | + >The team</span |
| 29 | + ></a |
| 30 | + > |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + </div> |
| 34 | + <div class="container"> |
| 35 | + <div class="col-md-8 col-md-push-2"> |
| 36 | + <div class="fiche"> |
| 37 | + <div class="text-center"> |
| 38 | + <img |
| 39 | + src="img/avatar/Gabriela.jpg" |
| 40 | + srcset="img/avatar/Gabriela@2x.jpg 2x" |
| 41 | + class="img-circle avatar" |
| 42 | + /> |
| 43 | + <h3> |
| 44 | + <strong>Gabriela Vives</strong><br /> |
| 45 | + User Experience Researcher and Designer |
| 46 | + </h3> |
| 47 | + <div class="reseau"> |
| 48 | + <a target="_blank" href="https://github.com/GabrielaVives"><img class="twi-gith" src="img/github.svg"></a> |
| 49 | + </div> |
| 50 | + <p>@GabrielaVives</p> |
| 51 | + </div> |
| 52 | + <div class="description"> |
| 53 | + <p align="justify">Gabriela Vives is a User Experience Researcher and Designer, passionate about working in scientific domains. She first graduated with master degrees in nuclear energy and cognitive science. After working for research, she decided to continue her studies and graduated in Human-Computer Interactions. Prior to QuantStack, Gabriela worked as a User Experience Designer at Schlumberger for 4 years, conducting user research and creating user-centered interfaces for geoscience software.</p> |
| 54 | + </div> |
| 55 | + </div> |
| 56 | + </div> |
| 57 | + </div> |
| 58 | + |
| 59 | + <div class="spacer big"></div> |
| 60 | + |
| 61 | + <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> |
| 62 | + <script src="js/jquery.min.js"></script> |
| 63 | + <!-- Include all compiled plugins (below), or include individual files as needed --> |
| 64 | + <script src="js/bootstrap.min.js"></script> |
| 65 | + |
| 66 | + <div id="content-foot"></div> |
| 67 | + <script src="js/include-menus.js"></script> |
| 68 | + <script> |
| 69 | + function isInViewport(node) { |
| 70 | + var rect = node.getBoundingClientRect(); |
| 71 | + return ( |
| 72 | + (rect.height > 0 || rect.width > 0) && |
| 73 | + rect.bottom >= 0 && |
| 74 | + rect.right >= 0 && |
| 75 | + rect.top <= |
| 76 | + (window.innerHeight || document.documentElement.clientHeight) && |
| 77 | + rect.left <= |
| 78 | + (window.innerWidth || document.documentElement.clientWidth) |
| 79 | + ); |
| 80 | + } |
| 81 | + |
| 82 | + $(window).scroll(function () { |
| 83 | + var scrolled = $(window).scrollTop(); |
| 84 | + $(".parallax").each(function (index, element) { |
| 85 | + var initY = $(this).offset().top + 200; |
| 86 | + var height = $(this).height(); |
| 87 | + var endY = initY + $(this).height(); |
| 88 | + // Check if the element is in the viewport. |
| 89 | + var visible = isInViewport(this); |
| 90 | + if (visible) { |
| 91 | + var diff = scrolled - initY; |
| 92 | + var ratio = Math.round((diff / height) * 100); |
| 93 | + var move = parseInt(-(ratio * 1.5)); |
| 94 | + // if (move>90)move = 90; |
| 95 | + $(this).css("background-position", "center " + move + "px"); |
| 96 | + } |
| 97 | + }); |
| 98 | + |
| 99 | + $(".icons").each(function (index, element) { |
| 100 | + var visible = isInViewport(this); |
| 101 | + if (visible) { |
| 102 | + $(".icon-content").each(function (index, element) { |
| 103 | + $(this) |
| 104 | + .delay(index * 500) |
| 105 | + .fadeIn(); |
| 106 | + }); |
| 107 | + } |
| 108 | + }); |
| 109 | + }); |
| 110 | + </script> |
| 111 | + </body> |
| 112 | +</html> |
0 commit comments