Merge branch 'develop'

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Ian Adam Naval
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,32 @@
+ianonavy
+========
+
+Source code for my personal website.
+
+Requirements
+------------
+
+* python 2.6+
+* pip
+* virtualenv
+* nginx
+* supervisord
+
+Installing
+----------
+
+Exact commands vary with OS.
+
+1. Clone git repository. 
+2. Create a virtual environment in the same directory, and source the `activate` script. 
+3. Navigate into the directory and install the required Python packages with `pip install -r requirements.txt`.
+4. Symlink or copy the file `conf/nginx.conf` into the nginx configuration directory (e.g. `/etc/nginx/conf.d/ianonavy.conf` for CentOS).
+5. Symlink or copy the file `conf/supervisord.conf` into the supervisord configuration directory.
+6. Reload the config files of both nginx and supervisord, and ensure that both daemons are running.
+
+Note that you probably need to edit the config files to point to the directory in which you cloned this repo as well as the `server_name` for nginx.
+
+Updating
+--------
+
+To update, just run `git pull` in the repository. For the Web service, you may need to instruct supervisord to restart the daemons.

conf/nginx.conf

@@ -0,0 +1,40 @@
+server {
+    listen 80;
+    listen 443 default_server ssl;
+
+    ssl_certificate /var/sites/ianonavy.com/ssl/unified.crt;
+    ssl_certificate_key /var/sites/ianonavy.com/ssl/ssl-decrypted.key;
+
+    server_name *.ianonavy.com ianonavy.com www.ianonavy.com;
+
+    access_log /var/log/nginx/ianonavy.access.log;
+    error_log /var/log/nginx/ianonavy.error.log;
+
+    if ($host != 'ianonavy.com') {
+         rewrite  ^/(.*)$  http://ianonavy.com/$1  permanent;
+    }
+
+    root /var/sites/ianonavy.com/www;
+
+    location = /robots.txt {
+        alias /var/www/robots/all/robots.txt;
+    }
+ 
+    location /static/ { # STATIC_URL
+        alias /var/sites/ianonavy.com/www/src/static/; # STATIC_ROOT
+        expires off;
+    }
+
+    location = /google9677fb7678857b96.html {
+        rewrite ^/(.*) $1;
+        return 200 "google-site-verification: google9677fb7678857b96.html";
+    }
+
+    location / { try_files $uri @ianonavy; }
+    location @ianonavy {
+        include fastcgi_params;
+        fastcgi_param PATH_INFO $fastcgi_script_name;
+        fastcgi_param SCRIPT_NAME "";
+        fastcgi_pass unix:/tmp/ianonavy-fcgi.sock;
+    }
+}

conf/supervisord.conf

@@ -0,0 +1,24 @@
+[fcgi-program:ianonavy]
+command=/var/sites/ianonavy.com/www/src/ianonavy.fcgi
+socket=unix:///tmp/ianonavy-fcgi.sock
+process_name=%(program_name)s_%(process_num)02d
+directory=/var/sites/ianonavy.com/www/src
+environment=PATH="/var/sites/ianonavy.com/www/bin"
+numprocs=5
+priority=999
+autostart=true
+autorestart=true
+startsecs=1
+startretries=3
+exitcodes=0,2
+stopsignal=QUIT
+stopwaitsecs=10
+user=app
+redirect_stderr=true
+stdout_logfile=/tmp/ianonavy.log
+stdout_logfile_maxbytes=1MB
+stdout_logfile_backups=10
+stderr_logfile=/tmp/ianonavy_err.log
+stderr_logfile_maxbytes=1MB
+stderr_logfile_backups=10
+

requirements.txt

@@ -0,0 +1,2 @@
+Flask
+flup

src/ianonavy.fcgi

@@ -0,0 +1,6 @@
+#!/usr/bin/env python
+from flup.server.fcgi import WSGIServer
+from server import app
+
+if __name__ == '__main__':
+    WSGIServer(app, bindAddress='/tmp/ianonavy-fcgi.sock', umask=0002).run()

src/server.py

@@ -10,17 +10,6 @@ def home():
     return render_template('index.html')
 
 
-@app.route('/contact')
-def contact():
-    return render_template('contact.html')
-
-
-
-@app.route('/about')
-def about():
-    return render_template('about.html')
-
-
 @app.route('/labs')
 def labs():
     return render_template('labs.html')

src/static/css/about.css

@@ -1,33 +0,0 @@
-#main {
-    font-family: "Ubuntu", sans-serif;
-}
-
-img#me {
-    position: relative;
-    width: 240px;
-    float: left;
-}
-
-img#me.fixed {
-    position: fixed;
-    top: 48px;
-}
-
-#skills, #about-me, #hobbies {
-    margin: 0;
-    padding: 0;
-    width: 600px;
-    float: right;
-}
-
-#skills ul {
-    margin: 0;
-    padding: 0 0 2em 2em;
-    font-size: 1em;
-}
-
-#skills p, #about-me p, #hobbies p {
-    margin: 0 0 1em;
-    text-indent: 2.5em;
-    font-size: 1em;
-}

src/static/css/error.css

@@ -2,7 +2,7 @@
     text-align: center;
 }
 
-img#error-cat {
+#error-cat {
     margin: 1em;
     width: 240px;
 }

src/static/css/portfolio.css

