|
|
<!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">
|
|
|
<title>J. Fernando Sánchez</title>
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
|
|
<style>
|
|
|
.clear-margin {
|
|
|
margin: 0;
|
|
|
}
|
|
|
.space-top {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.space-right {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.icon-left {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
.icon-right {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
.labels {
|
|
|
word-spacing: 5px;
|
|
|
line-height: 2;
|
|
|
}
|
|
|
.label-keyword {
|
|
|
display: inline-block;
|
|
|
background: #7eb0db;
|
|
|
color: white;
|
|
|
font-size: 0.9em;
|
|
|
padding: 5px;
|
|
|
border: 1px solid #357ebd;
|
|
|
}
|
|
|
.link-disguise {
|
|
|
color: inherit;
|
|
|
}
|
|
|
.link-disguise:hover {
|
|
|
color: inherit;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.clear-margin-sm {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
body {
|
|
|
font-family: 'Lato';
|
|
|
background: #f0f0f0;
|
|
|
color: #333333;
|
|
|
}
|
|
|
.main {
|
|
|
padding: 5px;
|
|
|
}
|
|
|
.card {
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #e6e6e6;
|
|
|
border-radius: 3px;
|
|
|
min-height: 300px;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
.card-nested {
|
|
|
min-height: 0;
|
|
|
margin-bottom: 10px;
|
|
|
border-width: 1px 0 0 0;
|
|
|
}
|
|
|
.card-nested:before,
|
|
|
.card-nested:after {
|
|
|
content: " ";
|
|
|
display: table;
|
|
|
}
|
|
|
.card-nested:after {
|
|
|
clear: both;
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
.card-nested {
|
|
|
padding: 5px 0;
|
|
|
}
|
|
|
}
|
|
|
.background-card {
|
|
|
padding: 10px 20px;
|
|
|
}
|
|
|
.card-wrapper {
|
|
|
padding: 5px;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.card-wrapper {
|
|
|
float: none !important;
|
|
|
}
|
|
|
}
|
|
|
.text-bolder {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.background-details .detail {
|
|
|
display: table;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
.background-details .detail .icon {
|
|
|
min-width: 45px;
|
|
|
max-width: 45px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.background-details .detail .info {
|
|
|
width: 100%;
|
|
|
}
|
|
|
.background-details .detail .title,
|
|
|
.background-details .detail .icon {
|
|
|
color: #707070;
|
|
|
}
|
|
|
.background-details .detail .mobile-title {
|
|
|
display: none;
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
.background-details .detail .mobile-title {
|
|
|
display: inline-block;
|
|
|
margin-left: 5px;
|
|
|
font-weight: bold;
|
|
|
text-transform: uppercase;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
.background-details .detail .icon,
|
|
|
.background-details .detail .info {
|
|
|
display: table-cell;
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
.background-details .detail {
|
|
|
display: block;
|
|
|
}
|
|
|
.background-details .detail .icon {
|
|
|
max-width: inherit;
|
|
|
min-width: inherit;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.background-details .detail .icon,
|
|
|
.background-details .detail .info {
|
|
|
display: block;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
.background-details .detail .title {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
.info .content.has-sidebar {
|
|
|
width: 80%;
|
|
|
box-sizing: border-box;
|
|
|
float: left;
|
|
|
padding: 0 10px;
|
|
|
border-right: 1px solid #cdcdcd;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.info .content.has-sidebar {
|
|
|
width: 100%;
|
|
|
border-right: 0;
|
|
|
}
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
.info .content.has-sidebar {
|
|
|
padding: 0 2px;
|
|
|
}
|
|
|
}
|
|
|
.info .sidebar {
|
|
|
margin-left: 80%;
|
|
|
box-sizing: border-box;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
ul {
|
|
|
padding-left: 25px;
|
|
|
}
|
|
|
}
|
|
|
/*
|
|
|
Credits: http://codyhouse.co/demo/smart-fixed-navigation/index.html
|
|
|
*/
|
|
|
.floating-nav-trigger {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
|
|
-webkit-transition: background-color 0.5s ease;
|
|
|
-o-transition: background-color 0.5s ease;
|
|
|
transition: background-color 0.5s ease;
|
|
|
display: block;
|
|
|
border-radius: 50%;
|
|
|
text-align: center;
|
|
|
padding-top: 10px;
|
|
|
background-color: white;
|
|
|
font-size: 1.5em;
|
|
|
color: #357ebd;
|
|
|
z-index: 100;
|
|
|
position: fixed;
|
|
|
bottom: 10px;
|
|
|
right: 10px;
|
|
|
}
|
|
|
.floating-nav-trigger .close-icon {
|
|
|
display: none;
|
|
|
}
|
|
|
.floating-nav-trigger:hover {
|
|
|
color: #1f496e;
|
|
|
background-color: #e6e6e6;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
.floating-nav-trigger.is-open {
|
|
|
-webkit-box-shadow: none;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
.floating-nav-trigger.is-open .close-icon {
|
|
|
display: inherit;
|
|
|
}
|
|
|
.floating-nav-trigger.is-open .fa-bars {
|
|
|
display: none;
|
|
|
}
|
|
|
.floating-nav-trigger.is-open:hover {
|
|
|
background-color: white;
|
|
|
}
|
|
|
.floating-nav {
|
|
|
-webkit-transform: scale(0);
|
|
|
-ms-transform: scale(0);
|
|
|
-o-transform: scale(0);
|
|
|
transform: scale(0);
|
|
|
-webkit-transform-origin: 100% 100%;
|
|
|
-moz-transform-origin: 100% 100%;
|
|
|
-ms-transform-origin: 100% 100%;
|
|
|
transform-origin: 100% 100%;
|
|
|
-webkit-transition: transform 0.3s, visibility 0s 0.3s;
|
|
|
-o-transition: transform 0.3s, visibility 0s 0.3s;
|
|
|
transition: transform 0.3s, visibility 0s 0.3s;
|
|
|
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
|
|
position: fixed;
|
|
|
z-index: 50;
|
|
|
right: 10px;
|
|
|
bottom: 10px;
|
|
|
background-color: white;
|
|
|
width: 90%;
|
|
|
max-width: 400px;
|
|
|
visibility: hidden;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.floating-nav ul {
|
|
|
font-size: 1.2em;
|
|
|
margin: 0;
|
|
|
}
|
|
|
.floating-nav ul li {
|
|
|
border-bottom: 1px solid #eff2f6;
|
|
|
}
|
|
|
.floating-nav ul li a {
|
|
|
padding: 20px;
|
|
|
text-decoration: none;
|
|
|
color: #357ebd;
|
|
|
display: block;
|
|
|
}
|
|
|
.floating-nav ul li a:hover {
|
|
|
color: #1f496e;
|
|
|
}
|
|
|
.floating-nav ul li i.fa {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.floating-nav ul li:last-child {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
.floating-nav.is-visible {
|
|
|
-webkit-transform: scale(1);
|
|
|
-ms-transform: scale(1);
|
|
|
-o-transform: scale(1);
|
|
|
transform: scale(1);
|
|
|
-webkit-transition: transform 0.3s, visibility 0s 0s;
|
|
|
-o-transition: transform 0.3s, visibility 0s 0s;
|
|
|
transition: transform 0.3s, visibility 0s 0s;
|
|
|
visibility: visible;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.profile-card-wrapper {
|
|
|
position: relative;
|
|
|
}
|
|
|
}
|
|
|
.profile-pic {
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.profile-pic {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
}
|
|
|
.profile-pic img {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.name {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
@media (max-width: 768px) {
|
|
|
.contact-details {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.contact-details .detail {
|
|
|
display: table;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
.contact-details .detail .icon {
|
|
|
padding: 0 10px;
|
|
|
color: #707070;
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.contact-details .detail .icon {
|
|
|
padding: 0 5px 0 0;
|
|
|
}
|
|
|
}
|
|
|
.contact-details .detail .info {
|
|
|
font-size: 0.8em;
|
|
|
}
|
|
|
.contact-details .detail .icon,
|
|
|
.contact-details .detail .info {
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
@media (max-width: 768px) {
|
|
|
.contact-details .detail {
|
|
|
position: relative;
|
|
|
float: left;
|
|
|
width: 100%;
|
|
|
min-height: 1px;
|
|
|
padding-left: 15px;
|
|
|
padding-right: 15px;
|
|
|
}
|
|
|
}
|
|
|
@media (max-width: 992px) {
|
|
|
.contact-details .detail {
|
|
|
position: relative;
|
|
|
min-height: 1px;
|
|
|
padding-left: 15px;
|
|
|
padding-right: 15px;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
.contact-details .detail .icon,
|
|
|
.contact-details .detail .info {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
@media (max-width: 992px) and (min-width: 768px) {
|
|
|
.contact-details .detail {
|
|
|
float: left;
|
|
|
width: 25%;
|
|
|
}
|
|
|
}
|
|
|
.social-links {
|
|
|
line-height: 2.5;
|
|
|
}
|
|
|
.social-link {
|
|
|
margin-left: 5px;
|
|
|
min-width: 35px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.social-link:first-child {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
.social-link:hover {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
.link-github {
|
|
|
color: #454545;
|
|
|
}
|
|
|
.link-github:hover,
|
|
|
.link-github:focus {
|
|
|
text-decoration: none;
|
|
|
color: #2b2b2b;
|
|
|
}
|
|
|
.link-twitter {
|
|
|
color: #33ccff;
|
|
|
}
|
|
|
.link-twitter:hover,
|
|
|
.link-twitter:focus {
|
|
|
text-decoration: none;
|
|
|
color: #00bfff;
|
|
|
}
|
|
|
.link-blog {
|
|
|
color: #f36f24;
|
|
|
}
|
|
|
.link-blog:hover,
|
|
|
.link-blog:focus {
|
|
|
text-decoration: none;
|
|
|
color: #d8560c;
|
|
|
}
|
|
|
.link-linkedin {
|
|
|
color: #007bb6;
|
|
|
}
|
|
|
.link-linkedin:hover,
|
|
|
.link-linkedin:focus {
|
|
|
text-decoration: none;
|
|
|
color: #005983;
|
|
|
}
|
|
|
.link-skype {
|
|
|
color: #12a5f4;
|
|
|
}
|
|
|
.link-skype:hover,
|
|
|
.link-skype:focus {
|
|
|
text-decoration: none;
|
|
|
color: #0986ca;
|
|
|
}
|
|
|
.link-stackoverflow {
|
|
|
color: #8e8e92;
|
|
|
}
|
|
|
.link-stackoverflow:hover,
|
|
|
.link-stackoverflow:focus {
|
|
|
text-decoration: none;
|
|
|
color: #747479;
|
|
|
}
|
|
|
.link-soundcloud {
|
|
|
color: #e8822d;
|
|
|
}
|
|
|
.link-soundcloud:hover,
|
|
|
.link-soundcloud:focus {
|
|
|
text-decoration: none;
|
|
|
color: #cc6916;
|
|
|
}
|
|
|
.link-pinterest {
|
|
|
color: #bd091f;
|
|
|
}
|
|
|
.link-pinterest:hover,
|
|
|
.link-pinterest:focus {
|
|
|
text-decoration: none;
|
|
|
color: #8c0717;
|
|
|
}
|
|
|
.link-vimeo {
|
|
|
color: #17b3e8;
|
|
|
}
|
|
|
.link-vimeo:hover,
|
|
|
.link-vimeo:focus {
|
|
|
text-decoration: none;
|
|
|
color: #128fba;
|
|
|
}
|
|
|
.link-behance {
|
|
|
color: #2c98cf;
|
|
|
}
|
|
|
.link-behance:hover,
|
|
|
.link-behance:focus {
|
|
|
text-decoration: none;
|
|
|
color: #2379a5;
|
|
|
}
|
|
|
.link-codepen {
|
|
|
color: #1c1c1c;
|
|
|
}
|
|
|
.link-codepen:hover,
|
|
|
.link-codepen:focus {
|
|
|
text-decoration: none;
|
|
|
color: #020202;
|
|
|
}
|
|
|
.link-foursquare {
|
|
|
color: #fa4778;
|
|
|
}
|
|
|
.link-foursquare:hover,
|
|
|
.link-foursquare:focus {
|
|
|
text-decoration: none;
|
|
|
color: #f91554;
|
|
|
}
|
|
|
.link-reddit {
|
|
|
color: #545454;
|
|
|
}
|
|
|
.link-reddit:hover,
|
|
|
.link-reddit:focus {
|
|
|
text-decoration: none;
|
|
|
color: #3b3b3b;
|
|
|
}
|
|
|
.link-spotify {
|
|
|
color: #acd200;
|
|
|
}
|
|
|
.link-spotify:hover,
|
|
|
.link-spotify:focus {
|
|
|
text-decoration: none;
|
|
|
color: #829f00;
|
|
|
}
|
|
|
.link-dribbble {
|
|
|
color: #ce366f;
|
|
|
}
|
|
|
.link-dribbble:hover,
|
|
|
.link-dribbble:focus {
|
|
|
text-decoration: none;
|
|
|
color: #a82959;
|
|
|
}
|
|
|
.link-facebook {
|
|
|
color: #4b6daa;
|
|
|
}
|
|
|
.link-facebook:hover,
|
|
|
.link-facebook:focus {
|
|
|
text-decoration: none;
|
|
|
color: #3b5687;
|
|
|
}
|
|
|
.link-angellist {
|
|
|
color: #000000;
|
|
|
}
|
|
|
.link-angellist:hover,
|
|
|
.link-angellist:focus {
|
|
|
text-decoration: none;
|
|
|
color: #000000;
|
|
|
}
|
|
|
.link-bitbucket {
|
|
|
color: #205081;
|
|
|
}
|
|
|
.link-bitbucket:hover,
|
|
|
.link-bitbucket:focus {
|
|
|
text-decoration: none;
|
|
|
color: #163758;
|
|
|
}
|
|
|
.card-skills {
|
|
|
position: relative;
|
|
|
}
|
|
|
.skill-level {
|
|
|
border-radius: 3px;
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
bottom: 10px;
|
|
|
left: 0;
|
|
|
width: 10px;
|
|
|
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
.skill-level .skill-progress {
|
|
|
position: absolute;
|
|
|
border-radius: 3px;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
-webkit-transition: height 1s ease;
|
|
|
}
|
|
|
.skill-level .skill-progress.beginner {
|
|
|
height: 50%;
|
|
|
background: #e74c3c;
|
|
|
}
|
|
|
.skill-level .skill-progress.intermediate {
|
|
|
height: 70%;
|
|
|
background: #f1c40f;
|
|
|
}
|
|
|
.skill-level .skill-progress.advanced {
|
|
|
height: 80%;
|
|
|
background: #428bca;
|
|
|
}
|
|
|
.skill-level .skill-progress.master {
|
|
|
height: 95%;
|
|
|
background: #5cb85c;
|
|
|
}
|
|
|
.skill-info {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
@media (max-width: 480px) {
|
|
|
.skill-info {
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
@media (max-width: 768px) {
|
|
|
.quote {
|
|
|
font-size: inherit;
|
|
|
}
|
|
|
}
|
|
|
@media print {
|
|
|
a[href]:after {
|
|
|
content: none !important;
|
|
|
}
|
|
|
.profile-card {
|
|
|
text-align: center;
|
|
|
}
|
|
|
.profile-pic {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.profile-pic img {
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
.name-and-profession {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
.contact-details .detail {
|
|
|
position: relative;
|
|
|
float: left;
|
|
|
width: 25%;
|
|
|
min-height: 1px;
|
|
|
padding-left: 15px;
|
|
|
padding-right: 15px;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.floating-nav,
|
|
|
.floating-nav-trigger {
|
|
|
display: none;
|
|
|
}
|
|
|
.pagebreak {
|
|
|
page-break-before: always;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body itemscope itemtype="http://schema.org/Person">
|
|
|
<script>
|
|
|
window.onload = function () {
|
|
|
var toggleFloatingMenu = function() {
|
|
|
$( '.js-floating-nav' ).toggleClass( 'is-visible' );
|
|
|
$( '.js-floating-nav-trigger' ).toggleClass( 'is-open' );
|
|
|
};
|
|
|
|
|
|
$( ".background-card" ).css( "min-height", window.screen.availHeight + "px" );
|
|
|
$( ".js-tooltip" ).tooltip();
|
|
|
$( '.js-floating-nav-trigger' ).on( 'click', function(e) {
|
|
|
e.preventDefault();
|
|
|
toggleFloatingMenu();
|
|
|
});
|
|
|
$( '.js-floating-nav a' ).on( 'click', toggleFloatingMenu );
|
|
|
}
|
|
|
</script>
|
|
|
<div class="container-fluid">
|
|
|
<div class="row main clearfix">
|
|
|
<a href="#" class="js-floating-nav-trigger floating-nav-trigger">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
<span class="close-icon">×</span>
|
|
|
</a>
|
|
|
<nav class="floating-nav js-floating-nav">
|
|
|
<ul class="list-unstyled">
|
|
|
<li>
|
|
|
<a href="#about">
|
|
|
<i class="fa fa-user"></i>
|
|
|
About
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#work-experience">
|
|
|
<i class="fa fa-building"></i>
|
|
|
Work Experience
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#skills">
|
|
|
<i class="fa fa-code"></i>
|
|
|
Skills
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#education">
|
|
|
<i class="fa fa-mortar-board"></i>
|
|
|
Education
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#volunteer-work">
|
|
|
<i class="fa fa-child"></i>
|
|
|
Volunteer Work
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#publications">
|
|
|
<i class="fa fa-book"></i>
|
|
|
Publications
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
|
|
|
<section class="col-md-3 card-wrapper profile-card-wrapper affix">
|
|
|
<div class="card profile-card">
|
|
|
<span class="profile-pic-container">
|
|
|
<div class="profile-pic">
|
|
|
<img class="media-object img-circle center-block"
|
|
|
alt="J. Fernando Sánchez" src="me.jpg" itemprop="image">
|
|
|
</div>
|
|
|
|
|
|
<div class="name-and-profession">
|
|
|
<h3 class="text-center text-bolder name" itemprop="name"> J. Fernando Sánchez</h3>
|
|
|
<h5 class="text-muted text-center" itemprop="jobTitle">Researcher</h5>
|
|
|
</div>
|
|
|
</span>
|
|
|
<hr>
|
|
|
|
|
|
<div class="contact-details clearfix">
|
|
|
|
|
|
<div class="detail">
|
|
|
<span class="icon">
|
|
|
<i class="fa fa-lg fa-location-arrow"></i>
|
|
|
</span>
|
|
|
|
|
|
<span class="info">
|
|
|
Madrid, Madrid,
|
|
|
ES
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="detail">
|
|
|
<span class="icon">
|
|
|
<i class="fa fa-lg fa-envelope"></i>
|
|
|
</span>
|
|
|
|
|
|
<span class="info">
|
|
|
<a href="mailto:jfsanchezrada@gmail.com" class="link-disguise" itemprop="email">jfsanchezrada@gmail.com</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail">
|
|
|
<span class="icon" title="Languages I speak">
|
|
|
<i class="fa fa-lg fa-language"></i>
|
|
|
</span>
|
|
|
|
|
|
<span class="info">
|
|
|
Spanish, English
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<div class="social-links text-center">
|
|
|
<a class="fa fa-linkedin fa-2x social-link link-linkedin"
|
|
|
href="http://linkedin.com/in/jfsanchezrada" target="_blank"></a>
|
|
|
<a class="fa fa-github fa-2x social-link link-github"
|
|
|
href="//github.com/balkian" target="_blank"></a>
|
|
|
<a class="fa fa-twitter fa-2x social-link link-twitter"
|
|
|
href="//twitter.com/balkian" target="_blank"></a>
|
|
|
<a class="fa fa-rss fa-2x social-link link-blog"
|
|
|
href="http://jfernando.es" target="_blank"></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="col-md-9 card-wrapper pull-right">
|
|
|
<div class="card background-card">
|
|
|
<h4 class="text-uppercase text-bolder">Background</h4>
|
|
|
<hr>
|
|
|
|
|
|
<div class="background-details">
|
|
|
<div class="detail" id="about">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-user"></i>
|
|
|
<span class="mobile-title">About</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
About
|
|
|
</h4>
|
|
|
|
|
|
<div class="content" itemprop="description">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail" id="work-experience">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-building"></i>
|
|
|
<span class="mobile-title">Work Experience</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
Work Experience
|
|
|
</h4>
|
|
|
|
|
|
<ul class="list-unstyled">
|
|
|
<li class="card card-nested clearfix">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>Researcher - PhD Student</strong>, GSI UPM
|
|
|
</p>
|
|
|
<p class="text-muted visible-xs visible-sm">
|
|
|
<small>
|
|
|
<span class="space-right">
|
|
|
Dec, 2012 -
|
|
|
Present
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
<i class="fa fa-clock-o icon-left"></i>
|
|
|
2 years
|
|
|
</span>
|
|
|
</small>
|
|
|
</p>
|
|
|
<p>The Ingelligent Systems Group is a research group at Universidad Politécnica de Madrid (UPM)</p>
|
|
|
<ul>
|
|
|
<li> Semantic Technologies </li>
|
|
|
<li> Sentiment Analysis </li>
|
|
|
<li> Ontologies and vocabularies: Marl, Onyx </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="sidebar text-muted text-center hidden-xs hidden-sm">
|
|
|
<p>
|
|
|
<strong>Joined:</strong>
|
|
|
Dec, 2012
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
<span class="label label-success">
|
|
|
Currently Working
|
|
|
</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<i class="fa fa-clock-o icon-left"></i>
|
|
|
2 years
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested clearfix">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>Undergraduate researcher</strong>, GSI UPM
|
|
|
</p>
|
|
|
<p class="text-muted visible-xs visible-sm">
|
|
|
<small>
|
|
|
<span class="space-right">
|
|
|
May, 2008 -
|
|
|
Nov, 2012
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
<i class="fa fa-clock-o icon-left"></i>
|
|
|
4 years 6 months
|
|
|
</span>
|
|
|
</small>
|
|
|
</p>
|
|
|
<p></p>
|
|
|
<ul>
|
|
|
<li> Web services: Node.js, Python, PHP, JSP/J2EE... </li>
|
|
|
<li> Semantic technologies: rdflib, easy-rdf, Protegé </li>
|
|
|
<li> Event middleware and messaging: XMPP, developed Maia </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="sidebar text-muted text-center hidden-xs hidden-sm">
|
|
|
<p>
|
|
|
<strong>Joined:</strong>
|
|
|
May, 2008
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
<strong>Left:</strong>
|
|
|
Nov, 2012
|
|
|
</p>
|
|
|
<p>
|
|
|
<i class="fa fa-clock-o icon-left"></i>
|
|
|
4 years 6 months
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail" id="skills">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-code"></i>
|
|
|
<span class="mobile-title">Skills</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
Skills
|
|
|
</h4>
|
|
|
|
|
|
<div class="content">
|
|
|
<ul class="list-unstyled">
|
|
|
<li class="card card-nested card-skills">
|
|
|
<div class="skill-level js-tooltip" title="Master" data-placement="left">
|
|
|
<div class="skill-progress master">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="skill-info">
|
|
|
<strong>Web Development</strong>
|
|
|
|
|
|
<div class="space-top labels">
|
|
|
<span class="label label-keyword">HTML</span>
|
|
|
<span class="label label-keyword">CSS</span>
|
|
|
<span class="label label-keyword">Javascript</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail" id="education">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-mortar-board"></i>
|
|
|
<span class="mobile-title">Education</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
Education
|
|
|
</h4>
|
|
|
|
|
|
<div class="content">
|
|
|
<ul class="list-unstyled">
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>Telecommunications Engineering, Bachelor+Master</strong>,
|
|
|
Tecnical University of Madrid (UPM)
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Sep, 2007 -
|
|
|
Sep, 2012
|
|
|
</small>
|
|
|
</p>
|
|
|
<i></i>
|
|
|
<div class="space-top labels">
|
|
|
<span class="label label-keyword">Computer Networks</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-xs hidden-sm">
|
|
|
<p>
|
|
|
<strong>Started:</strong>
|
|
|
Sep, 2007
|
|
|
</p>
|
|
|
<p>
|
|
|
<strong>Completion:</strong>
|
|
|
Sep, 2012
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="detail" id="volunteer-work">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-child"></i>
|
|
|
<span class="mobile-title">Volunteer Work</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
Volunteer Work
|
|
|
</h4>
|
|
|
|
|
|
<div class="content">
|
|
|
<ul class="list-unstyled">
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>Vice-Chairman for External Affairs</strong>,
|
|
|
EESTEC
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Mar, 2011 -
|
|
|
Apr, 2012
|
|
|
</small>
|
|
|
</p>
|
|
|
<p></p>
|
|
|
<ul>
|
|
|
<li> Established connections with other Student Associations </li>
|
|
|
<li> Helped found new Observers (Local Groups) </li>
|
|
|
<li> Carried out International Board duties </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="sidebar hidden-xs hidden-sm text-muted text-center">
|
|
|
<p>
|
|
|
<strong>Since:</strong>
|
|
|
Mar, 2011
|
|
|
</p>
|
|
|
<p>
|
|
|
<strong>Until:</strong>
|
|
|
Apr, 2012
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>IT Coordinator</strong>,
|
|
|
EESTEC
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Mar, 2012 -
|
|
|
Apr, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p></p>
|
|
|
<ul>
|
|
|
<li> Coordinated the work of a small international IT Team </li>
|
|
|
<li> In charge of the administration of the IT infrastructure of EESTEC: Plone portal, Mailman mailing lists, etc. </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="sidebar hidden-xs hidden-sm text-muted text-center">
|
|
|
<p>
|
|
|
<strong>Since:</strong>
|
|
|
Mar, 2012
|
|
|
</p>
|
|
|
<p>
|
|
|
<strong>Until:</strong>
|
|
|
Apr, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>Oversight Committee</strong>,
|
|
|
EESTEC
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Apr, 2012 -
|
|
|
Apr, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p></p>
|
|
|
<ul>
|
|
|
<li> Supervised the work of the International Board </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="sidebar hidden-xs hidden-sm text-muted text-center">
|
|
|
<p>
|
|
|
<strong>Since:</strong>
|
|
|
Apr, 2012
|
|
|
</p>
|
|
|
<p>
|
|
|
<strong>Until:</strong>
|
|
|
Apr, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail" id="publications">
|
|
|
<div class="icon">
|
|
|
<i class="fa fa-lg fa-book"></i>
|
|
|
<span class="mobile-title">Publications</span>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<h4 class="title text-uppercase">
|
|
|
Publications
|
|
|
</h4>
|
|
|
|
|
|
<div class="content">
|
|
|
<ul class="list-unstyled">
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
MAIA: An Event-based Modular Architecture for Intelligent Agents
|
|
|
</strong>,
|
|
|
Proceedings of 2014 IEEE/WIC/ACM International Conference on Intelligent Agent Technology
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">Online services are no longer isolated. The release of public APIs and technologies such as web hooks are allowing users and developers to access their information easily. Intelligent agents could use this information to provide a better user experience across services, connecting services with smart automatic behaviours or actions. However, agent platforms are not prepared to easily add external sources such as web services, which hinders the usage of agents in the so-called Evented or Live Web. As a solution, this paper introduces an event-based architecture for agent systems, in accordance with the new tendencies in web programming. In particular, it is focused on personal agents that interact with several web services. With this architecture, called MAIA, connecting to new web services does not involve any modification in the platform.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
EUROSENTIMENT: Linked Data Sentiment Analysis
|
|
|
</strong>,
|
|
|
ISWC 2014 Posters {\&} Demonstrations Track
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">Sentiment and Emotion Analysis strongly depend on quality language resources, especially sentiment dictionaries. These resources are usually scattered, heterogeneous and limited to specific domains of application by simple algorithms. The EUROSENTIMENT project addresses these issues by 1) developing a common language resource representation model for sentiment analysis, and APIs for sentiment analysis services based on established Linked Data formats (lemon, Marl, NIF and ONYX) 2) by creating a Language Resource Pool (a.k.a. LRP) that makes available to the community existing scattered language resources and services for sentiment analysis in an interoperable way. In this paper we describe the available language resources and services in the LRP and some sample applications that can be developed on top of the EUROSENTIMENT LRP.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
Generating Linked-Data based Domain-Specific Sentiment Lexicons from Legacy Language and Semantic Resources
|
|
|
</strong>,
|
|
|
th International Workshop on EMOTION, SOCIAL SIGNALS, SENTIMENT {\&} LINKED OPEN DATA, co-located with LREC 2014,
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">We present a methodology for legacy language resource adaptation that generates domain-specific
|
|
|
sentiment lexicons organized around domain entities described with lexical information and
|
|
|
sentiment words described in the context of these entities. We explain the steps of the methodology
|
|
|
and we give a working example of our initial results. The resulting lexicons are modelled as Linked
|
|
|
Data resources by use of established formats for Linguistic Linked Data (lemon, NIF) and for linked
|
|
|
sentiment expressions (Marl), thereby contributing and linking to existing Language Resources in
|
|
|
the Linguistic Linked Open Data cloud.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
Design and Implementation of an Agent Architecture Based on Web Hooks
|
|
|
</strong>,
|
|
|
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2011
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">This project aims to introduce an event-based architecture for intelligent agents, inaccordance with the new tendencies in the Evented Web.The reason for this change is that agent communication is no longer suitable for theinmense amount of data generated nowadays and its nature. At least, not for their usein evolving scenarios where data sources interact without previous con guration. This isexactly what the precursors of the Live Web envision, and it is beginning to show in the newgeneration of evented applications, which enable customized interactions and a high level ofcommunication between dierent services.The proposed architecture shown in this document, called Maia, is based on a centralpiece or event router, which controls the ow of information/events to and from the connectedentities. These entities can be either event-aware agents or simply data sources andsubscribers. Thus giving a higher exibility than current technologies and easing the developmentof advanced systems by not requiring the complexity associated with agent systemsin all of the nodes.To demonstrate the feasibility and capabilities of the Maia architecture, a prototype hasbeen implemented which is also explained in detail in this document. It is based on the eventdrivenI/O server side JavaScript environment Node.js for the event routing components,and adapted Jason BDI agent platform as an example of a subscribed multi-agent system.Using this prototype, the bene ts of using Maia are illustrated by developing a personalagent capable of booking train tickets and that combines access to services, linked data andcommon sense reasoning.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2011
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
A Linked Data Approach to Sentiment and Emotion Analysis of Twitter in the Financial Domain
|
|
|
</strong>,
|
|
|
Second International Workshop on Finance and Economics on the Semantic Web (FEOSW 2014)
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">Sentiment analysis has recently gained popularity in the financial domain thanks to its capability to predict the stock market based on the wisdom of the crowds. Nevertheless, current sentiment indicators are still silos that cannot be combined to get better insight about the mood of different communities. In this article we propose a Linked data approach for modelling sentiment and emotions about financial entities. We aim at integrating sentiment information from different communities for providers, and complements existing initiatives such as FIBO. The approach has been validated in the semantic annotation of tweets of several stocks in the Spanish stock market, including its sentiment information.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
Onyx: Describing Emotions on the Web of Data
|
|
|
</strong>,
|
|
|
Proceedings of the First International Workshop on Emotion and Sentiment in Social and Expressive Media: approaches and perspectives from AI (ESSEM 2013)
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2012
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">There are several different standardised and widespread formats to represent emotions. However, there is no standard semantic model yet. This paper presents a new ontology, called Onyx, that aims to become such a standard while adding concepts from the latest Semantic Web models. In particular, the ontology focuses on the representation of Emotion Analysis results. But the model is abstract and inherits from previous standards and formats. It can thus be used as a reference representation of emotions in any future application or ontology. To prove this, we have translated resources from EmotionML representation to Onyx.
|
|
|
We also present several ways in which developers could benefit from using this ontology instead of an ad-hoc presentation. Our ultimate goal is to foster the use of semantic technologies for emotion Analysis while following the Linked Data ideals.</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2012
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
Linguistic Linked Data for Sentiment Analysis
|
|
|
</strong>,
|
|
|
2nd Workshop on Linked Data in Linguistics (LDL-2013): Representing and linking lexicons, terminologies and other language data. Collocated with the Conference on Generative Approaches to the Lexicon
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2012
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin">In this paper we describe the specification of a
|
|
|
model for the semantically interoperable represen-
|
|
|
tation of language resources for sentiment analysis. The model integrates ‘lemon’, an RDF-based model for the specification of ontology-lexica
|
|
|
(Buitelaar et al. 2009), which is used increasingly for the representation of language resources as Linked Data, with 'Marl', an RDF-based model for the representation of sentiment annotations (Westerski et al., 2011; S{\'a}nchez-Rada et al., 2013).</p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2012
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="card card-nested">
|
|
|
<div class="content has-sidebar">
|
|
|
<p class="clear-margin-sm">
|
|
|
<strong>
|
|
|
EuroLoveMap: Confronting feelings from News
|
|
|
</strong>,
|
|
|
Proceedings of Come Hack with OpeNER!” workshop at the 9th Language Resources and Evaluation Conference (LREC’14)
|
|
|
</p>
|
|
|
<p class="visible-xs visible-sm text-muted">
|
|
|
<small>
|
|
|
Published on: Dec 31, 2013
|
|
|
</small>
|
|
|
</p>
|
|
|
<p class="clear-margin"></p>
|
|
|
</div>
|
|
|
<div class="sidebar text-muted text-center hidden-sm hidden-xs">
|
|
|
<p>
|
|
|
<strong>Published on:</strong>
|
|
|
Dec 31, 2013
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/tooltip.js"></script>
|
|
|
</body>
|
|
|
</html>
|