Small tweaks

- Replaced traichu SVG with an animated PNG
- Added Konami code easter egg
- Fixed Cube Cobra typo

css/animations.css

@@ -36,6 +36,16 @@
         100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
     }
 
+@-webkit-keyframes slide {
+    0% { -webkit-transform: translateX(0); transform: translateX(0); }
+    100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); }
+}
+    
+    @keyframes slide {
+        0% { -webkit-transform: translateX(0); transform: translateX(0); }
+        100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); }
+    }
+
 @-webkit-keyframes slime {
 	0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
 	30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }

css/styles.css

@@ -24,12 +24,11 @@ main {
 }
 
 header {
-    animation: flicker 2s linear infinite both;
     display: flex;
     justify-content: center;
 }
 
-header svg { width: 6rem; }
+header img { width: 6rem; }
 
 #dock ul {
     display: flex;
@@ -53,7 +52,7 @@ header svg { width: 6rem; }
 #dock a:hover {
     animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
     fill: var(--primary-link-hover-color);
-    margin-top: -0.25rem;
+    margin-top: -0.5rem;
     outline: none;
 }
 
@@ -170,7 +169,7 @@ header svg { width: 6rem; }
         width: 40rem;
     }
 
-    header svg { width: 8rem; }
+    header img { width: 8rem; }
 
     #dock ul {
         column-gap: 0;
@@ -180,3 +179,5 @@ header svg { width: 6rem; }
 
     #bookmarks { flex-direction: row; }
 }
+
+.slide { animation: slide 4250ms ease-in; }

js/main.js

@@ -6,4 +6,38 @@ function dateTime () {
   setTimeout(dateTime, 1000)
 }
 
-dateTime()
+var konamiCode = [
+  'ArrowUp',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowLeft',
+  'ArrowRight',
+  'b',
+  'a'
+]
+var currentKey = 0
+var keyHandler = function (event) {
+  // If the key isn't in the pattern, or isn't the current key in the pattern, reset
+  if (konamiCode.indexOf(event.key) < 0 || event.key !== konamiCode[currentKey]) {
+    currentKey = 0
+    return
+  }
+
+  // Update how much of the pattern is complete
+  currentKey++
+
+  // If complete, alert and reset
+  if (konamiCode.length === currentKey) {
+    currentKey = 0
+    document.getElementById('traichu-running').classList.add('slide')
+    setTimeout(function () {
+      document.getElementById('traichu-running').classList.remove('slide')
+    }, 4250);
+  }
+}
+
+// Listen for keydown events
+document.addEventListener('keydown', keyHandler, false)