@@ -1,50 +1,95 @@
-.item {
-    display: block;
-    margin: 1em 0 3em;
-    clear: both;
-}
+.center-wrapper {
+  display: block;
+  text-align: center; }
+  .center-wrapper .center-wrapped {
+    display: inline-block;
+    vertical-align: top; }
 
-.item img {
-    margin: 0 16px 16px 0;
-    box-shadow: 0 0 16px 4px #000;
-    float: left;
-}
+.about-section {
+  display: inline-block;
+  margin: 0 24px 0;
+  width: 312px;
+  text-align: left;
+  vertical-align: top; }
 
-.item a {
-    border: none;
-}
+#me {
+  width: 280px; }
 
-.item h3 {
-    display: inline;
-}
+.technology-list {
+  justify-content: space-around; }
 
-.item p {
-    padding: 8px;
-}
+.technology {
+  max-height: 48px;
+  margin: 2px; }
 
-.section {
+#resume {
+  text-align: center; }
+
+#portfolio-items {
+  max-width: 1320px;
+  margin: 0 auto; }
+
+.portfolio-item {
+  margin: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  width: 296px;
+  text-align: center;
+  background-color: #e8e8e8;
+  color: #000;
+  box-shadow: 2px 2px 10px #0F0907;
+  flex: 1 0 auto; }
+  .portfolio-item p {
     margin: 0;
-    padding: 2em 0 0;
-    clear: both;
-}
+    font-size: .8em; }
 
-#android .item img {
-    width: 240px;
-}
+/* iPhone */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+  #header {
+    font-size: .8em; }
 
-#websites .item img {
-    width: 320px;
-}
+  .section {
+    padding: 8px; }
 
-#sysadmin .item img {
-    width: 320px;
-}
+  .about-section {
+    margin: 0;
+    max-width: 288px; }
 
-@media (max-width: 650px) {
-    #android img, #websites img, #sysadmin img {
-        display: block;
-        float: none;
-        clear: both;
-        margin: 1em auto;
-    }
-}
+  .about-section ul {
+    padding: 0;
+    list-style: none; }
+
+  .portfolio-items {
+    padding: 0; }
+
+  .portfolio-item {
+    margin: 8px 0 0;
+    width: 256px; }
+
+  .technology-list img {
+    width: 100%; }
+
+  #calendar, #calendar-label {
+    display: none; } }
+.screenshot {
+  margin: 0;
+  width: 100%;
+  border: 1px #ddd solid; }
+
+#calendar {
+  width: 100%;
+  max-width: 1320px;
+  height: 480px;
+  border: 0; }
+
+/* Force image on its own line for two-column layout */
+@media only screen and (min-width: 691px) and (max-width: 1054px) {
+  #me {
+    display: block;
+    margin: 0 auto; } }
+/* Fix spacing for one- and two- column layout */
+@media only screen and (max-width: 1054px) {
+  .about-section {
+    margin-top: 16px; } }
+.cheeky-aside {
+  font-size: .5em; }

src/static/css/portfolio.scss

@@ -0,0 +1,131 @@
+.center-wrapper {
+    display: block;
+    text-align: center;
+
+    .center-wrapped {
+        display: inline-block;
+        vertical-align: top;
+    }
+}
+
+.about-section {
+    display: inline-block;
+    margin: 0 24px 0;
+    width: 312px;
+    text-align: left;
+    vertical-align: top;
+}
+
+#me {
+    width: 280px;
+}
+
+.technology-list {
+    justify-content: space-around;
+}
+
+.technology {
+    max-height: 48px;
+    margin: 2px;
+}
+
+#resume {
+    text-align: center;
+}
+
+#portfolio-items {
+    max-width: 1320px;
+    margin: 0 auto;
+}
+
+.portfolio-item {
+    margin: 16px;
+    padding: 16px;
+    border-radius: 4px;
+    width: 296px;
+    text-align: center;
+    background-color: #e8e8e8;
+    color: #000;
+    box-shadow: 2px 2px 10px #0F0907;
+    flex: 1 0 auto;
+
+    p {
+        margin: 0;
+        font-size: .8em;
+    }
+}
+
+/* iPhone */
+@media only screen 
+and (min-device-width : 320px) 
+and (max-device-width : 568px) { 
+    #header {
+        font-size: .8em;
+    }
+
+    .section {
+        padding: 8px;
+    }
+
+    .about-section {
+        margin: 0;
+        max-width: 288px;
+    }
+
+    .about-section ul {
+        padding: 0;
+        list-style: none;
+    }
+
+    .portfolio-items {
+        padding: 0;
+    }
+
+    .portfolio-item {
+        margin: 8px 0 0;
+        width: 256px;
+    }
+
+    .technology-list img {
+        width: 100%;
+    }
+
+    #calendar, #calendar-label {
+        display: none;
+    }
+}
+
+.screenshot {
+    margin: 0;
+    width: 100%;
+    border: 1px #ddd solid;
+}
+
+#calendar {
+    width: 100%;
+    max-width: 1320px;
+    height: 480px;
+    border: 0;
+}
+
+/* Force image on its own line for two-column layout */
+@media only screen 
+and (min-width : 691px) 
+and (max-width : 1054px) { 
+    #me {
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+/* Fix spacing for one- and two- column layout */
+@media only screen
+and (max-width : 1054px) {
+    .about-section {
+        margin-top: 16px;
+    }
+}
+
+.cheeky-aside {
+    font-size: .5em;
+}

src/static/css/style.css

@@ -2,93 +2,49 @@
 html, body {
     height: 100%;
     margin: 0 auto;
-    background: #111;
-    color: #0c0;
 }
 
-body {
-    font-family: "Ubuntu", sans-serif;
-}
+body { font-family: Arial, sans-serif; }
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
 
-a {
-    color: #b9f73e;
-    text-decoration: none;
-}
-
-a:hover {
-    color: #b9f73e;
-    text-decoration: underline;
-}
-
-a:visited {
-    color: #b9f73e;
+h1, h2, h3, h4 {
+    margin: 0;
+    clear: both;
 }
 
 /* Header */
 #header {
     margin: 0;
-    padding: 16px;
-    text-align: left;
-    font-size: 2em;
-    background: #000;
+    padding: 16px 0 0;
+    text-align: center;
+    background: #222;
     color: #0f0;
-    font-family: "Ubuntu Mono", monospace;
+    font-family: Arial, sans-serif;
 }
 
-#header img#logo {
-    margin: 0;
-    padding: 0;
-    float: left;
-    width: 196px;
-    height: auto;
-    border: none;
-}
-
-#header h1 {
+#name {
     margin: 0;    
