Aboug page

assets/css/base/_bootstrap.scss

@@ -30,14 +30,19 @@ body {
 
 @keyframes noise {
     from, to {
-        background-position: top center;
+        background-position: 0px center;
     }
     50% {
-        background-position: bottom center;
+        background-position: 1000px center;
     }
 }
 
 /* Source: http://codepen.io/bulby97/details/fcvay/ */
+%glitchText {
+    &:hover {
+        animation: glitchText 2s infinite;
+    }
+}
 @keyframes glitchText {
     0%, 4%, 51%, 55%, 73%, 76% {
         text-shadow: 3px 0 0 red, -3px 0 0 blue;

assets/css/layout/_content.scss

@@ -6,10 +6,12 @@
     bottom: 3 * $unit;
     width: calc(50vw - #{$logoWidth});
     opacity: 0;
+    pointer-events: none;
     z-index: 2;
     animation: opacify 1s 5s forwards;
 
     h2 {
+        @extend %glitchText;
         position: absolute;
         top: 50%;
         text-align: center;
@@ -33,12 +35,8 @@
             transform: translate(-50%, -50%);
             transition: all .2s;
         }
-        &:hover {
-            animation: glitchText 2s infinite;
-
-            &:after {
-                width: calc(100% + #{3 * $unit});
-            }
+        &:hover:after {
+            width: calc(100% + #{3 * $unit});
         }
     }
     > ul {
@@ -49,6 +47,7 @@
         transition: transform .4s;
 
         li {
+            @extend %glitchText;
             line-height: 3 * $unit - 2 * $linkPadding;
             margin-bottom: $unit;
             width: 100%;
@@ -68,9 +67,6 @@
                 padding: $linkPadding;
                 text-decoration: none;
             }
-            &:hover {
-                animation: glitchText 2s infinite;
-            }
         }
     }
     &.active {
@@ -98,21 +94,31 @@
         transform: translate(-50%, 100%);
     }
     article {
-        display: none;
+        display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         position: fixed;
-        top: 0;
+        top: -100vh;
         left: 0;
         width: 100vw;
         height: 100vh;
         padding: 0 25vw;
         text-align: center;
         font-size: 1.5em;
         background: $dark;
-        animation: glitchBlock 2s infinite;
+        transition: top .4s;
 
+        .close {
+            @extend %glitchText;
+            position: absolute;
+            top: 6 * $unit;
+            right: 6 * $unit;
+            font-size: 6 * $unit;
+            line-height: 6 * $unit;
+            width: 6 * $unit;
+            cursor: pointer;
+        }
         strong {
             text-decoration: underline;
         }
@@ -124,32 +130,16 @@
             margin: 0;
 
             li {
+                @extend %glitchText;
                 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);
-            }
+            top: 0;
         }
     }
 }
@@ -213,5 +203,6 @@
 @keyframes opacify {
     to {
         opacity: 1;
+        pointer-events: auto;
     }
 }

assets/js/main.js

@@ -1,5 +1,5 @@
 var sections = document.querySelectorAll('section'),
-	titles   = document.querySelectorAll('section h2'),
+	switches = document.querySelectorAll('section .switch'),
 	posts    = document.querySelector('.posts > ul'),
 	works    = document.querySelector('.works > ul');
 
@@ -14,7 +14,7 @@ function activeSection(event) {
 		parent.classList.add('active');
 	}
 }
-Array.prototype.forEach.call(titles, function(element){
+Array.prototype.forEach.call(switches, function(element){
 	element.addEventListener('click', activeSection);
 });
 

index.html

@@ -37,14 +37,20 @@
 <body>
 
 	<section class="posts">
-		<h2>Posts</h2>
+		<h2 class="switch">Posts</h2>
 		<ul>
 		</ul>
 	</section>
 
 	<section class="works">
-		<h2>Works</h2>
+		<h2 class="switch">Works</h2>
 		<ul>
+			<li>
+				<a href="http://smarchal.com/2keys">
+					<p class="date">2015</p>
+					<h3>2Keys</h3>
+				</a>
+			</li>
 			<li>
 				<a href="http://smarchal.com/sass-flexbox">
 					<p class="date">2015</p>
@@ -109,8 +115,9 @@ <h3>Monsterflat</h3>
 	</section>
 
 	<section class="about">
-		<h2>About</h2>
+		<h2 class="switch">About</h2>
 		<article>
+			<span class="switch close">×</span>
 			<p>
 				Hi there, I'm <strong><a href="http://smarchal.com">Samuel Marchal</a></strong>, mostly known as <strong>zessx</strong> on the Internet.
 			</p>
@@ -120,14 +127,12 @@ <h2>About</h2>
 			<p>
 				Continually looking for new technologies and stupid time-consuming challenges, you can follow my tips and discoveries on <strong><a href="http://blog.smarchal.com">my blog</a></strong>.
 			</p>
-			<p>
-				<ul>
-					<li><a href="https://www.twitter.com/zessx"><i class="icon-twitter"></i></a></li>
-					<li><a href="https://github.com/zessx"><i class="icon-github"></i></a></li>
-					<li><a href="http://stackoverflow.com/users/1238019/zessx"><i class="icon-stackoverflow"></i></a></li>
-					<li><a href="mailto:[email protected]"><i class="icon-email"></i></a></li>
-				</ul>
-			</p>
+			<ul>
+				<li><a href="https://www.twitter.com/zessx"><i class="icon-twitter"></i></a></li>
+				<li><a href="https://github.com/zessx"><i class="icon-github"></i></a></li>
+				<li><a href="http://stackoverflow.com/users/1238019/zessx"><i class="icon-stackoverflow"></i></a></li>
+				<li><a href="mailto:[email protected]"><i class="icon-email"></i></a></li>
+			</ul>
 		</article>
 	</section>