Layout Remodel

Gemfile

@@ -16,6 +16,8 @@ gem 'middleman-gh-pages'
 gem 'middleman-blog'
 gem 'nokogiri'
 
+gem 'builder', '~> 2.0'
+
 gem 'middleman-sprockets', '~> 4.0.0'
 gem 'materialize-sass'
 gem 'middleman-jquery'

Gemfile.lock

@@ -9,6 +9,7 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.4.0)
     backports (3.6.8)
+    builder (2.1.2)
     chunky_png (1.3.6)
     coffee-script (2.4.1)
       coffee-script-source
@@ -143,6 +144,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  builder (~> 2.0)
   materialize-sass
   middleman (>= 4.0.0)
   middleman-blog

config.rb

@@ -3,6 +3,7 @@
 end
 
 activate :blog do |blog|
+  blog.name = 'blog'
   blog.prefix = 'blog'
   blog.layout = 'blog'
   blog.sources = "{year}-{month}-{day}-{title}.html"
@@ -12,6 +13,14 @@
   # blog.page_link = "page/:num"
 end
 
+activate :blog do |blog|
+  blog.name = 'audiophiles'
+  blog.prefix = 'audiophiles'
+  blog.layout = 'audiophiles'
+  blog.sources = "{year}-{month}-{day}-{title}.html"
+  blog.permalink = "{category}/{title}.html"
+end
+
 ###
 # Page options, layouts, aliases and proxies
 ###

data/motd.yaml

@@ -0,0 +1,5 @@
+these_motd:
+  - quote: <a href="https://www.youtube.com/user/ninjapanzer/videos" target="_blank"">Click here to see more of Paul's videos.</a>
+    color: "#BE2C17"
+  - quote: "New SavvyAudiofiles coming soon"
+    color: "#F29F1A"

source/_blog.html.erb

@@ -8,7 +8,7 @@
       </a>
     </p>
     <div class="row">
-      <% blog.articles[0...1].each do |article| %>
+      <% blog('blog').articles[0...1].each do |article| %>
         <article class="col s12" style="padding-right: 2em;">
           <h4>
             <%= article.title %>

source/_navbar.html.erb

@@ -8,6 +8,7 @@
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#current_clients">Current Clients</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#products">Products & Services</a></li>
       <li><a href="/case_studies.html">Case Studies</a></li>
+      <li><a href="/av.html">Audio / Visual</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#team">Our Team</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#contact">Contact Us</a></li>
       <li><a href="westernpaphalcon.html">Western PA Phalcon</a></li>
@@ -20,6 +21,7 @@
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#current_clients">Current Clients</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#products">Products & Services</a></li>
       <li><a href="/case_studies.html">Case Studies</a></li>
+      <li><a href="/av.html">Audio / Visual</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#team">Our Team</a></li>
       <li><a href="<%= current_page.path == 'index.html' ? '' : '/' %>#contact">Contact Us</a></li>
       <li><a href="westernpaphalcon.html">Western PA Phalcon</a></li>

source/audiophiles/feed.xml.builder

@@ -0,0 +1,23 @@
+xml.instruct!
+xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do
+  site_url = "http://savvysoftworks.com"
+  xml.title "SavvySoftWorks | Audiophiles"
+  xml.id "http://savvysoftworks.com/av/audiophiles"
+  xml.link "href" => "http://savvysoftworks.com/av/audiophiles"
+  xml.link "href" => "http://savvysoftworks.com/av/audiophiles/feed.xml", "rel" => "self"
+  xml.updated blog.articles.first.date.to_time.iso8601
+  xml.author { xml.name "SavvySoftWorks, LLC" }
+
+  audiophiles.articles.each do |audio|
+    xml.entry do
+      xml.title audio.title
+      xml.link "rel" => "alternate", "href" => audio.url
+      xml.id audio.url
+      xml.published audio.date.to_time.iso8601
+      xml.updated audio.date.to_time.iso8601
+      xml.author { xml.name "SavvySoftWorks, LLC" }
+      xml.summary audio.summary, "type" => "html"
+      xml.content audio.body, "type" => "html"
+    end
+  end
+end

source/av.html.erb

