Added icons on homepage for each project

css/main.css

@@ -1,7 +1,7 @@
 body {
     margin: 20px auto;
     width: 60%;
-    background: #000000 url("/bg.jpg");
+    background: #000 url("/bg.jpg");
     margin-bottom: 10px;
 }
 
@@ -56,3 +56,55 @@ img {
     border:1px solid #2F343F;
     border-radius: 3px;
 }
+
+#projects .thumb {
+    cursor: pointer;
+    border-radius: 16px;
+    float: left;
+    margin: 5px;
+    width: 312px;
+    height: 250px;
+    position: relative;
+    overflow: hidden;
+}
+
+#projects .thumb img {
+    position: absolute;
+    left: 0;
+    -webkit-transition: all 300ms ease-out;
+    -moz-transition: all 300ms ease-out;
+    -o-transition: all 300ms ease-out;
+    -ms-transition: all 300ms ease-out;
+    transition: all 300ms ease-out;
+}
+
+#projects .thumb .thumbcaption {
+    background-color: #000;
+    background-color: rgba(0,0,0,0.8);
+    position: absolute;
+    color: #fff;
+    z-index: 100;
+    -webkit-transition: all 300ms ease-out;
+    -moz-transition: all 300ms ease-out;
+    -o-transition: all 300ms ease-out;
+    -ms-transition: all 300ms ease-out;
+    transition: all 300ms ease-out;
+    left: 0;
+}
+
+#projects .thumb .thumbcaption {
+    height: 30px;
+    width: 100%;
+    display: block;
+    bottom: -30px;
+    line-height: 25pt;
+    text-align: center;
+}
+
+#projects .thumb:hover .thumbcaption {
+    -moz-transform: translateY(-100%);
+    -ms-transform: translateY(-100%);
+    -o-transform: translateY(-100%);
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+}

index.html

@@ -13,6 +13,44 @@ title: The Paper Pilot
         <p>
           I have experience with ActionScript, Bash script, CSS, HTML, Java, JavaScript, Python, and Ruby. Additionally, I can use Git, LaTeX, and Jekyll.
         </p>
+        <h1>Projects:</h1>
+        <div id="projects" style="overflow: hidden;">
+          <div class="thumb">
+            <a href="/kiosk">
+            <img src="./kiosk/thumb.png">
+            <span class="thumbcaption"><p style="display: inline">
+              Computer Science Kiosk
+            </p></span></a>
+          </div>
+          <div class="thumb">
+            <a href="/space">
+            <img src="./space/thumb.png">
+            <span class="thumbcaption"><p style="display: inline">
+              Space Game
+            </p></span></a>
+          </div>
+          <div class="thumb">
+            <a href="/ican">
+            <img src="./ican/thumb.png">
+            <span class="thumbcaption"><p style="display: inline">
+              iCan
+            </p></span></a>
+          </div>
+          <div class="thumb">
+            <a href="/strange">
+            <img src="./strange/thumb.png">
+            <span class="thumbcaption"><p style="display: inline">
+              12 is Strange
+            </p></span></a>
+          </div>
+          <div class="thumb">
+            <a href="/drawing">
+            <img src="./drawing/thumb.png">
+            <span class="thumbcaption"><p style="display: inline">
+              Digital Drawing
+            </p></span></a>
+          </div>
+        </div>
         <p>
           <a href="https://drive.google.com/uc?export=download&id=0B4xCmMA9eS2jZExWTGhtbS1nT0k" class="download" title="Download as PDF">
             Download my Resume