Completely redid design.

2014-01-09 05:32:40 -08:00 · 2014-01-09 05:32:40 -08:00 · 77e91c4b68
commit 77e91c4b68
parent 9487cc42c5
16 changed files with 318 additions and 220 deletions
--- a/src/static/css/portfolio.css
+++ b/src/static/css/portfolio.css
@ -1,30 +1,73 @@
-.section {
-    margin: 0;
-    padding: 2em 0 0;
-    clear: both;
-}
-
-#me {
-    position: relative;
-    width: 240px;
-    float: left;
-}
+.center-wrapper {
+  display: block;
+  text-align: center; }
+  .center-wrapper .center-wrapped {
+    display: inline-block;
+    vertical-align: top; }

 .about-section {
-    margin: 0;
-    padding: 0;
-    width: 600px;
-    float: right;
-}
+  display: inline-block;
+  margin: 0 24px 0;
+  width: 312px;
+  text-align: left;
+  vertical-align: top; }

-.about-section ul {
-    margin: 0;
-    padding: 0 0 2em 2em;
-    font-size: 1em;
-}
+#me {
+  width: 280px; }

-.about-section p {
-    margin: 0 0 1em;
-    text-indent: 2.5em;
-    font-size: 1em;
-}
+.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: 4px 4px 6px #000;
+  flex: 1 0 auto; }
+  .portfolio-item p {
+    margin: 0;
+    font-size: .8em; }
+
+/* iPhone */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+  .portfolio-item {
+    width: 256px; }
+
+  #calendar {
+    display: none; } }
+.screenshot {
+  margin: 0;
+  width: 100%;
+  border: 1px #ddd solid; }
+
+#calendar {
+  width: 100%;
+  max-width: 1320px;
+  height: 480px; }
+
+/* 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; }
--- a/src/static/css/portfolio.scss
+++ b/src/static/css/portfolio.scss
@ -0,0 +1,103 @@
+.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: 4px 4px 6px #000;
+    flex: 1 0 auto;
+
+    p {
+        margin: 0;
+        font-size: .8em;
+    }
+}
+
+/* iPhone */
+@media only screen 
+and (min-device-width : 320px) 
+and (max-device-width : 568px) { 
+    .portfolio-item {
+        width: 256px;
+    }
+
+    #calendar {
+        display: none;
+    }
+}
+
+.screenshot {
+    margin: 0;
+    width: 100%;
+    border: 1px #ddd solid;
+}
+
+#calendar {
+    width: 100%;
+    max-width: 1320px;
+    height: 480px;
+}
+
+/* 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;
+}
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@ -2,76 +2,46 @@
 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;
+    text-align: center;
+    background: #222;
    color: #0f0;
-    font-family: "Ubuntu Mono", monospace;
+    font-family: Arial, sans-serif;
 }

-#logo {
-    margin: 0;
-    padding: 0;
-    float: left;
-    width: 196px;
-    height: auto;
-    border: none;
-}
-
-#header h1 {
+#name {
    margin: 0;    
+    color: #fff;
    font-size: 2.5em;
 }

 #tagline {
    margin: 0;
-    font-size: .75em;
-    font-weight: normal;
+    font-size: .9em;
+    color: #39e639;
 }

-#name {
-    display: inline-block;
-    font-family: "Ubuntu", sans-serif;
-}
-
-#name a {
-    color: #fff;
-}

 /* Navigation */
 #nav {
    width: 100%;
-    margin: 0;
+    margin: 16px 0 0;
    padding: 0;
    text-align: center;
-    clear: both;
-    background: #000;
 }

 #nav ul {
@ -87,69 +57,37 @@ a:visited {
    padding: 0 1em 0;
 }

-#nav li.selected a {
-    color: #099;
-}
-
-#nav li.selected a:hover {
-    text-decoration: none;
+#nav a {
+    color: #b9f73e;
 }

 /* 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 */
@ -157,63 +95,6 @@ a:visited {
    margin: 0;
    padding: .5em;
    clear: both;
-    background: #000;
+    background: #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;
-    }
-}
-
-@media (max-width: 900px) {
-    #header {
-	font-size: 1.75em;
-    }
-}
-
-@media (max-width: 800px) {
-    #header {
-	font-size: 1.5em;
-    }
-
-    #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;
-    }
-
-    #logo {
-        display: block;
-        width: 64px;
-        margin: 0 auto;
-    }
-}
--- a/src/static/css/test.scss
+++ b/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);
+    }
+  }
+}
--- a/src/static/img/acm.png
+++ b/src/static/img/acm.png
--- a/src/static/img/mathhammer.png
+++ b/src/static/img/mathhammer.png
--- a/src/static/img/mirrors.png
+++ b/src/static/img/mirrors.png
--- a/src/static/img/potatoipsum.png
+++ b/src/static/img/potatoipsum.png
--- a/src/static/img/sms-fixer.png
+++ b/src/static/img/sms-fixer.png
--- a/src/static/img/smspammer.png
+++ b/src/static/img/smspammer.png
--- a/src/static/img/technologies.png
+++ b/src/static/img/technologies.png
--- a/src/static/lib/html5shiv.js
+++ b/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);
--- a/src/static/lib/modernizr.js
+++ b/src/static/lib/modernizr.js
--- a/src/templates/base.html
+++ b/src/templates/base.html
@ -9,22 +9,19 @@
    <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 href="{{ url_for('static', filename='css/style.css') }}"rel="stylesheet" type="text/css" media="screen" />
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" media="screen" />
    {% block extrastyle %}{% endblock extrastyle %}
