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

All animations built

Browse Source
This commit is contained in:
Jason Williams 2022-11-19 14:11:59 -07:00
parent 7233356524
commit 9efbb3be70
4 changed files with 120 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
www/css/main.css
View File

@ -83,6 +83,7 @@ textarea {
resize: vertical; resize: vertical;
} }
/* ========================================================================== /* ==========================================================================
Author's custom styles Author's custom styles
========================================================================== */ ========================================================================== */
@ -92,6 +93,11 @@ textarea {
--flo-bg-color: #601F22; --flo-bg-color: #601F22;
} }
div {
box-sizing: border-box;
overflow: hidden;
}
#view { #view {
width: 100vw; width: 100vw;
} }
@ -99,23 +105,23 @@ textarea {
#container { #container {
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
/* position: relative; */
} }
.main { .main {
position: relative; display: flex;
float: left; float: left;
overflow: hidden; align-items: center;
justify-content: center;
flex-wrap: wrap;
} }
.splash { .splash {
float: left; float: left;
width: 0; width: 0;
height: 0; height: 0;
overflow: hidden;
} }
.splash .splash-container { .splash-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
@ -123,22 +129,54 @@ textarea {
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; } .splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
.banner { /* .banner {
position: absolute; position: relative;
width: 100%; width: 100%;
top: 50%; height: 100%;
-ms-transform: translateY(-50%); margin: auto 0 auto 0;
/* top: 50%; */
/* -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
text-align: center; text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
} */
.banner {
flex: 0 0 100%;
text-align: center;
} }
.banner img {max-width: 20vw; max-height: 20vh; } .banner img {max-width: 20vw; max-height: 20vh; }
.jason { .links {
height: 0;
/* flex: 0 0 100%; */
}
.links ul {
width: 80%;
margin: 0 auto 0 auto;
padding: 0;
list-style: none;
}
.links li a {
display: block;
background-color: #FF0000;
height: 3rem;
line-height: 3rem;
margin-bottom: 0.5rem;
border-radius: 1rem;
text-align: center;
}
.splash.jason, .main.jason {
background-color: var(--jason-bg-color); background-color: var(--jason-bg-color);
} }
.flo { .splash.flo, .main.flo {
background-color: var(--flo-bg-color); background-color: var(--flo-bg-color);
} }

4
www/css/normalize.css vendored
View File

@ -24,10 +24,6 @@ body {
margin: 0; margin: 0;
} }
div {
box-sizing: border-box;
}
/** /**
* Render the `main` element consistently in IE. * Render the `main` element consistently in IE.
*/ */

68
www/index.html
View File

@ -19,31 +19,67 @@
</head> </head>
<body> <body>
<!-- <div id="view"> --> <div id="container">
<div id="container"> <div id="splash-jason" class="splash jason notflo">
<div id="splash-jason" class="splash jason notflo"> <div class="splash-container">
<div class="splash-container"> <img src="/img/splash-jason.jpg">
<img src="/img/splash-jason.jpg">
</div>
</div> </div>
<div id="main-jason" class="main jason notflo"> </div>
<div id="main-jason" class="main jason notflo">
<div class="splash-container">
<div id="banner-jason" class="banner jason notflo" data-person="jason"> <div id="banner-jason" class="banner jason notflo" data-person="jason">
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a> <a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink">Jason Williams</a></h1> <h1><a href="/jason" class="openlink">Jason Williams</a></h1>
</div> </div>
<div id="links-jason" class="links jason notflo"></div> <div id="links-jason" class="links jason notflo">
</div> <ul>
<div id="main-flo" class="main flo notjason"> <li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<div id="banner-flo" class="banner flo notjason" data-person="flo"> <li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<a href="/flo" class="openlink">Flo Banner</a> <li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
</ul>
</div> </div>
<div id="links-flo" class="links flo notjason"></div>
</div> </div>
<div id="splash-flo" class="splash flo notjason">Flo Splash</div>
</div> </div>
<!-- </div> --> <div id="main-flo" class="main flo notjason">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a>
</div>
<div id="links-flo" class="links flo notjason"></div>
</div>
<div id="splash-flo" class="splash flo notjason">
<div class="splash-container">
Flo Splash
</div>
</div>
</div>
<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 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 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="js/vendor/modernizr-3.11.2.min.js"></script> <script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

24
www/js/main.js
View File

@ -28,7 +28,7 @@ $(() => {
minHeight: '100vh' minHeight: '100vh'
}, { }, {
duration: 300, duration: 300,
queue: false, queue: true,
complete: () => { complete: () => {
$('.main.not' + openPerson).css('width', 0) $('.main.not' + openPerson).css('width', 0)
$('#splash-' + openPerson).css({ $('#splash-' + openPerson).css({
@ -61,11 +61,26 @@ $(() => {
}) })
} }
}) })
// SHOW LINKS HERE
} }
// Display the links
setTimeout(() => {
$('#links-' + openPerson).animate({
height: $('#links-' + openPerson).get(0).scrollHeight
}, {
duration: 300,
queue: true
})
}, 300)
} else { } else {
// If a profile is open, close it... // If a profile is open, close it.
$('#links-' + openPerson).animate({
height: 0
}, {
duration: 300,
queue: true
})
if (window.matchMedia('(orientation: portrait)').matches) { if (window.matchMedia('(orientation: portrait)').matches) {
// If we're closing in portrait mode... // If we're closing in portrait mode...
$('.main.not' + openPerson).css('width', '100vw') $('.main.not' + openPerson).css('width', '100vw')
@ -109,7 +124,6 @@ $(() => {
openPerson = false openPerson = false
} }
}) })
} }
} }
}) })