update for 2020

package-lock.json

@@ -1055,6 +1055,12 @@
       "integrity": "sha1-hkS8JbGUdXeae3wfwQS8CnlPRGU=",
       "dev": true
     },
+    "@fortawesome/fontawesome-pro": {
+      "version": "5.12.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/5.12.1/fontawesome-pro-5.12.1.tgz",
+      "integrity": "sha512-rwVdMZQfTmN/6ExkA3sXN5fdiJWFYFuaDnBYCxhWEpgIzl14BYQMBLqRkQx/ITBnbITkoOLBpfJJHbZ0GKPjHw==",
+      "dev": true
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/@types/anymatch/download/@types/anymatch-1.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fanymatch%2Fdownload%2F%40types%2Fanymatch-1.3.1.tgz",
@@ -1556,6 +1562,51 @@
       "integrity": "sha1-TGYGkXPW/daO2FI5/CViJhgrLr4=",
       "dev": true
     },
+    "adjust-sourcemap-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/adjust-sourcemap-loader/download/adjust-sourcemap-loader-2.0.0.tgz",
+      "integrity": "sha1-ZHEUOvdewCM0shn1S8eXDFL7KaQ=",
+      "dev": true,
+      "requires": {
+        "assert": "1.4.1",
+        "camelcase": "5.0.0",
+        "loader-utils": "1.2.3",
+        "object-path": "0.11.4",
+        "regex-parser": "2.2.10"
+      },
+      "dependencies": {
+        "assert": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npm.taobao.org/assert/download/assert-1.4.1.tgz",
+          "integrity": "sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=",
+          "dev": true,
+          "requires": {
+            "util": "0.10.3"
+          }
+        },
+        "camelcase": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.0.0.tgz",
+          "integrity": "sha1-AylVJ9WL081Kp1Nj81sujZe+L0I=",
+          "dev": true
+        },
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.1.tgz?cache=0&sync_timestamp=1560975547815&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finherits%2Fdownload%2Finherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npm.taobao.org/util/download/util-0.10.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil%2Fdownload%2Futil-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.0",
       "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.0.tgz?cache=0&sync_timestamp=1582379605396&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.0.tgz",
@@ -1673,6 +1724,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "arity-n": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/arity-n/download/arity-n-1.0.4.tgz",
+      "integrity": "sha1-2edrEXM+CFacCEeuezmyhgswt0U=",
+      "dev": true
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -2604,6 +2661,15 @@
       "integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=",
       "dev": true
     },
+    "compose-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npm.taobao.org/compose-function/download/compose-function-3.0.3.tgz",
+      "integrity": "sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=",
+      "dev": true,
+      "requires": {
+        "arity-n": "^1.0.4"
+      }
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npm.taobao.org/compressible/download/compressible-2.0.18.tgz?cache=0&sync_timestamp=1578286264482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcompressible%2Fdownload%2Fcompressible-2.0.18.tgz",
@@ -2845,6 +2911,26 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
+      "integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
+        }
+      }
+    },
     "css-loader": {
       "version": "3.4.2",
       "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.4.2.tgz",
@@ -2934,6 +3020,16 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/d/download/d-1.0.1.tgz",
+      "integrity": "sha1-hpgJU3LVjb7jRv/Qxwk/mfj561o=",
+      "dev": true,
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz",
@@ -3412,6 +3508,38 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.53.tgz",
+      "integrity": "sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=",
+      "dev": true,
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/es6-iterator/download/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "dev": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/es6-symbol/download/es6-symbol-3.1.3.tgz",
+      "integrity": "sha1-utXTwbzawoJp9MszHkMceKxwXRg=",
+      "dev": true,
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "http://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
@@ -4194,6 +4322,23 @@
         }
       }
     },
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/ext/download/ext-1.4.0.tgz",
+      "integrity": "sha1-ia56BxWPedNVF4gpBDJAd+Q3kkQ=",
+      "dev": true,
+      "requires": {
+        "type": "^2.0.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/type/download/type-2.0.0.tgz?cache=0&sync_timestamp=1570722772335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftype%2Fdownload%2Ftype-2.0.0.tgz",
+          "integrity": "sha1-Xxb/bvLrRPJgSU2uJxAzspwJqcM=",
+          "dev": true
+        }
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
@@ -6912,6 +7057,12 @@
       "integrity": "sha1-rCetpmFn+ohJpq3dg39rGJrSCBw=",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
