new dev stack

.editorconfig

@@ -1,2 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
 indent_style = space
-indent_size = 2
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Trailing whitespace is significant in markdown files.
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,35 @@
+---
+parser: esprima
+env:
+  browser: true,
+  jquery: true
+settings:
+  ecmascript: 6
+plugins: []
+
+# "off" or 0 - turn the rule off
+# "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
+# "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
+# usually preferring warn because error can halt the build process and trips up rapid feedback
+extends: "eslint:recommended"
+rules: # http://eslint.org/docs/rules/
+  camelcase: warn
+  curly:
+    - warn
+    - all
+  indent:
+    - warn
+    - 2
+  no-console:
+    # console.error and console.warn are ok, but let's
+    # keep console.log out of production code.
+    - warn
+    - allow:
+      - warn
+      - error
+  no-mixed-spaces-and-tabs:
+    - warn
+    - smart-tabs
+  no-trailing-spaces: warn
+  no-underscore-dangle: warn
+  semi: warn

.gitattributes

@@ -0,0 +1,39 @@
+#common settings that generally should always be used with your language specific settings
+
+# Auto detect text files and perform LF normalization
+# http://git-scm.com/docs/gitattributes
+* text=auto
+#
+# The above will handle all files NOT found below
+#
+
+# Documents
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain
+*.md text
+*.adoc text
+*.textile text
+*.mustache text
+*.csv text
+*.tab text
+*.tsv text
+*.sql text
+
+# Graphics
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.tif binary
+*.tiff binary
+*.ico binary
+*.svg binary
+*.eps binary

.gitignore

@@ -1,2 +1,54 @@
-build/
+# Ignore hidden folders #
-components/
+# This takes care of .tmp, .sass-cache, and many others #
+.*/
+
+# secrets files
+.secrets
+.ftppass
+
+# Ignore OS generated files #
+.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db
+
+# Always-ignore files and folders #
+*.csv
+*.dat
+*.diff
+*.err
+*.gz
+*.log
+*.orig
+*.out
+*.pid
+*.rej
+*.seed
+*.sublime-*
+*.swn
+*.swo
+*.swp
+*.yo-rc.json
+*~
+.tmp
+lib-cov
+logs
+npm-debug.log
+pids
+results
+
+# Ignore packages #
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Ignore support folders
+*bower_components
+node_modules
+dist
+dest

.sass-lint.yml

