Introducing a new way to structure content and sections.

_config.yml

@@ -10,4 +10,8 @@ exclude: ['the_design.psd']
 
 sass:
   sass_dir: assets/css
-  style: :nested
+  style: :nested
+
+collections:
+  projects:
+    output: true

_data/layout.yml

@@ -1,5 +1,16 @@
 # Layout settings
 
+# Site Sections
+
+sections:
+- {name: About }
+- {name: Work }
+- {name: Clients }
+- {name: Contact }
+- {name: Form }
+
+# Animation Settings
+
 animation: "bounceOut"
 
 # Images
@@ -18,4 +29,4 @@ documentBackgroundColor: "#fff"
 headlineColor: "#333"
 textColor: "#666"
 linkColor: "#c99065"
-selectionColor: "#ffff9e"
+selectionColor: "#ffff9e"

_data/settings.yml

@@ -41,26 +41,10 @@ skills:
 - {name: Learning, value: '10'}
 - {name: Teaching, value: '6'}
 - {name: Planning, value: '7'}
-- {name: Visual Design, value: '5'}
+- {name: Visual Design, value: '10'}
 - {name: UX Design, value: '8'}
 - {name: Programming, value: '6'}
 
-#-------------------------------
-# Work Section
-
-projects:
-- {name: TYPO International Design Talks, folder: 'proj-1', file: 'work/proj-1.html'}
-- {name: City-IN website concept, folder: 'proj-2', file: 'work/proj-2.html'}
-- {name: Crispy Icons, folder: 'proj-3', file: 'work/proj-3.html'}
-- {name: Flat Mobile UI/UX Concept, folder: 'proj-4', file: 'work/proj-4.html'}
-- {name: Fresh It Up, folder: 'proj-5', file: 'work/proj-5.html'}
-- {name: Timeline Page, folder: 'proj-6', file: 'work/proj-6.html'}
-- {name: Weather Dashboard, folder: 'proj-7', file: 'work/proj-7.html'}
-- {name: Stripes & Co, folder: 'proj-8', file: 'work/proj-8.html'}
-
-
-
-
 #-------------------------------
 # Clients Section
 
@@ -85,23 +69,17 @@ clients:
   title: 'VP of Helmut, Lorem Sorem LLC.',
   quote: '<p><strong>Back in old country</strong> only nerds who is playing on computers. Now all bros is wanting to make codes and junk. I lost foot in war. You dont see girls asking me about homework.</p>',
   logo: 'logo4.png'}
-  
-  
+
+
 #-------------------------------
 # Contact Section
-  
+
 social:
 - {icon: 'twitter', link: 'http://twitter.com/devtipsshow'}
 - {icon: 'dribbble', link: 'https://dribbble.com/travisneilson'}
 - {icon: 'behance', link: 'https://www.behance.net/travisneilson'}
 - {icon: 'youtube', link: 'https://www.youtube.com/DevTipsForDesigners'}
 - {icon: 'linkedin', link: 'http://www.linkedin.com/in/travisneilson/'}
 
-  
+
 # social network icons available: 'twitter' / 'facebook' / 'github' / 'pinterest' 'google-plus' / 'linkedin' / 'youtube' / 'instagram' / 'dribbble' / 'behance' / 'soundcloud' / 'vine'
-
-
-
-
-
-

_includes/about.html

@@ -1,25 +1,25 @@
 <section>
 
   <h3 id="about-me">About Myself</h3>
-  
+
   <div class="face-lockup">
-    
+
     <div class="face-img"></div>
-    
+
     <div class="icon-pencil">{% include icons/icon-pencil.html %}</div>
     <div class="icon-mouse">{% include icons/icon-mouse.html %}</div>
     <div class="icon-browser">{% include icons/icon-browser.html %}</div>
     <div class="icon-video">{% include icons/icon-video.html %}</div>
-    
+
   </div>
-  
-  
+
+
   <div class="blurb">
     {{ site.data.settings.blurb | markdownify }}
   </div>
-  
+
   {% if site.data.settings.skills %}
-  
+
   <div class="skill-lockup">
 
     {% for skill in site.data.settings.skills %}
@@ -31,12 +31,12 @@ <h3 id="about-me">About Myself</h3>
             <span></span>
           {% endfor %}
         </div>
-      </div>    
+      </div>
 
     {% endfor %}
-    
+
   </div>
-  
+
   {% endif %}
 
 </section>

_includes/work.html

@@ -1,28 +1,29 @@
 <section class="alt-section section-work">
-  
+
   <h3 id="work">Work</h3>
-  {% for project in site.data.settings.projects %}
+  {% for project in site.projects %}
     <input type="radio" name="trigger" class="trigger" id="{{ project.folder }}" />
   {% endfor %}
 
   <input type="radio" name="trigger" id="return" class="return" />
 
   <div class="work-belt">
-    
+
     <div class="thumb-wrap">
       <div class="thumb-container">
