updated income and resume apps

5 files changed, 408 insertions, 21 deletions

diff --git a/design/sass/pdf_gen.scss b/design/sass/pdf_gen.scss
new file mode 100644
index 0000000..b5072cd
--- /dev/null
+++ b/design/sass/pdf_gen.scss
@@ -0,0 +1,140 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+
+body {
+    @include fancy_sans;
+}
+.subhead {
+    text-align: right;
+    width: 4cm;
+    float: right;
+    @extend %clearfix;
+    > * {
+        margin: 0;
+        font-weight: 400;
+    }
+}
+header, .row {
+    @extend %clearfix;
+    margin-top: 1cm;
+}
+.print-box {
+    width: 49%;
+    float: left;
+    > * {
+        padding: .125cm;
+        margin: 0;
+    }
+    h5, h4 {
+        @include smcaps;
+        font-size: 9pt;
+        line-height: .5;
+    }
+    h4 {
+        margin-top: -10pt;
+        font-size: 16pt;
+        line-height: 1.5;
+    }
+}
+#bill-from, #bill {
+    border: none;
+    width: 47%;
+    float: left;
+}
+#bill {
+    float: right;
+}
+#bill-to {
+    width: 47%;
+    float: right;
+}
+table {
+  font-family: "Open Sans", sans-serif;
+  line-height: 1;
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  margin: 1cm 0 0 0;
+  padding: 0;
+  width: 625px;
+}
+table caption {
+    text-align: left;
+    font-size: 10pt;
+    text-transform: uppercase;
+    font-weight: 600;
+    margin: .5em 0 .75em;
+    &:after {
+        content: ":";
+    }
+}
+table tr {
+  border: 1px solid #ddd;
+  padding: .35em;
+}
+table tr.odd { background: #f6f4f4cc;}
+thead {display: table-header-group; } 
+table th,
+table td {
+  padding: .625em .625em .625em 1em;
+  text-align: left;
+  border-right: 1px solid #ddd;
+}
+table td {
+    white-space: -o-pre-wrap; 
+    word-wrap: break-word;
+    white-space: pre-wrap; 
+    white-space: -moz-pre-wrap; 
+    white-space: -pre-wrap; 
+    font-size: 8pt;
+}
+table th {
+  font-size: 7pt;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  background: #f6f4f4;
+}
+
+table .blank {
+    white-space: normal; 
+    td {
+        padding: 1rem;
+        white-space: normal; 
+        &:last-of-type {
+            text-align: left;
+            min-width: 1.2cm;
+        }
+    }
+}
+table .right {
+    text-align: right;
+}
+table th a {
+    text-decoration: none;
+    position: relative;
+    span {
+        position: absolute;
+        top: -2px;
+    }
+}
+.smfield { min-width: 50pt;}
+table .total { font-size: 9pt !important;}
+.thanks {
+    margin-top: 40pt;
+    font-family: times, times new roman;
+    font-style: italic;
+    font-weight: 300;
+    text-align: center;
+    color: #333;
+}
+
+@page {
+    @bottom-right{
+        @include fancy_sans;
+        @include smcaps;
+        content: "Page " counter(page) " of " counter(pages);
+        font-size: 6pt;
+        color: #666;
+        width: 2cm;
+    }
+}
+
diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html
index 998546f..8dc168e 100644
--- a/design/templates/archives/notes.html
+++ b/design/templates/archives/notes.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
 {% load html5_datetime %}
+{% load pagination_tags %}
 {% block pagetitle %} Field Notes | luxagraf {% endblock %}
 {% block metadescription %} Rough notes and sketches from the field {% endblock %}
 {%block bodyid%}class="notes" id="notes-archive"{%endblock%}
@@ -13,7 +14,7 @@
         <main role="main">
         <h1>Field Notes</h1>
         <h4 class="subhead divide-after">Quick notes and images from the road</h4>
-        {% for object in object_list %}
+        {% autopaginate object_list 2 %}{% for object in object_list %}
         <article class="h-entry">
             <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2>
             <h5 class="note--date-hed"><a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.pub_date|html5_datetime}}">{{object.pub_date|date:"F j, Y"}}</time></a></h5>