+      "dev": true
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
@@ -7176,6 +7327,12 @@
       "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
       "dev": true
     },
+    "object-path": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npm.taobao.org/object-path/download/object-path-0.11.4.tgz",
+      "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=",
+      "dev": true
+    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@@ -8114,6 +8271,12 @@
         "safe-regex": "^1.1.0"
       }
     },
+    "regex-parser": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npm.taobao.org/regex-parser/download/regex-parser-2.2.10.tgz",
+      "integrity": "sha1-nmao9z2JoQdhbmOznU3t3+6RKzc=",
+      "dev": true
+    },
     "regexp.prototype.flags": {
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.3.0.tgz",
@@ -8312,6 +8475,89 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "resolve-url-loader": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/resolve-url-loader/download/resolve-url-loader-3.1.1.tgz",
+      "integrity": "sha1-KJMYlfoeq5vgZH07KVjBAK48C/A=",
+      "dev": true,
+      "requires": {
+        "adjust-sourcemap-loader": "2.0.0",
+        "camelcase": "5.3.1",
+        "compose-function": "3.0.3",
+        "convert-source-map": "1.7.0",
+        "es6-iterator": "2.0.3",
+        "loader-utils": "1.2.3",
+        "postcss": "7.0.21",
+        "rework": "1.0.1",
+        "rework-visit": "1.0.0",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
+          "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz",
+          "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1573282918610&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
+          "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
+              "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "postcss": {
+          "version": "7.0.21",
+          "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.21.tgz?cache=0&sync_timestamp=1581994853208&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.21.tgz",
+          "integrity": "sha1-BrsHgkwZwgIcXQVtWxDDW5iffhc=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz",
+          "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/restore-cursor/download/restore-cursor-3.1.0.tgz",
@@ -8334,6 +8580,30 @@
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
+    "rework": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/rework/download/rework-1.0.1.tgz",
+      "integrity": "sha1-MIBqhBNCtUUQqkEQhQzUhTQUSqc=",
+      "dev": true,
+      "requires": {
+        "convert-source-map": "^0.3.3",
+        "css": "^2.0.0"
+      },
+      "dependencies": {
+        "convert-source-map": {
+          "version": "0.3.5",
+          "resolved": "https://registry.npm.taobao.org/convert-source-map/download/convert-source-map-0.3.5.tgz?cache=0&sync_timestamp=1573003637425&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconvert-source-map%2Fdownload%2Fconvert-source-map-0.3.5.tgz",
+          "integrity": "sha1-8dgClQr33SYxof6+BZZVDIarMZA=",
+          "dev": true
+        }
+      }
+    },
+    "rework-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/rework-visit/download/rework-visit-1.0.0.tgz",
+      "integrity": "sha1-mUWygD8hni96ygCtuLyfZA+ELJo=",
+      "dev": true
+    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-2.7.1.tgz",
@@ -9672,6 +9942,12 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/type/download/type-1.2.0.tgz?cache=0&sync_timestamp=1570722772335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftype%2Fdownload%2Ftype-1.2.0.tgz",
+      "integrity": "sha1-hI3XaY2vo+VKbEeedZxLw/GIR6A=",
+      "dev": true
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npm.taobao.org/type-check/download/type-check-0.3.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
     "@fortawesome/fontawesome-free": "^5.11.2",
+    "@fortawesome/fontawesome-pro": "^5.12.1",
     "@types/html-webpack-plugin": "^3.2.2",
     "@types/node": "^13.9.0",
     "@types/react": "^16.9.23",
@@ -43,6 +44,7 @@
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.13.1",
+    "resolve-url-loader": "^3.1.1",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
@@ -53,5 +55,6 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2"
-  }
+  },
+  "dependencies": {}
 }

src/assets/images/graph-paper.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>

src/assets/images/plus.svg