+    color: #fff;
     font-size: 2.5em;
 }
 
-#header h2#tagline {
-    margin: 0;
-    font-size: .75em;
-    font-weight: normal;
+#tagline {
+    margin: 0 auto;
+    padding: 0 0 8px;
+    font-size: .9em;
+    color: #72bbfa;
+    border-bottom: 1px solid #fff;
+    width: 304px;
 }
 
-#header #name {
-    display: inline-block;
-    font-family: "Ubuntu", sans-serif;
-}
-
-#header #name a {
-    color: #fff;
-}
 
 /* Navigation */
 #nav {
     width: 100%;
-    margin: 0;
+    margin: 8px 0 0;
     padding: 0;
     text-align: center;
-    clear: both;
-    background: #000;
-}
-
-#nav.top {
-    position: relative;
-    top: auto;
-    left: auto;
-    padding: 0;
-    font-size: .85em;
-}
-
-#nav.scrolled {
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding: 4px;
-    font-size: .7em;
-    z-index: 1;
 }
 
 #nav ul {
@@ -99,105 +55,46 @@ a:visited {
 }
 
 #nav li {
+    /*width: 61px;*/
+    margin: 0;
     display: inline-block;
     list-style: none;
+    padding: 4px 8px;
+    background-color: #fff;
+    border-radius: 2px 2px 0 0;
 }
 
-#nav.top li {
-    padding: 0 1em 0;
-}
-
-#nav.scrolled li {
-    padding: 0 .65em 0;
-}
-
-#nav li.selected a {
-    color: #099;
-}
-
-#nav li.selected a:hover {
-    text-decoration: none;
-}
-
-#nav.top #top-link {
-    display: none;
-}
-
-#nav.scrolled #top-link {
-    display: inline;
-}
-
-#small-logo {
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-    display: none;
-    width: 24px;
-}
-
-#nav.top #small-logo {
-    display: none;
-}
-
-#nav.scrolled #small-logo {
-    display: inline-block;
+#nav a {
+    color: #428bca;
 }
 
 /* Main body */
-#main {
-    margin: 0;
-    padding: 48px;
-    position: relative;
-    background: #000 url('/static/img/dark_stripes.png');
-
-    text-align: left;
+.section {
+    padding: 16px;
 }
 
-#main:after { /* Clear floats */
-    visibility: hidden;
-    width: 0;
-    height: 0;
-    margin: 0;
-    padding: 0;
-    display: block;
-    clear: both;
-    font-size: 0;
-    content: "";
+.section:nth-child(even) {
+    background-color: #222;
+    color: #fff;
 }
 
-#main p {
-    margin: 0 0 1em 0;
-    padding: 0;
-    font-size: 1em;
-    text-shadow: 2px 2px 4px #000;
-}
-
-#main h2 {
+.button {
+    display: inline-block;
     margin: 0;
-    clear: both;
+    padding: 8px;
+
+    background-color: #428bca;
+    border-color: #285e8e;
+    border-radius: 2px;
 
     color: #fff;
-    font-family: "Ubuntu Mono", monospace;
-    font-size: 3em;
-    text-align: left;
-    text-shadow: 2px 2px 16px #000;
+    text-decoration: none;
 }
 
-#main h3 {
-    margin: 0;
-    clear: both;
-
-    color: #39e639;
-    font-family: "Ubuntu Mono", monospace;
-    font-size: 1.75em;
-}
-
-#main h4 {
-    margin: 0;
-
-    color: #0f0;
-    font-family: "Ubuntu Mono", monospace;
-    font-size: 1.5em;
+.button:hover {
+    background-color: #3276b1;
+    border-color: #284e8e;
+    text-decoration: none;
 }
 
 /* Footer */
@@ -205,76 +102,7 @@ a:visited {
     margin: 0;
     padding: .5em;
     clear: both;
-    background: #000;
+    background: #222;
+    color: #fff;
     font-size: 1em;
 }
