jason/Jnf.me
jason
/
Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated profile image and added back button, including show/hide functionality.

This commit is contained in:
Jason Williams 2022-11-18 16:02:01 -07:00
parent 5caa16116a
commit 5a0427d601
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
www/img/profile-jason.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
www/img/profile-jason.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

44
www/index.html
View File

@ -4,17 +4,11 @@
<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" />
<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">
/* Variables */
:root {
--jason-bg-color: #F2EDEA;
--main-accent-color: #302B44;
--light-accent-color: #686283;
--xlight-accent-color: #88839C;
--xxlight-accent-color: #FFFFFF;
--alt-accent-color: #B05C71;
--dark-alt-accent-color: #913A50;
--title-font: 'Cinzel', serif;
--body-font: 'Raleway', sans-serif;
}
@ -25,20 +19,21 @@
@media ( min-width: 992px ) {
.row { width: 200vw; position: relative; left: -50vw; }
.row { left: 0vw; }
.col { min-height: 100vh; }
}
/* .info { text-align: center; } */
.splash { width: 100%; height: 100%; }
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
.banner img {max-width: 20vw; max-height: 20vh; }
.bg-jason { background-color: var(--jason-bg-color); }
#info-flo { background-color: #00FF00; }
#back { position: fixed; top: 0; right: 0; z-index: 200; }
#back { position: fixed; top: -3rem; right: -3rem; z-index: 200; height: 3rem; width: 3rem; font-size: 3rem; }
#back a { color: #FF0000; }
</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/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" 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">
var dispPerson = null
@ -65,9 +60,6 @@
$('#info-' + dispPerson).css('min-height', '100vh')
}
})
// $('.info').css('min-height', 0)
// $('#info-' + $(this).attr('data-person')).css('min-height', '100vh')
}
// If the viewport width is smaller
@ -86,6 +78,14 @@
queue: false
})
}
$('#back').animate({
top: '1rem',
right: '1rem'
}, {
duration: 300,
queue: false
})
})
// Handle clicks to close a profile
@ -117,6 +117,14 @@
queue: false
})
}
$('#back').animate({
top: '-3rem',
right: '-3rem'
}, {
duration: 300,
queue: false
})
})
});
</script>
@ -128,13 +136,13 @@
<div class="splash"><img src="./img/splash-jason.jpg"></div>
</div>
<div id="info-jason" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info bg-jason">
<div class="text-center">
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="./img/profile-jason.jpg"></a>
<div class="text-center banner">
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="./img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Williams</a></h1>
</div>
</div>
<div id="info-flo" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info">
<div class="text-center">
<div class="text-center banner">
<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw"><img src="./img/profile-flo.jpg"></a>
<h1><a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo de Guzman</a></h1>
</div>
@ -144,8 +152,8 @@
Flo Image
</div>
</div>
<div id="back">
<a href="/" class="closelink" data-pos="-50vw">BACK</a>
<div id="back" class="d-flex align-items-center justify-content-center">
<a href="/" class="closelink" data-pos="-50vw"><i class="fa-solid fa-arrow-left"></i></a>
</div>
</div>
<!-- <div id="view">