@@ -0,0 +1,32 @@
+<svg viewBox="0 0 256 256" width="256" height="256" 
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="noise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence baseFrequency="0.01 0.5" result="NOISE" numOctaves="2" />
+            <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="16" xChannelSelector="R" yChannelSelector="R" />
+        </filter>
+
+        <pattern id="ShapeT" x="0" y="0" width="64" height="64">
+            <path d="M48 28 L16 28 L16 36 L28 36 L28 52 L36 54 L36 36 L48 36 Z" fill="#006C7F" />
+        </pattern>
+
+        <pattern id="ShapeTri" x="0" y="0" width="64" height="64">
+            <path d="M16 48 L48 32 L32 16 Z" fill="#1D697C" />
+        </pattern>
+
+        <pattern id="Tile" x="0" y="0" width="128" height="128" patternUnits="userSpaceOnUse">
+            <rect fill="url(#ShapeT)" height="64" width="64" x="0" y="0">
+                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 32 32" to="0 32 32" dur="16s" repeatCount="indefinite"/>
+            </rect>
+
+            <rect fill="url(#ShapeTri)" height="64" width="64" x="64" y="64">
+                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 96 96" to="360 96 96" dur="8s" repeatCount="indefinite"/>
+            </rect>
+        </pattern>
+    </defs>
+
+    <g filter="url(#noise)">
+        <rect fill="url(#Tile)" height="128" width="128" x="0" y="0" />
+        <rect fill="url(#Tile)" height="128" width="128" x="128" y="128" />
+    </g>
+</svg>

src/index.css

@@ -0,0 +1,62 @@
+@import '~@fortawesome/fontawesome-pro/css/fontawesome.css';
+@import '~@fortawesome/fontawesome-pro/css/brands.css';
+@import '~@fortawesome/fontawesome-pro/css/duotone.css';
+@import '~@fortawesome/fontawesome-pro/css/light.css';
+@import '~@fortawesome/fontawesome-pro/css/regular.css';
+@import '~@fortawesome/fontawesome-pro/css/solid.css';
+@import '~unsemantic/assets/sass/unsemantic-grid-responsive.scss';
+
+@import 'stylesheets/chem-elements.css';
+@import 'stylesheets/footer.css';
+@import 'stylesheets/header.css';
+@import 'stylesheets/identities.css';
+@import 'stylesheets/intro.css';
+@import 'stylesheets/labels.css';
+
+body {
+    background: url(./assets/images/plus.svg) #044F67;
+    background-size: 8em;
+
+    font-size: 1em;
+    margin: 0;
+    min-height: 100vh;
+    padding: 5vh 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+html {
+    font-family: 'Helvetica Neue', Helvetica, Arial, PingFangTC-Light, 'Microsoft YaHei', 微软雅黑, 'STHeiti Light', STXihei, '华文细黑', Heiti, 黑体, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    background: url(./assets/images/container-background.svg) grey;
+    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
+    padding: 1em 0;
+    margin: 0 auto;
+    max-width: 64em;
+}
+
+.no-wrap {
+    display: inline-block;
+}
+
+#container, #container>*:first-child {
+    border-top-left-radius: 2em;
+}
+
+#container, #container>*:last-child, #container>*:last-child>*:last-child {
+    border-bottom-right-radius: 2em;
+}
+
+.header .small-labels .group::before, .header .small-labels .label::before {
+    color: #eee;
+}
+
+.identities .small-labels .group::before, .identities .small-labels .label::before {
+    color: #333;
+}

src/index.html

@@ -2,24 +2,23 @@
 <html>
 
 <head>
-    <link href="${require('./index.scss')}" rel="stylesheet">
+    <link href="${require('./index.css')}" rel="stylesheet">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
     <title>about amphineko</title>
 </head>
 
 <body>
     <div id="container">
         <div class="section header grid-container grid-parent">
-            <div class="split picture-container grid-30">
+            <div class="split picture-container grid-40">
                 <a href="${require('./assets/images/amphineko.png')}">
                     <img alt="picture of amphineko" class="picture"
                         src="${require('./assets/images/amphineko@1x.jpg')}">
                 </a>
             </div>
 