-
-.errorlist {
-    margin: 0;
-    padding: .5em;
-    color: #f00;
-}
-
-.errorlist li {
-    list-style: none;
-}
-
-body {
-    max-width: 960px;
-}
-
-/* Handle screen sizes */
-@media (max-width: 980px) {
-    #header {
-	font-size: 1.75em;
-    }
-
-    #nav.scrolled {
-        max-width: 980px;
-        font-size: .9em;
-    }
-
-    #nav.scrolled #small-logo {
-        display: none;
-    }
-}
-
-@media (max-width: 900px) {
-    #header {
-	font-size: 1.75em;
-    }
-}
-
-@media (max-width: 800px) {
-    #header {
-	font-size: 1.5em;
-    }
-
-    #header img#logo {
-        display: block;
-        width: 128px;
-        margin: 0 auto;
-    }
-}
-
-@media (max-width: 700px) {
-    #header {
-        font-size: 1.25em;
-    }
-}
-
-@media (max-width: 650px) {
-    body {
-        min-width: 480px;
-    }
-
-    #header img#logo {
-        display: block;
-        width: 64px;
-        margin: 0 auto;
-    }
-
-    #greeting {
-        display: none;
-    }
-}

src/static/css/test.scss

@@ -0,0 +1,34 @@
+@supports not (flex-wrap: wrap) {
+  .Grid--ffMultilineSupport {
+    display: block;
+    & > .Grid-cell {
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+  @mixin grid-sizing($name: "") {
+    $sep: "-";
+    @if $name == "" {
+      $sep: "";
+    }
+    .#{$name}#{$sep}Grid--full {
+      display: block;
+      & > .Grid-cell {
+        display: block;
+      }
+    }
+    .#{$name}#{$sep}Grid--fit,
+    .#{$name}#{$sep}Grid--1of2,
+    .#{$name}#{$sep}Grid--1of3,
+    .#{$name}#{$sep}Grid--1of4 {
+      display: flex;
+    }
+  }
+  @include grid-sizing();
+  @each $breakpoint in $breakpoints {
+    $name: nth($breakpoint, 2);
+    @include breakpoint($name) {
+      @include grid-sizing($name);
+    }
+  }
+}

src/static/js/index.js

@@ -1,109 +0,0 @@
-/**
- * Gets the cummulative offset from the origin of a particular element by iteratively going through its parents.
- **/
-function getCumulativeOffset(element) {
-    var left, top;
-    left = top = 0;
-    if (element != null && element.offsetParent) {
-        do {
-            left += element.offsetLeft;
-            top  += element.offsetTop;
-        } while (element = element.offsetParent);
-    }
-    return {
-        x: left,
-        y: top
-    };
-};
-
-/**
- * Gets the scroll position.
- */
-function getScrollY() {
-    var y = 0;
-    if (typeof( window.pageYOffset ) == 'number') { // Netscape
-        //x = window.pageXOffset;
-        y = window.pageYOffset;
-    } else if (document.body && ( document.body.scrollLeft || document.body.scrollTop)) { // DOM
-        //x = document.body.scrollLeft;
-        y = document.body.scrollTop;
-    } else if (document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop)) { // IE6 standards compliant mode
-        //x = document.documentElement.scrollLeft;
-        y = document.documentElement.scrollTop;
-    }
-    return y;
-}
-
-var lastPosition = -1;
-
-/**
- * Smoothly scrolls to a position.
- **/
-function smoothScrollTo(target) {
-    var currentPosition = getScrollY();
-    var delta = (target - currentPosition) / 6.0;
-    var nextStep = currentPosition + delta;
-    
-    // Check whether scrolling has been interrupted by the user.
-    var halted = false;
-    if (nextStep > lastPosition) {
-        halted = currentPosition > nextStep || currentPosition < lastPosition;
-    } else {
-        halted = currentPosition < nextStep || currentPosition > lastPosition;
-    }
-    
-    if (halted) {
-        lastPosition = -1;
-        return;
-    }
-    
-    window.scrollBy(0, delta);
-    
-    if (Math.abs(delta) >= 1) {
-        setTimeout('smoothScrollTo(' + target + ')', 50);
-    } else {
-        lastPosition = -1;
-        return;
-    }
-    lastPosition = currentPosition;
-}
-
-/**
- * Smoothly scrolls to an element.
- */
-function scrollToElement(element) {
-    lastPosition = getScrollY();
-    smoothScrollTo(getCumulativeOffset(document.getElementById(element)).y);
-}
-
-
-/**
- * Scrolls up to the top.
- */
-function scrollToTop() {
-    lastPosition = getScrollY();
-    smoothScrollTo(0);
-}
-
-
-// Declare variables outside function for efficiency.
-var nav = document.getElementById("nav");
-var me = document.getElementById("me");
-var headerHeight = getCumulativeOffset(nav).y;
-if (me != null) var myHeight = getCumulativeOffset(me).y;
-
-/**
- * Apples a CSS class to the navigation bar based on scroll position.
- **/
-function onScroll() {
-    var scrollY = getScrollY();
-    
-    nav.className = (scrollY > headerHeight) ? "scrolled" : "top";
-    if (me != null) {
-        me.className = (scrollY > myHeight) ? "fixed" : "";
-    }
-}
-
-// Set up event listener.
-window.onscroll = onScroll;
-window.addEventListener("touchmove", onScroll, false);

