New version

Gemfile

@@ -2,22 +2,16 @@
 # the following line to use "http://" instead
 source 'https://rubygems.org'
 
-gem "middleman", "~>3.4.0"
+gem 'middleman', '~>3.4.0'
 
 # Live-reloading plugin
-gem "middleman-livereload", "~> 3.1.0"
+gem 'middleman-livereload'
-
-# For faster file watcher updates on Windows:
-gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
-
-# Windows does not come with time zone data
-gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby]
 
 gem 'bootstrap-sass', require: false
 gem 'jquery-middleman'
 gem 'sass'
 gem 'bourbon'
-gem 'haml'
+gem 'slim'
 gem 'coffee-script'
 
 gem 'middleman-deploy'

Gemfile.lock

@@ -1,32 +1,32 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (4.2.4)
+    activesupport (4.2.5)
       i18n (~> 0.7)
       json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
-    autoprefixer-rails (6.0.3)
+    autoprefixer-rails (6.3.1)
       execjs
       json
-    bootstrap-sass (3.3.5.1)
+    bootstrap-sass (3.3.6)
-      autoprefixer-rails (>= 5.0.0.1)
+      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.0)
+      sass (>= 3.3.4)
-    bourbon (3.2.3)
+    bourbon (4.2.6)
-      sass (~> 3.2)
+      sass (~> 3.4)
-      thor
+      thor (~> 0.19)
     capybara (2.4.4)
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    chunky_png (1.3.4)
+    chunky_png (1.3.5)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.9.1.1)
+    coffee-script-source (1.10.0)
     compass (1.0.3)
       chunky_png (~> 1.2)
       compass-core (~> 1.0.2)
@@ -43,7 +43,7 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     erubis (2.7.0)
-    eventmachine (1.0.8)
+    eventmachine (1.0.9.1)
     execjs (2.6.0)
     ffi (1.9.10)
     haml (4.0.7)
@@ -57,21 +57,21 @@ GEM
       thor (>= 0.14, < 2.0)
     json (1.8.3)
     kramdown (1.9.0)
-    listen (3.0.3)
+    listen (3.0.5)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
-    middleman (3.4.0)
+    middleman (3.4.1)
       coffee-script (~> 2.2)
       compass (>= 1.0.0, < 2.0.0)
       compass-import-once (= 1.0.5)
       execjs (~> 2.0)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-core (= 3.4.0)
+      middleman-core (= 3.4.1)
       middleman-sprockets (>= 3.1.2)
       sass (>= 3.4.0, < 4.0)
       uglifier (~> 2.5)
-    middleman-core (3.4.0)
+    middleman-core (3.4.1)
       activesupport (~> 4.1)
       bundler (~> 1.1)
       capybara (~> 2.4.4)
@@ -87,25 +87,26 @@ GEM
       middleman-core (>= 3.2)
       net-sftp
       ptools
-    middleman-livereload (3.1.1)
+    middleman-livereload (3.4.6)
-      em-websocket (>= 0.2.0)
+      em-websocket (~> 0.5.1)
-      middleman-core (>= 3.0.2)
+      middleman-core (>= 3.3)
-      multi_json (~> 1.0)
+      rack-livereload (~> 0.3.15)
-      rack-livereload
     middleman-sprockets (3.4.2)
       middleman-core (>= 3.3)
       sprockets (~> 2.12.1)
       sprockets-helpers (~> 1.1.0)
       sprockets-sass (~> 1.3.0)
-    mime-types (2.6.2)
+    mime-types (3.0)
-    mini_portile (0.6.2)
+      mime-types-data (~> 3.2015)
-    minitest (5.8.1)
+    mime-types-data (3.2015.1120)
+    mini_portile2 (2.0.0)
+    minitest (5.8.3)
     multi_json (1.11.2)
     net-sftp (2.1.2)
       net-ssh (>= 2.6.5)
-    net-ssh (3.0.1)
+    net-ssh (3.0.2)
-    nokogiri (1.6.6.2)
+    nokogiri (1.6.7.1)
-      mini_portile (~> 0.6.0)
+      mini_portile2 (~> 2.0.0.rc2)
     padrino-helpers (0.12.5)
       i18n (~> 0.6, >= 0.6.7)
       padrino-support (= 0.12.5)
@@ -118,10 +119,13 @@ GEM
       rack
     rack-test (0.6.3)
       rack (>= 1.0)