-      {% for project in site.data.settings.projects %}
-      <label for="{{ project.folder }}">  
-        <div class="thumb-unit" data-folder="{{ project.folder }}" style="background-image: url(assets/img/work/{{project.folder}}/thumb.jpg);"> 
+      {% for project in site.projects %}
+      <label for="{{ project.folder }}">
+        <div class="thumb-unit" data-filepath="{{ project.url }}" >
+          <img src="assets/img/work/{{project.folder}}/thumb.jpg" alt="Description">
           <div class="thumb-overlay">
-            <strong>{{ project.name }}</strong>
+            <strong>{{ project.title }}</strong>
           </div>
         </div>
       </label>
       {% endfor %}
     </div>
     </div>
-    
+
     <div class="work-wrap">
       <div class="work-container">
       <label for="return">
@@ -32,18 +33,18 @@ <h4 class="project-title"></h4>
       <div class="project-load"></div>
 
       <noscript>
-        {% for project in site.data.settings.projects %}
+        {% for project in site.projects %}
           <div class="noscript" id="content-{{ project.folder }}">
-            <h4 class="project-title">{{ project.name }}</h4>
+            <h4 class="project-title">{{ project.title }}</h4>
             <div class="noscript-load">
-              {% include {{project.file}} %}
+              {{ content }}
             </div>
           </div>
         {% endfor %}
       </noscript>
 
     </div>
     </div>
-    
+
   </div>
-</section>
+</section>

work/proj-1.md → _projects/proj-1.md

@@ -1,5 +1,6 @@
 ---
 title: Typo International Design Talks Stuff
+folder: proj-1
 ---
 
 ![Typo International](assets/img/work/proj-1/img1.jpg)

work/proj-2.md → _projects/proj-2.md

@@ -1,5 +1,6 @@
 ---
 title: City In Website Concept
+folder: proj-2
 ---
 
 ![City In](assets/img/work/proj-2/CityIn-AntonSkvortsov.jpg)

work/proj-3.md → _projects/proj-3.md

@@ -1,5 +1,6 @@
 ---
 title: Crispy Icons
+folder: proj-3
 ---
 
 ![Crispy Icons](assets/img/work/proj-3/CrispyIcons-PetrasNargela.jpg)

work/proj-4.md → _projects/proj-4.md

@@ -1,5 +1,6 @@
 ---
 title: Flat Mobile UI/UX Concept
+folder: proj-4
 ---
 
 ![Flat Mobile UI/UX Concept](assets/img/work/proj-4/flatmobile-AyoubElred.jpg)

work/proj-5.md → _projects/proj-5.md

@@ -1,5 +1,6 @@
 ---
 title: Fresh It Up
+folder: proj-5
 ---
 
 ![Fresh It Up](assets/img/work/proj-5/freshitup-JieyuXiong.jpg)

work/proj-6.md → _projects/proj-6.md

@@ -1,5 +1,6 @@
 ---
 title: Timeline Page
+folder: proj-6
 ---
 
 ![Timeline Page](assets/img/work/proj-6/TimeLinePage-SergeyValiukh.jpg)

work/proj-7.md → _projects/proj-7.md

@@ -1,5 +1,6 @@
 ---
 title: Weather Dashboard
+folder: proj-7
 ---
 
 ![Weather Dashboard](assets/img/work/proj-7/img0.jpg)

work/proj-8.md → _projects/proj-8.md

@@ -1,5 +1,6 @@
 ---
 title: "Stripes & Co"
+folder: proj-8
 ---
 
 ![Stripes & Co](assets/img/work/proj-8/stripes-co-NickZoutendijk.jpg)

assets/css/3-sections/_work.sass

@@ -46,19 +46,17 @@
     width: 25%
     float: left
     position: relative
-    padding-top: 16%
     cursor: pointer
-    background:
-      position: center center
-      repeat: no-repeat
-      size: cover
     +perspective(300)
     @if $animation != "bounceOut"
       overflow: hidden
+
+    img
+      width: 100%
+      display: block
 
     @media screen and (max-width: 760px)
       width: 50%
-      padding-top: 26%
 
     .thumb-overlay
       +position(absolute)

assets/js/functions.js

@@ -50,11 +50,10 @@ function  workLoad() {
   $('.thumb-unit').click(function() {
     var $this = $(this),
         newTitle = $this.find('strong').text(),
-        newfolder = $this.data('folder'),
         spinner = '<div class="loader">Loading...</div>',
-        newHTML = 'work/'+ newfolder;
+        filePath = $this.data('filepath');
 
-    $('.project-load').html(spinner).load(newHTML);
+    $('.project-load').html(spinner).load(filePath);
     $('.project-title').text(newTitle);
   });
 

index.html

@@ -21,16 +21,11 @@
 
 {% include header.html %}
 
-{% include about.html %}
+  {% for section in site.data.layout.sections %}
 
-{% include work.html %}
-
-{% include clients.html %}
-
-{% include contact.html %}
-
-{% include form.html %}
+    {% include {{ section.name | downcase }}.html %}
 
+  {% endfor %}
 
 {% include footer.html %}