MasonryJS for projects and decent style

css/covers.css

@@ -1,2 +1,5 @@
 #sierra {
   background-image: url("../images/ChuckNew.jpg"); }
+
+#virtualKeyality {
+  background-image: url("../images/keyality.jpg"); }

css/style.css

@@ -1,11 +1,17 @@
-.reset, body, .slide {
+.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
-  padding: 0px;
+  padding: 0;
-  margin: 0px;
+  margin: 0;
-  clear: both; }
+  text-indent: 0; }
 
+/*
+ * Covers for projects section
+ */
 #sierra {
   background-image: url("../images/ChuckNew.jpg"); }
 
+#virtualKeyality {
+  background-image: url("../images/keyality.jpg"); }
+
 /*
  * sections
  */
@@ -19,7 +25,8 @@ body {
   padding-top: 10px;
   width: 100%;
   position: fixed;
-  background: black; }
+  background: black;
+  z-index: 999; }
   #top div {
     margin: auto;
     max-width: 800px; }
@@ -84,9 +91,6 @@ body {
       width: 390px;
       border: 1px solid #aaa;
       border-radius: 5px;
-      padding: 0 0 1em 0;
-      display: inline-block;
-      margin: 3px;
       overflow: hidden; }
       .slide div .project .cover {
         height: 15em;
@@ -95,25 +99,61 @@ body {
         margin: 0px;
         padding: 1em; }
       .slide div .project .details {
-        padding: .5em 1em 0 1em; }
+        padding: 1em 1em 0 1em; }
         .slide div .project .details h2 {
-          margin: 0;
+          line-height: 1;
-          padding: 0; }
+          margin: 0 0 .5em 0; }
         .slide div .project .details p {
-          margin: 0 0 0 0;
+          margin: 0 0 .5em 0; }
-          text-indent: 0; }
         .slide div .project .details .tag {
           float: left;
           padding: 0 .3em 0 .3em;
           background: #eee;
           border: 1px solid #ccc;
           margin: .2em;
-          border-radius: .3em; }
+          border-radius: 5px; }
-        .slide div .project .details .tag.upper {
+        .slide div .project .details .cat {
-          margin-top: .5em;
+          background: #B7EEFF;
-          float: right; }
+          border: 1px solid #8AC9DD; }
-        .slide div .project .details .tag.award {
+        .slide div .project .details .award {
-          background: #FFFCB7; }
+          float: right;
+          background: none;
+          border: none;
+          margin: 0 0 .5em .5em; }
+          .slide div .project .details .award div {
+            display: inline-block;
+            text-align: center;
+            vertical-align: middle;
+            padding: 0; }
+            .slide div .project .details .award div h3 {
+              margin: 0;
+              padding: 0;
+              font-size: 1.6em;
+              line-height: 1;
+              font-weight: normal;
+              font-style: italic; }
+            .slide div .project .details .award div p {
+              font-size: .8em; }
+        .slide div .project .details .award::before {
+          vertical-align: middle;
+          background-image: url(../images/laurelleft.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          display: inline-block;
+          content: "";
+          width: 2em;
+          height: 3em; }
+        .slide div .project .details .award::after {
+          vertical-align: middle;
+          background-image: url(../images/laurelright.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          display: inline-block;
+          content: "";
+          width: 2em;
+          height: 3em; }
     .slide div .project:hover {
       box-shadow: 1px 1px 3px #333; }
   .slide table {
@@ -135,6 +175,24 @@ body {
     max-width: 800px;
     margin: auto;
     margin-top: 1.7em; }
+  @media (max-width: 800px) {
+    .slide div {
+      margin: auto;
+      padding: 0; }
+      .slide div .project {
+        width: 95vw;
+        float: none;
+        display: block;
+        margin: 0 0 .5em 1vw; }
+    .slide p,
+    .slide h1,
+    .slide h2,
+    .slide a {
+      margin: .5em; } }
+
+@media (max-width: 800px) {
+  #mast {
+    padding-left: 1em; } }
 
 h2 {
   font-style: italic; }

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <title>Chuck Dries</title>
     <link rel="stylesheet" href="css/style.css">
+    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
     <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" />
@@ -119,18 +120,53 @@
     </div>
     <div class="slide">
         <h1>Projects &amp; Experience</h1>
-        <div>
+        <div class="grid" data-masonry='{ "itemSelector": ".project", "columnWidth": 400 }'>
             <div class="project">
-                <div class="cover" id="sierra">
+                <div class="cover" id="virtualKeyality">
                 </div>
                 <div class="details">
-                    <span class="award tag upper">Hackathon winner</span>
+                    <div class="award">
-                    <h2>Project Name</h2>
+                        <div>
-                    <p class="description">Project description</p>
+                            <h3>1st Place</h3>
-                    <span class="tag">Tech</span>
+                            <p>Desert Hacks 2017</p>
-                    <span class="tag">Design</span>
+                        </div>
-                    <span class="tag">Javascript</span>
+                    </div>
-                    <span class="tag">NodeJs</span>
+                    <h2>Virtual Keyality</h2>
+                    <p>A VR typing game.</p>
+                    <p>The idea started as something of a joke, but after prototyping we realized that we stumbled upon a killer feature: when you're wearing the headset, you can't see your keyboard. </p>
+                    <p><a href="https://github.com/James-Quigley/deserthacks">View on GitHub</a></p>
+                    <span class="tag cat">Tech</span>
+                    <span class="tag cat">Design</span>
+                    <span class="tag">Unity</span>
+                    <span class="tag">C#</span>
+                    <span class="tag">Virtual Reality</span>
+                    <span class="tag">SteamVR</span>
+                    <span class="tag">Hackathon projects</span>
+                </div>
+            </div>
+            <div class="project">
+                <div class="cover" id="virtualKeyality">
+                </div>
+                <div class="details">
+                    <div class="award">
+                        <div>
+                            <h3>3rd Place</h3>
+                            <p>Opportunity Hack 2016</p>
+                        </div>
+                    </div>
+                    <h2>Volunteer Management Portal</h2>
+                    <p>A MEAN web app for nonprofits.</p>
+                    <p>Opportunity Hack is a charity hackathon where hackers are paired with nonprofits to solve the real world problems they face. The Lost Our Home pet rescue needed a better way to track volunteers and encourage volunteers to keep coming
+                        back. Our solution revolved around easy to access scheduling and volunteer-hour leaderboards to encourage first time volunteers to return.</p>
+                    <p><a href="https://github.com/Opportunity-Hack-2016-AZ/Team15">View on GitHub</a></p>
+                    <span class="tag cat">Tech</span>
+                    <span class="tag cat">Design</span>
+                    <span class="tag">NodeJS</span>
+                    <span class="tag">MongoDB</span>
+                    <span class="tag">ExpressJS</span>
+                    <span class="tag">Bootstrap</span>
+                    <span class="tag">Web</span>
+                    <span class="tag">Hackathon projects</span>
                 </div>
             </div>
         </div>

sass/covers.scss

@@ -1,4 +1,9 @@
 // covers.scss
+// EDIT THIS
 #sierra {
     background-image: url("../images/ChuckNew.jpg");
 }
+
+#virtualKeyality {
+    background-image: url("../images/keyality.jpg");
+}

sass/responsive.scss

@@ -0,0 +1,5 @@
+@mixin respond-to($breakpoint) {
+    @media (max-width: $width) {
+        @content;
+    }
+}

sass/style.scss

@@ -1,14 +1,20 @@
 //setup
+@import 'responsive';
 $width: 800px;
 $grey: #ccc;
 $pink: #ed1a76;
 $greybg: rgba(0, 0, 0, .5);
 .reset {
-    padding: 0px;
+    padding: 0;
-    margin: 0px;
+    margin: 0;
-    clear: both;
+    text-indent: 0;
 }
 
+
+/*
+ * Covers for projects section
+ */
+
 @import 'covers';
 
 /*
@@ -28,6 +34,7 @@ body {
     width: 100%;
     position: fixed;
     background: black;
+    z-index: 999;
     div {
         margin: auto;
         max-width: $width;
@@ -104,7 +111,7 @@ body {
  * standalone elements
  */
 
-// the standard section element */
+// the standard section element
 .slide {
     @extend .reset;
     padding: 0px;
@@ -119,9 +126,6 @@ body {
             width: $width/2 - 10;
             border: 1px solid #aaa;
             border-radius: 5px;
-            padding: 0 0 1em 0;
-            display: inline-block;
-            margin: 3px;
             overflow: hidden;
             .cover {
                 height: 15em;
@@ -131,14 +135,15 @@ body {
                 padding: 1em;
             }
             .details {
-                padding: .5em 1em 0 1em;
+                padding: 1em 1em 0 1em;
                 h2 {
-                    margin: 0;
+                    @extend .reset;
-                    padding: 0;
+                    line-height: 1;
+                    margin: 0 0 .5em 0;
                 }
                 p {
-                    margin: 0 0 0 0;
+                    @extend .reset;
-                    text-indent: 0;
+                    margin: 0 0 .5em 0;
                 }
                 .tag {
                     float: left;
@@ -146,14 +151,57 @@ body {
                     background: #eee;
                     border: 1px solid #ccc;
                     margin: .2em;
-                    border-radius: .3em;
+                    border-radius: 5px;
                 }
-                .tag.upper {
+                .cat {
-                    margin-top: .5em;
+                    background: #B7EEFF;
+                    border: 1px solid #8AC9DD;
+                }
+                .award {
                     float: right;
+                    background: none;
+                    border: none;
+                    margin: 0 0 .5em .5em;
+                    div {
+                        display: inline-block;
+                        text-align: center;
+                        vertical-align: middle;
+                        padding: 0;
+                        h3 {
+                            margin: 0;
+                            padding: 0;
+                            font-size: 1.6em;
+                            line-height: 1;
+                            font-weight: normal;
+                            font-style: italic;
                         }
-                .tag.award {
+                        p {
-                    background: #FFFCB7;
+                            @extend .reset;
+                            font-size: .8em;
+                        }
+                    }
+                }
+                .award::before {
+                    vertical-align: middle;
+                    background-image: url(../images/laurelleft.png);
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-position: center center;
+                    display: inline-block;
+                    content: "";
+                    width: 2em;
+                    height: 3em;
+                }
+                .award::after {
+                    vertical-align: middle;
+                    background-image: url(../images/laurelright.png);
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-position: center center;
+                    display: inline-block;
+                    content: "";
+                    width: 2em;
+                    height: 3em;
                 }
             }
         }
@@ -184,6 +232,31 @@ body {
         margin: auto;
         margin-top: 1.7em;
     }
+    @include respond-to($width) {
+        div {
+            margin: auto;
+            padding: 0;
+            .project {
+                width: 95vw;
+                float: none;
+                display: block;
+                margin: 0 0 .5em 1vw;
+                ;
+            }
+        }
+        p,
+        h1,
+        h2,
+        a {
+            margin: .5em;
+        }
+    }
+}
+
+@include respond-to($width) {
+    #mast {
+        padding-left: 1em;
+    }
 }
 
 h2 {