-            <div class="split grid-70">
+            <div class="split grid-60">
                 <div class="names">
                     <h1 class="name">
                         <span class="no-wrap">
@@ -33,7 +32,7 @@
                 <div class="label-group">
                     <span class="header">language</span>
                     <span class="label">
-                        <i aria-hidden="true" class="fas fa-language"></i>
+                        <i aria-hidden="true" class="fal fa-language"></i>
                         汉语
                     </span>
                     <span class="label">漢語</span>
@@ -43,7 +42,23 @@
                 <br />
 
                 <div class="label-group">
-                    <span class="header">project</span>
+                    <span class="header">education</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-university"></i>
+                        undergraduate
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">major</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-university"></i>
+                        network engineering
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">home-lab</span>
                     <span class="label">
                         <i aria-hidden="true" class="fas fa-box"></i>
                         Maeeko Laboratory
@@ -57,12 +72,10 @@
                         <span class="content">AS205058</span>
                     </a>
                     <a class="label" href="#">
-                        <span class="content"><del>AS396303</del></span>
+                        <span class="content"><small>AS396303</small></span>
                     </a>
                 </div>
 
-                <br />
-
                 <div class="label-group">
                     <span class="header">platforms</span>
                     <span class="label">
@@ -77,102 +90,170 @@
                         <i aria-hidden="true" class="fab fa-windows"></i>
                     </span>
                 </div>
+            </div>
+        </div>
 
-                <div class="label-group">
+        <div class="section intro">
-                    <span class="header">indents</span>
+            <h2><i aria-hidden="true" class="fa fa-chevron-right"></i>who am i?</h2>
-                    <span class="label">
+
-                        <i aria-hidden="true" class="fas fa-i-cursor"></i>
+            <div class="block grid-container grid-parent">
-                        spaces
+                <div class="split grid-50 mobile-grid-100">
-                    </span>
+                    <p>
+                        Has experience in full-stack projects <small>(and DevOps)</small>.<br />
+                        Operating own Internet autonomous system.<br />
+                        Contact me if you're interested to hire me :D
+                    </p>
+                    <p>
+                        过去有全栈项目开发的经验 <small>(还是 DevOps)</small><br />
+                        拥有自己的 Internet 自治系统<br />
+                        如果你对我有兴趣的话，欢迎来招募我
+                    </p>
+                    <p>
+                        是一個討厭生活在沒有計劃當中的人，<br />
+                        喜歡進行完備的考量。
+                    </p>
+                </div>
+
+                <div class="split grid-50 mobile-grid-100">
+                    <figure class="identities">
+                        <figcaption>open-source</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://github.com/amphineko/">
+                                    <i aria-hidden="true" class="fab fa-github"></i>
+                                    <span class="label">GitHub</span>
+                                    <span class="fake-link">@amphineko</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+
+                    <figure class="identities">
+                        <figcaption>social network</figcaption>
+                        <ul>
+                            <li class="shutdown">
+                                <a href="#">
+                                    <i aria-hidden="true" class="fab fa-google-plus"></i>
+                                    <span class="label">Google+</span>
+                                    <span class="fake-link">+amphineko</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://twitter.com/amphineko/">
+                                    <i aria-hidden="true" class="fab fa-twitter"></i>
+                                    <span class="label">Twitter</span>
+                                    <span class="fake-link">@amphineko</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://telegram.me/amphineko">
+                                    <i aria-hidden="true" class="fab fa-telegram"></i>
+                                    <span class="label">Telegram</span>
+                                    <span class="fake-link">@amphineko</span>
+                                </a>
+                            </li>
+                            <li class="shutdown">
+                                <a href="#">
+                                    <i aria-hidden="true" class="fab fa-weibo"></i>
+                                    <span class="text">weibo.com</span>
+                                    <span class="fake-link">[redacted]</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
                 </div>
             </div>
         </div>
 
         <div class="section intro">