src/static/lib/html5shiv.js

@@ -1,4 +0,0 @@
-(function(g,b){function k(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function l(a){var c={},f=a.createElement,b=a.createDocumentFragment,d=b();a.createElement=function(a){if(!e.shivMethods)return f(a);var b;b=c[a]?c[a].cloneNode():m.test(a)?(c[a]=f(a)).cloneNode():f(a);return b.canHaveChildren&&!n.test(a)?d.appendChild(b):b};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+k().join().replace(/\w+/g,function(a){f(a);
-d.createElement(a);return'c("'+a+'")'})+");return n}")(e,d)}function h(a){var c;if(a.documentShived)return a;if(e.shivCSS&&!i){c=a.createElement("p");var b=a.getElementsByTagName("head")[0]||a.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";c=!!b.insertBefore(c.lastChild,b.firstChild)}j||(c=!l(a));if(c)a.documentShived=c;return a}var d=g.html5||{},n=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,
-m=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,i,j;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>";i="hidden"in a;if(!(a=1==a.childNodes.length))a:{try{b.createElement("a")}catch(c){a=!0;break a}a=b.createDocumentFragment();a="undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}j=
-a})();var e={elements:d.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:!1!==d.shivCSS,shivMethods:!1!==d.shivMethods,type:"default",shivDocument:h};g.html5=e;h(b)})(this,document);

src/templates/about.html

@@ -1,48 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %} | About{% endblock %}
-{% block nav_about %} class="selected"    {% endblock %}
-{% block extrastyle %}<link rel="stylesheet" href="{{ url_for('static', filename='css/about.css') }}" type="text/css" media="screen" />{% endblock %}
-
-{% block main %}
-      <img id="me" src="{{ url_for('static', filename='img/ian.jpg') }}" alt="Picture of Ian Naval" />
-
-      <section id="skills">
-        <h3>Skills</h3>
-          <h4>General Programming</h4>
-          <ul>
-            <li>I specialize in clean, well-documented and efficient code.</li>
-            <li>I work quickly.</li>
-            <li>I am great at collaborating with other developers and have made contributions to the open-source community.</li>
-            <li>I am proficient in Java, Javascript, Python, HTML5, CSS3, Ruby, PHP, SQL, and C++.</li>
-            <li>I have years of experience with Linux and UNIX-based Web servers.</li>
-          </ul>
-          <h4>Web</h4>
-          <ul>
-            <li>My primary expertise in back-end Web development is with the Django Python framework.</li>
-            <li>I am comfortable working with multiple programming languages.</li>
-            <li>I always write <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fianonavy.com%2F">valid HTML</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ianonavy.com%2Fstatic%2Fcss%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=">CSS</a>.</li>
-          </ul>
-          <h4>Android</h4>
-          <ul>
-            <li>I write code that takes is very DRY and takes advantage of Java's Object-Oriented structure.</li>
-            <li>My XML layouts are functional, simple and effective.</li>
-            <li>I optimize my apps for compatibility with multiple devices.</li>
-          </ul>
-          <h4>Administrative</h4>
-          <ul>
-            <li>I own any problems that may arise and am very driven to resolve them as quickly as possible.</li>
-            <li>I configure Web servers from scratch.</li>
-            <li>I am paranoid about database backups.</li>
-            <li>I love optimizing processes on VPSes for speed and storage efficiency.</li>
-            <li>I hate repetitive tasks and write scripts to solve many problems.</li>
-          </ul>
-      </section>
-      <section id="about-me">
-        <h3>About Me</h3>
-          <p>My name is Ian. I make things with computers. Sometimes you'll find me
-            doing various other activities like playing the piano or ukulele, but more
-            often then not I am sitting in front of a screen working on my long list
-            of projects. Hope to see you around the Web.</p>
-      </section>
-{% endblock main %}

src/templates/base.html

@@ -2,49 +2,27 @@
 <html>
   <head>
     <title>ianonavy{% block title %}{% endblock title %}</title>
+    
     <meta charset="utf-8" />
     <meta name="keywords" content="ianonavy, freelance, android, web, developer, ian, adam, naval">
     <meta name="description" content="Portfolio for software engineer and sysadmin Ian Adam Naval.">
     <meta name="author" content="Ian Adam Naval">
     <meta name="robots" content="index,follow">