@@ -56,6 +57,9 @@
         </article>
 {% endfor %}
         </main>
+    <nav class="pagination">
+    {% paginate %}
+    </nav>
 {% endblock %}
 
 
diff --git a/design/templates/details/invoice.html b/design/templates/details/invoice.html
new file mode 100644
index 0000000..1a812c8
--- /dev/null
+++ b/design/templates/details/invoice.html
@@ -0,0 +1,97 @@
+{% load typogrify_tags %}
+
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+<head>
+    <title>Invoice for {{object.title}}</title>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" 
+          content="">
+<style>
+    @page {
+        @bottom-left {
+            content: "";
+        }
+    }
+</style>
+</head>
+  {% load static %}
+<body id="quote">
+    <div class="row">
+        <div class="print-box" id="bill-from">
+            <h5>Bill From:</h5>
+            <p>Scott Gilbertson <br />
+            1806 Dover Dr. <br />
+            Newport Beach, CA 92660<br />
+            706-438-4297</p>
+        </div>
+        <div class="print-box" id="bill">
+            <h4>Invoice {{invoice_number}}</h4>
+            <h5>Invoice For: {{object.title}}</h5>
+            <h5>Amount Due: ${{total_billed}}</h5>
+            <h5>Sent on: {% now "M j, Y"%}</h5>
+        </div>
+    </div>
+    <div class="row">
+        <div class="print-box" id="bill-to">
+            <h5>Bill To:</h5>
+            <p>Enterprise Data Resources, Inc.<br />
+            1089 Culpepper Drive <br />
+            Conyers, GA 30094 <br />
+            707-973-2862</p>
+        </div>
+    </div>
+    </div>
+<table class="quote-table" id="items_list">
+<thead>
+ <caption>Items</caption>
+<tr>
+<th scope="col"  class="sortable column-status">
+   <div class="text">Date</div>
+</th>
+<th scope="col"  class="sortable column-created_at sorted descending">
+   <div class="text">Time</div>
+</th>
+<th scope="col"  class="sortable column-repair_state">
+   <div class="text">Hours</div>
+</th>
+<th scope="col"  class="sortable column-order_id">
+   <div class="text">Tasks</div>
+</th>
+</tr>
+</thead>
+<tbody>
+    {% for obj in object_list %}
+    <tr class="row{{forloop.counter}} {% cycle 'odd' 'even' %}">
+        <td class="smfield" data-label="">{{obj.time_start|date:"m/d/y"}}</td>
+        <td class="smfield" data-label="Serial" >{{obj.time_start|date:"g:i"}} - {{obj.time_end|date:"g:i"}}</td>
+        <td class="smfield" data-label="Serial" >{{obj.rounded_total}}</td>
+        <td class="field" data-label="Issue" >{{obj.work_done|capfirst}}</td>
+    </tr>
+    {%endfor%}
+    <tr class="row gap">
+    </tr>
+    <tr class="row2">
+        <td class="field-payment_status"></td>
+        <td class="field-pub_date nowrap"></td>
+        <th class="field-title">Total Hours:</th>
+        <td class="field-status">{{total_hours}}</td>
+    </tr> 
+    <tr class="row2">
+        <td class="field-payment_status"></td>
+        <td class="field-pub_date nowrap"></td>
+        <th class="field-title">Rate:</th>
+        <td class="field-status">$100/hr</td>
+    </tr>
+    <tr class="row2">
+        <td class="field-payment_status"></td>
+        <td class="field-pub_date nowrap"></td>
+        <th class="field-title total">Total for Invoice:</th>
+        <td class="field-status total"><b>${{total_billed}}</b></td>
+    </tr>
+</tbody>
+</table>
+<p class="thanks">Thank you for your prompt payment</p>
+</body>
diff --git a/design/templates/details/pubs.html b/design/templates/details/pubs.html
new file mode 100644
index 0000000..ff16bbe
--- /dev/null
+++ b/design/templates/details/pubs.html
@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+
+{% block pagetitle %}{% endblock %}
+{% block metadescription %}{% endblock %}
+
+{%block htmlclass%}class="detail{%endblock%}
+
+{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+        <li><a href="/resume">Resume</a>{% if object.title != "Resume" %} &rarr; {%endif%}</li>
+        {% if object.title != "Resume" %}<li><a href="/resume/pubs/">Publications</a></li>{%endif%}
+    </ul>
+    <main>
+    <article>
+        {% if object.title != "Resume" %}<h1 class="post-header">{{object.title|safe|smartypants|widont}}</h1>{% endif %}
+        {% if object.publisher %}<p><i>This article was published in {{object.publisher}}, you can view <a href="{{object.url}}">the original</a> there, complete with graphics, comments and other fun stuff.</i></p>{% endif %}
+        <div class="post-article" style="margin-top: 3em">
+        {{object.body_html|safe|smartypants|widont}}
+        </div>  
+    </article>
+    </main>
+    {%endblock%}
diff --git a/design/templates/details/resume.html b/design/templates/details/resume.html
index ff16bbe..611765c 100644
--- a/design/templates/details/resume.html
+++ b/design/templates/details/resume.html
@@ -1,23 +1,146 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
+{% block pagetitle %}Scott Gilbertson - Curriculum Vitæ{%endblock%}
+{% block extrahead%}
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Curriculum Vitæ">
+    <meta name="twitter:description" content="luxagraf.net is the personal web site of Scott gilbertson.">
+    <meta name="twitter:site:id" content="9469062">
+    <meta name="twitter:creator:id" content="9469062">
+    <meta property="og:type" content="article"/>
+    <meta property="og:title" content="Scott Gilbertson - Curriculum Vitæ"/>
+    <meta property="og:url" content="http://luxagraf.net/resume/cv"/>
+    <meta property="og:description" content="luxagraf.net is the personal web site of Scott gilbertson.">
+     <meta property="article:author" content="Scott Gilbertson"/>
+    <meta property="og:site_name" content="luxagraf.net"/>
+    <meta property="og:locale" content="en_US"/>
+<style>
+</style>{%endblock%}
+{%block bodyid%}class="resume"{%endblock%}
+{%block htmlclass %}class="detail"{%endblock%}
+{% block primary %}
+<main role="main" id="content">
+<article class="h-resume">
+    <div class="h-card head">
+        <header>
+        <h1 class="p-name">
+            <span class="p-given-name">Scott</span>
+            <span class="p-additional-name hide">Nathan</span>
+            <span class="p-family-name">Gilbertson</span>
+        </h1>
+        <h2>Writer, Photographer, Web Developer</h2>
+        </header>
+        <ul class="contact">
+            <li>
+                <h6>Phone</h6>
+                <span><a class="u-tel" href="tel:706-438-4297">706-438-4297</a></span>
+            </li>
+            <li>
+                <h6>Email</h6>
+                <a class="u-email" href="mailto:sng@luxagraf.net">sng@luxagraf.net</a>
+            </li>
+            <li>
+                <h6>Web</h6>
+                <span><a class="u-url" href="https://luxagraf.net/" rel="me">https://luxagraf.net/</a></span>
+            </li>
+            <li>
+                <h6>LinkedIn</h6>
+                <span><a class="u-url" href="https://www.linkedin.com/in/luxagraf" rel="me">luxagraf</a></span>
+            </li>
+        </ul>
+    </div>
+    <div class="profile">
+        <h3>Profile</h3>
+        <p class="p-summary">I am a writer, producer and web developer based in Athens, GA. Clients include Wired, Webmonkey, Ars Technica, Pioneer and Boost Mobile, among others. I wrote for Wired.com&#8217;s Webmonkey.com for 13 years and served as head editor for three. I&#8217;ve been developing on the web and writing about web development for nearly two decades. For an up-to-date list of recent articles, please browse <a href="/resume/pubs/">the publications list</a>.</p>
+    </div>
 
-{% block pagetitle %}{% endblock %}
-{% block metadescription %}{% endblock %}
-
-{%block htmlclass%}class="detail{%endblock%}
-
-{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        <li><a href="/resume">Resume</a>{% if object.title != "Resume" %} &rarr; {%endif%}</li>
-        {% if object.title != "Resume" %}<li><a href="/resume/pubs/">Publications</a></li>{%endif%}
-    </ul>
-    <main>
-    <article>
-        {% if object.title != "Resume" %}<h1 class="post-header">{{object.title|safe|smartypants|widont}}</h1>{% endif %}
-        {% if object.publisher %}<p><i>This article was published in {{object.publisher}}, you can view <a href="{{object.url}}">the original</a> there, complete with graphics, comments and other fun stuff.</i></p>{% endif %}
-        <div class="post-article" style="margin-top: 3em">
-        {{object.body_html|safe|smartypants|widont}}
-        </div>  
-    </article>
-    </main>
-    {%endblock%}
+    <div id="skills">
+        <h3>Skills</h3>
+
+        <h2><a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Writing">Writing</a></h2>
+        <p>Freelance writer, producer, journalist, editor and hand model at places like Wired, Ars Technica, Budget Travel. I&#8217;ve written blogs, features, news items, ad copy, technical documentation, tutorials, how-tos, wikis and probably other things I&#8217;ve forgotten about. I also served as editor-in-chief of Webmonkey.com.</p>
+
+        <h2><a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Web_development">Web Development</a></h2>
+        <p>Expert front-end engineer in <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Web_standards">standards-based web development</a> using <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/HTML"><abbr title="Hypertext Markup Language">HTML</abbr></a>, <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets"><abbr title="Cascading Style Sheets">CSS</abbr></a>, and high performance <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/JavaScript">JavaScript</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Responsive_web_design">responsive design</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a>, <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Microformats">microformats</a>, <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/ARIA">ARIA</a> and more. </p>
+        <p>Experience maintaining large-scale web applications and tools with <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Python_(programming_language)">Python</a> and <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/PHP">PHP</a> in conjunction with databases like <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/PostgreSQL">PostgreSQL</a> (including numerous PostGIS, geographic database projects), <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/MySQL">MySQL</a>, <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Sqlite">Sqlite</a>.  Experience administering <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Linux">Linux </a> servers and running web servers like <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Apache_HTTP_Server">Apache</a>, and <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Nginx">Nginx</a>.</p>
+         <p>Advocate and evangelist for free software and open web standards technologies such as <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/HTML5">HTML5</a>, related APIs, <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS3</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Responsive_web_design">responsive design</a> (including <a href="https://longhandpixels.net/books/responsive-web-design">a 350 page book on the subject</a>)  and <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a>.</p>
+
+        <h2><a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Graphic_design">Photography/Video/Design</a></h2>
+        <p>Good design eye specializing in fluid, clean layouts with strong <a class="p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Typography">typographic style</a>.  </p>
+        <p>Photo and video editing using <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Adobe_Photoshop">Photoshop</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/GIMP">GIMP</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Adobe_Photoshop_Lightroom">Lightroom</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Darktable">Darktable</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Final_Cut_Pro">Final Cut Pro</a>, and <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Kdenlive">Kdenlive</a>.</p>
+
+    </div>
+
+    <div class="h-calendar" id="experience">
+        <h3>Experience</h3>{% for job in object.jobs.all %}
+        <div class="p-experience h-event">
+            <h2 class="p-name">{{job.title}}</h2>
+            <ul class="meta">
+                <li>(<time class="dt-start" datetime="{{job.date_start}}">{{job.date_start|date:"M Y"}}</time>–{% if job.date_end %}<time class="dt-end" datetime="{{job.date_end}}">{{job.date_end|date:"M Y"}}</time>{%else%}<span class="dt-end">present</span>{%endif%})</li>
+            </ul>
+            <p class="e-description">{{job.body_html|safe}}</p>
+        </div>{% endfor %}
+
+        {%comment%}
+        <div class="p-experience h-event">
+            <h2 class="p-name">Web Developer</h2>
+            <ul class="meta">
+            <li>(<time class="dt-start" datetime="2004-06-01">June 2004</time>–Present)
+            </li>
+            </ul>
+            <p class="e-description">Co-founded a small design company where I serve as front-end web developer. I work closely with my co-founder (lead UI/UX), transforming visual designs into valid, semantic HTML/CSS/JavaScript. We specialize in responsive designs and mobile-friendly content that works across browsers and devices. Clients included Wired, Pioneer Entertainment, Boost Mobile, Co-op Credit Union and others.</p>
+        </div>
+
+        <div class="p-experience h-event">
+            <h2 class="p-name">Founder, LongHandPixels Press</h2>
+            <ul class="meta">
+            <li>(<time class="dt-start" datetime="2013-09-01">September 2013</time>–Present)
+            </li>
+            </ul>
+            <p class="e-description">Founded an ebook publishing company, <a href="http://longhandpixels.net/" class="p-organization-name">LongHandPixels Press</a> and launched my first book, <em><a href="https://longhandpixels.net/books/responsive-web-design">Build a Better Web with Responsive Web Design</a></em>. The book covers responsive design, mobile-first web development, progressive enhancement and how modern tools like Sass, Grunt, Node, the Chrome developer tools and more can speed up workflows. 
+            </p>
+        </div>
+
+        <div class="p-experience h-event">
+            <h2 class="p-name">Writer/Editor Webmonkey.com</h2>
+            <ul class="meta">
+            <li class="h-location h-card">
+            <a class="u-url p-name" href="http://webmonkey.com">
+              <span class="p-organization-name">Wired.com</span>/
+              <span class="p-organization-unit">Webmonkey.com</span></a>
+            </li>
+            <li>(<time class="dt-start" datetime="2006-06-01">June 2006</time>
+            –<time class="dt-end" datetime="2013-04-31">April 2013</time>)
+            </li>
+            </ul>
+            <p class="e-description">I started contributing tutorials to Wired.com&#8217;s Webmonkey.com in 1999, became a full time employee in 2006 and served as editor-in-chief from 2010 to 2013. I was in charge of creating resources for web developers, including how-to guides on the latest in web standards, code libraries, server technologies and authoring resources. Wrote roughly 3 million words on various web development tools. I also helped cultivate and manage a global team of freelance contributors.</p>
+        </div>
+
+        <div class="p-experience h-event">
+            <h2 class="p-name">Photography and Video Editing</h2>
+            <ul class="meta">
+                <li class="h-location h-card"><a class="u-url p-name" href="http://barrelmanproductions.com"><span class="p-organization-name">barrelmanproductions.com</span></a></li>
+                <li>(<time class="dt-start" datetime="2006-06-01">June 2014</time> - Present)</li>
+            </ul>
+            <p class="e-description">Co-founded a video editing company, Barrelman Productions, specializing in HD aerial video. Portfolio and highlights reel available at <a href="http://www.barrelmanproductions.com/">http://www.barrelmanproductions.com/</a>. Skills include editing in <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Final_Cut_Pro">Final Cut Pro</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Adobe_Photoshop">Photoshop</a>, <a class="p-skill" rel="tag" href="https://en.wikipedia.org/wiki/Adobe_Photoshop_Lightroom">Lightroom</a> and production of web-optimized video.</p>
+        </div>
+        {%endcomment%}
+
+    </div>
+    <div class="h-calendar" id="education">
+        <h3>Education</h3>
+
+        <div class="p-education h-event">
+            <h2 class="p-name">Bachelor of Arts, English</h2>
+            <ul class="meta">
+                <li>Undergraduate degree from <a class="p-location h-card" href="http://uga.edu/">The University of <span class="p-locality">Georgia</span>.</a></li>
+                <li>(<time class="dt-start" title="2001-08-01">2001</time>–<time class="dt-end" title="2003-12-16">2003</time>)</li>
+            </ul>
+        </div>
+
+    </div>
+
+</article>
+
+</main>
+{%endblock%}