-    rb-fsevent (0.9.6)
+    rb-fsevent (0.9.7)
     rb-inotify (0.9.5)
       ffi (>= 0.5.0)
-    sass (3.4.19)
+    sass (3.4.21)
+    slim (3.0.6)
+      temple (~> 0.7.3)
+      tilt (>= 1.3.3, < 2.1)
     sprockets (2.12.4)
       hike (~> 1.2)
       multi_json (~> 1.0)
@@ -132,6 +136,7 @@ GEM
     sprockets-sass (1.3.1)
       sprockets (~> 2.0)
       tilt (~> 1.1)
+    temple (0.7.6)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
@@ -151,14 +156,12 @@ DEPENDENCIES
   bootstrap-sass
   bourbon
   coffee-script
-  haml
   jquery-middleman
   middleman (~> 3.4.0)
   middleman-deploy
-  middleman-livereload (~> 3.1.0)
+  middleman-livereload
   sass
-  tzinfo-data
+  slim
-  wdm (~> 0.1.0)
 
 BUNDLED WITH
-   1.10.6
+   1.11.2

config.rb

@@ -33,11 +33,12 @@
 ###
 
 # Automatic image dimensions on image_tag helper
-activate :automatic_image_sizes
+# activate :automatic_image_sizes
 
 # Reload the browser automatically whenever files change
 configure :development do
   activate :livereload
+  config[:file_watcher_ignore] += [/.idea\//]
 end
 
 # Methods defined in the helpers block are available in templates
@@ -81,5 +82,5 @@ activate :deploy do |deploy|
 end
 
 # Variables
-@socials = { github: 'https://github.com/vladfaust', vkontakte: 'https://vk.com/vladfaust', telegram: 'https://telegram.me/vladfaust', instagram: 'https://instagram.com/vladfaust', google_play: 'https://play.google.com/store/apps/developer?id=VLADISLAV+FAUST', twitter: 'https://twitter.com/vladfaust', email: 'hello@vladfaust.com' }
+@socials = { github: 'https://github.com/vladfaust', vkontakte: 'https://vk.com/vladfaust', telegram: 'https://telegram.me/vladfaust', instagram: 'https://instagram.com/vladfaust', google_play: 'https://play.google.com/store/apps/developer?id=VLADISLAV+FAUST', twitter: 'https://twitter.com/vladfaust', email: 'mailto:hello@vladfaust.com' }
 set :socials, @socials

source/_gtm.haml

@@ -1,10 +0,0 @@
-/ Google Tag Manager
-%noscript
-  %iframe{:height => "0", :src => "//www.googletagmanager.com/ns.html?id=GTM-MRZ5F7", :style => "display:none;visibility:hidden", :width => "0"}
-:javascript
-  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  })(window,document,'script','dataLayer','GTM-MRZ5F7');
-/ End Google Tag Manager

source/_gtm.html.slim

@@ -0,0 +1,6 @@
+/! Google Tag Manager
+noscript
+  iframe height="0" src="//www.googletagmanager.com/ns.html?id=GTM-MRZ5F7" style="display:none;visibility:hidden" width="0"
+javascript:
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-MRZ5F7');
+/! End Google Tag Manager

source/_project.html.slim

@@ -0,0 +1,8 @@
+.project.well
+  table
+    tr
+      td
+        = image_tag(image, class: 'img-responsive img-rounded')
+      td.text-left.project-description
+        .lead= link_to name, link, target: :blank
+        = description

