From 6405ad549d25f64cf8dc97d0844530e8b76a0bfb Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jdb@jdb-labs.com>
Date: Wed, 23 Sep 2015 17:48:35 -0500
Subject: [PATCH] Started styling HTML resume.

---
 .gitignore                   |   3 +
 html-interactive/index.html  |  26 ++++++---
 html-interactive/resume.js   |  19 +++++++
 html-interactive/resume.scss | 103 +++++++++++++++++++++++++++++++++++
 4 files changed, 144 insertions(+), 7 deletions(-)
 create mode 100644 html-interactive/resume.js

diff --git a/.gitignore b/.gitignore
index 0a2a55e..b1425e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,6 @@
 *.log
 *.dvi
 *.pdf
+.sass-cache/
+*.css
+*.css.map
diff --git a/html-interactive/index.html b/html-interactive/index.html
index 4588c15..1d02889 100644
--- a/html-interactive/index.html
+++ b/html-interactive/index.html
@@ -14,15 +14,18 @@
         </header>
 
         <nav id=sectionNav>
-            <a href=#skills>Things I Know</a>
-            <a href=#projects>Things I've Done</a>
-            <a href=#jobs>Places I've Worked</a>
-            <a href=#about>Who I Am</a>
+            <ul>
+                <li><a href=#skills>Things I Know</a></li>
+                <li><a href=#projects>Things I've Done</a></li>
+                <li><a href=#jobs>Places I've Worked</a></li>
+                <li><a href=#about>Who I Am</a></li>
+            </ul>
         </nav>
 
         <input type=text name=filter style="display: none;">
 
-        <section id=skills>
+        <section id=skills-section>
+            <a class=anchor id=skills></a>
             <div id=languages>
                 <h3>Programming Languages</h3>
                 <span>Java</span>
@@ -166,11 +169,20 @@
             </div>
         </section>
 
-        <section id=jobs>
+        <section id=jobs-section>
+            <a class=anchor id=jobs></a>
         </section>
 
-        <section id=projects>
+        <section id=projects-section>
+            <a class=anchor id=projects></a>
         </section>
+
+        <!--<script src=https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js></script>-->
+        <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>
+        <script src=https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js></script>
+        <script src=https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js></script>
         <script src=resume.js></script>
+        <script>
+            window.onload = function() { new Resume.PageView(); }</script>
     </body>
 </html>
diff --git a/html-interactive/resume.js b/html-interactive/resume.js
new file mode 100644
index 0000000..2409485
--- /dev/null
+++ b/html-interactive/resume.js
@@ -0,0 +1,19 @@
+(function() {
+
+    var R = window.Resume = {};
+
+    R.PageView = Backbone.View.extend({
+        el: $("body")[0],
+
+        initialize: function(options) {
+            window.addEventListener("scroll", this.fixHeader);
+        },
+
+        fixHeader: _.throttle(function(e) {
+            var $h = $("header");
+            if ($(document).scrollTop() > 100) {
+                $h.addClass("fixed"); }
+            else $h.removeClass("fixed"); }, 100)
+    });
+
+})();
diff --git a/html-interactive/resume.scss b/html-interactive/resume.scss
index bcb5f05..0496cc4 100644
--- a/html-interactive/resume.scss
+++ b/html-interactive/resume.scss
@@ -1,3 +1,7 @@
+@import url("//fonts.googleapis.com/css?family=Monda|Cantarell|Exo 2");
+
+$black: #222;
+
 // Simple HTML5 reset. Not comprehensive but sufficient.
 * {
     -moz-box-sizing: border-box;
@@ -10,4 +14,103 @@ article,aside,details,figcaption,figure,
 footer,header,hgroup,menu,nav,section { 
     display:block; }
 
+body {
+    font-family: Cantarell;
+    font-size: 125%;
+    margin: 12rem auto 0 auto;
+    width: 50rem;
+}
 
+h1, h2, h3, h4, h5 { font-family: Monda; }
+
+header {
+    background-color: $black;
+    color: #EEE;
+
+    padding-left: calc(50% - 25rem);
+    padding-right: calc(50% - 25rem);
+    padding-bottom: 2rem;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    transition: all 0.2s;
+
+    h1 {
+        font-size: 5rem;
+        font-variant: small-caps;
+        text-align: center;
+    }
+
+    h2 {
+        bottom: 1rem;
+        font-family: Cantarell;
+        font-size: 1.5rem;
+        position: absolute;
+
+        &:nth-of-type(2) { right: calc(50% - 25rem); }
+
+        a { color: #888; }
+    }
+}
+
+header.fixed {
+    padding-bottom: 0;
+    position: fixed;
+
+    h1 {
+        display: inline-block;
+        font-size: 2rem;
+        text-align: left;
+    }
+
+    h2 {
+        display: inline-block;
+        right: calc(50% - 25rem);
+        bottom: 0.5rem;
+    }
+
+    h2:last-of-type { display: none; }
+}
+
+nav#sectionNav {
+    position: fixed;
+    left: calc(50% - 45rem);
+    text-align: right;
+    width: 18rem;
+
+    ul {
+        list-style: none;
+
+        li a {
+            color: $black;
+            font-family: Monda;
+            font-variant: small-caps;
+            font-size: medium;
+            text-decoration: none;
+        }
+    }
+}
+
+section {
+    a {
+        display: block;
+        position: relative;
+        top: -3rem;
+        visibility: hidden; }
+
+    h3 {
+        border-bottom: solid thin $black;
+        width: 100%; }
+
+    div { margin-bottom: 2rem; }
+
+    &#skills-section {
+        span {
+            cursor: pointer;
+            &:after { content: ","; }
+            &:last-of-type:after { content: ""; }
+        }
+    }
+}