Portfolio section

_config.yml

@@ -13,4 +13,5 @@ twitter : c_peak
 feedburner :
 
 production_url : http://cpeak.github.io
-
+sass:
+  sass_dir: /css/_sass

_includes/nav.html

@@ -1,4 +1,5 @@
 <nav>
-  <a href="/about.html">About</a>
-  <a href="/photos.html">Instagram</a>
+  <a href="/about">About</a>
+  <a href="/portfolio">Portfolio</a>
+  <a href="/photos">Instagram</a>
 </nav>

about.html

@@ -3,6 +3,7 @@
 title : About
 header : About
 group: navigation
+permalink: /about/
 ---
 <article class='standalone'>
 <h2>About</h2>

assets/css/blog.css → assets/css/blog.scss

@@ -1,3 +1,10 @@
+---
+---
+
+
+
+$semi-black: rgba(0,0,0,0.05);
+
 /*
   ================================================================
   Global Styling
@@ -38,7 +45,7 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 200%;
   letter-spacing: -1px;
   line-height: 1.25em;
-  margin: 0;
+  margin: 0 0 1em 0;
   padding: 0;
 }
 
@@ -59,6 +66,41 @@ ul { list-style: none; margin: 0; padding: 0; }
 
 .centered { text-align: center; }
 
+$block-size: 33.3333%;
+ul.block-list {
+  li {
+    background-size: cover;
+    //border: 1px solid white;
+    float: left;
+    padding-top: $block-size;
+    position: relative;
+    width: $block-size;
+    span {
+      background: rgba(0,0,0,0.5);
+      bottom: 0;
+      color: white;
+      left: 0;
+      opacity: 0;
+      padding: 10px;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      transition: all 0.25s ease-in;
+    }
+    &:hover {
+      span {
+        opacity: 1;
+      }
+    }
+  }
+}
+@media screen and (max-width: 650px) {
+  ul.block-list li {
+    padding-top: 50%;
+    width: 50%;
+  }
+}
+
 /*
   ================================================================
   Layout
@@ -82,7 +124,7 @@ ul { list-style: none; margin: 0; padding: 0; }
 .main-content {
   margin: 1em auto;
   overflow: hidden;
-  max-width: 900px;
+  max-width: 1000px;
   width: 95%;
 }
 
@@ -102,18 +144,29 @@ nav {
   display: block;
   margin: 4em auto 0 auto;
   text-align: center;
+  a {
+    border-radius: 2px;
+    color: black !important;
+    font-size: .85em;
+    margin: 10px;
+    padding: 15px 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+    &:hover {
+      background: $semi-black;
+
+    }
+  }
 }
 
-nav a {
-  border-radius: 2px;
-  color: black !important;
-  font-size: .85em;
-  margin: 10px;
-  padding: 15px 20px;
-  text-decoration: none;
-  text-transform: uppercase;
+@media screen and (max-width: 650px) {
+  nav {
+    margin-bottom: 1em;
+    a {
+      margin: 0;
+    }
+  }
 }
-nav a:hover { background: rgba(0,0,0,.05); }
 
 /*
   ================================================================
@@ -340,6 +393,26 @@ header img {
 
 #instafeed a img { max-width: 100%; }
 
+/*
+  ==============================================================================
+  Portfolio
+  ==============================================================================
+*/
+
+#just-enuff { background-image: url('/images/just-enuff.jpg'); }
+#twoandseven { background-image: url('/images/2and7.jpg'); }
+#rhs { background-image: url('/images/rhs.jpg'); }
+#modern { background-image: url('/images/modern.jpg'); }
+#champions { background-image: url('/images/8lcl.jpg'); }
+#punchcard { background-image: url('/images/punchcard.jpg'); }
+#als { background-image: url('/images/als.jpg'); }
+#start-basic { background-image: url('/images/start-basic.jpg'); }
+#gostu { background-image: url('/images/gostu.jpg'); }
+#miyc { background-image: url('/images/miyc.jpg'); }
+#owl { background-image: url('/images/owl.jpg'); }
+#family { background-image: url('/images/family.jpg'); }
+#great-peaks{ background-image: url('/images/great-peaks.jpg'); }
+
 /*
   ==============================================================================
   Media Queries

photos.html

@@ -2,6 +2,7 @@
 layout: fullpage
 title : Photos
 header : Photos
+permalink: /photos/
 ---
 <script src="/assets/js/instafeed.min.js"></script>
 <div id='instafeed'>

portfolio.html

@@ -0,0 +1,44 @@
+---
+layout: fullpage
+title: Portfolio
+header: Portfolio
+permalink: /portfolio/
+---
+<ul class='block-list'>
+  <li id='just-enuff'>
+    <span>Just Enuff - Logo and brand</span>
+  </li>
+  <li id='twoandseven'>
+    <span>2&amp;7 Coffee - Logo and brand</span>
+  </li>
+  <li id='gostu'>
+    <span>Gorilla-Studios Photography</span>
+  </li>
+  <li id='rhs'>
+    <span>Ralph H. Simpson Co. - Logo proposal</span>
+  </li>
+  <li id='punchcard'>
+    <span>Punchcard - Web application</span>
+  </li>
+  <li id='als'>
+    <span>Apprentice Learning Squad - Logo</span>
+  </li>
+  <li id='start-basic'>
+    <span>Start Basic - Logo, site, and branding</span>
+  </li>
+  <li id='miyc'>
+    <span>Masons Island Yacht Club - Branding</span>
+  </li>
+  <li id='modern'>
+    <span>Modern Apprenticeship - Blog</span>
+  </li>
+  <li id='family'>
+    <span>Family - Geneaology application</span>
+  </li>
+  <li id='great-peaks'>
+    <span>Great Peaks Realty - Branding</span>
+  </li>
+  <li id='owl'>
+    <span>Wolters Kluwer - Team logo</span>
+  </li>
+</ul>