@@ -0,0 +1,107 @@
+---
+layout: av
+---
+<div class="av">
+  <div class="row av--header">
+    <div class="col s12 l5">
+      <!-- <img src="/images/av/SavvyAudioVisual_Desktop.svg" alt="Savvy Audio Visual" class="responsive-img hide-on-med-and-down" style="max-height:400px;"/> -->
+      <img src="/images/av/SavvyAudioVisual_Mobile.svg" alt="Savvy Audio Visual" class="responsive-img hide-on-large-only"/>
+
+      <div class="responsive-img hide-on-med-and-down">
+        <%= partial '/av/av_desktop' %>
+      </div>
+    </div>
+
+    <div class="col s12 l7">
+      <div class="row">
+        <div class="motd left hide-on-med-and-down">
+          <h5 class="ah-headline">
+            <div class="ah-words-wrapper">
+              <% motds = data.motd.these_motd.dup %>
+              <% motd = motds.slice!(0) %>
+              <b class="motd--quote is-visible" style="background-color:<%= motd.color %>;"><%= motd.quote %></b>
+              <% motds.each do |motd| %>
+                <b class="motd--quote" style="background-color:<%= motd.color %>;"><%= motd.quote %></b>
+              <% end %>
+            </div>
+          </h5>
+        </div>
+      </div>
+
+      <div class="av--about">
+        <div class="row">
+          <p>
+            Paul, Sam, and Gary of SavvySoftWorks are all big proponents of learning and helping one another in the development world. Here they share conversations, interviews, and tutorials on vaious development topics.
+          </p>
+          <p>Paul Scarrone is the principle engineer at SavvySoftWorks. Words, words, words. Words, words, words. Words, words, words.</p>
+          <p>Gary Newsome is a developer at SavvySoftWorks, words, words, words. Words, words, words. </p>
+          <p>Sam Shurie is a developer at SavvySoftWork, words, words, words. Words, words, words. Words, words, words.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="parallax-container hide-on-small-only">
+      <div class="parallax"><img class="responsive-img" src="/images/av/IMG_1898.jpg"></div>
+  </div>
+
+  <div class="has-shadow row col s12">
+    <div id="audio" class="row">
+      <div class="col s12">
+        <div class="av--box audiophiles">
+          <!-- <img src="/images/SavvyAudiophiles.svg" alt="SavvyAudiophiles" /> -->
+          <h5>
+            <a href="/av/audiophiles.html">SavvyAudiophiles</a>
+            <i class="material-icons tiny">link</i>
+          </h5>
+          <div class="row valign-wrapper">
+            <div class="col s12 m3">
+              <img src="/images/av/paul2.jpg" alt="Paul Scarrone" class="responsive-img av--image hide-on-small-only" style="max-height:240px" />
+            </div>
+            <div class="col s12 m9">
+              <h5>Paul Scarrone</h5>
+              <h5 class="">How do I get started in programming?</h5>
+              <audio controls>
+                <source src="/audio/SavvyAudiophiles_HowDoIGetStarted.ogg" type="audio/ogg">
+                <source src="/audio/SavvyAudiophiles_HowDoIGetStarted.mp3" type="audio/mpeg">
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="parallax-container hide-on-small-only">
+      <div class="parallax"><img class="responsive-img" src="/images/av/IMG_1898.jpg"></div>
+  </div>
+
+  <div id="video" class="row">
+    <div class="col s12">
+      <div class="av--box video">
+        <h5>
+          <a href="/av/video.html">SavvyVideo</a>
+          <i class="material-icons tiny">link</i>
+        </h5>
+        <div class="row valign-wrapper">
+          <div class="col s12 m4 hide-on-small-only">
+            <a href="https://www.youtube.com/watch?v=haj4wQJAC1c" target="_blank">
+              <img src="https://img.youtube.com/vi/haj4wQJAC1c/hqdefault.jpg" class="responsive-img av--image">
+            </a>
+          </div>
+          <div class="col s12 m8">
+            <h5>Confessions of a Software Developer</h5>
+            <h5 class="">Lets Code!<br>with Phalcon CoreTeam member Nikolaos(niden)<br>FullCalendar.io and Google API (Part 3)</h5>
+            <p class=""><a href="https://www.youtube.com/user/ninjapanzer/videos" target="_blank" style="color:#FFFFFF;">Click here to see more of Paul's videos.</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="parallax-container hide-on-small-only">
+      <div class="parallax"><img class="responsive-img" src="/images/av/IMG_1898.jpg"></div>
+  </div>
+
+</div>