-            <div class="block grid-container grid-parent">
+            <h2><i aria-hidden="true" class="fa fa-chevron-right"></i>my playlist!</h2>
-                <div class="split grid-50 mobile-grid-100">
-                    <p>
-                        <del>Cursed</del> Network Engineering student.<br />
-                        Has few experience in full-stack development.<br />
-                        Operating own autonomous system.<br />
-                        Contact me if you're interested to hire :D
-                    </p>
-                </div>
-
-                <div class="split grid-50 mobile-grid-100">
-                    <div class="label-group">
-                        <span class="header alt">open-source</span>
-                        <a class="label" href="https://github.com/amphineko">
-                            <i aria-hidden="true" class="fab fa-github"></i>
-                            <span class="title">GitHub</span>
-                            <span class="content">@amphineko</span>
-                        </a>
-                    </div>
-                    <div class="label-group">
-                        <span class="header alt">social</span>
-                        <a class="label" href="https://telegram.me/amphineko">
-                            <i aria-hidden="true" class="fab fa-telegram"></i aria-hidden="true">
-                            <span class="title">Telegram</span>
-                            <span class="content">@amphineko</span>
-                        </a>
-                        <a class="label" href="https://twitter.com/amphineko">
-                            <i aria-hidden="true" class="fab fa-twitter"></i>
-                            <span class="title">Twitter</span>
-                            <span class="content">amphineko</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
 
             <div class="block grid-container grid-parent">
                 <div class="split grid-50 mobile-grid-100">
                     <p>
-                        Music Game is LIFE!<br />
+                        ardently love fps, simulation and avg games<br />
-                        Love FPS and Simulation Games.<br />
+                        rhythm game is LIFE!<br />
-                        Ingress Mission Collector.
+                        ingress <small>(mission collection only)</small> agent
+                    </p>
+                    <p>
+                        热衷于第一人称射击、模拟和文字冒险游戏<br />
+                        音乐节奏是人生不可或缺的一部分！<br />
+                        还是一个 Ingress <small>(仅限任务收集)</small> 探员
+                    </p>
+                    <p>
+                        <del>dream to be railroad driver and civil aviation pilot</del>
+                        <br />
+                        <del>曾经梦想过成为机车司机和民航飞行员</del>
                     </p>
                 </div>
 
                 <div class="split grid-50 mobile-grid-100">
-                    <div class="label-group">
+                    <figure class="identities">
-                        <span class="header alt">music game</span>
+                        <figcaption>profiles</figcaption>
-                        <span class="label">
+                        <ul>
-                            <i aria-hidden="true" class="fas fa-compact-disc"></i>
+                            <li>
-                            Arcade: NekoSauc
+                                <a href="https://osu.ppy.sh/users/1344051">
-                        </span>
-                        <span class="label">
                                     <i aria-hidden="true" class="fab fa-accessible-icon"></i>
-                            osu! Rukatan
+                                    <span class="label">osu!</span>
-                        </span>
+                                    <span class="fake-link">Rukatan</span>
-                    </div>
+                                </a>
-
+                            </li>
-                    <div class="label-group">
+                            <li>
-                        <span class="header alt">Steam</span>
+                                <a href="https://steamcommunity.com/id/amphineko/">
-                        <span class="label">
                                     <i aria-hidden="true" class="fab fa-steam"></i>
-                            NekoSauce
+                                    <span class="label">Steam</span>
+                                    <span class="fake-link">白い桃</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+
+                    <div class="label-group">
+                        <span class="header alt">fps</span>
+
+                        <span class="label">Counter-Strike Global Offensive</span>
+                        <span class="label">Rainbow Six Siege</span>
+                    </div>
+
+                    <div class="label-group">
+                        <span class="header alt">simulation</span>
+
+                        <span class="label">
+                            <i aria-hidden="true" class="fal fa-city"></i>
+                            Cities: Skylines
                         </span>
                         <span class="label">
-                            CS:GO
+                            <i aria-hidden="true" class="fal fa-train"></i>
+                            Train Simulator<small>s</small>
+                        </span>
+                        <span class="label">
+                            <i aria-hidden="true" class="fal fa-subway"></i>
+                            電車でGO!
+                        </span>
+                        <span class="label">
+                            <i aria-hidden="true" class="fad fa-paper-plane"></i>
+                            FS 9 & FS X
+                        </span>
+                        <span class="label">
+                            <i aria-hidden="true" class="fad fa-plane-departure"></i>
+                            X-Plane
                         </span>
                     </div>
 
                     <div class="label-group">
