add README

src/scss/components/animations.scss

@@ -0,0 +1,3 @@
+@import "animations/bounce.scss";
+@import "animations/flicker.scss";
+@import "animations/slide.scss";

src/scss/components/animations/bounce.scss

@@ -0,0 +1,105 @@
+ @-webkit-keyframes bounce-in {
+     0% {
+         -webkit-transform: scale(0);
+         transform: scale(0);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+         opacity: 0;
+     }
+     38% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+         opacity: 1;
+     }
+     55% {
+         -webkit-transform: scale(0.7);
+         transform: scale(0.7);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     72% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+     81% {
+         -webkit-transform: scale(0.84);
+         transform: scale(0.84);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     89% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+     95% {
+         -webkit-transform: scale(0.95);
+         transform: scale(0.95);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     100% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+ }
+
+ @keyframes bounce-in {
+     0% {
+         -webkit-transform: scale(0);
+         transform: scale(0);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+         opacity: 0;
+     }
+     38% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+         opacity: 1;
+     }
+     55% {
+         -webkit-transform: scale(0.7);
+         transform: scale(0.7);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     72% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+     81% {
+         -webkit-transform: scale(0.84);
+         transform: scale(0.84);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     89% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+     95% {
+         -webkit-transform: scale(0.95);
+         transform: scale(0.95);
+         -webkit-animation-timing-function: ease-in;
+         animation-timing-function: ease-in;
+     }
+     100% {
+         -webkit-transform: scale(1);
+         transform: scale(1);
+         -webkit-animation-timing-function: ease-out;
+         animation-timing-function: ease-out;
+     }
+ }

src/scss/components/animations/flicker.scss

@@ -0,0 +1,198 @@
+@keyframes text-flicker {
+    0% {
+        opacity: 0
+    }
+    10% {
+        opacity: 0;
+    }
+    10.1% {
+        opacity: 1;
+    }
+    10.2% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0;
+    }
+    20.1% {
+        opacity: 1;
+    }
+    20.6% {
+        opacity: 0;
+    }
+    30% {
+        opacity: 0;
+    }
+    30.1% {
+        opacity: 1;
+    }
+    30.5% {
+        opacity: 1;
+    }
+    30.6% {
+        opacity: 0;
+    }
+    45% {
+        opacity: 0;
+    }
+    45.1% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 1;
+    }
+    55% {
+        opacity: 1;
+    }
+    55.1% {
+        opacity: 0;
+    }
+    57% {
+        opacity: 0;
+    }
+    57.1% {
+        opacity: 1;
+    }
+    60% {
+        opacity: 1;
+    }
+    60.1% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 0;
+    }
+    65.1% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    75.1% {
+        opacity: 0;
+    }
+    77% {
+        opacity: 0;
+    }
+    77.1% {
+        opacity: 1;
+    }
+    85% {
+        opacity: 1;
+    }
+    85.1% {
+        opacity: 0;
+    }
+    86% {
+        opacity: 0;
+    }
+    86.1% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes text-flicker {
+    0% {
+        opacity: 0
+    }
+    10% {
+        opacity: 0;
+    }
+    10.1% {
+        opacity: 1;
+    }
+    10.2% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0;
+    }
+    20.1% {
+        opacity: 1;
+    }
+    20.6% {
+        opacity: 0;
+    }
+    30% {
+        opacity: 0;
+    }
+    30.1% {
+        opacity: 1;
+    }
+    30.5% {
+        opacity: 1;
+    }
+    30.6% {
+        opacity: 0;
+    }
+    45% {
+        opacity: 0;
+    }
+    45.1% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 1;
+    }
+    55% {
+        opacity: 1;
+    }
+    55.1% {
+        opacity: 0;
+    }
+    57% {
+        opacity: 0;
+    }
+    57.1% {
+        opacity: 1;
+    }
+    60% {
+        opacity: 1;
+    }
+    60.1% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 0;
+    }
+    65.1% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    75.1% {
+        opacity: 0;
+    }
+    77% {
+        opacity: 0;
+    }
+    77.1% {
+        opacity: 1;
+    }
+    85% {
+        opacity: 1;
+    }
+    85.1% {
+        opacity: 0;
+    }
+    86% {
+        opacity: 0;
+    }
+    86.1% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.text-flicker{
+    animation: text-flicker 1.5s both;
+}
+.text-flicker-2{
+    animation: text-flicker 1.5s both;
+    animation-delay: 1.0s;
+}

