Skip to content

Commit

Permalink
Add about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@zessx
zessx committed Mar 31, 2016
1 parent 1eb9c10 commit 44708ad
Show file tree
Hide file tree
Showing 27 changed files with 466 additions and 492 deletions.
109 changes: 109 additions & 0 deletions assets/css/base/_bootstrap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html {
height: 100vh;
}
body {
@extend %font-light;
height: 100vh;
overflow: hidden;

Expand All @@ -20,7 +21,115 @@ body {
border: (3 * $unit) solid white;
top: 0;
left: 0;
background: url(images/noise.png);
pointer-events: none;
z-index: 99;
animation: noise linear .4s infinite;
}
}

@keyframes noise {
from, to {
background-position: top center;
}
50% {
background-position: bottom center;
}
}

/* Source: http://codepen.io/bulby97/details/fcvay/ */
@keyframes glitchText {
0%, 4%, 51%, 55%, 73%, 76% {
text-shadow: 3px 0 0 red, -3px 0 0 blue;
}
5%, 10%, 56%, 60%, 67%, 70%, 77%, 80% {
text-shadow: -3px 0 0 red, 3px 0 0 blue;
}
11%, 15%, 43%, 46%, 81%, 85% {
text-shadow: 2px 0 0 red, -2px 0 0 lime;
}
16%, 20%, 47%, 50%, 86%, 90% {
text-shadow: -3px 0 0 red, 3px 0 0 lim
}
21%, 30%, 92%, 95% {
text-shadow: 2px 0 0 blue, -2px 0 0 lime;
}
31%, 40%, 96%, 100% {
text-shadow: -3px 0 0 blue, 3px 0 0 lime;
}
41% {
text-shadow: 7px 0 0 blue, -7px 0 0 lime;
}
42% {
text-shadow: 0 0 0 blue, 0 0 0 lime;
}
61% {
text-shadow: 6px 0 0 red, -6px 0 0 lime;
}
62% {
text-shadow: 0 0 0 red, 0 0 0 lime;
}
63%, 64%, 65%, 66% {
text-shadow: 2px 0 0 red, -2px 0 0 blue;
}
71% {
text-shadow: 9px 0 0 red, -9px 0 0 blue;
}
72% {
text-shadow: 0 0 0 red, 0 0 0 blue;
}
91% {
text-shadow: 8px 0 0 lime, -8px 0 0 blue;
}
92% {
text-shadow: 0 0 0 lime, 0 0 0 blue;
}
}

@keyframes glitchBlock {
0%, 4%, 51%, 55%, 73%, 76% {
box-shadow: 6px 0 0 red, -6px 0 0 blue;
}
5%, 10%, 56%, 60%, 67%, 70%, 77%, 80% {
box-shadow: -6px 0 0 red, 6px 0 0 blue;
}
11%, 15%, 43%, 46%, 81%, 85% {
box-shadow: 4px 0 0 red, -4px 0 0 lime;
}
16%, 20%, 47%, 50%, 86%, 90% {
box-shadow: -6px 0 0 red, 6px 0 0 lim
}
21%, 30%, 92%, 95% {
box-shadow: 4px 0 0 blue, -4px 0 0 lime;
}
31%, 40%, 96%, 100% {
box-shadow: -6px 0 0 blue, 6px 0 0 lime;
}
41% {
box-shadow: 14px 0 0 blue, -14px 0 0 lime;
}
42% {
box-shadow: 0 0 0 blue, 0 0 0 lime;
}
61% {
box-shadow: 12px 0 0 red, -12px 0 0 lime;
}
62% {
box-shadow: 0 0 0 red, 0 0 0 lime;
}
63%, 64%, 65%, 66% {
box-shadow: 4px 0 0 red, -4px 0 0 blue;
}
71% {
box-shadow: 18px 0 0 red, -18px 0 0 blue;
}
72% {
box-shadow: 0 0 0 red, 0 0 0 blue;
}
91% {
box-shadow: 16px 0 0 lime, -16px 0 0 blue;
}
92% {
box-shadow: 0 0 0 lime, 0 0 0 blue;
}
}
20 changes: 10 additions & 10 deletions assets/css/base/_fonts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@

