add README

Dockerfile

@@ -0,0 +1,34 @@
+FROM node:11.1.0-alpine AS base
+LABEL version="4.0.0"
+LABEL description=""
+
+WORKDIR /usr/src/app
+COPY ["package.json", "./"]
+COPY ["package-lock.json", "./"]
+
+FROM base AS builder
+# ENV PARCEL_WORKERS=2
+RUN npm set progress=false && npm config set depth 0 && npm install
+COPY ["src/", "./src"]
+# ARG VERSION=Missing
+# ENV VERSION=$VERSION
+# ARG COMMIT=Missing
+# ENV COMMIT=$COMMIT
+RUN npm run Prod
+
+FROM nginx:1.14.1-alpine as Web
+LABEL maintainer="MrFlutters (https://github.com/MrFlutters)"
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/web.conf /etc/nginx/conf.d/web.conf
+
+LABEL traefik.backend=fluttershub_home
+LABEL traefik.frontend.rule="Host:fluttershub.com"
+LABEL traefik.docker.network=web
+LABEL traefik.frontend.redirect.entryPoint=https
+LABEL traefik.enable=true
+LABEL traefik.port=80
+
+EXPOSE 80
+RUN rm -Rf /usr/share/nginx/html/ && rm /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html/
+CMD [ "nginx", "-g", "daemon off;" ]

build.txt

@@ -0,0 +1 @@
+docker build --build-arg VERSION=1.0.0 --build-arg COMMIT=a569955 -t fluttershub:1.0.1 .

docker-compose.yml

@@ -0,0 +1,12 @@
+version: "3"
+
+services:
+  home:
+    image: mrflutters/home:1.0.0
+    restart: always
+    networks:
+      - web
+    container_name: Fluttershub_home
+networks:
+  web:
+    external: true

docker/nginx.conf

@@ -0,0 +1,29 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
+}

docker/web.conf

@@ -0,0 +1,12 @@
+server {
+    listen       80;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+    }
+        location /health {
+        return 200 'alive';
+        add_header Content-Type text/plain;
+    }
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "fluttershub-com",
+  "version": "4.0.0",
+  "private": true,
+  "description": "Small description for fluttershub-com goes here",
+  "license": "MIT",
+  "author": "MrFlutters",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MrFlutters/Fluttershub.com.git"
+  },
+  "scripts": {
+    "Dev": "npm run Cleanup && npm run Init && parcel dev src/index.pug -d build",
+    "Cleanup": "rm -Rf build/ .cache/",
+    "Init": "mkdir build && cp -R src/assets/* build/",
+    "Prod": "npm run Cleanup && npm run Init && parcel build src/index.pug -d build"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.3",
+    "pug": "^2.0.3",
+    "sass": "^1.19.0"
+  },
+  "engines": {
+    "node": "11.*"
+  },
+  "dependencies": {},
+  "main": "index.js",
+  "bugs": {
+    "url": "https://github.com/MrFlutters/Fluttershub.com/issues"
+  },
+  "homepage": "https://github.com/MrFlutters/Fluttershub.com#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";