151 lines
6.6 KiB
HTML
151 lines
6.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>Welcome to JnF.me</title>
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
|
||
|
|
<style type="text/css">
|
||
|
|
* {margin: 0; border: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 300;}
|
||
|
|
html, body {height: 100%; min-height: 100%;}
|
||
|
|
body {background-color: #333333;}
|
||
|
|
#view {width: 100%; height: 100%; overflow-x: hidden;}
|
||
|
|
|
||
|
|
#container {width: 100%; height: 100%; position: relative; left: -50%;}
|
||
|
|
#container.openjason {left: 0;}
|
||
|
|
#container.openflo {left: -100%;}
|
||
|
|
|
||
|
|
.frame {position: absolute; width: 50%; height: 100%; text-align: center;}
|
||
|
|
|
||
|
|
.info {position: absolute; width: 50%; font-size: 24px; height: 100%; min-height: 100%; overflow: hidden;}
|
||
|
|
.info.open {height: auto;}
|
||
|
|
|
||
|
|
#infojason {left: 0; text-align: right; background-color: #162840; color: #8699B1;}
|
||
|
|
#framejason {left: 50%; background-color: #DAE5E1;}
|
||
|
|
#frameflo {left: 100%; background-color: #601F22;}
|
||
|
|
#infoflo {left: 150%; text-align: left; background-color: #CCCCCC; color: #555555;}
|
||
|
|
|
||
|
|
.info p {margin: 30px;}
|
||
|
|
.info ul {margin: 30px; list-style-type: none;}
|
||
|
|
.info ul li {line-height: 40px;}
|
||
|
|
|
||
|
|
.frame .profile {position: absolute; top: 75px; bottom: 0; left: 0; right: 0; margin: auto; height: 200px; width: 100%;}
|
||
|
|
.frame.open img {width: 80%; max-width: 150px;}
|
||
|
|
|
||
|
|
.frame div.closelink {display: none; position: absolute; top: 20px; left: 0; right: 0; font-size: 24px;}
|
||
|
|
.frame.open div.closelink {display: block;}
|
||
|
|
|
||
|
|
#framejason a {text-decoration: none; color: #000000;}
|
||
|
|
#frameflo a {text-decoration: none; color: #FFFFFF;}
|
||
|
|
|
||
|
|
#infojason a {color: #929FB1;}
|
||
|
|
#infoflo a {color: #333333;}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#container {
|
||
|
|
-webkit-transition: all 0.3s ease;
|
||
|
|
-moz-transition: all 0.3s ease;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('a.openlink, a.closelink').click(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('div.frame').click(function() {
|
||
|
|
if ($('#container').hasClass('open') == false) {
|
||
|
|
p = $(this).attr('data-person');
|
||
|
|
$('.frame.' + p + ', .info.' + p).addClass('open');
|
||
|
|
$('#container').addClass('open open' + p);
|
||
|
|
if (window.location.hostname == 'www.jnf.me') ga('send', 'pageview', {'page': '/' + p });
|
||
|
|
} else {
|
||
|
|
$('.frame, .info, #container').removeClass('open');
|
||
|
|
$('#container').removeClass('openjason openflo');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('a.outbound').click(function(e) {
|
||
|
|
if (window.location.hostname == 'www.jnf.me') {
|
||
|
|
e.preventDefault();
|
||
|
|
trURL = $(this).attr('data-track');
|
||
|
|
nvURL = $(this).attr('href');
|
||
|
|
|
||
|
|
ga('send', 'event', {
|
||
|
|
'eventCategory': 'extlink',
|
||
|
|
'eventAction': trURL.split('/')[1],
|
||
|
|
'eventLabel': trURL.split('/')[2],
|
||
|
|
'nonInteraction': 1,
|
||
|
|
'hitCallback': function() {
|
||
|
|
$('.frame, .info').removeClass('open');
|
||
|
|
$('#container').removeClass('openjason openflo');
|
||
|
|
location.href = nvURL;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (window.location.hostname == 'www.jnf.me') {
|
||
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
|
|
||
|
|
ga('create', 'UA-52787536-2', 'auto');
|
||
|
|
ga('send', 'pageview');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="view">
|
||
|
|
<div id="container">
|
||
|
|
<div id="infojason" class="info jason">
|
||
|
|
<p>Jay is a caucasian male originally from Swansea, UK but last spotted in Calgary, Canada. By day he's a
|
||
|
|
mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.jason.jnf.me/" class="outbound" data-track="/jason/website">Website</a></li>
|
||
|
|
<li><a href="http://www.jason.jnf.me/blog/" class="outbound" data-track="/jason/blog">Blog</a></li>
|
||
|
|
<li><a href="http://www.jason.jnf.me/contact/" class="outbound" data-track="/jason/contact">Contact Me</a></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://twitter.com/JayWll" class="outbound" data-track="/jason/twitter">Twitter</a></li>
|
||
|
|
<li><a href="http://www.facebook.com/JayWll" class="outbound" data-track="/jason/facebook">Facebook</a></li>
|
||
|
|
<li><a href="http://instagram.com/jaywll" class="outbound" data-track="/jason/instagram">Instagram</a></li>
|
||
|
|
<li><a href="http://ca.linkedin.com/in/jaywll/" class="outbound" data-track="/jason/linkedin">LinkedIn</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="framejason" class="frame jason" data-person="jason">
|
||
|
|
<div class="closelink"><a href="#" class="closelink">→</a></div>
|
||
|
|
<div class="profile">
|
||
|
|
<a href="#" class="openlink" data-person="jason"><img src="/img/profile-jason.jpg" /></a>
|
||
|
|
<h1><a href="#" class="openlink" data-person="jason">Jason Williams</a></h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="frameflo" class="frame flo" data-person="flo">
|
||
|
|
<div class="closelink"><a href="#" class="closelink">←</a></div>
|
||
|
|
<div class="profile">
|
||
|
|
<a href="#" class="openlink" data-person="flo"><img src="/img/profile-flo.jpg" /></a>
|
||
|
|
<h1><a href="#" class="openlink" data-person="flo">Flo de Guzman</a></h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="infoflo" class="info flo">
|
||
|
|
<p>Flo is from Winnipeg, MB and now lives in Calgary, AB. She has a small nose that she's self-conscious about, a
|
||
|
|
Yorkshire Terrier named Charlie, and no concept of the term "inside voice."</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.asiancwgrl.jnf.me/" class="outbound" data-track="/flo/blog">Blog</a></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://twitter.com/asiancwgrl" class="outbound" data-track="/flo/twitter">Twitter</a></li>
|
||
|
|
<li><a href="http://www.facebook.com/asiancowgrl" class="outbound" data-track="/flo/facebook">Facebook</a></li>
|
||
|
|
<li><a href="http://instagram.com/asiancwgrl" class="outbound" data-track="/flo/instagram">Instagram</a></li>
|
||
|
|
<li><a href="http://ca.linkedin.com/pub/flo-de-guzman/25/9b5/591" class="outbound" data-track="/flo/linkedin">LinkedIn</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|