diff --git a/_config.yml b/_config.yml
index c7b9e4cd..366ac1ac 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,4 +10,8 @@ exclude: ['the_design.psd']
 
 sass:
   sass_dir: assets/css
-  style: :nested
\ No newline at end of file
+  style: :nested
+
+collections:
+  projects:
+    output: true
diff --git a/_data/layout.yml b/_data/layout.yml
index f2f223d9..8b4573a7 100644
--- a/_data/layout.yml
+++ b/_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"
\ No newline at end of file
+selectionColor: "#ffff9e"
diff --git a/_data/settings.yml b/_data/settings.yml
index 5fb55a84..fc004e5f 100644
--- a/_data/settings.yml
+++ b/_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,11 +69,11 @@ 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'}
@@ -97,11 +81,5 @@ social:
 - {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'
-  
-  
-  
-  
-  
-  
\ No newline at end of file
diff --git a/_includes/about.html b/_includes/about.html
index f46c3fb8..30a456c1 100644
--- a/_includes/about.html
+++ b/_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>
diff --git a/_includes/work.html b/_includes/work.html
index 2e359b78..6d8fcce5 100644
--- a/_includes/work.html
+++ b/_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,11 +33,11 @@ <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 %}
@@ -44,6 +45,6 @@ <h4 class="project-title">{{ project.name }}</h4>
 
     </div>
     </div>
-    
+
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/_includes/work/proj-1.html b/_includes/work/proj-1.html
deleted file mode 100644
index 06555e3c..00000000
--- a/_includes/work/proj-1.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<img src="assets/img/work/proj-1/img1.jpg" alt="Typo International">
-
-<p>TYPO: International Design Talks is an annual event held in Berlin, London, and San Francisco. This promotional project is developed to market the event for the designindustry. The use of patterns, sophisticated color scheme and typography are applied for the print and mobile application.</p>
-
-<img src="assets/img/work/proj-1/img2.jpg" alt="Typo International">
-<img src="assets/img/work/proj-1/img3.jpg" alt="Typo International">
-<img src="assets/img/work/proj-1/img4.jpg" alt="Typo International">
-<img src="assets/img/work/proj-1/img5.jpg" alt="Typo International">
\ No newline at end of file
diff --git a/_includes/work/proj-2.html b/_includes/work/proj-2.html
deleted file mode 100644
index 25fd4230..00000000
--- a/_includes/work/proj-2.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-2/CityIn-AntonSkvortsov.jpg" alt="City In" />
\ No newline at end of file
diff --git a/_includes/work/proj-3.html b/_includes/work/proj-3.html
deleted file mode 100644
index 7399973d..00000000
--- a/_includes/work/proj-3.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-3/CrispyIcons-PetrasNargela.jpg" alt="Crispy Icons" />
\ No newline at end of file
diff --git a/_includes/work/proj-4.html b/_includes/work/proj-4.html
deleted file mode 100644
index 3c6505e5..00000000
--- a/_includes/work/proj-4.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-4/flatmobile-AyoubElred.jpg" alt="Flat Mobile UX" />
\ No newline at end of file
diff --git a/_includes/work/proj-5.html b/_includes/work/proj-5.html
deleted file mode 100644
index fff22dd5..00000000
--- a/_includes/work/proj-5.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-5/freshitup-JieyuXiong.jpg" alt="Fersh It Up" />
\ No newline at end of file
diff --git a/_includes/work/proj-6.html b/_includes/work/proj-6.html
deleted file mode 100644
index 8c6357ba..00000000
--- a/_includes/work/proj-6.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-6/TimeLinePage-SergeyValiukh.jpg" alt="Time Line Page" />
\ No newline at end of file
diff --git a/_includes/work/proj-7.html b/_includes/work/proj-7.html
deleted file mode 100644
index 7eb2bfe4..00000000
--- a/_includes/work/proj-7.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<img src="assets/img/work/proj-7/img0.jpg" alt="Weather Dashboard">
-<img src="assets/img/work/proj-7/img1.jpg" alt="Weather Dashboard">
-<img src="assets/img/work/proj-7/img2.jpg" alt="Weather Dashboard">
-<img src="assets/img/work/proj-7/img3.jpg" alt="Weather Dashboard">
-<img src="assets/img/work/proj-7/img4.jpg" alt="Weather Dashboard">
diff --git a/_includes/work/proj-8.html b/_includes/work/proj-8.html
deleted file mode 100644
index 8ffb1094..00000000
--- a/_includes/work/proj-8.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="assets/img/work/proj-8/stripes-co-NickZoutendijk.jpg" alt="Stripes & Co" />
\ No newline at end of file
diff --git a/work/proj-1.md b/_projects/proj-1.md
similarity index 97%
rename from work/proj-1.md
rename to _projects/proj-1.md
index 947c2166..9a825a40 100644
--- a/work/proj-1.md
+++ b/_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)
diff --git a/work/proj-2.md b/_projects/proj-2.md
similarity index 86%
rename from work/proj-2.md
rename to _projects/proj-2.md
index 22265e95..13df09c9 100644
--- a/work/proj-2.md
+++ b/_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)
\ No newline at end of file
diff --git a/work/proj-3.md b/_projects/proj-3.md
similarity index 86%
rename from work/proj-3.md
rename to _projects/proj-3.md
index c29fb3af..e4e447d2 100644
--- a/work/proj-3.md
+++ b/_projects/proj-3.md
@@ -1,5 +1,6 @@
 ---
 title: Crispy Icons
