spruced up the nav with some icons and added css animation lib to add…

… life to the spotlight

_includes/head.html

@@ -10,6 +10,7 @@
 
     <!-- TODO: use grunt to create one vendor css file -->
     <link rel="stylesheet" href="{{ " /assets/vendor/css/font-awesome.min.css " | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ " /assets/vendor/css/animate.min.css " | prepend: site.baseurl }}">
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ " /feed.xml " | prepend: site.baseurl | prepend: site.url }}" />

_includes/header.html

@@ -14,11 +14,11 @@
       </a>
 
       <div class="trigger">
-          <a class="page-link" href="/about/">about</a>
-          <a class="page-link" href="/blog/">blog</a>
-          <a class="page-link" href="/projects/">projects</a>
-          <a class="page-link" href="/resume/">resume</a>
-          <a class="page-link" href="/contact/">contact</a>
+          <a class="page-link" href="/about/"><i class="fa fa-user"></i> about</a>
+          <a class="page-link" href="/blog/"><i class="fa fa-rss"></i> blog</a>
+          <a class="page-link" href="/lab/"><i class="fa fa-rocket"></i> lab</a>
+          <a class="page-link" href="/resume/"><i class="fa fa-briefcase"></i> resume</a>
+          <a class="page-link" href="/contact/"><i class="fa fa-envelope"></i> contact</a>
       </div>
     </nav>
 

_sass/_header.scss

@@ -6,6 +6,7 @@ body > header {
     min-height: 56px;
     // Positioning context for the mobile navigation icon
     position: fixed;
+    z-index: 999;
     top: 0;
     width: 100%;
     @include box_shadow(0, 3px, 6px, 0, 0, 0, 0.42);

_sass/_spotlight.scss

@@ -6,10 +6,10 @@
     background-position: center center;
     color: $white;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
-
     @include border(solid 10px $divider-color, bottom);
-
     h1 {
         padding: 130px 0;
+        -webkit-animation-duration: 1.5s;
+        animation-duration: 1.5s;
     }
 }

bower.json

@@ -14,6 +14,7 @@
     "tests"
   ],
   "dependencies": {
-    "fontawesome": "~4.4.0"
+    "fontawesome": "~4.4.0",
+    "animateCSS": "~1.2.1"
   }
 }

index.html

@@ -3,7 +3,7 @@
 ---
 <div class="spotlight">
     <div class="wrapper">
-        <h1 class="text-center">{{ site.description }}</h1>
+        <h1 class="text-center animated bounceInDown">{{ site.description }}</h1>
     </div>
 </div>
 

projects/index.html → lab/index.html

@@ -1,8 +1,8 @@
 ---
 layout: page 
 title: Projects | J.Lea-Jones
-permalink: /projects/ 
-label: Projects 
+permalink: /lab/ 
+label: Lab 
 ---
 <h1 class="page-title">{{ page.label }}</h1>