src/scss/components/animations/slide.scss

@@ -0,0 +1,28 @@
+@-webkit-keyframes footer-slide {
+    0% {
+      // -webkit-transform: translateY(1000px);
+      //         transform: translateY(1000px);
+      opacity: 0;
+    }
+    100% {
+      // -webkit-transform: translateY(0);
+              // transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes footer-slide {
+    0% {
+      -webkit-transform: translateY(1000px);
+              transform: translateY(1000px);
+      opacity: 0;
+      // overflow: hidden;
+      // display: none;
+    }
+    100% {
+      // -webkit-transform: translateY(0);
+              // transform: translateY(0);
+      opacity: 1;
+      // display: inherit;
+    }
+  }
+  

src/scss/components/common.scss

@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css?family=Average+Sans|Contrail+One');
+
+$background_color: #1a1e23;
+$Primany-font: 'Contrail One';
+$Secondary-font: 'Average Sans';
+
+body,html, .container {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: $background_color;
+    user-select: none;
+    -moz-user-select: none;
+    overflow:hidden;  
+}
+.welcome_text {
+    color:white;
+    font-family: $Primany-font;
+    user-select: text;
+    -moz-user-select: text;
+}
+.standard_text{
+    color:white;
+    font-family: $Secondary-font;
+    user-select: text;
+    -moz-user-select: text;
+}
+
+// #CSS GRID
+.container {
+    position: relative;
+    text-align: center;
+}
+.container::before {
+    content: "";
+    margin: 0;
+    padding: 0;
+    position: relative;
+    display: inline-block;
+    width: 0; height: 100%;
+    vertical-align: middle;
+}
+.pod {
+    display:grid;
+    // display: inline-grid;
+    // justify-content: center;
+    display: inline-block;
+    vertical-align: middle;
+}
+.pod a {
+    margin: 2px;
+    font-size: 120%
+}
+.build_text {
+    margin: 0.2rem;
+    color: white;
+    font-family: $Secondary-font;
+    user-select: text;
+    -moz-user-select: text;
+    text-decoration: none;
+}
+
+.no_hightnight a:link, a{
+    color: inherit;
+    // text-decoration: none;
+    text-decoration: underline;
+}
+
+.cookiesncoco {
+    font-size: 1.0rem;
+}
+.name-letters {
+    padding: 0
+}

src/scss/components/footer.scss

@@ -0,0 +1,13 @@
+footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0.4rem;
+    // background-color: #efefef;
+    text-align: center;
+    background-color: #111417;
+    -webkit-animation: footer-slide 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: footer-slide 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation-delay: 2.0s;
+ }

src/scss/components/img.scss

@@ -0,0 +1,42 @@
+// @import "./bounce.scss";
+
+#profile_pic {
+    width: 256px;
+    height: 256px;
+      /* Safari 3-4, iOS 1-3.2, Android 1.6- */
+  -webkit-border-radius: 50%; 
+
+  /* Firefox 1-3.6 */
+  -moz-border-radius: 50%; 
+  
+  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
+  border-radius: 50%; 
+}
+.glow img{
+  @keyframes border-pulsate {
+      0%{
+          box-shadow:none;
+      }
+      60%{
+          box-shadow:
+              inset 0 0 50px #fff,
+              inset 20px 0 80px #f5f,
+              inset -20px 0 80px #0ff,
+              inset 20px 0 300px #f0f,
+              inset -20px 0 300px #0ff,
+              0 0 50px #fff,
+              -10px 0 80px #f0f,
+              10px 0 80px #0ff;
+      }
+      100%{
+          box-shadow:none;
+      }
+  }
+//   -webkit-animation: bounce-in-fwd 1.1s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
+//   animation: bounce-in-fwd 1.1s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
+  animation: bounce-in 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000) both, border-pulsate 10s infinite;
+  /* transition:all 4s ease-out; 
+  /*animation-delay: 0s;
+  animation-play-state: running; 
+  // animation-fill-mode: backwards; */
+}

src/scss/components/links.scss

@@ -0,0 +1,5 @@
+.links span{
+    padding: 0.5%;
+    background-color: #363f49;
+    border-radius: 50%;
+}

src/scss/index.scss

@@ -0,0 +1,7 @@
+@import "components/common.scss";
+// @import "components/animation.scss";
+@import "components/img.scss";
+@import "components/footer.scss";
+@import "components/animations.scss";
+// @import "components/slide.scss";
+// @import "components/links.scss";