video page

Gruntfile.js

@@ -78,6 +78,15 @@ module.exports = function(grunt) {
           dest: '<%= config.dest %>/assets/vendor/'
         }]
       },
+      video: {
+        files: [{
+          expand: true,
+          flatten: true,
+          cwd: '<%= config.source %>/video/',
+          src: ['*'],
+          dest: '<%= config.dest %>/video/'
+        }]
+      },
       misc: {
         files: [{
           expand: true,
@@ -93,7 +102,7 @@ module.exports = function(grunt) {
     assemble: {
       options: {
         assets: '<%= config.dest %>/assets',
-        data: 'template_data/*.json',
+        data: '<%= config.source %>/data/*.yml',
         flatten: true,
         layout: 'default.hbs',
         layoutdir: '<%= config.source %>/layouts',

site/data/videos.yml

@@ -0,0 +1,61 @@
+videos:
+  demo:
+    file: "MarkMoser_reel2011.mp4"
+    poster: "MarkMoser_reel2011.png"
+    title: "2011 Demo Reel"
+    width: "960"
+    height: "480"
+    note: "A short sampling of my after effects work. I do love to edit."
+
+  bid_web:
+    file: "BackInTheDay_640x360.mov"
+    title: "Back In the Day"
+    width: "640"
+    height: "360"
+    poster: "BackInTheDay_640x360.png"
+    role: "Editor"
+    credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
+             Musician: <a href=\"http://www.rockymaffit.com\">Rocky Maffit</a><br />
+             <a href=\"http://www.jhanamusic.com/artists/Rocky%20Maffit/rockymaffit.html\">Jhana Music Group</a>"
+
+  ccrawl_large:
+    file: "CCrawl_purple_960x540.m4v"
+    title: "PW Container Crawl"
+    width: "960"
+    height: "540"
+    poster: "CCrawl_purple_960x540.png"
+    role: "Edit / Compositing"
+    credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
+             Stylist: Ron Walder <br />
+             <a href=\"http://provenwinners.com/\">Proven Winners</a>"
+
+  crawl_demo_lg:
+    file: "CrawlDemo_960x540.mov"
+    title: "Crawl Breakdown"
+    width: "960"
+    height: "540"
+    poster: "CrawlDemo_960x540.png"
+    role: "Edit / Compositing"
+    credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
+             Stylist: Ron Walder <br />
+             <a href=\"http://provenwinners.com/\">Proven Winners</a>"
+
+  pw_garden_640:
+    file: "SecretGarden_Alternate-640.m4v"
+    title: "PW Garden Spot"
+    width: "640"
+    height: "360"
+    poster: "SecretGarden_Alternate-640.png"
+    role: "Edit / Compositing"
+    credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
+             Stylist: Ron Walder <br />
+             Creative Director: Dave Lierman <br />
+             <a href=\"http://provenwinners.com/\">Proven Winners</a>"
+
+  balloon_time:
+    file: "BalloonTime_400x262.mov"
+    title: "Balloon Time!"
+    width: "400"
+    height: "262"
+    poster: "BalloonTime_400x262.png"
+    role: "Prep / Shoot / Post"

site/pages/misc.hbs

@@ -1,46 +0,0 @@
----
-  title: Misc links and such
----
-
-<h1>{{title}}</h1>
-<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/pages/video.hbs

@@ -1,105 +1,26 @@
 ---
   title: Old Video Projects
-
+  heading:
-  videos:
+    img: stock/grunge-film-stock.jpg
-    demo:
+    copy: Old Video Projects
-      file: "reel2011.mp4"
+    theme: yellow
-      title: "2011 Demo Reel"
-      width: "960"
-      height: "480"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      note: "A short sampling of my after effects work. I do love to edit. (<a href=\"video/MarkMoser_reel2011.mp4\">download</a>)"
-      vimeo: "<iframe src=\"//player.vimeo.com/video/29118777?byline=0&amp;portrait=0&amp;autoplay=0\" width=\"720\" height=\"360\" frameborder=\"0\" webkitAllowFullScreen allowFullScreen></iframe>"
-
-    las_invent:
-      file: "LAS_InventYourFuture_720x404.mp4"
-      title: "Invent Your Future"
-      width: "720"
-      height: "404"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "LAS_InventYourFuture_720x404.png"
-      role: "Editor"
-      credit: "DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
-               Art Direction: <a href=\"http://www.bonadiescreative.com\">John Bonadies</a>"
-
-    bid_web:
-      file: "BackInTheDay_640x360.mov"
-      title: "Back In the Day"
-      width: "640"
-      height: "360"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "BackInTheDay_640x360.png"
-      role: "Editor"
-      credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
-               Musician: <a href=\"http://www.rockymaffit.com\">Rocky Maffit</a><br />
-               <a href=\"http://www.jhanamusic.com/artists/Rocky%20Maffit/rockymaffit.html\">Jhana Music Group</a>"
-
-    ccrawl_large:
-      file: "CCrawl_purple_960x540.m4v"
-      title: "PW Container Crawl"
-      width: "960"
-      height: "540"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "CCrawl_purple_960x540.png"
-      role: "Edit / Compositing"
-      credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
-               Stylist: Ron Walder <br />
-               <a href=\"http://provenwinners.com/\">Proven Winners</a>"
-
-    crawl_demo_lg:
-      file: "CrawlDemo_960x540.mov"
-      title: "Crawl Breakdown"
-      width: "960"
-      height: "540"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "CrawlDemo_960x540.png"
-      role: "Edit / Compositing"
-      credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
-               Stylist: Ron Walder <br />
-               <a href=\"http://provenwinners.com/\">Proven Winners</a>"
-
-    pw_garden_640:
-      file: "SecretGarden_Alternate-640.m4v"
-      title: "PW Garden Spot"
-      width: "640"
-      height: "360"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "SecretGarden_Alternate-640.png"
-      role: "Edit / Compositing"
-      credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
-               Stylist: Ron Walder <br />
-               Creative Director: Dave Lierman <br />
-               <a href=\"http://provenwinners.com/\">Proven Winners</a>"
-
-    balloon_time:
-      file: "BalloonTime_400x262.mov"
-      title: "Balloon Time!"
-      width: "400"
-      height: "262"
-      options:
-        controls: true
-        autoplay: false
-        preload: "auto"
-      poster: "BalloonTime_400x262.png"
-      role: "Prep / Shoot / Post"
 ---
 
-<h1>{{title}}</h1>
+<section>
+  <p>Here is a collection of old video projects I'm still proud of. I no longer seek out video production projects because I decided to focus on development. I hope you enjoy watching them as much as I did making them.</p>
+
+  <p>
+    more videos can be found on
+    <a href="http://www.vimeo.com/mmoser">vimeo</a>
+    and
+    <a href="http://www.youtube.com/user/ObleyWan">youtube</a>
+</section>
+
+{{#each videos }}
+  <section>
+    <h2>{{title}}</h2>
+    <p>{{{note}}}</p>
+    <br />
+    <video src="/video/{{file}}" controls poster="/video/{{poster}}"></video>
+  </section>
+{{/each}}

site/partials/nav-social.hbs

@@ -1,5 +1,10 @@
 <nav class="nav-social">
   <ul>
+    <li>
+      <a href="https://www.digitalocean.com/?refcode=0d1758a3ccb2">
+        <span>digital ocean</span>
+      </a>
+    </li>
     <li>
       <a href="//linkedin.com/in/markamoser/" title="linked-in">
         <span>linked-in</span>