rewrite with webpack

2018-05-16 16:55:11 +03:00
parent f52068b291
commit 628adddb60
10 changed files with 6655 additions and 74 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
--- a/index.html
+++ b/index.html
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Vlad Faust</title>
-  <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=1" />
-  <link rel="stylesheet" href="stylesheets/style.css">
-  <!-- Yandex.Metrika counter -->
-  <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter33155678 = new Ya.Metrika({ id:33155678, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/33155678" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
-  <!-- /Yandex.Metrika counter -->
-</head>
-<body class="flex-container">
-<div class="flex-item">
-  <h1>Hello, my name is Vlad Faust.</h1>
-  <p>I love beautiful code. I have 2 years of <a href="https://www.ruby-lang.org">Ruby</a> experience. I'm a huge fan of <a href="https://crystal-lang.org">Crystal</a>.</p>
-  <h2>My projects:</h2>
-  <div id="projects">
-    <ul>
-      <li><a class="li-title" href="https://cashbackbot.io/48b7a1">Cashback Bot</a> - Save cash on purchases (Ruby);</li>
-      <li><a class="li-title" href="https://t.me/soundmemesbot">Soundmemes Bot</a> - Rickroll your friends (Crystal, <a href="https://github.com/vladfaust/soundmemes.cr">opensource</a>);</li>
-      <li><a class="li-title" href="https://github.com/vladfaust/tele.cr">Tele.cr</a> - Convenient Telegram Bot framework (Crystal, <a href="https://github.com/vladfaust/tele.cr">opensource</a>);</li>
-      <li class="old-project"><a class="li-title" href="https://play.google.com/store/apps/details?id=com.vladislavfaust.jumpinsweeties.android">Jumpin Sweeties</a> - Sweet Android game (Java / libGDX, <a href="https://bitbucket.org/vladfaust/jumpinsweeties">opensource</a>);</li>
-      <li class="old-project"><a class="li-title" href="http://xgm.guru/p/ufs">UFS Arena</a> - Warcraft III custom map (<a href="https://ru.wikipedia.org/wiki/Jass">JASS</a>).</li>
-    </ul>
-  </div>
-  <p>You can find me in <a href="https://vk.com/vladfaust">VK</a>, <a href="https://t.me/vladfaust">Telegram</a> and <a href="https://github.com/vladfaust">GitHub</a>.<br>I rarely check my inbox: <a href="mailto:mail@vladfaust.com">mail@vladfaust.com</a>.</p>
-</div>
-</body>
-</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "vladfaust.github.io",
+  "version": "1.0.0",
+  "description": "Vlad Faust's personal page",
+  "private": true,
+  "scripts": {
+    "build": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vladfaust/vladfaust.github.io.git"
+  },
+  "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",
+    "node-sass": "^4.9.0",
+    "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": "^2.1.3"
+  }
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1 @@
+import './style.sass'
--- a/src/index.pug
+++ b/src/index.pug
@@ -0,0 +1,88 @@
+doctype html
+html
+  head
+    title Hello, my name is 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:description" content="An experienced developer creating fast and beautiful applications in Crystal")
+    meta(property="og:image" content="https://vladfaust.com/img/me.jpg")
+    meta(property="og:url" content="https://vladfaust.com")
+    script(src="bundle.js")
+  body
+    div.bar
+    h1.top Hello, my name is Vlad Faust
+    p I love beautiful code.
+    p
+      | I have a whole year of&nbsp;
+      a(href="https://crystal-lang.org") Crystal
+      |  experience. I truly believe it will become the most popular language in the near future 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://vk.com/vladfaust") VK
+      | , or&nbsp;
+      a(href="https://t.me/vladfaust") Telegram
+      | .
+    h2 My Crystal projects:
+    ul.projects
+      li
+        a(href="https://github.com/vladfaust/prism")
+          span.title Prism
+          img(src="https://img.shields.io/github/stars/vladfaust/prism.svg?style=flat-square&label=Star")
+        |  an expressive web framework with typed params
+      li
+        a(href="https://github.com/vladfaust/core.cr")
+          span.title Core
+          img(src="https://img.shields.io/github/stars/vladfaust/core.cr.svg?style=flat-square&label=Star")
+        |  an expressive modular ORM
+      li
+        a(href="https://github.com/vladfaust/migrate.cr")
+          span.title Migrate
+          img(src="https://img.shields.io/github/stars/vladfaust/migrate.cr.svg?style=flat-square&label=Star")
+        |  a database migration solution
+      li
+        a(href="https://github.com/vladfaust/cake-bake.cr")
+          span.title Cake-Bake
+          img(src="https://img.shields.io/github/stars/vladfaust/cake-bake.cr.svg?style=flat-square&label=Star")
+        |  an utility shard to bake Cakefile (just like Rake tasks) into binaries
+      li
+        a(href="https://github.com/vladfaust/tarantool-crystal")
+          span.title Tarantool
+          img(src="https://img.shields.io/github/stars/vladfaust/tarantool-crystal.svg?style=flat-square&label=Star")
+        |  the Tarantool driver
+      li
+        a(href="https://github.com/vladfaust/http-multiserver.cr")
+          span.title HTTP::Multiserver
+          img(src="https://img.shields.io/github/stars/vladfaust/http-multiserver.cr.svg?style=flat-square&label=Star")
+        |  an utility shard to map web applications
+      li
+        a(href="https://github.com/vladfaust/i18n.cr")
+          span.title I18n
+          img(src="https://img.shields.io/github/stars/vladfaust/i18n.cr.svg?style=flat-square&label=Star")
+        |  an internationalization shard
+      li
+        a(href="https://github.com/vladfaust/time_format.cr")
+          span.title TimeFormat
+          img(src="https://img.shields.io/github/stars/vladfaust/time_format.cr.svg?style=flat-square&label=Star")
+        |  an utility shard to humanize time spans
+      li
+        a(href="https://t.me/soundmemesbot") Soundmemes Bot
+        |  a Telegram bot with 2.5m+ usages
+    h2 Other:
+    ul.projects
+      li
+        a(href="https://github.com/vladfaust/unity-wakatime")
+          span.title Unity Wakatime
+          img(src="https://img.shields.io/github/stars/vladfaust/unity-wakatime.svg?style=flat-square&label=Star")
+        |  a Unity Wakatime integration (C#)
+      li
+        a(href="https://play.google.com/store/apps/details?id=com.vladislavfaust.jumpinsweeties.android") Jumpin Sweeties
+        |  a beautiful Android game (Java, LibGDX)
+      li
+        a(href="http://xgm.guru/p/ufs") UFS Arena
+        |  a Warcraft 3 custom map (cJASS)
--- a/src/style.sass
+++ b/src/style.sass
@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto')
+
+body
+  align-items: center
+  display: flex
+  flex-direction: column
+  font-family: 'Roboto', sans-serif
+  font-size: 18px
+  padding: 2rem
+
+  > *
+    width: 100%
+    max-width: 600px
+
+p
+  margin: 0
+
+  & + p
+    margin-top: 1rem
+
+body, html
+  margin: 0
+
+.bar
+  position: absolute
+  top: 0
+  left: 0
+  max-width: 100%
+  height: 5px
+  background-color: #0a83d8
+
+h1, h2
+  margin: 0 0 1rem
+
+  &:not(.top)
+    margin: 1rem 0
+
+a
+  text-decoration: none
+  color: #0a83d8
+
+ul.projects
+  padding: 0
+  margin: 0
+  list-style: none
+
+  li
+    &:not(:first-of-type)
+      margin-top: 0.75rem
+
+    a
+      display: table-cell
+      font-size: 1.2rem
+
+      img
+        display: inline-block
+        margin-left: 0.25rem
+        margin-bottom: -0.25rem
--- a/static/img/me.jpg
+++ b/static/img/me.jpg
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -1,45 +0,0 @@
-body {
-  padding: 10px;
-  font-family: sans-serif;
-}
-
-.flex-container {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-item {
-  max-width: 600px;
-}
-
-a {
-  color: black;
-  font-weight: bold;
-}
-
-#projects {
-  max-width: 100%;
-  display: inline-block;
-}
-
-#projects ul {
-  margin: auto;
-}
-
-#projects li {
-  text-align: left;
-  list-style-type: square;
-}
-
-#projects li .li-title {
-  font-size: bigger;
-}
-
-#projects li.old-project {
-  opacity: 0.5;
-}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,29 @@
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+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",
+        "sass-loader"
+      ]
+    }, {
+      test: /\.pug$/,
+      use: ["pug-loader"]
+    }]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './src/index.pug'} ),
+    new CopyWebpackPlugin([{ from: 'static' }])
+  ]
+};
--- a/yarn.lock
+++ b/yarn.lock