+folder: proj-3
 ---
 
 ![Crispy Icons](assets/img/work/proj-3/CrispyIcons-PetrasNargela.jpg)
\ No newline at end of file
diff --git a/work/proj-4.md b/_projects/proj-4.md
similarity index 88%
rename from work/proj-4.md
rename to _projects/proj-4.md
index 083b1509..8fe5a57c 100644
--- a/work/proj-4.md
+++ b/_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)
\ No newline at end of file
diff --git a/work/proj-5.md b/_projects/proj-5.md
similarity index 85%
rename from work/proj-5.md
rename to _projects/proj-5.md
index 5e76650f..4ee03e91 100644
--- a/work/proj-5.md
+++ b/_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)
\ No newline at end of file
diff --git a/work/proj-6.md b/_projects/proj-6.md
similarity index 87%
rename from work/proj-6.md
rename to _projects/proj-6.md
index 9cb268b9..9b20289c 100644
--- a/work/proj-6.md
+++ b/_projects/proj-6.md
@@ -1,5 +1,6 @@
 ---
 title: Timeline Page
+folder: proj-6
 ---
 
 ![Timeline Page](assets/img/work/proj-6/TimeLinePage-SergeyValiukh.jpg)
\ No newline at end of file
diff --git a/work/proj-7.md b/_projects/proj-7.md
similarity index 95%
rename from work/proj-7.md
rename to _projects/proj-7.md
index df869976..81c09c4a 100644
--- a/work/proj-7.md
+++ b/_projects/proj-7.md
@@ -1,5 +1,6 @@
 ---
 title: Weather Dashboard
+folder: proj-7
 ---
 
 ![Weather Dashboard](assets/img/work/proj-7/img0.jpg)
diff --git a/work/proj-8.md b/_projects/proj-8.md
similarity index 86%
rename from work/proj-8.md
rename to _projects/proj-8.md
index 952b5864..420b15d7 100644
--- a/work/proj-8.md
+++ b/_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)
\ No newline at end of file
diff --git a/assets/css/3-sections/_work.sass b/assets/css/3-sections/_work.sass
index eddf3d1f..01ef159b 100644
--- a/assets/css/3-sections/_work.sass
+++ b/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)
diff --git a/assets/js/functions.js b/assets/js/functions.js
index 9071a7e6..18cc4176 100644
--- a/assets/js/functions.js
+++ b/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);
   });
   
diff --git a/index.html b/index.html
index fb4f115b..3bc5b7bc 100755
--- a/index.html
+++ b/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 %}