@@ -0,0 +1,52 @@
+files:
+  include: site/**/*.scss
+  ignore:
+    - site/assets/scss/*bootstrap*
+
+options:
+  formatter: stylish
+  merge-default-rules: true
+
+# https://github.com/sasstools/sass-lint/tree/master/docs/rules
+rules:
+
+  class-name-format:
+    - 1
+    - convention: 'hyphenatedbem'
+
+  force-pseudo-nesting: 0
+
+  id-name-format: 0
+
+  leading-zero:
+    - 1
+    - include: true
+
+  nesting-depth:
+    - 1
+    - max-depth: 4
+
+  no-css-comments: 0
+
+  no-color-literals:
+    - 1
+    -
+      allow-rgba: true
+
+  no-duplicate-properties: 1
+
+  no-qualifying-elements:
+    - 1
+    - allow-element-with-attribute: true # input[type='email'] but not div.class-name
+
+  no-vendor-prefixes: 1
+
+  property-sort-order:
+    - 1
+    -
+      # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/concentric.yml
+      order: concentric
+      # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
+      # order: smacss
+
+  quotes: 0

Gruntfile.js

@@ -0,0 +1,148 @@
+module.exports = function(grunt) {
+  'use strict';
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+
+    config: {
+      source: 'site',
+      dest: 'dist',
+      temp: '.tmp'
+    },
+
+    eslint: {
+      // http://eslint.org/docs/rules/
+      target: '<%= config.source %>/assets/js/**/*'
+    },
+
+    sasslint: {
+      // https://github.com/sasstools/sass-lint/tree/master/docs/rules
+      target: '<%= config.source %>/assets/scss/**/*'
+    },
+
+    clean: {
+      build: {
+        files: [{
+          dot: true,
+          src: [
+            '<%= config.dest %>/*',
+            '!<%= config.dest %>/video/*'
+          ]
+        }]
+      }
+    },
+
+    sass: {
+      options: {
+        sourceMap: true,
+        includePaths: [
+          '<%= config.source %>/assets/scss/'
+        ]
+      },
+      build: {
+        files: {
+          '<%= config.dest %>/assets/css/main.css': '<%= config.source %>/assets/scss/main.scss'
+        }
+      }
+    },
+
+    postcss: {
+      options: {
+        map: true,
+        processors: [
+          require('autoprefixer')({browsers: ['last 2 versions']})
+        ]
+      },
+      dist: {
+        src: '<%= config.dest %>/assets/css/main.css'
+      }
+    },
+
+    copy: {
+      assets: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.source %>/assets/',
+          src: ['{fonts,img,icon,data,vendor}/**/*'],
+          dest: '<%= config.dest %>/assets/'
+        }]
+      },
+      misc: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.source %>',
+          src: [
+            'favicon.ico'
+          ],
+          dest: '<%= config.dest %>'
+        }]
+      }
+    },
+
+    assemble: {
+      options: {
+        assets: '<%= config.dest %>/assets',
+        data: 'template_data/*.json',
+        flatten: true,
+        layout: 'default.hbs',
+        layoutdir: '<%= config.source %>/layouts',
+        partials: '<%= config.source %>/partials/**/*.hbs'
+      },
+
+      build: {
+        files: [{'<%= config.dest %>/': ['<%= config.source %>/pages/**/*.hbs']}]
+      }
+    },
+
+    watch: {
+      images: {
+        files: '<%= config.source %>/img/**/*',
+        tasks: ['copy:assets']
+      },
+      scss: {
+        files: '<%= config.source %>/assets/**/*.scss',
+        tasks: ['concurrent:scssWatch']
+      },
+      js: {
+        files: '<%= config.source %>/assets/**/*.{json,js}',
+        tasks: ['concurrent:jsWatch']
+      },
+      assemble: {
+        files: '<%= config.source %>/**/*.hbs',
+        tasks: ['assemble:build']
+      }
+    },
+
+    concurrent: {
+      scssWatch: ['sasslint', ['sass:build', 'postcss']],
+      jsWatch: ['eslint', 'babel']
+    },
+
+    browserSync: {
+      serve: {
+        bsFiles: { src: [ '<%= config.dest %>/**.*' ] },
+        options: {
+          watchTask: true,
+          server: '<%= config.dest %>',
+          browser: ["google chrome"],
+          // tunnel: true,
+          open: 'external',
+          notify: false,
+          ghostMode: {
+            clicks: true,
+            forms: true,
+            scroll: true
+          }
+        }
+      }
+    }
+  });
+
+  // Tasks
+
+  grunt.registerTask('lint', ['sasslint', 'eslint']);
+  grunt.registerTask('build', ['clean:build', 'copy', 'sass', 'postcss', 'assemble']);
+  grunt.registerTask('default', ['lint', 'build']);
+
+  grunt.registerTask('serve', ['lint', 'build', 'browserSync', 'watch']);
+};

_old-src/index.html