-    <link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css" media="all">
-      <link href="http://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet" type="text/css" media="all">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css" media="screen" />
-    {% block extrastyle %}{% endblock %}
-    <!--[if lt IE 9]>
-      <script type="text/javascript" src="{{ url_for('static', filename='lib/modernizr.js') }}"></script>
-      <script type="text/javascript" src="{{ url_for('static', filename='lib/html5shiv.js') }}"></script>
-    <![endif]-->
-    <script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-33981209-1']);
-    _gaq.push(['_trackPageview']);
-
-    (function() {
-      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" media="screen" />
+    {% block extrastyle %}{% endblock extrastyle %}
   </head>
 
   <body>
-    <!--[if lt IE 8]><p>Sorry, your browser is not supported! You can try to use this website with your current browser, but we make no guarantees that it will work or look good. Please try using a different browser such as <a href="http://www.google.com/chrome">Google Chrome</a> or <a href="http://www.getfirefox.com/">Mozilla Firefox</a>. If you really want to stick with Internet Explorer, please <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home"> upgrade your browser</a> to at least IE 9.</p><![endif]-->
     <header id="header">
-      <a href="/"><img id="logo" src="{{ url_for('static', filename='img/logo-196.png') }}" alt="ianonavy logo" /></a>
-      <h1 id="name"><a href="/">Ian Adam Naval</a></h1>
-      <h2 id="tagline">Software engineer/sysadmin from Los Angeles, CA</h2>
-
-      <nav id="nav" class="top">
-        <a href="/"><img id="small-logo" src="{{ url_for('static', filename='img/logo-24.png') }}" alt="small ianonavy logo" /></a>
+      <h1 id="name">Ian Adam Naval</h1>
+      <div id="tagline">Software engineer/sysadmin</div>
+      <nav id="nav">
         <ul>
-          <li{% block nav_about %}{% endblock nav_about %}><a href="{{ url_for('about') }}">About</a></li>
-          <li{% block nav_contact %}{% endblock nav_contact %}><a href="{{ url_for('contact') }}">Contact</a></li>
-          <li{% block nav_portfolio %}{% endblock nav_portfolio %}><a href="{{ url_for('home') }}">Portfolio</a></li>
-          <li{% block nav_labs %}{% endblock nav_labs %}><a href="{{ url_for('labs') }}">Labs</a></li>
-          <li{% block nav_code %}{% endblock nav_code %}><a href="http://www.github.com/ianonavy">Code</a></li>
-          <li{% block nav_blog %}{% endblock nav_blog %}><a href="http://blog.ianonavy.com/">Blog</a></li>
-          <li id="top-link"><a href="javascript:scrollToTop();">^Top^</a></li>
+          <li><a href="{{ url_for('home') }}#portfolio">Portfolio</a></li>
+          <li><a href="{{ url_for('home') }}#contact">Contact</a></li>
+          <li><a href="{{ url_for('labs') }}">Labs</a></li>
+          <li><a href="http://www.github.com/ianonavy">Code</a></li>
         </ul>
       </nav>  
     </header>
@@ -55,9 +33,21 @@
     </div>
 
     <footer id="footer">
-      {% block footer %}Copyright &copy; 2012 Ian Adam Naval. All rights reserved.{% endblock footer %}
+      {% block footer %}Copyright &copy; 2014 Ian Adam Naval. All rights reserved.{% endblock footer %}
     </footer>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script>
-  </body>
 
+    <script src="{{ url_for('static', filename='lib/modernizr.js') }}"></script>
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-33981209-1']);
+      _gaq.push(['_trackPageview']);
+
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </body>  
 </html>
+

src/templates/contact.html

@@ -1,36 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %} | Contact{% endblock %}
-{% block nav_contact %} class="selected"    {% endblock %}
-{% block extrastyle %}<link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}" type="text/css" media="screen" />{% endblock %}
-
-{% block main %}
-      <section id="contact">
-        {% if success %}
-        <span class="">Thank you for contacting me! Your message was sent successfully.</span>
-        {% else %}
-        <form id="contact_form" action="/newdesign/contact/" method="post">
-          {# contact_form.name.errors #}
-          {# contact_form.name.label_tag #}
-          {# contact_form.name #}
-          {# contact_form.email.errors #}
-          {# contact_form.email.label_tag #}
-          {# contact_form.email #}
-          {# contact_form.body.errors #}
-          {# contact_form.body.label_tag #}
-          {# contact_form.body #}
-          <input type="submit" value="Submit" />
-        </form>
-        {% endif %}
-        <p>Hablo español.</p>
-      </section>
-      <section id="internet">
-        <h3>Find me on the Internet</h3>
-        <p id="social_links">
-          <a href="http://www.github.com/ianonavy"><img src="{{ url_for('static', filename='img/icons/32/github.png') }}" alt="GitHub" /></a>
-          <a href="http://forr.st/-ianonavy"><img src="{{ url_for('static', filename='img/icons/32/forrst.png') }}" alt="Forrst" /></a>
-          <a href="skype:ianonavy?userinfo"><img src="{{ url_for('static', filename='img/icons/32/skype.png') }}" alt="Skype" /></a>
-          <a href="http://stackoverflow.com/users/765439/ianonavy"><img src="{{ url_for('static', filename='img/icons/32/stackoverflow.png') }}" alt="Stackoverflow" /></a>
-        </p>
-      </section>
-{% endblock main %}

src/templates/index.html

@@ -1,73 +1,86 @@
 {% extends "base.html" %}
 
-{% block nav_portfolio %} class="selected"    {% endblock %}
 {% block extrastyle %}<link rel="stylesheet" href="{{ url_for('static', filename='css/portfolio.css') }}" type="text/css" media="screen" />{% endblock %}
 
 {% block main %}
-      <p id="intro">Read more about my experience with <a href="javascript:scrollToElement('android')">Android apps</a>, <a href="javascript:scrollToElement('websites')">websites</a>, and <a href="javascript:scrollToElement('sysadmin')">system administration</a>:</p>
+      <div id="about" class="section center-wrapper">
+        <img id="me" src="{{ url_for('static', filename='img/ian-280.jpg') }}" alt="Picture of Ian Naval" class="center-wrapped" />
         
-      <section id="android" class="section">
-        <h2>Android</h2>
-
-        <div id="mathhammer" class="item">
-          <img src="{{ url_for('static', filename='img/mathhammer.png') }}" alt="MathHammer 40k screenshot" />
-          <h3>MathHammer 40k</h3>
-          <p>MathHammer 40k helps Warhammer 40k determine your chance of success. It helps check a model's predicted success in shooting against infantry and monstrous creatures, melee against infantry and monstrous creatures, and attempting to penetrate armor.</p>
-          <p>I designed this app for my high school physics teacher, and we worked together to get it on Google Play. It was the gateway for me into the Android application development industry.</p>
-          <p>MathHammer 40k was designed for easy of use and simplicity. All of the input controls were made available on one screen without scrolling, and calculations are made automatically as the player enters their model's statistics.</p>
-          <p>Check it out on <a href="https://play.google.com/store/apps/details?id=com.mathhammer40k.mathhammer">Google Play</a>.</p>
+        <div id="skills-and-facts" class="about-section center-wrapped">
+          <h3>Skills</h3>
+          <ul>
+            <li>Learns fast.</li>
+            <li>Meets deadlines.</li>
+            <li>Works well with teammates.</li>
+            <li>Years of experience with Linux.</li>          
+            <li>Well-documented and efficient code.</li>
+          </ul>  
+          <h3>Facts</h3>
+          <ul>
+            <li>Allergic to fish.</li>
+            <li>Big fan of potatoes.</li>
+            <li>Not allergic to shelfish.</li>
+            <li>Does not own those glasses.</li>
+            <li>Received potatoes for Christmas.</li>
+          </ul>
         </div>
 
-        <div id="smspammer" class="item">
-          <h3>SMSpammer</h3>
-          <img src="{{ url_for('static', filename='img/smspammer.png') }}" alt="SMSpammer screenshot" />
-          <p>Ever wanted to send the same message multiple times? You're in luck! This app is sure to flood your friend's inbox with messages. Annoy your friends to your heart's desire with this simple SMS spammer.</p>
-          <p>This simple but elegant app is the first of its kind, and it's the first app that I ever published by myself to the Android market. Unlike competitors, this app will not freeze the sender's phone and launches large quantities of text messages in small batches. It also does not keep record of these messages in your normal texting app, so you don't have to worry about your own phone being flooded with annoying messages.</p>
-          <p>Check it out on <a href="https://play.google.com/store/apps/details?id=com.ianonavy.spammer">Google Play</a>.</p>
+        <div id="technologies" class="about-section">
+          <h3>Technologies</h3>
+          <div class="technology-list">
+            <img src="{{ url_for('static', filename='img/technologies.png') }}" alt="Logos for HTML, CSS, JavaScript, PostgreSQL, MySQL, Python, Ruby, Java, C++, PHP, Flask, Django, Rails, Angular, Node.js, and Git">
+          </div>
         </div>
+      </div>
 
-      </section>
+      <div id="portfolio" class="section center-wrapper">
+        <h2>Portfolio</h2>
+        <div id="resume"><a class="button" href='http://files.ianonavy.com/resume.pdf'>View Résumé</a></div>
 
-      <section id="websites" class="section">
-        <h2>Websites</h2>
+        <div id="portfolio-items" class="">
+
+          <div class="portfolio-item center-wrapped">
+            <a href="http://mirrors.acm.wpi.edu/"><img src="{{ url_for('static', filename='img/mirrors.png') }}" alt="WPI ACM Mirrors screenshot" class="screenshot"></a>
+            <h3>WPI ACM Mirrors</h3>
+            <p>GNU/Linux mirrors for WPI folk.</p>
+          </div>
+
+          <div class="portfolio-item center-wrapped">
+            <a href="http://acm.wpi.edu/"><img src="{{ url_for('static', filename='img/acm.png') }}" alt="WPI ACM Website screenshot" class="screenshot"></a>
+            <h3>WPI ACM Website</h3>
+            <p>Homepage for the WPI ACM chapter.</p>
+          </div>
+
+          <div class="portfolio-item center-wrapped">
+            <a href="http://sms-fixer.ianonavy.com/"><img src="{{ url_for('static', filename='img/sms-fixer.png') }}" alt="SMS Fixer screenshot" class="screenshot"></a>
+            <h3>SMS Fixer</h3>
+            <p>Helps restore Android texts from Google Voice.</p>
+          </div>
+
+          <div class="portfolio-item center-wrapped">
+            <a href="http://potatoipsum.com/"><img src="{{ url_for('static', filename='img/potatoipsum.png') }}" alt="Potato Ipsum screenshot" class="screenshot"></a>
+            <h3>Potato Ipsum</h3>
+            <p>Lorem ipsum generator. With potatoes.</p>
+          </div>
+
+          <div class="portfolio-item center-wrapped">
+            <a href="https://play.google.com/store/apps/details?id=com.mathhammer40k.mathhammer&amp;hl=en"><img src="{{ url_for('static', filename='img/mathhammer.png') }}" alt="MathHammer screenshot" class="screenshot"></a>
+            <h3>MathHammer 40k</h3>
+            <p>Damage stats calculator app for WarHammer 40k.</p>
+          </div>
+
+          <div class="portfolio-item center-wrapped">
+            <a href="https://play.google.com/store/apps/details?id=com.ianonavy.spammer&amp;hl=en"><img src="{{ url_for('static', filename='img/smspammer.png') }}" alt="SMSpammer screenshot" class="screenshot"></a>
+            <h3>SMSpammer</h3>
+            <p>App for spamming text messages. <span class="cheeky-aside">(With permission.)</span></p>
+          </div>
           
-        <div id="mentaurus" class="item">
-          <h3>Mentaur Us</h3>
-          <a href="http://mentaur.us/"><img src="{{ url_for('static', filename='img/mentaurus.png') }}" alt="mentaur.us screenshot" /></a>
-          <p><a href="http://mentaur.us/">http://mentaur.us/</a></p>
-          <p>mentaur.us is a social-networking site that helps connect engineers with student robotics teams in their local areas. It uses reverse geocoding and the haversine formula along with a custom sorting algorithm to help match teachers, engineers, and coaches with local robotics teams based on skill and localized proximity.</p>
-          <p>The website's front end was designed by <a href="http://beiju.us/">Will Pryor</a>.</p>
         </div>
+      </div>
 
-        <div id="knightbookmarket" class="item">
-          <h3>Knight Book Market</h3>
-          <a href="http://www.knightbookmarket.tk/"><img src="{{ url_for('static', filename='img/knightbookmarket.png') }}" alt="Knight Book Market screenshot" /></a>
-          <p><a href="http://www.knightbookmarket.tk/">http://www.knightbookmarket.tk/</a></p>
-          <p>The Knight Book Market provides a place for students to easily buy and sell used textbooks. Here, students can often purchase books at a lower prices than at the official bookstore. Since the students are buying books directly from their peers, no money is lost to the corporate middle man.</p>
-          <p>The running costs of the site grew too much to keep it online, so I have temporarily shut it down while
-            I find cheaper hosting. The database has been completely wiped, but all of the source code remains.</p>
-        </div>
+      <div id="contact" class="section center-wrapper">
+        <h2>Contact</h2>
+        <p>Information is on my <a href='http://files.ianonavy.com/resume.pdf'>résumé</a>.</p>
+      </div>
 
-      </section>
-
-      <section id="sysadmin" class="section">
-        <h2>System Administration</h2>
-        <div id="stormwood" class="item">
-          <h3>Stormwood Community</h3>
-          <img src="{{ url_for('static', filename='img/stormwood.png') }}" alt="Stormwood screenshot" />
-          <p><a href="http://www.stormwoodmc.net/">http://www.stormwoodmc.net/</a></p>
-          <p>StormWood MC is an independent video game server that runs the game Minecraft. I worked solely to setup and maintain technical aspects of running the server. My responsibilities included configuring Apache, writing a backup script, developing and maintaining the website, and documenting all responsibilities.</p>
-        </div>
-        <div id="mcrumble" class="item">
-          <h3>Minecraft Rumble</h3>
-          <img src="{{ url_for('static', filename='img/mcrumble.png') }}" alt="Minecraft Rumble screenshot" />
-          <p><a href="http://www.mcrumble.com/">http://www.mcrumble.com/</a></p>
-          <p>Minecraft Rumble is an upcoming Minecraft community currently on developmental hiatus. It features a complex system of interlinking Minecraft servers which proxy to each other and work in a manner similar to a simple cloud infrastructure. All code used to power this community will be written by me including backup scripts, Java plugins, and the Python backend for the website.</p>
-        </div>
-      </section>
-
-      <section id="resume">
-        <h2>Résumé</h2>
-        <p>Click <a href='http://files.ianonavy.com/resume.pdf'>here</a> to download a copy of my résumé.</p>
-      </section>
 {% endblock main %}

src/templates/labs.html

@@ -1,26 +1,11 @@
 {% extends "base.html" %}
 
 {% block title %} | Labs{% endblock %}
-{% block nav_labs %} class="selected"    {% endblock %}
 
 {% block main %}
-	  <h2>Labs</h2>
-      <p>Welcome to my lab! This where I run all my experimental stuff.</p>
-      <p>Click <a href="http://demo.ianonavy.com/">here</a> to see what I'm
-      	working on this very moment (if anything).</p>
-      <h2>Active Projects</h2>
-      <h3>Minecraft Rumble</h3>
-      <p>Minecraft Rumble is my big upcoming Minecraft community. It will
-      	include many different types of games fused together into one unique
-      	gameplay experience. Development is slow and steady, and I can't share
-      	any of my source code, but I'll be happy to discuss how things are going.</p>
-      <h3>Driving Auto-reply App</h3>
-      <p>I am sick and tired of seeing people who drive while on the phone or
-      	texting. To help promote distraction-free driving, I'm developing an
-      	app that will listen for incoming calls and text messages and silently
-      	reply with a message saying not to call back unless it's really urgent.
-      	If the same person does happen to text again, the app alerts the driver
-      	and asks them to pull over before reading the message. For added
-      	security, the app will GPS to ensure that the driver has come to a
-      	full and complete stop.</p>
+    <div class="section">
+	    <h2>Labs</h2>
+      <p>Welcome to my lab! This where I run all my experimental stuff. My <a href="https://git.ianonavy.com/public">private Git server</a> has some public repositories if you are interested.</p>
+      <p>I also use <a href="http://demo.ianonavy.com/">demo.ianonavy.com</a> as a general purpose staging site. Check it out to see what I'm working on now!</p>
+    </div>
 {% endblock main %}