2022-11-18 18:45:27 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Welcome to JnF.me</title>
|
|
|
|
|
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
|
2022-11-18 19:40:40 +00:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
2022-11-18 18:45:27 +00:00
|
|
|
<style type="text/css">
|
2022-11-18 19:40:40 +00:00
|
|
|
html, body { height: 100%; }
|
2022-11-18 20:47:15 +00:00
|
|
|
.container-fluid { width: 100vw; overflow: hidden; }
|
|
|
|
|
.col { height: 0; min-height: 50vh; }
|
2022-11-18 19:40:40 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
@media ( min-width: 992px ) {
|
|
|
|
|
.row { width: 200vw; position: relative; left: -50vw; }
|
|
|
|
|
.col { min-height: 100vh; }
|
2022-11-18 19:40:40 +00:00
|
|
|
}
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
#info-jason { background-color: #FF0000; }
|
|
|
|
|
#info-flo { background-color: #00FF00; }
|
|
|
|
|
#back { position: fixed; top: 0; right: 0; }
|
|
|
|
|
</style>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js" integrity="sha512-5BqtYqlWfJemW5+v+TZUs22uigI8tXeVah5S/1Z6qBLVO7gakAOtkOzUtgq6dsIo5c0NJdmGPs0H9I+2OHUHVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(() => {
|
|
|
|
|
console.log('Hello, world!')
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// Handle clicks to open a profile
|
|
|
|
|
$('a.openlink').click(function(e) {
|
|
|
|
|
e.preventDefault();
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// If the viewport width is at least "large"
|
|
|
|
|
if ($(window).width() >= 992) {
|
|
|
|
|
$('#row').animate({
|
|
|
|
|
left: $(this).attr('data-pos')
|
|
|
|
|
}, {
|
|
|
|
|
duration: 300,
|
|
|
|
|
queue: false
|
|
|
|
|
})
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
$('.info').css('min-height', 0)
|
|
|
|
|
$('#info-' + $(this).attr('data-person')).css('min-height', '100vh')
|
|
|
|
|
}
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// If the viewport width is smaller
|
|
|
|
|
else {
|
|
|
|
|
$('#row').css('left', $(this).attr('data-pos'))
|
|
|
|
|
$('.info').animate({
|
|
|
|
|
minHeight: '0'
|
|
|
|
|
}, {
|
|
|
|
|
duration: 300,
|
|
|
|
|
queue: false
|
|
|
|
|
})
|
|
|
|
|
$('#info-' + $(this).attr('data-person')).animate({
|
|
|
|
|
minHeight: '100vh'
|
|
|
|
|
}, {
|
|
|
|
|
duration: 300,
|
|
|
|
|
queue: false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// Handle clicks to close a profile
|
|
|
|
|
$('a.closelink').click(function(e) {
|
|
|
|
|
e.preventDefault();
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// If the viewport width is at least "large"
|
|
|
|
|
if ($(window).width() >= 992) {
|
|
|
|
|
$('#row').animate({
|
|
|
|
|
left: $(this).attr('data-pos')
|
|
|
|
|
}, {
|
|
|
|
|
duration: 300,
|
|
|
|
|
queue: false
|
|
|
|
|
})
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
$('.info').css('min-height', '100vh')
|
|
|
|
|
}
|
2022-11-18 18:45:27 +00:00
|
|
|
|
2022-11-18 20:47:15 +00:00
|
|
|
// If the viewport width is smaller
|
|
|
|
|
else {
|
|
|
|
|
$('#row').css('left', $(this).attr('data-pos'))
|
|
|
|
|
$('.info').animate({
|
|
|
|
|
minHeight: '50vh'
|
|
|
|
|
}, {
|
|
|
|
|
duration: 300,
|
|
|
|
|
queue: false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
2022-11-18 18:45:27 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-11-18 19:40:40 +00:00
|
|
|
<div class="container-fluid">
|
2022-11-18 20:47:15 +00:00
|
|
|
<div id="row" class="row">
|
|
|
|
|
<div id="bigimage-jason" class="col col-lg-3 d-none d-lg-block">
|
|
|
|
|
Jason Image
|
|
|
|
|
</div>
|
|
|
|
|
<div id="info-jason" class="col col-12 col-lg-3 info">
|
|
|
|
|
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Info</a>
|
2022-11-18 19:40:40 +00:00
|
|
|
</div>
|
2022-11-18 20:47:15 +00:00
|
|
|
<div id="info-flo" class="col col-12 col-lg-3 info">
|
|
|
|
|
<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo Info</a>
|
2022-11-18 19:40:40 +00:00
|
|
|
</div>
|
2022-11-18 20:47:15 +00:00
|
|
|
<div id="bigimage-flo" class="col col-lg-3 d-none d-lg-block">
|
|
|
|
|
Flo Image
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="back">
|
|
|
|
|
<a href="/" class="closelink" data-pos="-50vw">BACK</a>
|
2022-11-18 19:40:40 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div id="view">
|
2022-11-18 18:45:27 +00:00
|
|
|
<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>
|
|
|
|
|
<li><a href="http://gitlab.com/jaywll" class="outbound" data-track="/jason/gitlab">GitLab</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>
|
2022-11-18 19:40:40 +00:00
|
|
|
</div> -->
|
2022-11-18 18:45:27 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