source/images/socials/mail.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="512" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs12"/><g id="g5274"><rect height="512" id="rect2987" rx="64" ry="64" style="fill:#168de2;fill-opacity:1;fill-rule:nonzero;stroke:none" width="512" x="0" y="5.6843419e-014"/><path d="m 325.08023,254.16735 c -2.27055,-44.21506 -35.10145,-70.80947 -74.74837,-70.80947 h -1.49271 c -45.75131,0 -71.12043,35.9769 -71.12043,76.84766 0,45.75277 30.69113,74.65689 70.94771,74.65689 44.86825,0 74.37896,-32.87444 76.51434,-71.75258 l -0.10083,-8.9425 z M 249.06141,143.77992 c 30.56941,0 59.31572,13.51355 80.41569,34.67344 v 0.0789 c 0,-10.1542 6.83707,-17.81281 16.32463,-17.81281 l 2.40265,-0.0161 c 14.83791,0 17.89376,14.04663 17.89376,18.49011 l 0.0672,157.91815 c -1.04965,10.34343 10.67237,15.68341 17.16706,9.04303 25.36152,-26.06002 55.69376,-133.97115 -15.76452,-196.48095 -66.59585,-58.291684 -155.95549,-48.69003 -203.47876,-15.93125 -50.52505,34.84324 -82.846827,111.9703 -51.44697,184.40458 34.23344,79.00115 132.18414,102.5653 190.40359,79.05815 29.47929,-11.89766 43.09031,27.94902 12.47443,40.97143 C 269.2643,457.87699 140.49957,455.88877 80.353263,351.69281 39.713683,281.34277 41.867183,157.55899 149.65819,93.430316 232.10858,44.355874 340.82166,57.938441 406.3724,126.39644 c 68.51948,71.56628 64.51614,205.58696 -2.30796,257.68275 -30.28271,23.6752 -75.26202,0.64267 -74.97824,-33.85059 l -0.30789,-11.27602 c -21.08477,20.92125 -49.14793,33.12827 -79.71734,33.12827 -60.39852,0 -113.54541,-53.13038 -113.54541,-113.53943 0,-60.99006 53.14689,-114.76179 113.54541,-114.76179 l 0,0" id="path24_3_" style="fill:#ffffff"/></g></svg>

source/index.haml

@@ -1,19 +0,0 @@
-;;;
-	"title": "Vlad Faust | Vladislav Faust | Vlad Faust.com"
-;;;
-
-.container
-	#hi.center-block
-		%h1= "Hi, my name is #{ link_to "Vlad Faust", '#' },"
-		%h2= "and I'm the #{content_tag :em, 'next big startup'} founder."
-	%hr
-	#socials.center-block
-		= link_to (image_tag image_path('socials/github.svg'), class: 'social-icon', id: 'github'), socials[:github], target: :blank, class: 'social-link', alt: socials[:github]
-		= link_to (image_tag image_path('socials/twitter.svg'), class: 'social-icon', id: 'twitter'), socials[:twitter], target: :blank, class: 'social-link', alt: socials[:twitter]
-		= link_to (image_tag image_path('socials/telegram.svg'), class: 'social-icon', id: 'telegram'), socials[:telegram], target: :blank, class: 'social-link', alt: socials[:telegram]
-		= link_to (image_tag image_path('socials/vkontakte.svg'), class: 'social-icon', id: 'vkontakte'), socials[:vkontakte], target: :blank, class: 'social-link', alt: socials[:vkontakte]
-		= link_to (image_tag image_path('socials/google_play.svg'), class: 'social-icon', id: 'google-play'), socials[:google_play], target: :blank, class: 'social-link', alt: socials[:google_play]
-		= link_to (image_tag image_path('socials/instagram.svg'), class: 'social-icon', id: 'instagram'), socials[:instagram], target: :blank, class: 'social-link', alt: socials[:instagram]
-	%hr
-	#contact.center-block
-		%h4= "Or email me at #{ mail_to socials[:email], socials[:email], id: 'mailto' }"

source/index.html.slim