@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif] <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9"><![endif] <![endif]-->
-<html>
-  <head>
-    <meta charset='utf-8'>
-    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
-    <meta content='width=device-width,initial-scale=1.0' name='viewport'>
-    <meta content="Sharing what I'm learning." name='description'>
-    <meta content='' name='keywords'>
-    <title>Mark Moser | A Little About Me</title>
-    <link href="/assets/css/all.css" rel="stylesheet" type="text/css" />
-    <script src="/assets/js/vendor/modernizr.js" type="text/javascript"></script>
-    <script type="text/javascript">
-      var _gaq = _gaq || [];
-      _gaq.push(["_setAccount", "UA-12808649-1"]);
-      _gaq.push(["_trackPageview"]);
-
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
-    </script>
-    <style>
-      .poster { background-image: url(/assets/img/stock/gulf_iss040e090540.jpg);}
-    </style>
-
-  </head>
-  <body class='contact contact_index'>
-    <header>
-      <div class='container'>
-        <div class='row'>
-          <div class='col-sm-12'>
-            <nav>
-              <ul>
-                <li>
-                  <a href='/'>
-                    home
-                  </a>
-                </li>
-                <li>
-                  <a href='/video'>video</a>
-                </li>
-                <li>
-                  <a href='/contact'>contact</a>
-                </li>
-              </ul>
-              <ul class='social hidden-xs'>
-                <li>
-                  <a href="http://linkedin.com/in/markamoser/"><i class='fa fa-lg fa-linkedin-square'></i>
-                  </a>
-                </li>
-                <li>
-                  <a href="https://twitter.com/obley"><i class='fa fa-lg fa-twitter'></i>
-                  </a>
-                </li>
-                <li>
-                  <a href="https://github.com/markmoser"><i class='fa fa-github fa-lg'></i>
-                  </a>
-                </li>
-                <li>
-                  <a href="https://bitbucket.org/markamoser"><i class='fa fa-bitbucket fa-lg'></i>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </header>
-    <div class='poster'></div>
-    <div class='container'>
-      <div class='row'>
-        <div class='col-sm-12'>
-          <h2>Mark Moser - digital handyman</h2>
-        </div>
-      </div>
-      <div class='row'>
-        <div class='col-sm-8'>
-          <p>
-            I&rsquo;m a ruby developer exploring and learning everything I can about being a better
-            developer. This place is where I share my findings, explorations, and other creative
-            outlets.
-          </p>
-          <p>
-            I&rsquo;m also fond of working in video post production: editing, compositing, and
-            motion graphics. I can either be your &ldquo;one man band&rdquo; for those smaller
-            productions, put together a killer team when you need even greater production value,
-            or be the go-to post production guy you call to join your existing team.
-            I have experience shooting interviews and putting together short informational
-            videos. I am very comfortable in the whole Adobe Production Suite of tools.
-          </p>
-          <p>
-            I have a high value for quality craftsmanship. I want to do great work, with people who
-            also do great work. I love to explore and learn about my world. I enjoy being
-            challenged. I take pleasure in providing creative solutions to specific needs, always
-            keeping the bigger picture in mind. I was raised to work hard and play hard.
-          </p>
-        </div>
-        <div class='col-sm-4 side-links'>
-          <ul>
-            <li>
-              <a href="mailto:markamoser@gmail.com">markamoser@gmail.com</a>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              some videos can be found on
-              <a href="http://www.vimeo.com/mmoser">vimeo</a>
-            </li>
-            <li>
-              I occasionally play on
-              <a href="http://www.obleys.net">obleys.net</a>
-            </li>
-            <li>
-              and sometimes
-              <a href="http://www.youtube.com/user/ObleyWan">youtube</a>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <a href="skype:fullsightstudios?userinfo">skype: fullsightstudios</a>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <a href="http://www.bluehost.com/track/fullsight">bluehost</a>
-              is my preferred shared web host
-            </li>
-            <li>
-              <a href="https://www.digitalocean.com/?refcode=0d1758a3ccb2">digital ocean</a>
-              is my preferred vps host
-            </li>
-            <li>
-              free cloud storage from
-              <a href="https://www.getdropbox.com/referrals/NTUzODQzOQ">dropbox</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class='spacer-50'></div>
-  </body>
-  <script src="/assets/js/app.js" type="text/javascript"></script>
-</html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "markamoser",
+  "version": "1.0.0",
+  "description": "personal website",
+  "main": "-",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/markamoser/markamoser.git"
+  },
+  "author": "Mark Moser",
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/markamoser/markamoser#readme",
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "browser-sync": "^2.18.13",
+    "grunt": "^1.0.1",
+    "grunt-assemble": "^0.6.3",
+    "grunt-browser-sync": "^2.2.0",
+    "grunt-cli": "^1.2.0",
+    "grunt-concurrent": "^2.3.1",
+    "grunt-contrib-clean": "^1.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-eslint": "^20.0.0",
+    "grunt-postcss": "^0.8.0",
+    "grunt-sass": "^2.0.0",
+    "grunt-sass-lint": "^0.2.2",
+    "load-grunt-tasks": "^3.5.2"
+  }
+}

site/layouts/default.hbs

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{> head }}
+  </head>
+  <body>
+    {{> header }}
+
+    <main>
+      {{> body }}
+      {{> aside }}
+    </main>
+
+    {{> footer }}
+    {{> javascripts }}
+  </body>
+</html>
+

