add README

src/assets/robots.txt

@@ -0,0 +1,3 @@
+# http://www.robotstxt.org
+User-agent: *
+Disallow:

src/icons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/index.pug

@@ -0,0 +1,41 @@
+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='Description', content='Flutters Personal Website')
+    link(rel='stylesheet', type='text/css', href='scss/index.scss')
+    include links.pug
+    include ogp.pug
+
+    title Fluttershub.com
+  body
+    .container
+      .pod
+        .glow
+          img#profile_pic(src='https://storage.googleapis.com/api.fluttershub.com/images/public/profile_pic.png', alt='')
+        h1.welcome_text.text-flicker.text-flicker-1 MrFlutters
+        p.about_me.standard_text.text-box-glow
+        .pod
+          a.standard_text.text-flicker-2(href="https://steamcommunity.com/id/MrFlutters") Steam
+          a.standard_text.text-flicker-2(href="https://twitter.com/mrflutters") Twitter
+          a.standard_text.text-flicker-2(href="https://github.com/MrFlutters") Github
+          //- a.standard_text.text-flicker-2(href="https://github.com/MrFlutters/Fluttershub.com") Discord
+        footer.standard_text.footer-slide
+          .creator
+            a.build_text(href="https://img.fluttershub.com/EgOwhwrHyHWw.png") Cookie? 🍪
+              //- a.no_highlight(href="https://github.com/MrFlutters/Fluttershub.com") MrFlutters
+          //- .build
+          //-   span.build_text Version
+          //-   span.build_text v#{process.env.VERSION} |
+          //-   span.build_text
+          //-     | Commit: 
+          //-     a.no_highlight.build_text(href="https://github.com/MrFlutters/Fluttershub.com/commit/" + process.env.COMMIT) #{process.env.COMMIT}
+          //- .note
+          //-   span.build_text 
+          //-     | built with 📦
+          //-     a(href="https://parceljs.org/") Parceljs,
+          //-   a.build_text(href="https://github.com/pugjs/pug") Pug
+          //-   span.build_text and
+          //-   span.cookiesncoco.build_text 🍪☕

src/links.pug

@@ -0,0 +1,17 @@
+link(rel='apple-touch-icon', sizes='57x57', href='icons/apple-icon-57x57.png')
+link(rel='apple-touch-icon', sizes='60x60', href='icons/apple-icon-60x60.png')
+link(rel='apple-touch-icon', sizes='72x72', href='icons/apple-icon-72x72.png')
+link(rel='apple-touch-icon', sizes='76x76', href='icons/apple-icon-76x76.png')
+link(rel='apple-touch-icon', sizes='114x114', href='icons/apple-icon-114x114.png')
+link(rel='apple-touch-icon', sizes='120x120', href='icons/apple-icon-120x120.png')
+link(rel='apple-touch-icon', sizes='144x144', href='icons/apple-icon-144x144.png')
+link(rel='apple-touch-icon', sizes='152x152', href='icons/apple-icon-152x152.png')
+link(rel='apple-touch-icon', sizes='180x180', href='icons/apple-icon-180x180.png')
+link(rel='icon', type='image/png', sizes='192x192', href='icons/android-icon-192x192.png')
+link(rel='icon', type='image/png', sizes='32x32', href='icons/favicon-32x32.png')
+link(rel='icon', type='image/png', sizes='96x96', href='icons/favicon-96x96.png')
+link(rel='icon', type='image/png', sizes='16x16', href='icons/favicon-16x16.png')
+//- link(rel='manifest', href='icons/manifest.webmanifest')
+meta(name='msapplication-TileColor', content='#ffffff')
+meta(name='msapplication-TileImage', content='icons/ms-icon-144x144.png')
+meta(name='theme-color', content='#ffffff')

src/ogp.pug

@@ -0,0 +1,6 @@
+meta(property='og:url', content='https://fluttershub.com')
+meta(property='og:type', content='website')
+meta(property='og:title', content='Flutters Personal Website')
+meta(property='og:description', content='We got 🍪 and ☕')
+meta(property='og:image', content='http://storage.googleapis.com/api.fluttershub.com/images/public/profile_pic.jpg')
+meta(property='og:image:secure_url', content='https://storage.googleapis.com/api.fluttershub.com/images/public/profile_pic.jpg')

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";