Jnf.me/www/index.html
2022-11-18 12:40:40 -07:00

173 lines
8.1 KiB
HTML

<!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'>
<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" />
<style type="text/css">
html, body { height: 100%; }
.col {min-height: 50vh;}
@media (min-width: 992px) {
.col {min-height: 100vh;}
}
/* * {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 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!')
});
// $(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 class="container-fluid">
<div class="row">
<div id="infojason" class="col col-12 col-lg-6">
Jason
</div>
<div id="infoflo" class="col col-12 col-lg-6">
Flo
</div>
</div>
</div>
<!-- <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>
<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>
</div> -->
</body>
</html>