site/pages/index.hbs

@@ -0,0 +1,23 @@
+<h1>Mark Moser - digital handyman</h1>
+
+<p>
+  I&rsquo;m a ruby developer exploring and learning everything I can about being a better
+  developer. This place is where I share my findings, explorations, and other creative
+  outlets.
+</p>
+
+<p>
+  I&rsquo;m also fond of working in video post production: editing, compositing, and
+  motion graphics. I can either be your &ldquo;one man band&rdquo; for those smaller
+  productions, put together a killer team when you need even greater production value,
+  or be the go-to post production guy you call to join your existing team.
+  I have experience shooting interviews and putting together short informational
+  videos. I am very comfortable in the whole Adobe Production Suite of tools.
+</p>
+
+<p>
+  I have a high value for quality craftsmanship. I want to do great work, with people who
+  also do great work. I love to explore and learn about my world. I enjoy being
+  challenged. I take pleasure in providing creative solutions to specific needs, always
+  keeping the bigger picture in mind. I was raised to work hard and play hard.
+</p>

site/partials/aside.hbs

@@ -0,0 +1,38 @@
+<ul>
+  <li>
+    <a href="mailto:markamoser@gmail.com">markamoser@gmail.com</a>
+  </li>
+</ul>
+<ul>
+  <li>
+    some videos can be found on
+    <a href="http://www.vimeo.com/mmoser">vimeo</a>
+  </li>
+  <li>
+    I occasionally play on
+    <a href="http://www.obleys.net">obleys.net</a>
+  </li>
+  <li>
+    and sometimes
+    <a href="http://www.youtube.com/user/ObleyWan">youtube</a>
+  </li>
+</ul>
+<ul>
+  <li>
+    <a href="skype:fullsightstudios?userinfo">skype: fullsightstudios</a>
+  </li>
+</ul>
+<ul>
+  <li>
+    <a href="http://www.bluehost.com/track/fullsight">bluehost</a>
+    is my preferred shared web host
+  </li>
+  <li>
+    <a href="https://www.digitalocean.com/?refcode=0d1758a3ccb2">digital ocean</a>
+    is my preferred vps host
+  </li>
+  <li>
+    free cloud storage from
+    <a href="https://www.getdropbox.com/referrals/NTUzODQzOQ">dropbox</a>
+  </li>
+</ul>

site/partials/head.hbs

@@ -0,0 +1,23 @@
+<meta charset='utf-8'>
+<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1.0' name='viewport'>
+<meta content="Sharing what I'm learning." name='description'>
+<meta content='' name='keywords'>
+<title>Mark Moser | A Little About Me</title>
+<link href="/assets/css/all.css" rel="stylesheet" type="text/css" />
+<script src="/assets/js/vendor/modernizr.js" type="text/javascript"></script>
+<script type="text/javascript">
+  var _gaq = _gaq || [];
+  _gaq.push(["_setAccount", "UA-12808649-1"]);
+  _gaq.push(["_trackPageview"]);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+<style>
+  .poster { background-image: url(/assets/img/stock/gulf_iss040e090540.jpg);}
+</style>
+

site/partials/header.hbs

@@ -0,0 +1,34 @@
+<nav>
+  <ul>
+    <li>
+      <a href='/'>
+        home
+      </a>
+    </li>
+    <li>
+      <a href='/video'>video</a>
+    </li>
+    <li>
+      <a href='/contact'>contact</a>
+    </li>
+  </ul>
+</nav>
+
+<ul class='social hidden-xs'>
+  <li>
+    <a href="http://linkedin.com/in/markamoser/"><i class='fa fa-lg fa-linkedin-square'></i>
+    </a>
+  </li>
+  <li>
+    <a href="https://twitter.com/obley"><i class='fa fa-lg fa-twitter'></i>
+    </a>
+  </li>
+  <li>
+    <a href="https://github.com/markmoser"><i class='fa fa-github fa-lg'></i>
+    </a>
+  </li>
+  <li>
+    <a href="https://bitbucket.org/markamoser"><i class='fa fa-bitbucket fa-lg'></i>
+    </a>
+  </li>
+</ul>

site/partials/javascripts.hbs

@@ -0,0 +1 @@
+<script src="{{assets}}/js/site.js"></script>