@font-face {
font-family: "robotothin";
src: url('../fonts/Roboto-Thin-webfont.eot');
src: url('../fonts/Roboto-Thin-webfont.eot?#iefix') format("embedded-opentype"),
url('../fonts/Roboto-Thin-webfont.woff') format("woff"),
url('../fonts/Roboto-Thin-webfont.ttf') format("truetype"),
url('../fonts/Roboto-Thin-webfont.svg#robotothin') format("svg");
src: url('fonts/Roboto-Thin-webfont.eot');
src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format("embedded-opentype"),
url('fonts/Roboto-Thin-webfont.woff') format("woff"),
url('fonts/Roboto-Thin-webfont.ttf') format("truetype"),
url('fonts/Roboto-Thin-webfont.svg#robotothin') format("svg");
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: "robotomedium";
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format("embedded-opentype"),
url('../fonts/Roboto-Medium-webfont.woff') format("woff"),
url('../fonts/Roboto-Medium-webfont.ttf') format("truetype"),
url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format("svg");
src: url('fonts/Roboto-Medium-webfont.eot');
src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format("embedded-opentype"),
url('fonts/Roboto-Medium-webfont.woff') format("woff"),
url('fonts/Roboto-Medium-webfont.ttf') format("truetype"),
url('fonts/Roboto-Medium-webfont.svg#robotomedium') format("svg");
font-weight: normal;
font-style: normal;

Expand Down
22 changes: 10 additions & 12 deletions assets/css/base/_icons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
@charset "UTF-8";

@font-face {
font-family: "icons";
src: url('assets/fonts/icons.eot');
src: url('assets/fonts/icons.eot?#iefix') format('eot'),
url('assets/fonts/icons.woff') format('woff'),
url('assets/fonts/icons.ttf') format('truetype'),
url('assets/fonts/icons.svg#icons') format('svg');
src: url('fonts/icons.eot');
src: url('fonts/icons.eot?#iefix') format('eot'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype'),
url('fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
Expand All @@ -29,10 +30,7 @@
}
}

%icon-facebook, .icon-facebook { @extend %icon; &:before { content: "\ea01"; }}
%icon-flip, .icon-flip { @extend %icon; &:before { content: "\ea02"; }}
%icon-github, .icon-github { @extend %icon; &:before { content: "\ea03"; }}
%icon-googleplus, .icon-googleplus { @extend %icon; &:before { content: "\ea04"; }}
%icon-linked, .icon-linked { @extend %icon; &:before { content: "\ea05"; }}
%icon-stackoverflow, .icon-stackoverflow { @extend %icon; &:before { content: "\ea06"; }}
%icon-twitter, .icon-twitter { @extend %icon; &:before { content: "\ea07"; }}
%icon-email, .icon-email { @extend %icon; &:before { content: "\ea01"; }}
%icon-github, .icon-github { @extend %icon; &:before { content: "\ea02"; }}
%icon-stackoverflow, .icon-stackoverflow { @extend %icon; &:before { content: "\ea03"; }}
%icon-twitter, .icon-twitter { @extend %icon; &:before { content: "\ea04"; }}
115 changes: 97 additions & 18 deletions assets/css/layout/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
top: 3 * $unit;
bottom: 3 * $unit;
width: calc(50vw - #{$logoWidth});
opacity: 0;
z-index: 2;
animation: opacify 1s 5s forwards;

h2 {
position: absolute;
Expand All @@ -26,16 +28,20 @@
top: 50%;
left: 50%;
width: 0;
height: 3px;
height: 1px;
background: currentColor;
transform: translate(-50%, -50%);
transition: all .4s;
transition: all .2s;
}
&:hover:after {
width: calc(100% + #{3 * $unit});
&:hover {
animation: glitchText 2s infinite;

&:after {
width: calc(100% + #{3 * $unit});
}
}
}
ul {
> ul {
height: calc(100vh - #{6 * $unit});
list-style: none;
padding: 3 * $unit;
Expand All @@ -53,7 +59,7 @@
}
p {
margin: 0;
padding: 10px 10px 0;
padding: 0;
}
a {
display: block;
Expand All @@ -62,6 +68,9 @@
padding: $linkPadding;
text-decoration: none;
}
&:hover {
animation: glitchText 2s infinite;
}
}
}
&.active {
Expand All @@ -74,32 +83,99 @@
}
}

.about {
@extend %section;
position: absolute;
top: 0;
left: 0;
bottom: auto;
color: $light;
width: 100%;

h2 {
top: auto;
left: 50%;
transform: translate(-50%, 100%);
}
article {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0 25vw;
text-align: center;
font-size: 1.5em;
background: $dark;
animation: glitchBlock 2s infinite;

strong {
text-decoration: underline;
}
a {
color: inherit;
}
ul {
list-style: none;
margin: 0;

li {
display: inline-block;
margin: $unit;
font-size: 2.5em;

&:hover {
animation: glitchText 2s infinite;
}
}
}
}
&.active {
article {
display: flex;

&:after {
content: '+';
display: block;
position: absolute;
top: 6 * $unit;
right: 6 * $unit;
font-size: 6 * $unit;
line-height: 6 * $unit;
width: 6 * $unit;
cursor: pointer;
transform: rotate(45deg);
}
}
}
}
.posts {
@extend %section;
left: 3 * $unit;
color: $dark;

h2 {
left: 3 * $unit;
transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg) translateY(50%);
}
ul {
padding-right: 0;
transform: translateX(-100%);

li {
color: $dark;
text-align: right;

&:hover {
background: $dark;
color: $light;
}
}
}
&.active {
h2 {
left: calc(50vw - #{$logoWidth - 3 * $unit});
}
~ .about h2,
~ .logo {
left: calc(50vw + #{$logoWidth});
}
Expand All @@ -112,27 +188,30 @@

h2 {
right: 3 * $unit;
transform: translate(50%, -50%) rotate(90deg);
transform: translate(50%, -50%) rotate(90deg) translateY(50%);
}
ul {
padding-left: 0;
transform: translateX(100%);

li {
color: $light;
text-align: left;

&:hover {
background: $light;
color: $dark;
}
}
}
&.active {
h2 {
right: calc(50vw - #{$logoWidth - 3 * $unit});
}
~ .about h2,
~ .logo {
left: calc(50vw - #{$logoWidth});
}
}
}

@keyframes opacify {
to {
opacity: 1;
}
}
Loading

0 comments on commit 44708ad

Please sign in to comment.