diff --git a/css/style.css b/css/style.css
index 5710aad..96835a0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -229,7 +229,8 @@ body {
       border-radius: 5px;
       overflow: hidden;
       box-shadow: 1px 1px 3px #ddd;
-      background: white; }
+      background: white;
+      margin-bottom: 20px; }
       .slide div .project .cover {
         height: 15em;
         background-position: center center;
@@ -237,6 +238,9 @@ body {
         background-repeat: no-repeat;
         margin: 0px;
         padding: 1em; }
+        .slide div .project .cover video {
+          height: 100%;
+          width: 100%; }
       .slide div .project .details {
         padding: 1em 1em 0 1em; }
         .slide div .project .details h2 {
diff --git a/images/scroll.mp4 b/images/scroll.mp4
new file mode 100644
index 0000000..086e206
Binary files /dev/null and b/images/scroll.mp4 differ
diff --git a/index.html b/index.html
index 31672f8..e94c8f1 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
     <title>Chuck Dries</title>
     <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
     <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" />
@@ -28,7 +27,9 @@
                 <div id="mast">
                     <h1 style="display:none;">Chuck Dries</h1>
                     <img src="images/cd.png" alt="Chuck Dries">
-                    <h2 class="tagline">Programmer <span style="font-style: normal">/</span> Student <span style="font-style: normal">/</span>                        Friendly dude
+                    <h2 class="tagline">Programmer
+                        <span style="font-style: normal">/</span> Student
+                        <span style="font-style: normal">/</span> Friendly dude
                     </h2>
                     <p>
                         <a href="#about">About Me</a> /
@@ -36,9 +37,14 @@
                         <a href="#projects">Projects</a>
                     </p>
                     <div class="hideable">
-                        <p>Digital Developer, <span class="sub">The State Press</span></p>
-                        <p>Computer Science Student, <span class="sub">Arizona State University</span></p>
-                        <p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
+                        <p>Digital Developer,
+                            <span class="sub">The State Press</span>
+                        </p>
+                        <p>Computer Science Student,
+                            <span class="sub">Arizona State University</span>
+                        </p>
+                        <p>
+                            <a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
                         <p>
                             <a href="http://github.com/chuckdries">Github</a>/
                             <a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
@@ -57,7 +63,9 @@
     </div>
     <div class="slide" style="margin-top:0px;">
         <a name="about" style="padding-top: 130px"></a>
-        <h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span></h1>
+        <h1>About Me
+            <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span>
+        </h1>
         <h3>A brief history of Chuck &amp; tech</h3>
         <p>I'm a computer science student with experience in photography, digital and print graphic design, teaching, and leading.
             I've been "into computers" my whole life, but I didn't really get into the technical stuff until middle school,
@@ -71,7 +79,9 @@
         <div id="skilltable" style="display:none;">
             <table>
                 <tr>
-                    <td class="ld">The <span style="font-style:italic">Internet</span></td>
+                    <td class="ld">The
+                        <span style="font-style:italic">Internet</span>
+                    </td>
                     <td>
                         <ul>
                             <li>HTML5</li>
@@ -98,7 +108,8 @@
                     <td>
                         <ul>
                             <li>Virtualization with KVM/LibVirt/QEMU and ESXi</li>
-                            <li>A <span style="font-style:italic">lot</span> of time spent managing POSIX and Windows environments</li>
+                            <li>A
+                                <span style="font-style:italic">lot</span> of time spent managing POSIX and Windows environments</li>
                             <li>Network configuration in PFSense and in general</li>
                         </ul>
                     </td>
@@ -125,14 +136,15 @@
                 </tr>
             </table>
         </div>
-        <div><a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a>
+        <div>
+            <a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a>
         </div>
     </div>
     <div class="slide">
         <a name="projects" style="padding-top: 130px;"></a>
         <h1>Projects &amp; Experience</h1>
         <p style="text-indent: 0; margin-bottom: 5px;font-style: italic; font-weight:normal; color: #555;">More projects coming. For now, check my github or email me.</p>
-        <div class="grid" data-masonry='{"itemSelector" :".project", "columnWidth": 400 }'>
+        <div class="grid">
             <div class="project">
                 <div class="cover" id="virtualKeyality">
                 </div>
@@ -147,7 +159,9 @@
                     <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://devpost.com/software/deserthacks">View on Devpost</a></p>
+                    <p>
+                        <a href="https://devpost.com/software/deserthacks">View on Devpost</a>
+                    </p>
                     <span class="tag">Unity</span>
                     <span class="tag">C#</span>
                     <span class="tag">Virtual Reality</span>
@@ -171,7 +185,9 @@
                         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>
+                    <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>
@@ -182,91 +198,124 @@
                     <span class="tag">Hackathon projects</span>
                 </div>
             </div>
+            <div class="project">
+                <div class="cover" id="fbr">
+                    <video autoplay loop src="images/scroll.mp4"></video>
+                </div>
+                <div class="details">
+                    <h2>Firebird Robotics Website</h2>
+                    <p>My First Real Website</p>
+                    <p>I was on my high school's robotics team, and we needed a website. This is where I really learned CSS
+                        in depth, I handled the photography and wrote the entire site by hand fresh every year. I no longer
+                        control the content of the site, so instead of linking it directly, I'm linking it as it existed
+                        in two different school years while I was still in charge.</p>
+                    <p>
+                        <a href="http://web.archive.org/web/20150209123618im_/http://firebirdrobotics.com/default.html">2014 School Year</a>
+                    </p>
+                    <p>
+                        <a href="http://web.archive.org/web/20150908032117im_/http://www.firebirdrobotics.com:80/">2015 School Year</a>
+                    </p>
+                    <!--<span class="tag cat ">Tech</span>-->
+                    <!--<span class="tag cat ">Design</span>-->
+                    <span class="tag">Web</span>
+                </div>
+            </div>
+            <p>&copy; Chuck Dries 2017</p>
+            <br>
+            <!--ewwww-->
         </div>
-        <p>&copy; Chuck Dries 2017</p>
-        <br>
-        <!--ewwww-->
-    </div>
-    <script>
-        var last_known_scroll = getScrollY();
-        var queueing = false;
-        var t = false; //state of skill table
-        var st = document.getElementById("skilltable");
-        var stb = document.getElementById("skilltablebutton");
-        var sp = document.getElementById("scrollprompt");
-        document.addEventListener("scroll", function () {
-            last_known_scroll = getScrollY();
-            // sc(last_known_scroll);
-            // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
-            if (!queueing) {
-                window.requestAnimationFrame(function () {
-                    sc(last_known_scroll);
-                    queueing = false;
-                });
+        <script>
+            var last_known_scroll = getScrollY();
+            var queueing = false;
+            var t = false; //state of skill table
+            var st = document.getElementById("skilltable");
+            var stb = document.getElementById("skilltablebutton");
+            var sp = document.getElementById("scrollprompt");
+            document.addEventListener("scroll", function () {
+                last_known_scroll = getScrollY();
+                // sc(last_known_scroll);
+                // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
+                if (!queueing) {
+                    window.requestAnimationFrame(function () {
+                        sc(last_known_scroll);
+                        queueing = false;
+                    });
+                }
+                queueing = true;
+            });
+
+            sc(last_known_scroll);
+
+            //execute scroll style modifications
+            function sc(ypos) {
+
+                var windowHeight = window.innerHeight;
+                //top thing
+                var topDiv = document.getElementById("top");
+                var mast = document.getElementById("mast");
+                var hcalc = windowHeight - ypos;
+                var topheight;
+                if (hcalc > 130) {
+                    topHeight = hcalc;
+                } else {
+                    topHeight = 130;
+                }
+                // var mastHeight = mast.clientHeight;
+                // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
+                if (topHeight < 360) {
+                    topDiv.className = "small";
+                } else {
+                    topDiv.className = "large";
+                }
+                topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top
+
+                //background thing
+                var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll
+                var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
+
             }
-            queueing = true;
-        });
 
-        sc(last_known_scroll);
-
-        //execute scroll style modifications
-        function sc(ypos) {
-
-            var windowHeight = window.innerHeight;
-            //top thing
-            var topDiv = document.getElementById("top");
-            var mast = document.getElementById("mast");
-            var hcalc = windowHeight - ypos;
-            var topheight;
-            if (hcalc > 130) {
-                topHeight = hcalc;
-            } else {
-                topHeight = 130;
+            function getScrollY() {
+                //internet explorer does not have a window.scrollY property, it has pageYOffset
+                return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
             }
-            // var mastHeight = mast.clientHeight;
-            // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
-            if (topHeight < 360) {
-                topDiv.className = "small";
-            } else {
-                topDiv.className = "large";
+
+            function toggleSkillTable() {
+                if (t) {
+                    st.style.display = "none";
+                    stb.innerText = "Show skills table";
+                    t = false;
+                } else {
+                    st.style.display = "block";
+                    stb.innerText = "Less about me";
+                    t = true;
+                }
             }
-            topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top
 
-            //background thing
-            var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll
-            var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
-
-        }
-
-        function getScrollY() {
-            //internet explorer does not have a window.scrollY property, it has pageYOffset
-            return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
-        }
-
-        function toggleSkillTable() {
-            if (t) {
-                st.style.display = "none";
-                stb.innerText = "Show skills table";
-                t = false;
-            } else {
-                st.style.display = "block";
-                stb.innerText = "Less about me";
-                t = true;
+            function openSkillTable() {
+                if (!t) {
+                    st.style.display = "block";
+                    stb.innerText = "Less about me";
+                    t = true;
+                }
             }
-        }
 
-        function openSkillTable() {
-            if (!t) {
-                st.style.display = "block";
-                stb.innerText = "Less about me";
-                t = true;
+            function prompt() {
+
             }
-        }
-
-        function prompt() {
-
-        }
-    </script>
+        </script>
+        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+        <script>
+            var msnry = new Masonry('.grid', {
+                itemSelector: '.project',
+                columnWidth: 400,
+                // disable initial layout
+                initLayout: false
+            });
+            window.onload = function () {
+                msnry.layout();
+            }
+        </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5038fdc..53182c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4646,6 +4646,12 @@
         "limiter": "1.1.2"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -4657,12 +4663,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/sass/style.scss b/sass/style.scss
index 08aa93e..bbdc525 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -137,6 +137,7 @@ body {
     div {
         @extend .widthCenter;
         /* Project bits */
+        //TODO: un-nest this stuff
         .project {
             width: $width/2 - 10;
             padding: 0 0 1em 0;
@@ -145,6 +146,7 @@ body {
             overflow: hidden;
             box-shadow: 1px 1px 3px #ddd;
             background: white;
+            margin-bottom: 20px;
             .cover {
                 height: 15em;
                 background-position: center center;
@@ -152,6 +154,10 @@ body {
                 background-repeat: no-repeat;
                 margin: 0px;
                 padding: 1em;
+                video {
+                    height: 100%;
+                    width: 100%;
+                }
             }
             .details {
                 padding: 1em 1em 0 1em;
@@ -243,6 +249,9 @@ body {
         font-style: italic; // font-weight: 700;
         margin-top: 1.7em;
     }
+    .grid {
+        // columns: 2 auto;
+    }
     @include textElements() {
         @extend .widthCenter;
     }
@@ -266,6 +275,9 @@ body {
             // margin-right: .8em;
             // margin-left: .8em;
         }
+        .grid {
+            // columns: 1 auto;
+        }
     }
 }