-                        <span class="header alt">Uplay</span>
+                        <span class="header alt">rhythm</span>
-                        <span class="label">
-                            <i aria-hidden="true" class="fas fa-user"></i aria-hidden="true">
-                            AtomicAkarin
-                        </span>
-                        <span class="label">
-                            R6:S
-                        </span>
-                    </div>
 
-                    <div class="label-group">
-                        <span class="header alt">Niantic</span>
                         <span class="label">
-                            <i aria-hidden="true" class="fas fa-plane"></i>
+                            <i aria-hidden="true" class="fad fa-turntable"></i>
-                            Ingress <del>[CODENAME REDACTED]</del>
+                            BEMANI (iidx, jubeat, sdvx, etc.)
+                        </span>
+                        <span class="label">
+                            <i aria-hidden="true" class="fad fa-washer"></i>
+                            SEGA (chunithm, etc.)
+                        </span>
+                        <span class="label">
+                            <i aria-hidden="true" class="fad fa-plane"></i>
+                            TAITO (groove coaster)
                         </span>
                     </div>
                 </div>
@@ -191,7 +272,7 @@
             </a>
             <div class="copyright">
                 <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
-                Copyright © 2015-2019 amphineko. Illustrations have their own licenses.
+                Copyright © 2015-2020 amphineko. Illustrations have their own licenses.
             </div>
         </div>
     </div>

src/index.scss

@@ -1,64 +0,0 @@
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~@fortawesome/fontawesome-free/scss/brands.scss";
-@import "~@fortawesome/fontawesome-free/scss/regular.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~unsemantic/assets/sass/unsemantic-grid-responsive.scss";
-
-@import "stylesheets/chem-elements.scss";
-@import "stylesheets/footer.scss";
-@import "stylesheets/header.scss";
-@import "stylesheets/identities.scss";
-@import "stylesheets/intro.scss";
-@import "stylesheets/labels.scss";
-
-body {
-    background: url('./assets/images/header-background.svg') #466685;
-    background-size: cover;
-
-    font-size: 1em;
-    margin: 0;
-    min-height: 100vh;
-    padding: 0;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-html {
-    font-family: "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft YaHei", 微软雅黑, "STHeiti Light", STXihei, "华文细黑", Heiti, 黑体, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-#container {
-    background-position: center;
-    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
-    margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: -1em;
-    max-width: 64em;
-}
-
-.no-wrap {
-    display: inline-block;
-}
-
-$section-border-radius: 2em;
-
-#container, #container>*:first-child {
-    border-top-left-radius: $section-border-radius;
-}
-
-#container, #container>*:last-child, #container>*:last-child>*:last-child {
-    border-bottom-right-radius: $section-border-radius;
-}
-
-.header .small-labels .group::before, .header .small-labels .label::before {
-    color: #eee;
-}
-
-.identities .small-labels .group::before, .identities .small-labels .label::before {
-    color: #333;
-}

src/stylesheets/header.css

@@ -1,7 +1,8 @@
 .section.header {
-    background: rgba(0, 0, 0, 0.075);
+    background: url(../assets/images/badcable.png) rgba(0, 0, 0, 0.75);
-    // box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); 
+    background-position: bottom right;
-    // margin-top: -3.2em;
+    background-repeat: no-repeat;
+    background-size: auto 40%;
     padding-top: 1.6em;
     padding-bottom: 1.4em;
 }
@@ -10,6 +11,15 @@
     padding: 0 1em;
 }
 
