diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 84065b5..138b21d 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -2,8 +2,11 @@
     // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     "version": "0.1.0",
-    "command": "sass",
-    "isShellCommand": true,
-    "args": ["style.scss", "style.css"],
-    "showOutput": "always"
+    "command": "gulp",
+    "tasks": [{
+        "taskName": "default",
+        "isBuildCommand": true,
+        "showOutput": "always",
+        "isBackground": true
+    }]
 }
\ No newline at end of file
diff --git a/covers.css b/covers.css
deleted file mode 100644
index a6a0f5b..0000000
--- a/covers.css
+++ /dev/null
@@ -1,2 +0,0 @@
-#sierra {
-  background-image: url("ChuckNew.jpg"); }
diff --git a/covers.scss b/covers.scss
deleted file mode 100644
index a880ebb..0000000
--- a/covers.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// covers.scss
-#sierra {
-    background-image: url("ChuckNew.jpg");
-}
\ No newline at end of file
diff --git a/css/covers.css b/css/covers.css
new file mode 100644
index 0000000..30b555c
--- /dev/null
+++ b/css/covers.css
@@ -0,0 +1,2 @@
+#sierra {
+  background-image: url("../images/ChuckNew.jpg"); }
diff --git a/style.css b/css/style.css
similarity index 86%
rename from style.css
rename to css/style.css
index 797ea91..8541ebb 100644
--- a/style.css
+++ b/css/style.css
@@ -4,8 +4,11 @@
   clear: both; }
 
 #sierra {
-  background-image: url("ChuckNew.jpg"); }
+  background-image: url("../images/ChuckNew.jpg"); }
 
