gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

First load intro

Browse source
This commit is contained in:
sharpshark28 2016-10-16 21:23:46 -05:00
parent beb6a41931
commit 29db1fe554
2 changed files with 112 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
partials/header.html
View file

@ -9,17 +9,22 @@
<meta name="description" content="{{ description }}">
<meta name="viewport" content="width=device-width">
</head>
<body>
<body class="intro-undecided">
<script>
document.getElementsByTagName('body')[0].className = localStorage.getItem('visited') ? '' : 'intro-play';
localStorage.setItem('visited', true);
</script>
<header class="text-code">
<div class="container">
[ <a href="#">sharpshark28<span class="normal">@</span><span class="secondary">joewroten.com</span></a> ] <span class="text-success">(master)</span> <span class="dim">~/portfolio</span>
<br />
<span class="text-success">⟩</span> npm start
<span class="text-success">⟩</span>
<span id="intro-blink">&block;</span><span id="intro-cmd-1">n</span><span id="intro-cmd-2">p</span><span id="intro-cmd-3">m</span>&nbsp;<span id="intro-cmd-4">i</span><span id="intro-cmd-5">n</span><span id="intro-cmd-6">s</span><span id="intro-cmd-7">t</span><span id="intro-cmd-8">a</span><span id="intro-cmd-9">l</span><span id="intro-cmd-10">l</span>
<br />
Starting up server, serving <a href="/">./</a> on port: 8080 ...
<span id="intro-response-1">Starting up server, serving <a href="/">./</a> on port: 8080 ...</span>
<br />
Resume accessible @ <a href="/assets/resume.pdf">./resume.pdf</a>
<span id="intro-response-2">Resume accessible @ <a href="/assets/resume.pdf">./resume.pdf</a></span>
</div>
</header>

103
src/app.scss
View file

@ -31,6 +31,11 @@ body {
background: #F2F2F2 url(../../assets/site/bg.png);
font-family: Rokkitt, serif;
font-size: 20px;
&.intro-undecided,
&:not(.intro-play) #intro-blink {
visibility: hidden;
}
}
.container {
@ -284,3 +289,101 @@ video {
width: 100%;
height: 9rem;
}
/**
* Intro
*/
.intro-play {
> header {
animation: introSlideUp 1s 5s backwards;
-webkit-animation: introSlideUp 1s 5s backwards;
}
#intro-blink {
animation: introBlink 1s steps(5, start) 3 forwards;
-webkit-animation: introBlink 1s steps(5, start) 3 forwards;
}
[id*='intro-cmd-'],
[id*='intro-response-'] {
visibility: hidden;
animation: introAppear 250ms 3s forwards;
-webkit-animation: introAppear 250ms 3s forwards;
}
#intro-cmd-2 {
animation-delay: 3.1s;
}
#intro-cmd-2 {
animation-delay: 3.2s;
}
#intro-cmd-3 {
animation-delay: 3.3s;
}
#intro-cmd-4 {
animation-delay: 3.4s;
}
#intro-cmd-5 {
animation-delay: 3.5s;
}
#intro-cmd-6 {
animation-delay: 3.6s;
}
#intro-cmd-7 {
animation-delay: 3.7s;
}
#intro-cmd-8 {
animation-delay: 3.8s;
}
#intro-cmd-9 {
animation-delay: 3.9s;
}
#intro-cmd-10 {
animation-delay: 4s;
}
#intro-response-1 {
animation-delay: 4.2s;
}
#intro-response-2 {
animation-delay: 4.5s;
}
}
@keyframes introSlideUp {
from {
padding-bottom: 100vh;
}
to {
padding-bottom: $spacing-md;
}
}
@-webkit-keyframes introSlideUp {
from {
padding-bottom: 100vh;
}
to {
padding-bottom: $spacing-md;
}
}
@keyframes introBlink {
to {
visibility: hidden;
}
}
@-webkit-keyframes introBlink {
to {
visibility: hidden;
}
}
@keyframes introAppear {
to {
visibility: visible;
}
}
@-webkit-keyframes introAppear {
to {
visibility: visible;
}
}