All animations built

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

View File

@ -83,6 +83,7 @@ textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
@ -92,6 +93,11 @@ textarea {
--flo-bg-color: #601F22;
}
div {
box-sizing: border-box;
overflow: hidden;
}
#view {
width: 100vw;
}
@ -99,23 +105,23 @@ textarea {
#container {
min-height: 100vh;
width: 100vw;
/* position: relative; */
}
.main {
position: relative;
display: flex;
float: left;
overflow: hidden;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.splash {
float: left;
width: 0;
height: 0;
overflow: hidden;
}
.splash .splash-container {
.splash-container {
height: 100%;
width: 100%;
padding: 1rem;
@ -123,22 +129,54 @@ textarea {
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
.banner {
position: absolute;
/* .banner {
position: relative;
width: 100%;
top: 50%;
-ms-transform: translateY(-50%);
height: 100%;
margin: auto 0 auto 0;
/* top: 50%; */
/* -ms-transform: translateY(-50%);
transform: translateY(-50%);
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; }
.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);
}
.flo {
.splash.flo, .main.flo {
background-color: var(--flo-bg-color);
}

View File

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

View File

@ -19,7 +19,6 @@
</head>
<body>
<!-- <div id="view"> -->
<div id="container">
<div id="splash-jason" class="splash jason notflo">
<div class="splash-container">
@ -27,11 +26,44 @@
</div>
</div>
<div id="main-jason" class="main jason notflo">
<div class="splash-container">
<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>
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
</div>
<div id="links-jason" class="links jason notflo"></div>
<div id="links-jason" class="links jason notflo">
<ul>
<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>
<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>
<div id="main-flo" class="main flo notjason">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
@ -39,11 +71,15 @@
</div>
<div id="links-flo" class="links flo notjason"></div>
</div>
<div id="splash-flo" class="splash flo notjason">Flo Splash</div>
<div id="splash-flo" class="splash flo notjason">
<div class="splash-container">
Flo Splash
</div>
</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/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/plugins.js"></script>
<script src="js/main.js"></script>

View File

@ -28,7 +28,7 @@ $(() => {
minHeight: '100vh'
}, {
duration: 300,
queue: false,
queue: true,
complete: () => {
$('.main.not' + openPerson).css('width', 0)
$('#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 {
// 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 we're closing in portrait mode...
$('.main.not' + openPerson).css('width', '100vw')
@ -109,7 +124,6 @@ $(() => {
openPerson = false
}
})
}
}
})