+
+    <script src="{{ url_for('static', filename='lib/modernizr.js') }}"></script>
  </head>

  <body>
    <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>
-
+      <h1 id="name">Ian Adam Naval</h1>
+      <span id="tagline">Software engineer/sysadmin from Los Angeles, CA</span>
      <nav id="nav">
        <ul>
          <li><a href="{{ url_for('home') }}#portfolio">Portfolio</a></li>
-          <li><a href="{{ url_for('home') }}#about">About</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>
--- a/src/templates/index.html
+++ b/src/templates/index.html
@ -3,41 +3,86 @@
 {% block extrastyle %}<link rel="stylesheet" href="{{ url_for('static', filename='css/portfolio.css') }}" type="text/css" media="screen" />{% endblock %}

 {% block main %}
+      <div id="about" class="section center-wrapper">
+        <img id="me" src="{{ url_for('static', filename='img/ian.jpg') }}" alt="Picture of Ian Naval" class="center-wrapped" />
        
-      <div id="portfolio">
-        <h2>Portfolio</h2>
-        <p><a class="button" href='http://files.ianonavy.com/resume.pdf'>View Resume</a></p>
-      </div>
-
-      <div id="about">
-        <h2>About</h2>
-        <img id="me" src="{{ url_for('static', filename='img/ian.jpg') }}" alt="Picture of Ian Naval" />
-        
-        <div id="skills" class="about-section">
+        <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>Clean, well-documented and efficient code.</li>
-            <li>Years of experience with Linux and UNIX-based Web servers.</li>          
-            <li>Proficient in Python, JavaScript, HTML, CSS, SQL, Java, Ruby, PHP, and C++.</li>
-            <li>Experience with Flask, Django, node.js, and AngularJS.</li>
+            <li>Years of experience with Linux.</li>          
+            <li>Well-documented and efficient code.</li>
          </ul>  
-        </div>
-        <div id="about-me" class="about-section">
          <h3>Facts</h3>
          <ul>
-            <li>Likes potatoes, music and language.</li>
-            <li>Received that bag of potatoes for Christmas.</li>
+            <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="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>

-      <div id="contact">
+      <div id="portfolio" class="section">
+        <h2>Portfolio</h2>
+        <div id="resume"><a class="button" href='http://files.ianonavy.com/resume.pdf'>View Résumé</a></div>
+
+        <div id="portfolio-items" class="center-wrapper">
+
+          <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="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 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>
+      </div>
+
+      <div id="contact" class="section">
        <h2>Contact</h2>
        <p>Information is on my <a href='http://files.ianonavy.com/resume.pdf'>résumé</a>.</p>
+        <h3>Weekly Calendar</h3>
+        <iframe id="calendar" src="https://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=WEEK&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=ianonavy@gmail.com&amp;color=%23A32929&amp;src=sodbfdhm4q7api4qvf5h5k7rlg@group.calendar.google.com&amp;color=%23B1440E&amp;src=36gqite9pam369c6mknuttgsqg@group.calendar.google.com&amp;color=%23125A12&amp;src=jnqo9lo8efm5ogj78pr176qstg@group.calendar.google.com&amp;color=%2323164E&amp;src=a82i41iavlvd37d9fnrofklrms@group.calendar.google.com&amp;color=%23182C57&amp;src=achgl7e3m1pokdo8o1uqis70fk@group.calendar.google.com&amp;color=%2323164E&amp;src=doransmestad.com_da1erfts3egct17eb5511nduf8@group.calendar.google.com&amp;src=ieikn7uck3o2ultbt19d9me740@group.calendar.google.com&amp;color=%2323164E&amp;ctz=America/New_York" frameborder="0"></iframe>
      </div>

 {% endblock main %}
--- a/src/templates/labs.html
+++ b/src/templates/labs.html
@ -3,10 +3,9 @@
 {% block title %} | Labs{% endblock %}

 {% block main %}
-	  <h2>Labs</h2>
+    <div class="section">
+	    <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>
-
+      <p>Click <a href="http://demo.ianonavy.com/">here</a> to see what I'm working on this very moment (if anything).</p>
+    </div>
 {% endblock main %}