+.section.header .splitter {
+    display: block;
+    border-left: 1em solid rgba(0, 0, 0, 0.15);
+    width: 1em;
+
+    /* this should be calculated from right panel height */
+    height: 24em;
+}
+
 .section.header .name {
     color: #f5f5f5;
     display: inline-block;

src/stylesheets/identities.css

@@ -0,0 +1,68 @@
+figure.identities {
+    border-bottom: 0.1em solid rgba(0, 0, 0, 0.05);
+    margin: 0.75em 0;
+}
+
+figure.identities:last-child {
+    border-bottom: none;
+}
+
+figure.identities figcaption {
+    color: #777;
+    line-height: 1.5em;
+    padding: 0 1em;
+}
+
+figure.identities ul {
+    margin: 0;
+    padding: 0;
+}
+
+figure.identities ul li {
+    display: block;
+    list-style: none;
+    margin: 0.5em 0;
+}
+
+figure.identities ul li a {
+    color: #333;
+    display: block;
+    font-size: 1.1em;
+    line-height: 1.75em;
+    padding: 0.5em 1em;
+    text-decoration: none;
+    transition-duration: .5s;
+}
+
+figure.identities ul li a:hover {
+    background-color: rgba(0, 0, 0, .015);
+    box-shadow: 0.1em 0.1em 0.25em #01697c1a, -0.1em -0.1em 0.25em #01697c26;
+}
+
+figure.identities ul li a i {
+    font-size: 1.1em;
+    text-align: center;
+    width: 1.5em;
+}
+
+figure.identities ul li a .fake-link {
+    color: #317589;
+    float: right;
+}
+
+/* shutdown */
+
+figure.identities ul li.shutdown a {
+    background: rgba(0, 0, 0, 0.1);
+    cursor: not-allowed;
+    text-decoration: line-through;
+}
+
+figure.identities ul li.shutdown a:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #ddd;
+}
+
+figure.identities ul li.shutdown a .fake-link {
+    text-decoration: line-through;
+}

src/stylesheets/identities.scss

@@ -1,11 +0,0 @@
-.identities {
-    background: transparent;
-}
-
-.identities .small-labels {
-    padding: 1em;
-}
-
-.identities .small-labels .group::before, .identities .small-labels .label::before {
-    color: #333;
-}

src/stylesheets/intro.css

@@ -0,0 +1,53 @@
+.intro {
+    background: rgba(255, 255, 255, 0.98);
+    margin: 1.5em 0;
+    padding: 1em 0;
+}
+
+.intro .block .split {
+    padding: 0 1em;
+}
+
+.intro h2 {
+    font-weight: 300;
+    letter-spacing: 0.02em;
+    line-height: 2em;
+    margin: 0;
+}
+
+.intro h2 i.fa {
+    margin: 0.25em;
+    text-align: center;
+    width: 1em;
+}
+
+.intro p {
+    border-left: 0.25em solid #006080;
+    color: #555;
+    font-size: 1.2em;
+    font-weight: 300;
+    line-height: 1.75em;
+    margin: 1em 0;
+    overflow: auto;
+    padding: 0.5em 0.5em;
+}
+
+.intro figure.identities + .label-group {
+    margin-top: 2em;
+}
+
+.intro .label-group .header.alt {
+    color: #777;
+    margin-left: 1.5em;
+}
+
+.intro .label-group .label {
+    background: transparent;
+    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
+    transition-duration: .5s;
+}
+
+.intro .label-group .label:hover {
+    background-color: rgba(0, 0, 0, .015);
+    box-shadow: 0.1em 0.1em 0.25em #01697c1a, -0.1em -0.1em 0.25em #01697c26;
+}

src/stylesheets/intro.scss

@@ -1,19 +0,0 @@
-.intro {
-    background: rgba(255, 255, 255, 0.98);
-    padding: 1em 0;
-}
-
-.intro .block .split {
-    padding: 0 1em;
-}
-
-.intro p {
-    border-left: 0.25em solid #006080;
-    color: #555;
-    font-size: 1.2em;
-    font-weight: 300;
-    line-height: 1.75em;
-    margin: 1em 0;
-    overflow: auto;
-    padding: 0.5em 0.5em;
-}

src/stylesheets/labels.css

@@ -30,17 +30,12 @@
     padding: 0 0.6em;
 }
 
-.label-group .label:last-child {
-    $radius: 0.5em;
-
-    border-bottom-right-radius: $radius;
-    border-top-right-radius: $radius;
-}
-
 .label-group a.label {
     text-decoration: none;
 }
 
 .label-group .label i {
+    font-size: 1.2em;
     margin-right: 0.25em;
+    vertical-align: -0.05em;
 }