overhaul

2019-03-22 18:50:33 +03:00
parent 9b48faf931
commit 63d54fe72c
49 changed files with 4888 additions and 1525 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,38 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/recommended",
+    "@vue/standard"
+  ],
+  "rules": {
+    "vue/script-indent": [
+      "error",
+      2,
+      {
+        "baseIndent": 1,
+        "switchCase": 0
+      }
+    ],
+    "vue/component-name-in-template-casing": [
+      "error",
+      "kebab-case"
+    ],
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 3
+    }]
+  },
+  "overrides": [
+    {
+      "files": ["*.vue"],
+      "rules": {
+        "indent": "off"
+      }
+    }
+  ],
+  "parserOptions": {
+    "parser": "babel-eslint"
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,21 @@
-/node_modules
+.DS_Store
+node_modules
 /dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -0,0 +1,56 @@
+{
+  "processors": [
+    "stylelint-processor-html"
+  ],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order"
+  ],
+  "rules": {
+    "no-empty-source": null,
+    "block-opening-brace-space-after": null,
+    "block-opening-brace-space-before": null,
+    "block-closing-brace-space-before": null,
+    "block-closing-brace-newline-before": null,
+    "declaration-block-trailing-semicolon": "never",
+    "indentation": null,
+    "string-quotes": ["single", {"severity": "warning"}],
+    "no-duplicate-selectors": true,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "selector-combinator-space-after": "always",
+    "selector-attribute-quotes": "always",
+    "selector-attribute-operator-space-before": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-brackets-space-inside": "never",
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always",
+    "property-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "number-leading-zero": "always",
+    "function-url-quotes": "always",
+    "font-weight-notation": "named-where-possible",
+    "font-family-name-quotes": "always-where-recommended",
+    "comment-whitespace-inside": "always",
+    "at-rule-no-vendor-prefix": true,
+    "rule-empty-line-before": [
+      "always-multi-line",
+      {
+        "ignore": "first-nested"
+      }
+    ],
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-no-vendor-prefix": true,
+    "media-feature-range-operator-space-before": "always",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-colon-space-before": "never",
+    "media-feature-colon-space-after": "always",
+    "no-descending-specificity": false,
+    "declaration-empty-line-before": null,
+    "property-no-unknown": true,
+    "selector-list-comma-newline-after": "always-multi-line"
+  }
+}
--- a/2
+++ b/2
@@ -1 +1 @@
-github.vladfaust.com
+github.vladfaust.com
--- a/README.md
+++ b/README.md
@@ -0,0 +1,29 @@
+# my-website
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/index.html
+++ b/index.html
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Redirecting...</title>
-</head>
-<body>
-  <script type="text/javascript">
-    window.location.replace("https://vladfaust.com");
-  </script>
-</body>
-</html>
--- a/package.json
+++ b/package.json
@@ -1,35 +1,35 @@
 {
-  "name": "vladfaust.github.io",
-  "version": "1.0.0",
-  "description": "Vlad Faust's personal page",
+  "name": "my-website",
+  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "webpack-dev-server",
-    "build": "webpack"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vladfaust/vladfaust.github.io.git"
+  "dependencies": {
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
  },
-  "author": "Vlad Faust <mail@vladfaust.com>",
-  "license": "UNLICENSED",
-  "bugs": {
-    "url": "https://github.com/vladfaust/vladfaust.github.io/issues"
-  },
-  "homepage": "https://github.com/vladfaust/vladfaust.github.io#readme",
  "devDependencies": {
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.11",
-    "html-webpack-plugin": "^3.2.0",
+    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/cli-plugin-eslint": "^3.5.0",
+    "@vue/cli-service": "^3.5.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
-    "node-sass-json-importer": "^4.0.1",
    "normalize.css": "^8.0.1",
    "pug": "^2.0.3",
-    "pug-loader": "^2.4.0",
-    "sass-loader": "^7.0.1",
-    "style-loader": "^0.21.0",
-    "webpack": "^4.8.3",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
+    "pug-plain-loader": "^1.0.0",
+    "sass-loader": "^7.1.0",
+    "stylelint": "^9.10.1",
+    "stylelint-config-rational-order": "^0.0.4",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-csstree-validator": "^1.3.0",
+    "stylelint-processor-html": "^1.0.0",
+    "vue-template-compiler": "^2.5.21"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/me.jpg
+++ b/public/img/me.jpg
--- a/public/img/patreon-small.svg
+++ b/public/img/patreon-small.svg
--- a/public/img/patreon/bot.png
+++ b/public/img/patreon/bot.png
--- a/public/img/patreon/button-rounded.svg
+++ b/public/img/patreon/button-rounded.svg
--- a/public/img/patreon/goal-germany.png
+++ b/public/img/patreon/goal-germany.png
--- a/public/img/patreon/goal-russia.png
+++ b/public/img/patreon/goal-russia.png
--- a/public/img/patreon/goal-usa.png
+++ b/public/img/patreon/goal-usa.png
--- a/public/img/patreon/small-button.svg
+++ b/public/img/patreon/small-button.svg
--- a/public/img/patreon/supporters-screenshot.png
+++ b/public/img/patreon/supporters-screenshot.png
--- a/public/img/projects/crystaljobs.svg
+++ b/public/img/projects/crystaljobs.svg
@@ -0,0 +1,95 @@
+<svg width="2645.2" height="487.3" version="1.1" viewBox="0 0 2645.2 487.3" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(3.97e-6)">
+  <g transform="translate(-.23168 -31.245)">
+   <path d="m13.919 91.55c-1.4296 0.20517-2.1634-0.086655-4.873 1.0328l246.95 208.42-0.05403-209.4z" fill="#999"/>
+   <path d="m52.612 272.5-52.38 167.01c4.4667 25.728 18.351 38.992 40.449 41.384l215.32 0.10146-165.73-180.04c-23.654-7.8428-29.964-18.285-37.655-28.456z" fill="#474747"/>
+   <path d="m4.9158 95.591 47.696 176.91c8.6643 18.349 21.889 26.3 37.655 28.456l165.73 0.04226-246.95-208.42c-1.4675 0.82101-2.8634 1.7852-4.13 3.0079z" fill="#808080"/>
+   <path d="m0.47183 104.44-0.24015 335.08 52.38-167.01-47.696-176.91c-2.0663 1.3403-3.5159 4.3767-4.4439 8.8473z" fill="#666"/>
+   <path d="m256 301v180l-165.73-180.04z" fill="#4d4d4d"/>
+   <g>
+    <path d="m151.3 91.531c-3.6258-32.935 11.956-56.874 40.249-60.286-1.5356 7.0778-3.242 13.463-5.286 20.592-1.8975 6.6181-3.6956 13.226-4.8029 19.765-1.1199 6.6135-1.3731 13.518-0.46799 19.929z" fill="#686868"/>
+    <path d="m181.89 69.132c2.0723-3.9447 3.305-7.391 11.997-8.2414l62.116 0.10929-64.453-29.755c-3.3683 12.823-7.4683 26.602-9.6604 37.887z" fill="#565656"/>
+    <path d="m497.97 91.55c1.4296 0.20517 2.1634-0.08665 4.873 1.0328l-246.95 208.42 0.054-209.4z" fill="#bdbdbd"/>
+    <path d="m459.28 272.5 52.38 167.01c-4.4666 25.728-18.351 38.992-40.449 41.384l-215.32 0.10146 165.73-180.04c23.706-5.3078 30.42-17.104 37.655-28.456z" fill="#686868"/>
+    <path d="m506.98 95.591-47.696 176.91c-8.6643 18.349-21.889 26.3-37.655 28.456l-165.73 0.04226 246.95-208.42c1.4675 0.82101 2.8634 1.7852 4.13 3.0079z" fill="#9c9c9c"/>
+    <path d="m511.42 104.44 0.24015 335.08-52.38-167.01 47.696-176.91c2.0663 1.3403 3.5159 4.3767 4.4439 8.8473z" fill="#818181"/>
+    <path d="m255.89 301v180l165.73-180.04z" fill="#5a5a5a"/>
+    <path d="m360.65 91.531c3.6258-32.935-12.009-56.874-40.302-60.286 1.5356 7.0778 3.242 13.463 5.286 20.592 1.8975 6.6181 3.6956 13.226 4.8029 19.765 1.1199 6.6135 1.5332 13.518 0.62809 19.929z" fill="#a9a9a9"/>
+    <path d="m330.01 69.132c-1.7042-3.0855-3.3506-7.3519-11.997-8.2414l-62.116 0.10929 64.453-29.755c3.2241 12.632 7.2998 25.926 9.6604 37.887z" fill="#707070"/>
+    <path d="m191.55 31.245h128.8l-64.345 29.755z" fill="#b0b0b0"/>
+   </g>
+  </g>
+  <g transform="translate(-.23168 -31.245)">
+   <path d="m13.919 91.55c-1.4296 0.20517-2.1634-0.086655-4.873 1.0328l246.95 208.42-0.05403-209.4z" fill="#999"/>
+   <path d="m52.612 272.5-52.38 167.01c4.4667 25.728 18.351 38.992 40.449 41.384l215.32 0.10146-165.73-180.04c-23.654-7.8428-29.964-18.285-37.655-28.456z" fill="#474747"/>
+   <path d="m4.9158 95.591 47.696 176.91c8.6643 18.349 21.889 26.3 37.655 28.456l165.73 0.04226-246.95-208.42c-1.4675 0.82101-2.8634 1.7852-4.13 3.0079z" fill="#808080"/>
+   <path d="m0.47183 104.44-0.24015 335.08 52.38-167.01-47.696-176.91c-2.0663 1.3403-3.5159 4.3767-4.4439 8.8473z" fill="#666"/>
+   <path d="m256 301v180l-165.73-180.04z" fill="#4d4d4d"/>
+   <g>
+    <path d="m151.3 91.531c-3.6258-32.935 11.956-56.874 40.249-60.286-1.5356 7.0778-3.242 13.463-5.286 20.592-1.8975 6.6181-3.6956 13.226-4.8029 19.765-1.1199 6.6135-1.3731 13.518-0.46799 19.929z" fill="#686868"/>
+    <path d="m181.89 69.132c2.0723-3.9447 3.305-7.391 11.997-8.2414l62.116 0.10929-64.453-29.755c-3.3683 12.823-7.4683 26.602-9.6604 37.887z" fill="#565656"/>
+    <path d="m497.97 91.55c1.4296 0.20517 2.1634-0.08665 4.873 1.0328l-246.95 208.42 0.054-209.4z" fill="#bdbdbd"/>
+    <path d="m459.28 272.5 52.38 167.01c-4.4666 25.728-18.351 38.992-40.449 41.384l-215.32 0.10146 165.73-180.04c23.706-5.3078 30.42-17.104 37.655-28.456z" fill="#686868"/>
+    <path d="m506.98 95.591-47.696 176.91c-8.6643 18.349-21.889 26.3-37.655 28.456l-165.73 0.04226 246.95-208.42c1.4675 0.82101 2.8634 1.7852 4.13 3.0079z" fill="#9c9c9c"/>
+    <path d="m511.42 104.44 0.24015 335.08-52.38-167.01 47.696-176.91c2.0663 1.3403 3.5159 4.3767 4.4439 8.8473z" fill="#818181"/>
+    <path d="m255.89 301v180l165.73-180.04z" fill="#5a5a5a"/>
+    <path d="m360.65 91.531c3.6258-32.935-12.009-56.874-40.302-60.286 1.5356 7.0778 3.242 13.463 5.286 20.592 1.8975 6.6181 3.6956 13.226 4.8029 19.765 1.1199 6.6135 1.5332 13.518 0.62809 19.929z" fill="#a9a9a9"/>
+    <path d="m330.01 69.132c-1.7042-3.0855-3.3506-7.3519-11.997-8.2414l-62.116 0.10929 64.453-29.755c3.2241 12.632 7.2998 25.926 9.6604 37.887z" fill="#707070"/>
+    <path d="m191.55 31.245h128.8l-64.345 29.755z" fill="#b0b0b0"/>
+   </g>
+  </g>
+  <g transform="translate(-.23168 -31.245)">
+   <path d="m13.919 91.55c-1.4296 0.20517-2.1634-0.086655-4.873 1.0328l246.95 208.42-0.05403-209.4z" fill="#999"/>
+   <path d="m52.612 272.5-52.38 167.01c4.4667 25.728 18.351 38.992 40.449 41.384l215.32 0.10146-165.73-180.04c-23.654-7.8428-29.964-18.285-37.655-28.456z" fill="#474747"/>
+   <path d="m4.9158 95.591 47.696 176.91c8.6643 18.349 21.889 26.3 37.655 28.456l165.73 0.04226-246.95-208.42c-1.4675 0.82101-2.8634 1.7852-4.13 3.0079z" fill="#808080"/>
+   <path d="m0.47183 104.44-0.24015 335.08 52.38-167.01-47.696-176.91c-2.0663 1.3403-3.5159 4.3767-4.4439 8.8473z" fill="#666"/>
+   <path d="m256 301v180l-165.73-180.04z" fill="#4d4d4d"/>
+   <g>
+    <path d="m151.3 91.531c-3.6258-32.935 11.956-56.874 40.249-60.286-1.5356 7.0778-3.242 13.463-5.286 20.592-1.8975 6.6181-3.6956 13.226-4.8029 19.765-1.1199 6.6135-1.3731 13.518-0.46799 19.929z" fill="#686868"/>
+    <path d="m181.89 69.132c2.0723-3.9447 3.305-7.391 11.997-8.2414l62.116 0.10929-64.453-29.755c-3.3683 12.823-7.4683 26.602-9.6604 37.887z" fill="#565656"/>
+    <path d="m497.97 91.55c1.4296 0.20517 2.1634-0.08665 4.873 1.0328l-246.95 208.42 0.054-209.4z" fill="#bdbdbd"/>
+    <path d="m459.28 272.5 52.38 167.01c-4.4666 25.728-18.351 38.992-40.449 41.384l-215.32 0.10146 165.73-180.04c23.706-5.3078 30.42-17.104 37.655-28.456z" fill="#686868"/>
+    <path d="m506.98 95.591-47.696 176.91c-8.6643 18.349-21.889 26.3-37.655 28.456l-165.73 0.04226 246.95-208.42c1.4675 0.82101 2.8634 1.7852 4.13 3.0079z" fill="#9c9c9c"/>
+    <path d="m511.42 104.44 0.24015 335.08-52.38-167.01 47.696-176.91c2.0663 1.3403 3.5159 4.3767 4.4439 8.8473z" fill="#818181"/>
+    <path d="m255.89 301v180l165.73-180.04z" fill="#5a5a5a"/>
+    <path d="m360.65 91.531c3.6258-32.935-12.009-56.874-40.302-60.286 1.5356 7.0778 3.242 13.463 5.286 20.592 1.8975 6.6181 3.6956 13.226 4.8029 19.765 1.1199 6.6135 1.5332 13.518 0.62809 19.929z" fill="#a9a9a9"/>
+    <path d="m330.01 69.132c-1.7042-3.0855-3.3506-7.3519-11.997-8.2414l-62.116 0.10929 64.453-29.755c3.2241 12.632 7.2998 25.926 9.6604 37.887z" fill="#707070"/>
+    <path d="m191.55 31.245h128.8l-64.345 29.755z" fill="#b0b0b0"/>
+   </g>
+  </g>
+ </g>
+ <g transform="translate(390.04 46.456)">
+  <path d="m-134.38 178.58-62.081-0.0755c-8.3026 1.6348-10.934 7.0506-12.679 13.057v31.698z" fill="#fc0"/>
+  <path d="m-209.14 223.26-0.15095 32.528c2.3058 4.9866 2.9668 10.729 13.736 12.638l61.283 0.1545z" fill="#f7c500"/>
+  <path d="m-209.14 223.26c24.813 15.02 49.948 30.301 74.761 45.32 22.392-12.41 53.886-32.668 74.87-45.32-24.939-14.882-49.93-29.799-74.87-44.68-25.924 15.471-52.499 31.395-74.761 44.68z" fill="#ffd429"/>
+  <path d="m-134.38 178.58 62.189-0.0755c8.3026 1.6348 10.934 7.0506 12.679 13.057v31.698z" fill="#ffdc50"/>
+  <path d="m-59.51 223.26 0.15095 32.713c-2.3058 4.9866-3.0422 10.544-13.811 12.453l-61.208 0.1545z" fill="#fcc900"/>
+  <path d="m-134.38 178.58-62.081-0.0755c-8.3026 1.6348-10.934 7.0506-12.679 13.057v31.698z" fill="#fc0"/>
+  <path d="m-209.14 223.26-0.15095 32.528c2.3058 4.9866 2.9668 10.729 13.736 12.638l61.283 0.1545z" fill="#f7c500"/>
+  <path d="m-209.14 223.26c24.813 15.02 49.948 30.301 74.761 45.32 22.392-12.41 53.886-32.668 74.87-45.32-24.939-14.882-49.93-29.799-74.87-44.68-25.924 15.471-52.499 31.395-74.761 44.68z" fill="#ffd429"/>
+  <path d="m-134.38 178.58 62.189-0.0755c8.3026 1.6348 10.934 7.0506 12.679 13.057v31.698z" fill="#ffdc50"/>
+  <path d="m-59.51 223.26 0.15095 32.713c-2.3058 4.9866-3.0422 10.544-13.811 12.453l-61.208 0.1545z" fill="#fcc900"/>
+  <path d="m-134.38 178.58-62.081-0.0755c-8.3026 1.6348-10.934 7.0506-12.679 13.057v31.698z" fill="#fc0"/>
+  <path d="m-209.14 223.26-0.15095 32.528c2.3058 4.9866 2.9668 10.729 13.736 12.638l61.283 0.1545z" fill="#f7c500"/>
+  <path d="m-209.14 223.26c24.813 15.02 49.948 30.301 74.761 45.32 22.392-12.41 53.886-32.668 74.87-45.32-24.939-14.882-49.93-29.799-74.87-44.68-25.924 15.471-52.499 31.395-74.761 44.68z" fill="#ffd429"/>
+  <path d="m-134.38 178.58 62.189-0.0755c8.3026 1.6348 10.934 7.0506 12.679 13.057v31.698z" fill="#ffdc50"/>
+  <path d="m-59.51 223.26 0.15095 32.713c-2.3058 4.9866-3.0422 10.544-13.811 12.453l-61.208 0.1545z" fill="#fcc900"/>
+ </g>
+ <g fill="#474747" stroke-width="8.5027" aria-label="Crystal">
+  <path d="m737.32 341.06c-64.281 0-92.51-44.894-92.51-82.646 0-37.412 28.229-82.306 92.51-82.306 32.65 0 55.098 17.346 55.098 17.346l27.209-54.417s-31.29-25.848-92.169-25.848c-79.585 0-152.03 65.301-152.03 145.91 0 80.266 72.783 144.89 152.03 144.89 60.879 0 92.169-25.848 92.169-25.848l-27.209-54.417s-22.447 17.346-55.098 17.346z" fill="#474747" stroke-width="8.5027"/>
+  <path d="m844.42 398.88h60.199v-91.829c0-4.4214 4.4214-35.371 35.711-35.371 20.066 0 31.29 9.523 31.29 9.523l25.168-51.016s-15.645-10.883-38.092-10.883c-34.351 0-53.397 30.27-53.397 30.27h-0.68021v-25.168h-60.199z"/>
+  <g fill="#474747" stroke-width="8.5027">
+   <path d="m1161.2 224.4-41.493 89.449-48.636-89.449h-69.382l82.646 147.27-60.199 115.64h69.382l137.06-262.9z"/>
+   <path d="m1310.6 219.3c-45.915 0-76.184 20.407-76.184 56.118 0 26.188 17.686 38.432 35.371 47.615 19.726 10.203 38.772 11.224 38.772 23.808 0 11.564-10.203 12.584-18.706 12.584-19.386 0-43.194-20.066-43.194-20.066l-24.488 41.153s25.168 23.467 67.342 23.467c35.711 0 82.646-8.1626 82.646-59.519 0-35.711-29.93-48.636-53.057-55.778-14.965-4.7615-27.209-7.4824-27.209-16.665 0-8.1626 5.4417-10.543 18.706-10.543 18.366 0 38.772 10.883 38.772 10.883l19.726-39.453s-24.828-13.604-58.499-13.604z"/>
+   <path d="m1409.1 224.4h-25.168v45.915h25.168v67.001c0 30.95 11.564 66.661 59.519 66.661 24.828 0 44.214-10.883 44.214-10.883l-14.965-48.636s-7.1423 5.4417-14.965 5.4417c-9.5231 0-13.604-7.8225-13.604-24.148v-55.438h36.732v-45.915h-36.732v-64.961h-60.199z"/>
+   <path d="m1519.8 311.81c0 51.016 35.711 92.169 86.728 92.169 23.808 0 44.214-10.543 57.138-24.828h0.6803v19.726h59.519v-174.48h-60.199v16.665c-14.284-13.944-33.671-21.767-57.138-21.767-51.016 0-86.728 41.493-86.728 92.51zm63.94 0c0-24.148 18.026-41.153 40.813-41.153 22.447 0 40.473 17.005 40.473 41.153 0 23.808-17.006 40.813-40.473 40.813-24.488 0-40.813-17.005-40.813-40.813z"/>
+   <path d="m1764.9 398.88h60.199v-292.49h-60.199z"/>
+  </g>
+ </g>
+ <g fill="#f7c500" stroke-width="8.5027" aria-label="Jobs">
+  <path d="m2015.4 118.29h-63.94v185.02c0 28.229-13.944 39.453-32.31 39.453-16.325 0-36.392-19.046-36.392-19.046l-20.407 53.397s25.508 26.869 65.641 26.869c56.118 0 87.408-29.249 87.408-84.347z"/>
+  <path d="m2040.1 311.81c0 53.737 42.174 92.169 105.09 92.169 60.199 0 104.07-38.432 104.07-92.169 0-54.417-46.255-92.51-104.07-92.51-58.839 0-105.09 38.092-105.09 92.51zm63.94 0c0-24.148 18.026-41.153 40.813-41.153 22.447 0 40.473 17.005 40.473 41.153 0 23.808-17.005 40.813-40.473 40.813-24.488 0-40.813-17.005-40.813-40.813z"/>
+  <path d="m2481.3 311.81c0-51.016-35.711-92.51-86.728-92.51-23.468 0-42.854 7.8225-57.138 21.767v-134.68h-60.199v292.49h59.519v-19.726h0.6802c12.924 14.285 33.331 24.828 57.138 24.828 51.016 0 86.728-41.153 86.728-92.169zm-63.94 0c0 23.808-16.325 40.813-40.813 40.813-23.468 0-40.473-17.005-40.473-40.813 0-24.148 18.026-41.153 40.473-41.153 22.787 0 40.813 17.005 40.813 41.153z"/>
+  <path d="m2583.6 219.3c-45.915 0-76.184 20.407-76.184 56.118 0 26.188 17.686 38.432 35.371 47.615 19.726 10.203 38.772 11.224 38.772 23.808 0 11.564-10.203 12.584-18.706 12.584-19.386 0-43.194-20.066-43.194-20.066l-24.488 41.153s25.168 23.467 67.342 23.467c35.711 0 82.646-8.1626 82.646-59.519 0-35.711-29.93-48.636-53.057-55.778-14.965-4.7615-27.209-7.4824-27.209-16.665 0-8.1626 5.4417-10.543 18.706-10.543 18.366 0 38.772 10.883 38.772 10.883l19.726-39.453s-24.828-13.604-58.499-13.604z"/>
+ </g>
+</svg>
--- a/public/img/projects/crystalworld.png
+++ b/public/img/projects/crystalworld.png
--- a/public/img/projects/onyx.svg
+++ b/public/img/projects/onyx.svg
@@ -0,0 +1,29 @@
+<svg width="205.67mm" height="63.57mm" version="1.1" viewBox="0 0 205.67 63.57" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-1.3888 -1.3995)">
+  <path d="m39.255 22.662-16.61 4.4504 4.4468 16.596 16.61-4.4504z" clip-rule="evenodd" fill="#7b7b7b" fill-rule="evenodd" stroke-width=".26421"/>
+  <path d="m2.3584 30.836c-0.55228 0.55245-0.86808 1.2567-0.94933 1.9739l37.846-10.148-5.6901-21.237c-0.97057-0.11838-1.9821 0.19285-2.7318 0.93837l-28.474 28.473z" fill="#191919"/>
+  <path d="m33.565 1.424 10.137 37.834 21.238-5.6901c0.10942-0.96496-0.20507-1.9678-0.94823-2.711l-28.488-28.488c-0.54529-0.54529-1.231-0.85829-1.9385-0.94458z" fill="#b3b3b3"/>
+  <path d="m27.091 43.708 5.6901 21.237c0.9688 0.11942 1.9788-0.18951 2.7289-0.93106l28.481-28.48 0.0011-0.0011c0.5518-0.55218 0.86586-1.2484 0.94714-1.9652z" fill="#191919"/>
+  <path d="m1.409 32.81c-0.10662 0.96236 0.20869 1.9619 0.94969 2.7029l28.488 28.488c0.54429 0.54429 1.2284 0.85652 1.9345 0.94348l-10.137-37.833c-3.348 0.87437-16.027 4.278-21.235 5.6982z" fill="#0a0a0a"/>
+ </g>
+ <g transform="translate(-1.3888 -1.3995)">
+  <path d="m39.255 22.662-16.61 4.4504 4.4468 16.596 16.61-4.4504z" clip-rule="evenodd" fill="#7b7b7b" fill-rule="evenodd" stroke-width=".26421"/>
+  <path d="m2.3584 30.836c-0.55228 0.55245-0.86808 1.2567-0.94933 1.9739l37.846-10.148-5.6901-21.237c-0.97057-0.11838-1.9821 0.19285-2.7318 0.93837l-28.474 28.473z" fill="#191919"/>
+  <path d="m33.565 1.424 10.137 37.834 21.238-5.6901c0.10942-0.96496-0.20507-1.9678-0.94823-2.711l-28.488-28.488c-0.54529-0.54529-1.231-0.85829-1.9385-0.94458z" fill="#b3b3b3"/>
+  <path d="m27.091 43.708 5.6901 21.237c0.9688 0.11942 1.9788-0.18951 2.7289-0.93106l28.481-28.48 0.0011-0.0011c0.5518-0.55218 0.86586-1.2484 0.94714-1.9652z" fill="#191919"/>
+  <path d="m1.409 32.81c-0.10662 0.96236 0.20869 1.9619 0.94969 2.7029l28.488 28.488c0.54429 0.54429 1.2284 0.85652 1.9345 0.94348l-10.137-37.833c-3.348 0.87437-16.027 4.278-21.235 5.6982z" fill="#0a0a0a"/>
+ </g>
+ <g transform="translate(-1.3888 -1.3995)">
+  <path d="m39.255 22.662-16.61 4.4504 4.4468 16.596 16.61-4.4504z" clip-rule="evenodd" fill="#7b7b7b" fill-rule="evenodd" stroke-width=".26421"/>
+  <path d="m2.3584 30.836c-0.55228 0.55245-0.86808 1.2567-0.94933 1.9739l37.846-10.148-5.6901-21.237c-0.97057-0.11838-1.9821 0.19285-2.7318 0.93837l-28.474 28.473z" fill="#191919"/>
+  <path d="m33.565 1.424 10.137 37.834 21.238-5.6901c0.10942-0.96496-0.20507-1.9678-0.94823-2.711l-28.488-28.488c-0.54529-0.54529-1.231-0.85829-1.9385-0.94458z" fill="#b3b3b3"/>
+  <path d="m27.091 43.708 5.6901 21.237c0.9688 0.11942 1.9788-0.18951 2.7289-0.93106l28.481-28.48 0.0011-0.0011c0.5518-0.55218 0.86586-1.2484 0.94714-1.9652z" fill="#191919"/>
+  <path d="m1.409 32.81c-0.10662 0.96236 0.20869 1.9619 0.94969 2.7029l28.488 28.488c0.54429 0.54429 1.2284 0.85652 1.9345 0.94348l-10.137-37.833c-3.348 0.87437-16.027 4.278-21.235 5.6982z" fill="#0a0a0a"/>
+ </g>
+ <g fill="#191919">
+  <path d="m102.97 29.633q0.0566 0.84942 0.0566 2.2085 0 1.3025-0.0566 2.1519-0.11326 2.7182-1.2458 5.0965-1.1326 2.3784-3.1146 4.1905-1.982 1.7555-4.8134 2.7748-2.7748 1.0193-6.2291 1.0193t-6.2857-1.0193q-2.7748-1.0193-4.7568-2.7748-1.982-1.8121-3.1146-4.1905t-1.2458-5.0965q-0.05663-0.84942-0.05663-2.1519 0-1.3591 0.05663-2.2085 0.05663-2.7182 1.1892-5.0965 1.1326-2.3784 3.1146-4.1339 2.0386-1.8121 4.8134-2.8314 2.8314-1.0759 6.2857-1.0759t6.2291 1.0759q2.8314 1.0193 4.8134 2.8314 2.0386 1.7555 3.1146 4.1339 1.1326 2.3784 1.2458 5.0965zm-20.613 4.0772q0.16988 2.1519 1.529 3.3977 1.4157 1.1892 3.6808 1.1892 2.2651 0 3.6242-1.1892 1.4157-1.2458 1.5856-3.3977 0.11326-0.84942 0.11326-1.9254t-0.11326-1.9254q-0.16988-2.1519-1.5856-3.3411-1.3591-1.2458-3.6242-1.2458-2.2651 0-3.6808 1.2458-1.3591 1.1892-1.529 3.3411-0.11326 0.84942-0.11326 1.9254t0.11326 1.9254z"/>
+  <path d="m136.8 44.98q0 0.62291-0.45303 1.0759-0.45303 0.45303-1.0759 0.45303h-7.1352q-0.62291 0-1.0759-0.45303-0.45303-0.45303-0.45303-1.0759v-14.327q0-2.435-1.1892-3.9074-1.1892-1.4723-3.7375-1.4723-2.5483 0-3.7375 1.4723-1.1326 1.4723-1.1326 3.9074v14.327q0 0.62291-0.45303 1.0759-0.45302 0.45303-1.0759 0.45303h-7.1352q-0.62291 0-1.0759-0.45303-0.45303-0.45303-0.45303-1.0759v-26.389q0-0.62291 0.45303-1.0759 0.45303-0.45303 1.0759-0.45303h6.852q0.62292 0 1.0759 0.45303 0.45303 0.45303 0.45303 1.0759v1.3025q0.45303-0.56628 1.1326-1.1892 0.67954-0.62291 1.6422-1.0759 0.96268-0.50966 2.2085-0.7928 1.3024-0.33977 3.0013-0.33977 2.7182 0 4.9833 0.7928 2.2651 0.73617 3.8507 2.3218 1.6422 1.5856 2.5483 4.0206 0.90606 2.435 0.90606 5.7761z"/>
+  <path d="m154.98 55.909q-0.16989 0.45303-0.56628 0.90605-0.3964 0.45303-1.0759 0.45303h-7.4183q-0.56629 0-0.96268-0.3964-0.3964-0.3964-0.3964-0.96268 0-0.22651 0.0566-0.3964l4.3038-10.136-11.439-26.559q-0.0566-0.16988-0.0566-0.3964 0-0.56628 0.3964-0.96268 0.3964-0.3964 0.96268-0.3964h7.4183q0.67954 0 1.0759 0.45303 0.3964 0.45303 0.56628 0.90605l6.2857 14.723 6.2291-14.723q0.16988-0.45303 0.56628-0.90605 0.3964-0.45303 1.0759-0.45303h7.4749q0.56628 0 0.96268 0.3964 0.3964 0.3964 0.3964 0.96268 0 0.22651-0.0566 0.3964z"/>
+  <path d="m195.53 31.785 9.91 12.628q0.22652 0.33977 0.22652 0.7928 0 0.50966-0.3964 0.90605t-0.96268 0.3964h-8.6641q-0.73617 0-1.1892-0.3964-0.3964-0.3964-0.62291-0.67954l-4.7002-5.946-4.6435 5.946q-0.22651 0.28314-0.67954 0.67954-0.3964 0.3964-1.1326 0.3964h-8.6641q-0.56628 0-0.96268-0.3964t-0.3964-0.90605q0-0.45303 0.22651-0.7928l10.023-12.855-9.7401-12.402q-0.22652-0.33977-0.22652-0.7928 0-0.50966 0.3964-0.90605 0.3964-0.3964 0.96268-0.3964h8.7774q0.73617 0 1.1326 0.3964 0.45302 0.3964 0.67954 0.67954l4.3604 5.6062 4.3604-5.6062q0.22651-0.28314 0.62291-0.67954 0.45303-0.3964 1.1892-0.3964h8.7774q0.56629 0 0.96268 0.3964 0.3964 0.3964 0.3964 0.90605 0 0.45303-0.22651 0.7928z"/>
+ </g>
+</svg>
--- a/public/img/projects/worcr.svg
+++ b/public/img/projects/worcr.svg
@@ -0,0 +1,41 @@
+<svg width="397.04mm" height="120.26mm" version="1.1" viewBox="0 0 397.04 120.26" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(113.07 -88.674)">
+  <g transform="translate(-163.35 -16.511)">
+   <path d="m135.27 133.52 35 11.666v40h-35v-51.667z" fill="#c03a2b"/>
+   <path d="m170.27 145.18-35 11.666v68.334h35v-40z" fill="#e57e25"/>
+   <path d="m92.771 225.18v-82.51l-7.4998-25.824v85.01z" fill="#80352d"/>
+   <path d="m92.771 119.35 35 11.667v54.167h-35v-65.834z" fill="#c03a2b"/>
+   <path d="m127.77 159.35-35 11.667v14.167h5.2e-4v25.834h-5.2e-4v14.167h35v-25.834h5.3e-4v-14.167h-5.3e-4z" fill="#e57e25"/>
+   <path d="m50.271 105.18 35 11.666v68.334h-35v-80z" fill="#c03a2b"/>
+   <path d="m85.271 173.52-35 11.666v40h35v-40z" fill="#e57e25"/>
+   <path d="m135.27 225.18v-68.334l-7.5003-25.833v70.843z" fill="#80352d"/>
+  </g>
+  <g transform="translate(-163.35 -16.511)">
+   <path d="m135.27 133.52 35 11.666v40h-35v-51.667z" fill="#c03a2b"/>
+   <path d="m170.27 145.18-35 11.666v68.334h35v-40z" fill="#e57e25"/>
+   <path d="m92.771 225.18v-82.51l-7.4998-25.824v85.01z" fill="#80352d"/>
+   <path d="m92.771 119.35 35 11.667v54.167h-35v-65.834z" fill="#c03a2b"/>
+   <path d="m127.77 159.35-35 11.667v14.167h5.2e-4v25.834h-5.2e-4v14.167h35v-25.834h5.3e-4v-14.167h-5.3e-4z" fill="#e57e25"/>
+   <path d="m50.271 105.18 35 11.666v68.334h-35v-80z" fill="#c03a2b"/>
+   <path d="m85.271 173.52-35 11.666v40h35v-40z" fill="#e57e25"/>
+   <path d="m135.27 225.18v-68.334l-7.5003-25.833v70.843z" fill="#80352d"/>
+  </g>
+  <g transform="translate(-163.35 -16.511)">
+   <path d="m135.27 133.52 35 11.666v40h-35v-51.667z" fill="#c03a2b"/>
+   <path d="m170.27 145.18-35 11.666v68.334h35v-40z" fill="#e57e25"/>
+   <path d="m92.771 225.18v-82.51l-7.4998-25.824v85.01z" fill="#80352d"/>
+   <path d="m92.771 119.35 35 11.667v54.167h-35v-65.834z" fill="#c03a2b"/>
+   <path d="m127.77 159.35-35 11.667v14.167h5.2e-4v25.834h-5.2e-4v14.167h35v-25.834h5.3e-4v-14.167h-5.3e-4z" fill="#e57e25"/>
+   <path d="m50.271 105.18 35 11.666v68.334h-35v-80z" fill="#c03a2b"/>
+   <path d="m85.271 173.52-35 11.666v40h35v-40z" fill="#e57e25"/>
+   <path d="m135.27 225.18v-68.334l-7.5003-25.833v70.843z" fill="#80352d"/>
+  </g>
+  <g fill="#c03a2b">
+   <path d="m71.492 128.38c-1.2083 0-2.0139 0.70485-2.1145 1.9132l-4.1284 47.124h-0.50346l-9.8679-47.225c-0.30208-1.2083-1.0069-1.8125-2.2152-1.8125h-6.0416c-1.2083 0-1.9132 0.60416-2.2152 1.8125l-9.9686 47.225h-0.50346l-3.927-47.124c-0.10069-1.2083-0.90624-1.9132-2.1145-1.9132h-9.5658c-1.309 0-2.0139 0.80554-1.9132 2.1146l8.2568 76.527c0.10069 1.309 0.80554 1.9132 2.1145 1.9132h10.069c1.2083 0 1.9132-0.60416 2.2152-1.7118l10.573-45.614 10.472 45.513c0.30208 1.2083 1.0069 1.8125 2.2152 1.8125h9.8679c1.309 0 2.0139-0.60416 2.1145-1.9132l8.6596-76.527c0.10069-1.309-0.60416-2.1146-1.9132-2.1146z"/>
+   <path d="m90.162 194.43c0 9.4651 5.0346 14.5 14.5 14.5h11.278c9.4651 0 14.5-5.0346 14.5-14.5v-51.555c0-9.4651-5.0346-14.5-14.5-14.5h-11.278c-9.4651 0-14.5 5.0346-14.5 14.5zm17.42 1.5104c-2.618 0-4.0277-1.309-4.0277-4.0277v-46.52c0-2.618 1.4097-4.0277 4.0277-4.0277h5.8402c2.618 0 4.0277 1.4097 4.0277 4.0277v46.52c0 2.7187-1.4097 4.0277-4.0277 4.0277z"/>
+   <path d="m181.89 142.88c0-9.4651-5.0346-14.5-14.5-14.5h-25.274c-1.0069 0-1.6111 0.60416-1.6111 1.6111v77.332c0 1.0069 0.60415 1.6111 1.6111 1.6111h10.472c1.0069 0 1.6111-0.60416 1.6111-1.6111v-25.375h6.9478l6.7464 25.576c0.20139 0.90624 0.70485 1.4097 1.7118 1.4097h10.472c1.1076 0 1.7118-0.60416 1.4097-1.8125l-6.9478-26.382c4.8332-2.1146 7.3506-6.545 7.3506-13.291zm-27.691 25.777v-26.986h9.9686c2.618 0 4.0277 1.4097 4.0277 4.0277v18.93c0 2.618-1.4097 4.0277-4.0277 4.0277z"/>
+   <path d="m232.41 142.88c0-9.4651-5.1353-14.5-14.5-14.5h-11.278c-9.4651 0-14.6 5.0346-14.6 14.5v51.555c0 9.4651 5.1353 14.5 14.6 14.5h11.278c9.3644 0 14.5-5.0346 14.5-14.5v-10.875c0-1.0069-0.60416-1.6111-1.6111-1.6111h-10.069c-1.1076 0-1.6111 0.60416-1.6111 1.6111v8.0554c0 2.7187-1.4097 4.0277-4.0277 4.0277h-5.236c-2.618 0-4.0277-1.309-4.0277-4.0277v-45.916c0-2.618 1.309-4.0277 4.0277-4.0277h5.236c2.618 0 4.0277 1.4097 4.0277 4.0277v8.0554c0 1.0069 0.50346 1.6111 1.6111 1.6111h10.069c1.0069 0 1.6111-0.60416 1.6111-1.6111z"/>
+   <path d="m283.96 142.88c0-9.4651-5.0346-14.5-14.5-14.5h-25.274c-1.0069 0-1.6111 0.60416-1.6111 1.6111v77.332c0 1.0069 0.60416 1.6111 1.6111 1.6111h10.472c1.0069 0 1.6111-0.60416 1.6111-1.6111v-25.375h6.9478l6.7464 25.576c0.20138 0.90624 0.70485 1.4097 1.7118 1.4097h10.472c1.1076 0 1.7118-0.60416 1.4097-1.8125l-6.9478-26.382c4.8332-2.1146 7.3506-6.545 7.3506-13.291zm-27.691 25.777v-26.986h9.9686c2.618 0 4.0277 1.4097 4.0277 4.0277v18.93c0 2.618-1.4097 4.0277-4.0277 4.0277z"/>
+  </g>
+ </g>
+</svg>
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Vlad Faust</title>
+    <meta name=description content="A passionate Crystal developer">
+
+    <!-- OG -->
+    <meta property=og:title content="Vlad Faust">
+    <meta property=og:description content="A passionate Crystal developer">
+    <meta property=og:type content=website>
+    <meta property=og:url content=https://vladfaust.com>
+    <meta property=og:image content="<%= BASE_URL %>img/me.jpg">
+
+    <!-- Twitter -->
+    <meta name=twitter:card content=summary_large_image>
+    <meta name=twitter:image content="<%= BASE_URL %>img/me.jpg">
+    <meta name=twitter:title content="Vlad Faust">
+    <meta name=twitter:description content="A passionate Crystal developer">
+
+    <!-- Icons -->
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87763635-1"></script>
+    <script type="text/javascript">
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-87763635-1');
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>I'm sorry but my website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,14 @@
+<template lang="pug">
+  #app
+    router-view
+</template>
+
+<style src="normalize.css/normalize.css"></style>
+
+<style lang="sass">
+  @import '@/assets/styles/index.sass'
+
+  html, body
+    margin: 0
+    padding: 0
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/index.sass
+++ b/src/assets/styles/index.sass
@@ -0,0 +1,2 @@
+@import './typography'
+@import './sections'
--- a/src/assets/styles/mixins.sass
+++ b/src/assets/styles/mixins.sass
@@ -0,0 +1 @@
+@import './mixins/center'
--- a/src/assets/styles/mixins/center.sass
+++ b/src/assets/styles/mixins/center.sass
@@ -0,0 +1,4 @@
+=center
+  display: flex
+  justify-content: center
+  align-items: center
--- a/src/assets/styles/sections.sass
+++ b/src/assets/styles/sections.sass
@@ -0,0 +1,15 @@
+@import './variables'
+@import './mixins'
+
+section
+  +center
+
+  width: 100%
+  padding: 4rem 0
+
+  &:not(:first-child)
+    border-top: $border
+
+  .wrapper
+    width: calc(100% - 4rem)
+    max-width: 768px
--- a/src/assets/styles/typography.sass
+++ b/src/assets/styles/typography.sass
@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700')
+
+body
+  font-size: 1.2rem
+  font-family: Nunito, sans-serif
+
+a
+  font-weight: bold
+  text-decoration: none
--- a/src/assets/styles/variables.sass
+++ b/src/assets/styles/variables.sass
@@ -0,0 +1,3 @@
+$color-main: #c03a2b
+$color-alternative: #e57e25
+$border: 1px solid rgba(0, 0, 0, 0.05)
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -0,0 +1,43 @@
+<template lang="pug">
+  .project
+    a(:href="url")
+      img.logo(:src="logo", :alt="title")
+</template>
+
+<script>
+  export default {
+    props: {
+      url: {
+        type: String,
+        required: true
+      },
+      logo: {
+        type: String,
+        required: true
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+  @import '@/assets/styles/mixins.sass'
+
+  .project
+    +center
+    padding: 2rem
+
+    a
+      line-height: 0
+      transition: all 100ms ease-out
+
+      &:hover
+        transform: translateY(-2px)
+
+    .logo
+      max-width: 15rem
+      max-height: 4rem
+</style>
--- a/src/components/Shard.vue
+++ b/src/components/Shard.vue
@@ -0,0 +1,38 @@
+<template lang="pug">
+  .shard
+    a.name(:href="url") {{name}}
+    .description
+      slot(name="description")
+</template>
+
+<script>
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+  .shard
+    height: 5rem
+    padding: 1.5rem
+    background-color: white
+    border: 1px solid rgba(0, 0, 0, 0.05)
+    border-radius: 4px
+
+    transition: all 100ms ease-out
+
+    &:hover
+      transform: translateY(-2px)
+
+    .description
+      font-size: 1.05rem
+</style>
--- a/src/index.js
+++ b/src/index.js
@@ -1 +0,0 @@
-import './style.sass'
--- a/src/index.pug
+++ b/src/index.pug
@@ -1,153 +0,0 @@
- var color = require("./settings.json").color;
- var stars = function (username, repo) {
-   return `https://img.shields.io/badge/dynamic/json.svg?label=star&url=https%3A%2F%2Fapi.github.com%2Frepos%2F${username}%2F${repo}&query=%24.stargazers_count&style=flat-square&colorA=black&colorB=red&maxAge=86400`
- };
-
-doctype html
-html
-  head
-    title Vlad Faust
-    meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
-    meta(property="og:type" content="website")
-    meta(property="og:title" content="Vlad Faust")
-    meta(property="og:site_name" content="VladFaust.com")
-    meta(property="og:description" content="An experienced developer creating fast and beautiful open-source projects")
-    meta(property="og:image" content="https://vladfaust.com/img/me.jpg")
-    meta(property="og:url" content="https://vladfaust.com")
-    script(src="bundle.js")
-    script(async, src="https://c6.patreon.com/becomePatronButton.bundle.js")
-    script(async, src="https://www.googletagmanager.com/gtag/js?id=UA-87763635-1")
-    script.
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-87763635-1');
-  body
-    div.bar
-    h1.top My name is Vlad Faust
-    p I'm a programmer with 7 years of developing experience and counting.
-    p
-      | I have almost 2 years of&nbsp;
-      a(href="https://crystal-lang.org") Crystal
-      |  experience as well. I've chosen it because of its beauty, expressiveness and efficiency.
-    p
-      | You can contact me via&nbsp;
-      a(href="mailto:mail@vladfaust.com") mail@vladfaust.com
-      | ,&nbsp;
-      a(href="https://github.com/vladfaust") GitHub
-      | ,&nbsp;
-      a(href="https://twitter.com/vladfaust") Twitter
-      | , or&nbsp;
-      a(href="https://t.me/vladfaust") Telegram
-      | .
-    h2 My Crystal projects:
-    ul.projects
-      li
-        a(href="https://github.com/onyxframework")
-          span.title Onyx Framework
-        span.wip (WIP)
-        |  powerful framework for modern applications
-      li
-        a(href="https://github.com/worcr")
-          span.title Worcr
-        span.wip (WIP)
-        |  heavy-duty background job processing
-      li
-        a(href="https://crystaljobs.org")
-          span.title Crystal Jobs
-        | the perfect place to find a Crystal developer
-      li
-        a(href="https://github.com/vladfaust/crystalworld")
-          span.title Crystal World
-          img(src=stars("vladfaust", "crystalworld"))
-        span
-          | the&nbsp;
-          a(href="https://realworld.io") realworld.io
-          |  back-end API implementation in Crystal
-    h2 My open-source Crystal shards:
-    ul.projects
-      li
-        a(href="https://github.com/vladfaust/stripe.cr")
-          span.title Stripe
-          img(src=stars("vladfaust", "stripe.cr"))
-        span
-          span.wip (WIP)
-          |  the&nbsp;
-          a(href="https://stripe.com/") Stripe
-          |  API wrapper
-      li
-        a(href="https://github.com/vladfaust/migrate.cr")
-          span.title Migrate
-          img(src=stars("vladfaust", "migrate.cr"))
-        |  a database migration solution
-      li
-        a.smaller(href="https://github.com/vladfaust/http-params-serializable")
-          span.title HTTP::Params::Serializable
-          img(src=stars("vladfaust", "http-params-serializable"))
-        |  the HTTP params parsing module
-      li
-        a(href="https://github.com/vladfaust/mini_redis")
-          span.title MiniRedis
-          img(src=stars("vladfaust", "mini_redis"))
-        span
-          |  a light-weight&nbsp;
-          a(href="https://redis.io") Redis
-          |  client
-      li
-        a(href="https://github.com/vladfaust/validations.cr")
-          span.title Validations
-          img(src=stars("vladfaust", "validations.cr"))
-        |  a validations mixin
-      li
-        a(href="https://github.com/vladfaust/callbacks.cr")
-          span.title Callbacks
-          img(src=stars("vladfaust", "callbacks.cr"))
-        |  the expressive callbacks module
-      li
-        a(href="https://github.com/vladfaust/cake-bake.cr")
-          span.title Cake-Bake
-          img(src=stars("vladfaust", "cake-bake.cr"))
-        span
-          |  an utility shard to bake&nbsp;
-          a(href="https://github.com/axvm/cake") Cakefile
-          |  into binary
-      li
-        a(href="https://github.com/vladfaust/tarantool.cr")
-          span.title Tarantool
-          img(src=stars("vladfaust", "tarantool.cr"))
-        span
-          |  the&nbsp;
-          a(href="https://tarantool.io") Tarantool
-          |  database driver
-      li
-        a(href="https://github.com/vladfaust/http-multiserver.cr")
-          span.title HTTP::Multiserver
-          img(src=stars("vladfaust", "http-multiserver.cr"))
-        |  an utility shard to map web applications
-      li
-        a(href="https://github.com/vladfaust/i18n.cr")
-          span.title I18n
-          img(src=stars("vladfaust", "i18n.cr"))
-        |  an internationalization shard
-      li
-        a(href="https://github.com/vladfaust/time_format.cr")
-          span.title TimeFormat
-          img(src=stars("vladfaust", "time_format.cr"))
-        |  a shard to humanize time spans
-    h2 My non-Crystal projects:
-    ul.projects
-      li
-        a(href="https://github.com/vladfaust/unity-wakatime")
-          span.title Unity Wakatime
-          img(src=stars("vladfaust", "unity-wakatime"))
-        |  a Unity Wakatime integration (C#)
-    h2 My supporters:
-    p.thanks
-      i Thanks to all my patrons, I can dedicate more time on building and supporting beautiful Open Source Software!
-    ul.supporters
-      li
-        a(href="https://github.com/ljuti") Lauri Jutila
-    .patreon-button
-      a(href="https://www.patreon.com/vladfaust")
-        img(src="/img/patreon.svg")
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router.js
+++ b/src/router.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    }
+  ]
+})
--- a/src/settings.json
+++ b/src/settings.json
@@ -1,3 +0,0 @@
-{
-  "color": "#0a83d8"
-}
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})
--- a/src/style.sass
+++ b/src/style.sass
@@ -1,86 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
-@import './settings.json'
-@import '~normalize.css/normalize.css'
-
-body
-  align-items: center
-  display: flex
-  flex-direction: column
-  font-family: 'Roboto', sans-serif
-  font-size: 18px
-  padding: 2rem
-  color: transparentize(black, 0.1)
-
-  > *
-    width: 100%
-    max-width: 600px
-
-p
-  margin: 0
-  word-wrap: break-word
-
-  & + p
-    margin-top: 1rem
-
-body, html
-  margin: 0
-
-.bar
-  position: absolute
-  top: 0
-  left: 0
-  max-width: 100%
-  height: 5px
-  background-color: $color
-
-h1, h2
-  margin: 0 0 1rem
-
-  &:not(.top)
-    margin: 1rem 0
-
-a
-  color: $color
-  font-weight: bold
-
-ul
-  padding: 0
-  margin: 0
-
-  .title
-    font-weight: bold
-
-  li
-    &:not(:first-of-type)
-      margin-top: 0.75rem
-
-    a
-      font-size: 1.2rem
-
-      img
-        display: inline-block
-        margin-left: 0.5rem
-        margin-bottom: -0.25rem
-
-ul.projects
-  list-style: none
-
-  .wip
-    font-style: italic
-    color: gray
-
-  a
-    display: table-cell
-
-    &.smaller
-      font-size: 95%
-
-ul.supporters
-  list-style: square
-  margin: 1rem 0
-
-.patreon-button
-  margin: 0.25rem 0 0
-
-  img
-    height: 50px
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,204 @@
+<template lang="pug">
+  #home
+    section.hello
+      .wrapper
+        .img-wrapper
+          img(src="/img/me.jpg")
+        .text
+          p Hello, my name is Vlad Faust.
+          p
+            | I'm a passionate developer with many years of experience. For the last two years I've been working on&nbsp;
+            a(href="https://crystal-lang.org") Crystal
+            |  ecosystem. I've chosen it because of its beauty, expressiveness and efficiency.
+          p
+            | You can follow me on&nbsp;
+            a(href="https://github.com/vladfaust") GitHub
+            |  and&nbsp;
+            a(href="https://twitter.com/vladfaust") Twitter
+            |  and send me e-mails to mail@vladfaust.com
+    section.projects
+      .wrapper
+        .title Projects I've been actively working on:
+        .list
+          project(
+            url="https://onyxframework.org"
+            logo="/img/projects/onyx.svg"
+            title="Onyx Framework"
+          )
+          project(
+            url="https://worcr.com"
+            logo="/img/projects/worcr.svg"
+            title="Worcr"
+          )
+          project(
+            url="https://crystaljobs.org"
+            logo="/img/projects/crystaljobs.svg"
+            title="Crystal Jobs"
+          )
+          project(
+            url="https://github.com/vladfaust/crystalworld"
+            logo="/img/projects/crystalworld.png"
+            title="Crystal World"
+          )
+    section.shards
+      .wrapper
+        .title I also maintain a number of Crystal shards:
+        .list
+          shard(
+            name="stripe.cr"
+            url="https://github.com/vladfaust/stripe.cr"
+          )
+            p(slot="description")
+              | A&nbsp;
+              a(href="https://stripe.com") Stripe
+              |  API wrapper
+          shard(
+            name="migrate.cr"
+            url="https://github.com/vladfaust/migrate.cr"
+          )
+            p(slot="description") A database migration solution
+          shard(
+            name="http-params-serializable"
+            url="https://github.com/vladfaust/http-params-serializable"
+          )
+            p(slot="description") An HTTP params parsing module
+          shard(
+            name="mini_redis"
+            url="https://github.com/vladfaust/mini_redis"
+          )
+            p(slot="description") A light-weight Redis client
+          shard(
+            name="validations.cr"
+            url="https://github.com/vladfaust/validations.cr"
+          )
+            p(slot="description") A validations mixin
+          shard(
+            name="callbacks.cr"
+            url="https://github.com/vladfaust/callbacks.cr"
+          )
+            p(slot="description") An expressive callbacks module
+          shard(
+            name="cake-bake.cr"
+            url="https://github.com/vladfaust/cake-bake.cr"
+          )
+            p(slot="description")
+              | An utility shard to bake&nbsp;
+              a(href="https://github.com/axvm/cake") Cakefile
+              |  into binary
+          shard(
+            name="tarantool.cr"
+            url="https://github.com/vladfaust/tarantool.cr"
+          )
+            p(slot="description")
+              | A&nbsp;
+              a(href="https://tarantool.io/") Tarantool
+              |  database driver
+          shard(
+            name="http-multiserver.cr"
+            url="https://github.com/vladfaust/http-multiserver.cr"
+          )
+            p(slot="description") An utility shard to map web applications
+          shard(
+            name="i18n.cr"
+            url="https://github.com/vladfaust/i18n.cr"
+          )
+            p(slot="description") An internationalization shard
+          shard(
+            name="time_format.cr"
+            url="https://github.com/vladfaust/time_format.cr"
+          )
+            p(slot="description") A shard to humanize time spans
+    section.patrons
+      .wrapper
+        .title Thanks to all my patrons, I can continue working on Open-Source Software:
+        ul
+          li
+            a(href="https://github.com/ljuti") Lauri Jutila
+          li
+            a(href="https://seendex.ru") Alexander Maslov
+          li Dainel Vera
+          li Anton Yordanov
+        a.button(href="https://patreon.com/vladfaust")
+          img(src="/img/patreon/button-rounded.svg")
+</template>
+
+<script>
+  import Project from '@/components/Project.vue'
+  import Shard from '@/components/Shard.vue'
+
+  export default {
+    components: {
+      Project,
+      Shard
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+  @import '@/assets/styles/mixins.sass'
+
+  section.hello
+    .wrapper
+      display: grid
+      grid-column-gap: 2rem
+      grid-template-columns: 1fr 2.25fr
+
+      .img-wrapper
+        +center
+
+        img
+          width: 100%
+          border-radius: 4px
+
+  section.projects
+    .wrapper
+      +center
+      flex-direction: column
+
+    .list
+      display: grid
+      grid-column-gap: 1px
+      grid-row-gap: 1px
+      grid-template-columns: repeat(2, 1fr)
+      grid-template-rows: repeat(2, 1fr)
+
+      margin-top: 1rem
+      padding: 0
+
+  section.shards
+    .wrapper
+      +center
+      flex-direction: column
+
+    .list
+      display: grid
+      grid-column-gap: 1rem
+      grid-row-gap: 1rem
+      grid-template-columns: repeat(3, 1fr)
+
+      margin-top: 2.5rem
+
+  section.patrons
+    .wrapper
+      +center
+      flex-direction: column
+
+    .button img
+      height: 3rem
+      transition: all 100ms ease-out
+
+      &:hover
+        transform: translateY(-2px)
+
+    ul
+      margin: 1.5rem 0
+      padding: 0
+      text-align: center
+      list-style: none
+
+      li
+        display: block
+
+        &:not(:first-of-type)
+          margin-top: 0.25rem
+</style>
--- a/static/img/me.jpg
+++ b/static/img/me.jpg
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,35 +0,0 @@
-var path = require('path');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var jsonImporter = require('node-sass-json-importer');
-
-module.exports = {
-  mode: 'production',
-  entry: path.resolve(__dirname, 'src/index.js'),
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js'
-  },
-  module: {
-    rules: [{
-      test: /\.s[ac]ss$/,
-      use: [
-        "style-loader",
-        "css-loader",
-        {
-          loader: "sass-loader",
-          options: {
-            importer: jsonImporter()
-          }
-        }
-      ]
-    }, {
-      test: /\.pug$/,
-      use: ["pug-loader"]
-    }]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({ template: './src/index.pug'} ),
-    new CopyWebpackPlugin([{ from: 'static' }])
-  ]
-};
--- a/yarn.lock
+++ b/yarn.lock