@@ -0,0 +1,36 @@
+- @title = 'Vlad Faust | Vladislav Faust | VladFaust.com'
+
+.container-fluid
+  .row
+    .col-md-2
+    .col-md-8
+      .row
+        .col-xs-1
+        .col-xs-10
+          #hi
+            h1= "Hi, my name is #{ link_to "Vlad Faust", '#' },"
+            h2= "and I'm the #{ content_tag :em, 'next big startup' } founder."
+          hr
+          #projects
+            = partial(:project, locals: {name: 'Parrotfarm', image: 'projects/parrotfarm.jpg', description: 'A showcase opensource Rails + AngularJS app', link: 'https://github.com/vladfaust/parrotfarm'})
+            = partial(:project, locals: {name: 'Jumpin Sweeties', image: 'projects/jumpinsweeties.jpg', description: 'Handcrafted Android game written with libGDX', link: 'https://play.google.com/store/apps/details?id=com.vladislavfaust.jumpinsweeties.android'})
+            = partial(:project, locals: {name: 'dicesBot', image: 'projects/dicesbot.jpg', description: 'Telegram lottery bot w/ Bitcoin included, written in Ruby', link: 'https://telegram.me/dicesBot'})
+          hr
+          #socials
+            h2
+              | Say hello to me:&nbsp
+              = link_to 'hello@vladfaust.com', 'mailto:hello@vladfaust.com'
+            h3
+              | Also seen on&nbsp
+              = link_to 'GitHub', 'https://github.com/vladfaust'
+              | &nbspand&nbsp
+              = link_to 'Twitter', 'https://twitter.com/vladfaust'
+            /= link_to (image_tag image_path('socials/github.svg'), class: 'social-icon', id: 'github'), socials[:github], target: :blank, class: 'social-link', alt: socials[:github]
+            /= link_to (image_tag image_path('socials/twitter.svg'), class: 'social-icon', id: 'twitter'), socials[:twitter], target: :blank, class: 'social-link', alt: socials[:twitter]
+            /= link_to (image_tag image_path('socials/telegram.svg'), class: 'social-icon', id: 'telegram'), socials[:telegram], target: :blank, class: 'social-link', alt: socials[:telegram]
+            /= link_to (image_tag image_path('socials/vkontakte.svg'), class: 'social-icon', id: 'vkontakte'), socials[:vkontakte], target: :blank, class: 'social-link', alt: socials[:vkontakte]
+            /= link_to (image_tag image_path('socials/google_play.svg'), class: 'social-icon', id: 'google-play'), socials[:google_play], target: :blank, class: 'social-link', alt: socials[:google_play]
+            /= link_to (image_tag image_path('socials/instagram.svg'), class: 'social-icon', id: 'instagram'), socials[:instagram], target: :blank, class: 'social-link', alt: socials[:instagram]
+            /= link_to (image_tag image_path('socials/mail.svg'), class: 'social-icon', id: 'mail'), socials[:email], target: :blank, class: 'social-link', alt: socials[:email]
+        .col-xs-1
+    .col-md-2

source/layouts/layout.haml

@@ -1,11 +0,0 @@
-!!!
-%html
-  %head
-    %meta{:charset => "utf-8"}/
-    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
-    %title= current_page.data.title || "The Middleman"
-    = stylesheet_link_tag "all"
-    = javascript_include_tag  "all"
-    = partial 'gtm'
-  %body.full-screen-height.vertical-center
-    = yield

source/layouts/layout.html.slim

@@ -0,0 +1,11 @@
+doctype html
+html
+  head
+    meta charset="utf-8" /
+    meta content='IE=edge,chrome=1' http-equiv="X-UA-Compatible" /
+    title= @title || 'The Middleman'
+    = stylesheet_link_tag 'all'
+    = javascript_include_tag  'all'
+    = partial 'gtm' unless development? || build?
+  body
+    = yield

source/stylesheets/all.sass

@@ -1,33 +1,74 @@
 @charset "utf-8"
+@import url("https://fonts.googleapis.com/css?family=Bitter")
+
+$font-size-base: 16px
 
 @import "normalize.css"
 @import "bootstrap"
 @import "bourbon"
 
-#hi, #contact, #socials
+body
-  text-align: center
+  background: url("http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=626262&density=18&opacity=11")
-  max-width: 90%
+  font-family: 'Bitter', sans-serif
 
 #hi h2
   margin-top: -0.2em
 
+#hi
+  margin-top: 15em
+  margin-top: 20vh
+
 #socials
+  margin-bottom: 15em
+  margin-bottom: 20vh
+
   .social-link
     &:not(:first-child)
-      margin-left: 0.2em
+      margin-left: 0.5vh
 
   .social-icon
-    @include calc(width, '(100% - 0.2em * 16) / 6')
+    width: 10vw
-    max-width: 48px
+    max-width: 7vh
 
-#contact
+.project
-  margin-bottom: 50px
+  img
+    max-width: 5em
 
-.vertical-center
+.project-block
-  display: flex
+  display: inline-block
-  align-items: center
+  vertical-align: middle
-  justify-content: center
 
-.full-screen-height
+.project-description
-  min-height: 100%
+  padding-left: 1em
-  min-height: 100vh
+
+  .lead
+    margin-bottom: 0em
+
+@media (max-width: $screen-md-min)
+  h1
+    font-size: 7vw
+
+  h2
+    font-size: 5vw
+    max-font-size: 5vh
+
+  p, td
+    font-size: 4vw
+    max-font-size: 4vh
+
+  .lead
+    font-size: 5vw
+    max-font-size: 5vh
+
+  hr
+    margin-top: 3vw
+    margin-bottom: 3vw
+
+  .well:not(:first-child)
+    margin-top: 3vw
+
+  #hi
+    margin-top: 5vh
+
+  #socials
+    margin-bottom: 5vh