12 files changed, 466 insertions, 8 deletions
diff --git a/index.html b/index.html
index 249e5b2..8e3bce9 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,13 @@
   <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic' rel='stylesheet' type='text/css'>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-  <link rel="stylesheet" href="css/main.css">
+  <script>
+    function setStyleSheet(url) {
+      var stylesheet = document.getElementById("stylesheet");
+      stylesheet.setAttribute('href', url);
+    }
+  </script>
+  <link id="stylesheet" rel="stylesheet" type="text/css" href="./css/main.css" />
   <meta name="description" content="s1nical is a full stack developer.">
   <meta property="og:description" content="s1nical is a full stack developer.">
   <meta property="og:title" content="s1nical">
@@ -20,8 +26,8 @@
   <script src="https://www.googletagmanager.com/gtag/js?id=UA-30692517-4"></script>
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <link rel="image_src" href="https://secure.gravatar.com/avatar/f9c6903a50d1d861a47a614862b00b89.png?s=375">
-  <link rel="apple-touch-icon" sizes="128x128" href="favicon.ico">
-  <link rel="icon" type="image/ico" href="favicon.ico" sizes="128x128">
+  <link rel="apple-touch-icon" sizes="128x128" href="./assets/favicon.ico">
+  <link rel="icon" type="image/ico" href="./assets/favicon.ico" sizes="128x128">
   <link rel="canonical" href="https://s1n.pw/">
   <script type="application/ld+json">{
       "name": "s1nical",
@@ -58,7 +64,7 @@
   </script>
 </head>
   <body>
-    <script src="js/app.js"></script>
+    <script src="./js/app.js"></script>
 
     <!-- Navigation Bar -->
     <div class="navigation-bar">
@@ -76,10 +82,16 @@
     <!-- Core Site Function, Site Primer/ Base -->
     <main>
       <div class="links">
-        <a href="mailto:[email protected]">s1nical</a><br>
-        Full-stack developer.<br><br>
-        Follow me on <a href="https://twitter.com/s1nical">Twitter</a>.
-        View my code on <a href="https://github.com/s1nical">GitHub</a>.
+        <div class="email">
+          <a href="mailto:[email protected]">s1nical</a><br>
+          Full-stack developer.<br><br>
+        </div>
+        <div class="twitter">
+          Follow me on <a href="https://twitter.com/s1nical">Twitter</a>.
+        </div>
+        <div class="github">
+          View my code on <a href="https://github.com/s1nical">GitHub</a>.
+        </div>
       </div>
     </main>
 
diff --git a/js/app.js b/js/app.js
index 2f4d6e0..61b5d6b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -95,3 +95,93 @@ setTimeout(function () {
   document.querySelector('a[href="/cdn-cgi/l/email-protection"]').href = `\x6dailto:hi\x40${location.hostname}`;
 })();
 
+// KONAMI CODE FOR ALTERNATE 90s SITE
+
+// a key map of allowed keys
+var allowedKeys = {
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  65: 'a',
+  66: 'b'
+};
+
+// the 'official' Konami Code sequence
+var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];
+
+// a variable to remember the 'position' the user has reached so far.
+var konamiCodePosition = 0;
+
+// add keydown event listener
+document.addEventListener('keydown', function (e) {
+  // get the value of the key code from the key map
+  var key = allowedKeys[e.keyCode];
+  // get the value of the required key from the konami code
+  var requiredKey = konamiCode[konamiCodePosition];
+
+  // compare the key with the required key
+  if (key == requiredKey) {
+
+    // move to the next key in the konami code sequence
+    konamiCodePosition++;
+
+    // if the last key is reached, activate cheats
+    if (konamiCodePosition == konamiCode.length) {
+      activateCheats();
+      konamiCodePosition = 0;
+    }
+  } else {
+    konamiCodePosition = 0;
+  }
+});
+
+function activateCheats() {
+
+  var audio = new Audio('https://s3-eu-west-1.amazonaws.com/wdildnproject2/toasty.mp3');
+  audio.play();
+
+  window.location.href = "./konami";
+}
+
+var TxtRotate = function (el, toRotate, period) {
+  this.toRotate = toRotate;
+  this.el = el;
+  this.loopNum = 0;
+  this.period = parseInt(period, 10) || 2000;
+  this.txt = '';
+  this.tick();
+  this.isDeleting = false;
+};
+
+TxtRotate.prototype.tick = function () {
+  var i = this.loopNum % this.toRotate.length;
+  var fullTxt = this.toRotate[i];
+
+  if (this.isDeleting) {
+    this.txt = fullTxt.substring(0, this.txt.length - 1);
+  } else {
+    this.txt = fullTxt.substring(0, this.txt.length + 1);
+  }
+
+  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
+
+  var that = this;
+  var delta = 300 - Math.random() * 100;
+
+
+  setTimeout(function () {
+    that.tick();
+  }, delta);
+};
+
+window.onload = function () {
+  var elements = document.getElementsByClassName('txt-rotate');
+  for (var i = 0; i < elements.length; i++) {
+    var toRotate = elements[i].getAttribute('data-rotate');
+    var period = elements[i].getAttribute('data-period');
+    if (toRotate) {
+      new TxtRotate(elements[i], JSON.parse(toRotate), period);
+    }
+  }
+};
diff --git a/konami/assets/bg/bg.gif b/konami/assets/bg/bg.gif
new file mode 100644
index 0000000..29f21e8
--- /dev/null
+++ b/konami/assets/bg/bg.gif
diff --git a/konami/assets/images/Email2.gif b/konami/assets/images/Email2.gif
new file mode 100644
index 0000000..bfbcaad
--- /dev/null
+++ b/konami/assets/images/Email2.gif
diff --git a/konami/assets/images/bullet.png b/konami/assets/images/bullet.png
new file mode 100644
index 0000000..d234fc2
--- /dev/null
+++ b/konami/assets/images/bullet.png
diff --git a/konami/assets/images/cd-rom.gif b/konami/assets/images/cd-rom.gif
new file mode 100644
index 0000000..9bbfb95
--- /dev/null
+++ b/konami/assets/images/cd-rom.gif
diff --git a/konami/assets/images/geoshape.gif b/konami/assets/images/geoshape.gif
new file mode 100644
index 0000000..2e6b5c2
--- /dev/null
+++ b/konami/assets/images/geoshape.gif
diff --git a/konami/assets/images/small-spinning-globe3.gif b/konami/assets/images/small-spinning-globe3.gif
new file mode 100644
index 0000000..e562772
--- /dev/null
+++ b/konami/assets/images/small-spinning-globe3.gif
diff --git a/konami/assets/images/smiley face cursor.cur b/konami/assets/images/smiley face cursor.cur
new file mode 100644
index 0000000..36fd0f2
--- /dev/null
+++ b/konami/assets/images/smiley face cursor.cur
diff --git a/konami/css/main.css b/konami/css/main.css
new file mode 100644
index 0000000..ba22b2f
--- /dev/null
+++ b/konami/css/main.css
@@ -0,0 +1,148 @@
+/* BACKGROUND SPARKLES CSS */
+
+html,
+body {
+    margin: 0 0;
+    padding: 0 0;
+    text-align: center;
+    font-size: 0;
+    background: url(../assets/bg/bg.gif);
+    cursor: url(../assets/images/smiley\ face\ cursor.cur), default;
+}
+
+/* ORINGINAL SITE CSS */
+html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html,
+body {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+}
+
+body {
+    font: normal 20px/1.4 'Inter', sans-serif;
+    margin: 0 1em;
+    padding: 1em 0;
+    color: red;
+    background: none;
+}
+
+main {
+    /* margin: auto; ** This is only needed for mobile */
+    font-size: 6vh;
+    line-height: 1.2;
+    max-width: 75vh;
+}
+
+.links a {
+    background-color: yellow;
+}
+
+.email a:hover,
+.email a:focus {
+    background: url(../assets/images/Email2.gif);
+    color: #fff;
+}
+
+.twitter a:hover,
+.twitter a:focus {
+    background: url(../assets/images/bullet.png);
+    color: #fff;
+}
+
+.github a:hover,
+.github a:focus {
+    background: url(../assets/images/geoshape.gif);
+    color: #fff;
+}
+
+/* NAVIGATION MENU */
+.navigation-bar {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 100%;
+    flex: 1 0 100%;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.nav {
+    overflow: hidden;
+    max-width: 100%;
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+    padding: 0 20px;
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item {
+    color: none;
+    padding: 20px;
+    margin: 0 6px;
+    font-weight: 500;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item:before {
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: url(../assets/images/cd-rom.gif);
+    opacity: 0;
+}
+
+.nav-item:not(.is-active):hover:before {
+    opacity: 1;
+    bottom: 0;
+}
+
diff --git a/konami/index.html b/konami/index.html
new file mode 100644
index 0000000..2e1d57f
--- /dev/null
+++ b/konami/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="theme-color" content="#FFF">
+        <title>s1nical - Landing Page</title>
+        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic'
+            rel='stylesheet' type='text/css'>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+        <link rel="stylesheet" href="./css/main.css">
+        <script src="./js/main.js"></script>
+        <meta name="description" content="s1nical is a full stack developer.">
+        <meta property="og:description" content="s1nical is a full stack developer.">
+        <meta property="og:title" content="s1nical">
+        <meta property="twitter:card" content="summary">
+        <meta property="twitter:site" content="@s1nical">
+        <meta property="og:image" content="">
+        <script src="/cdn-cgi/apps/head/_vFlzwEWzfnxN-k3KPkfOrUdyXo.js"></script>
+        <script src="https://www.googletagmanager.com/gtag/js?id=UA-30692517-4"></script>
+        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+        <link rel="apple-touch-icon" sizes="128x128" href="./assets/images/small-spinning-globe3.gif">
+        <link rel="icon" type="image/gif" href="./assets/images/small-spinning-globe3.gif" sizes="128x128">
+        <link rel="canonical" href="https://s1n.pw/">
+        <script type="application/ld+json">
+            {
+                "name": "s1nical",
+                "alternateName": "s1n",
+                "description": "s1nical is a full stack developer.",
+                "headline": "s1nical is a full stack developer.",
+                "url": "https://s1n.pw/",
+                "image": "",
+                "sameAs": [
+                    "https://twitter.com/s1nical",
+                    "https://github.com/s1nical",
+                    "https://www.reddit.com/user/s1nical/",
+                ],
+                "publisher": {
+                    "@type": "Organization",
+                    "logo": {
+                        "@type": "ImageObject",
+                        "url": ""
+                    }
+                },
+                "@type": "WebSite",
+                "@context": "http://schema.org"
+            }
+        </script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/inter.css"
+            integrity="sha256-DyLTj16AbuvawyWJMPz4tJNp46iGflE/fWYAoU2IGpk=" crossorigin="anonymous">
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145087191-1"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+
+            gtag('config', 'UA-145087191-1');
+        </script>
+    </head>
+
+    <body>
+        <script src="main.js"></script>
+
+        <!-- Navigation Bar -->
+        <div class="navigation-bar">
+            <nav class="nav">
+                <a href="/" class="nav-item" active-color="orange">Home</a>
+                <!-- Had `is-active` after it but removed it due to not highlighting. -->
+                <a href="https://github.com/users/s1nical/projects/1" class="nav-item" active-color="green">About</a>
+                <!-- About -->
+                <a href="/dino/" class="nav-item" active-color="blue">Dino</a> <!-- Testimonials -->
+                <a href="/doge" class="nav-item" active-color="red">Doge</a> <!-- Blog -->
+                <a href="/cars/" class="nav-item" active-color="rebeccapurple">Cars</a> <!-- Contact -->
+                <a href="https://nani.s1n.pw" class="nav-item" active-color="rebeccapurple">Nani?!</a>
+                <span class="nav-indicator"></span>
+            </nav>
+        </div>
+
+        <!-- Core Site Function, Site Primer/ Base -->
+        <main>
+            <div class="links">
+                <div class="email">
+                    <a href="mailto:[email protected]">s1nical</a><br>
+                    Full-stack developer.<br><br>
+                </div>
+                <div class="twitter">
+                    Follow me on <a href="https://twitter.com/s1nical">Twitter</a>.
+                </div>
+                <div class="github">
+                    View my code on <a href="https://github.com/s1nical">GitHub</a>.
+                </div>
+            </div>
+        </main>
+
+
+
+    </body>
+
+</html>
+\ No newline at end of file
diff --git a/konami/js/main.js b/konami/js/main.js
new file mode 100644
index 0000000..455cd00
--- /dev/null
+++ b/konami/js/main.js
@@ -0,0 +1,102 @@
+// SCROLLING TITLE
+var space = " ";
+var speed = "60";
+var pos = 0;
+var msg = "// s1n.ical // Landing Page ";
+
+function Scroll() {
+    document.title = msg.substring(pos, msg.length) + space + msg.substring(0, pos);
+    pos++;
+    if (pos > msg.length) pos = 0;
+    window.setTimeout("Scroll()", speed);
+}
+Scroll();
+
+// KONAMI CODE FOR TOASTY
+
+// a key map of allowed keys
+var allowedKeys = {
+    37: 'left',
+    38: 'up',
+    39: 'right',
+    40: 'down',
+    65: 'a',
+    66: 'b'
+};
+
+// the 'official' Konami Code sequence
+var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];
+
+// a variable to remember the 'position' the user has reached so far.
+var konamiCodePosition = 0;
+
+// add keydown event listener
+document.addEventListener('keydown', function (e) {
+    // get the value of the key code from the key map
+    var key = allowedKeys[e.keyCode];
+    // get the value of the required key from the konami code
+    var requiredKey = konamiCode[konamiCodePosition];
+
+    // compare the key with the required key
+    if (key == requiredKey) {
+
+        // move to the next key in the konami code sequence
+        konamiCodePosition++;
+
+        // if the last key is reached, activate cheats
+        if (konamiCodePosition == konamiCode.length) {
+            activateCheats();
+            konamiCodePosition = 0;
+        }
+    } else {
+        konamiCodePosition = 0;
+    }
+});
+
+function activateCheats() {
+
+    var audio = new Audio('https://s3-eu-west-1.amazonaws.com/wdildnproject2/toasty.mp3');
+    audio.play();
+}
+
+var TxtRotate = function (el, toRotate, period) {
+    this.toRotate = toRotate;
+    this.el = el;
+    this.loopNum = 0;
+    this.period = parseInt(period, 10) || 2000;
+    this.txt = '';
+    this.tick();
+    this.isDeleting = false;
+};
+
+TxtRotate.prototype.tick = function () {
+    var i = this.loopNum % this.toRotate.length;
+    var fullTxt = this.toRotate[i];
+
+    if (this.isDeleting) {
+        this.txt = fullTxt.substring(0, this.txt.length - 1);
+    } else {
+        this.txt = fullTxt.substring(0, this.txt.length + 1);
+    }
+
+    this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
+
+    var that = this;
+    var delta = 300 - Math.random() * 100;
+
+
+    setTimeout(function () {
+        that.tick();
+    }, delta);
+};
+
+window.onload = function () {
+    var elements = document.getElementsByClassName('txt-rotate');
+    for (var i = 0; i < elements.length; i++) {
+        var toRotate = elements[i].getAttribute('data-rotate');
+        var period = elements[i].getAttribute('data-period');
+        if (toRotate) {
+            new TxtRotate(elements[i], JSON.parse(toRotate), period);
+        }
+    }
+};
+\ No newline at end of file