+/*
+ * sections
+ */
 body {
   font-family: serif;
   font-size: 1em;
@@ -73,30 +76,29 @@ body {
   .slide div {
     max-width: 800px;
     margin: auto;
-    text-align: center;
     /* Project bits */ }
     .slide div .project {
       transition-duration: .2s;
       width: 390px;
-      border: 1px solid #333;
+      border: 1px solid #aaa;
       border-radius: 5px;
       padding: 0px;
       display: inline-block;
-      margin: 3px; }
+      margin: 3px;
+      overflow: hidden; }
       .slide div .project .cover {
         height: 300px;
         background-position: center center;
         background-size: cover;
         margin: 0px; }
-        .slide div .project .cover h2 {
-          text-align: center;
-          background: rgba(0, 0, 0, 0.5);
-          color: white; }
+      .slide div .project h2 {
+        margin: .5em 0 0 1em;
+        padding: 0; }
+      .slide div .project p {
+        margin: 0 0 0 1.5em;
+        text-indent: 0; }
     .slide div .project:hover {
       box-shadow: 1px 1px 3px #333; }
-    .slide div p,
-    .slide div table {
-      text-align: left; }
   .slide table {
     line-height: 1.3;
     margin: 0;
diff --git a/gulpfile.js b/gulpfile.js
index 2afa92a..b6a6fd8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,9 +1,22 @@
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var connect = require('gulp-connect');
 
 gulp.task('default', function() {
+    connect.server({
+        port: 3000,
+        livereload: true
+    });
+    gulp.watch("./sass/*.scss", ['style', 'reload']);
+    gulp.watch("*.html", ['reload']);
+})
+gulp.task('style', function() {
     // place code for your default task here
-    gulp.src('*.scss')
+    gulp.src('./sass/*.scss')
         .pipe(sass().on('error', sass.logError))
-        .pipe(gulp.dest('./'));
-});
\ No newline at end of file
+        .pipe(gulp.dest('./css/'));
+});
+gulp.task('reload', function() {
+    gulp.src('*.html')
+        .pipe(connect.reload());
+})
\ No newline at end of file
diff --git a/Chuck.jpg b/images/Chuck.jpg
similarity index 100%
rename from Chuck.jpg
rename to images/Chuck.jpg
diff --git a/ChuckNew.jpg b/images/ChuckNew.jpg
similarity index 100%
rename from ChuckNew.jpg
rename to images/ChuckNew.jpg
diff --git a/cd.ai b/images/cd.ai
similarity index 100%
rename from cd.ai
rename to images/cd.ai
diff --git a/cd.png b/images/cd.png
similarity index 100%
rename from cd.png
rename to images/cd.png
diff --git a/chuck2.png b/images/chuck2.png
similarity index 100%
rename from chuck2.png
rename to images/chuck2.png
diff --git a/index.html b/index.html
index 0150162..17e323a 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Chuck Dries</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://chuckdri.es/icons/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://chuckdri.es/icons/apple-touch-icon-114x114.png" />
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://chuckdri.es/icons/apple-touch-icon-72x72.png" />
@@ -30,7 +30,7 @@
             <div style="display:table-cell;vertical-align:middle;">
                 <div id="mast">
                     <h1 style="display:none;">Chuck Dries</h1>
-                    <img src="cd.png" alt="Chuck Dries">
+                    <img src="images/cd.png" alt="Chuck Dries">
                     <h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
                     <div class="hideable">
                         <p>Digital Developer, <span class="sub">The State Press</span></p>
@@ -56,8 +56,8 @@
         <p>I'm a Computer Science student and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and my pixel perfect lovingly handcrafted 💯% good
             stuff 👍👌 HTML. These days, you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
         <p>This website is still an active development project, pls don't judge too harshly.</p>
-        <h1 id="skills">Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1>
-        <div id="skilltable">
+        <div id="skilltable" style="display:none; ">
+            <h1 id="skills">Skills</h1>
             <table>
                 <tr>
                     <td class="ld">The <span style="font-style:italic">Internet</span></td>
@@ -114,51 +114,30 @@
                 </tr>
             </table>
         </div>
+        <div><a id="skilltablebutton" style="text-decoration: underline; font-size: 1.1em; font-style: italic; font-weight: normal;" onclick="toggleSkillTable()">More about me ></a>
+        </div>
     </div>
     <div class="slide">
         <h1>Projects &amp; Experience</h1>
         <div>
             <div class="project">
                 <div class="cover" id="sierra">
-                    <!-- centering container -->
-                    <div style="display:table;width:100%;height:100%;margin:0px;">
-                        <div style="display:table-cell;vertical-align:middle;margin:0px;">
-                            <h2>Project Sierra</h2>
-                        </div>
-                    </div>
+                </div>
+                <h2>Project Name</h2>
+                <p>Project description</p>
+            </div>
+            <div class="project">
+                <div class="cover" id="sierra">
                 </div>
                 <p>Project description</p>
             </div>
             <div class="project">
                 <div class="cover" id="sierra">
-                    <!-- centering container -->
-                    <div style="display:table;width:100%;height:100%;margin:0px;">
-                        <div style="display:table-cell;vertical-align:middle;margin:0px;">
-                            <h2>Project Sierra</h2>
-                        </div>
-                    </div>
                 </div>
                 <p>Project description</p>
             </div>
             <div class="project">
                 <div class="cover" id="sierra">
-                    <!-- centering container -->
-                    <div style="display:table;width:100%;height:100%;margin:0px;">
-                        <div style="display:table-cell;vertical-align:middle;margin:0px;">
-                            <h2>Project Sierra</h2>
-                        </div>
-                    </div>
-                </div>
-                <p>Project description</p>
-            </div>
-            <div class="project">
-                <div class="cover" id="sierra">
-                    <!-- centering container -->
-                    <div style="display:table;width:100%;height:100%;margin:0px;">
-                        <div style="display:table-cell;vertical-align:middle;margin:0px;">
-                            <h2>Project Sierra</h2>
-                        </div>
-                    </div>
                 </div>
                 <p>Project description</p>
             </div>
@@ -266,7 +245,7 @@
     <script>
         var last_known_scroll = getScrollY();
         var queueing = false;
-        var t = true;
+        var t = false;
         var st = document.getElementById("skilltable");
         var stb = document.getElementById("skilltablebutton");
         document.addEventListener("scroll", function() {
@@ -284,6 +263,7 @@
 
         sc(last_known_scroll);
 
+        //execute scroll style modifications
         function sc(ypos) {
 
             var wheight = window.innerHeight;
@@ -329,11 +309,11 @@
         function toggleSkillTable() {
             if (t) {
                 st.style.display = "none";
-                stb.innerText = "show";
+                stb.innerText = "More about me";
                 t = false;
             } else {
                 st.style.display = "block";
-                stb.innerText = "hide";
+                stb.innerText = "Less about me";
                 t = true;
             }
         }
diff --git a/package.json b/package.json
index 4978a0f..cd2935e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "devDependencies": {
     "gulp": "^3.9.1",
+    "gulp-connect": "^5.0.0",
     "gulp-sass": "^3.1.0",
     "lite-server": "^2.2.2"
   }
diff --git a/sass/covers.scss b/sass/covers.scss
new file mode 100644
index 0000000..3265890
--- /dev/null
+++ b/sass/covers.scss
@@ -0,0 +1,4 @@
+// covers.scss
+#sierra {
+    background-image: url("../images/ChuckNew.jpg");
+}
\ No newline at end of file
diff --git a/style.scss b/sass/style.scss
similarity index 89%
rename from style.scss
rename to sass/style.scss
index c046658..e37efd5 100644
--- a/style.scss
+++ b/sass/style.scss
@@ -10,9 +10,11 @@ $greybg: rgba(0, 0, 0, .5);
 }
 
 @import 'covers';
-//
-//sections
-//
+
+/*
+ * sections
+ */
+
 body {
     @extend .reset;
     font-family: serif;
@@ -108,35 +110,34 @@ body {
     div {
         max-width: $width;
         margin: auto;
-        text-align: center;
         /* Project bits */
         .project {
             transition-duration: .2s;
             width: $width/2 - 10;
-            border: 1px solid #333;
+            border: 1px solid #aaa;
             border-radius: 5px;
             padding: 0px;
             display: inline-block;
             margin: 3px;
+            overflow: hidden;
             .cover {
                 height: 300px;
                 background-position: center center;
                 background-size: cover;
                 margin: 0px;
-                h2 {
-                    text-align: center;
-                    background: $greybg;
-                    color: white;
-                }
+            }
+            h2 {
+                margin: .5em 0 0 1em;
+                padding: 0;
+            }
+            p {
+                margin: 0 0 0 1.5em;
+                text-indent: 0;
             }
         }
         .project:hover {
             box-shadow: 1px 1px 3px #333;
         }
-        p,
-        table {
-            text-align: left;
-        }
     }
     table {
         line-height: 1.3;
diff --git a/style.css.map b/style.css.map
deleted file mode 100644
index e6b4510..0000000
--- a/style.css.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;ACPf,OAAQ;EACJ,gBAAgB,EAAE,mBAAmB;;ADazC,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA7BT,KAAK;;AAiCb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAzCN,OAAO;EA2CV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA9CN,IAAI;EAgDP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB;;GAEG;AAGH,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,oBAAoB;EACpB,UAAI;IACA,SAAS,EA3GT,KAAK;IA4GL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,kBAAkB;IAClB,mBAAS;MACL,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,MAAM,EAAE,cAAc;MACtB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,0BAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,6BAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EA3HrB,kBAAiB;UA4HN,KAAK,EAAE,KAAK;IAIxB,yBAAe;MACX,UAAU,EAAE,gBAAgB;IAEhC;oBACM;MACF,UAAU,EAAE,IAAI;EAGxB,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EAxJT,KAAK;IAyJL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EA9JT,KAAK;IA+JL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
-"sources": ["style.scss","covers.scss"],
-"names": [],
-"file": "style.css"
-}