Bootstrap 3 & New Styling

_includes/content/contact.html

@@ -2,54 +2,182 @@
 ================================================== -->
   <div class="row">
 
-    <div class="span4">
-      <h3>Statistics</h3>
-      <ul class="icons-ul">
-        <li><i class="icon-li icon-calendar"></i>6+ Years in Game Development</li>
-        <li><i class="icon-li icon-download-alt"></i>64 Individual Releases</li>
-        <li><i class="icon-li icon-desktop"></i>11 Platforms</li>
-        <li><i class="icon-li icon-shield"></i>16 Seasons</li>
-        <li><i class="icon-li icon-certificate"></i>11 Franchises</li>
-        <li><i class="icon-li icon-book"></i>New Media, <abbr title="Bachelor of Fine Arts">BFA</abbr> @ Emerson College</li>
-      </ul>
+    <div class="col-md-4">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Statistics</h3>
+        </div>
+        <ul class="list-group">
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-calendar"></i>
+            </span>
+            6+ Years in Game Development
+          </li>
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-download-alt"></i>
+            </span>
+            64 Individual Releases
+          </li>
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-desktop"></i>
+            </span>
+            11 Platforms
+          </li>
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-shield"></i>
+            </span>
+            16 Seasons
+          </li>
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-certificate"></i>
+            </span>
+            11 Franchises
+          </li>
+          <li class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-book"></i>
+            </span>
+            New Media, <abbr title="Bachelor of Fine Arts">BFA</abbr> @ Emerson College
+          </li>
+        </ul>
+      </div>
     </div>
 
-    <div class="span4">
-      <h3>Websites</h3>
-      <ul class="icons-ul">
-        {% if page.layout == "valve" %}
-        <li><i class="icon-li icon-circle"></i> <a href="http://steamcommunity.com/id/atrus/">Steam: Atrus</a></li>
-        {% endif %}
-        <li><i class="icon-li icon-linkedin"></i><a href="http://www.linkedin.com/in/johnseggerson/" target="_blank">LinkedIn Profile</a></li>
-        <li><i class="icon-li icon-gamepad"></i><a href="http://www.mobygames.com/developer/sheet/view/developerId,290531/">MobyGames Developer Profile</a></li>
-        <li><i class="icon-li icon-film"></i><a href="http://www.imdb.com/name/nm2980406/"><acronym title="Internet Movie Database">IMDb</acronym></a></li>
-        <li><i class="icon-li icon-rss"></i><a href="http://segonmedia.com" target="_blank">Seg On Media (Blog)</a></li>
-        <li><i class="icon-li icon-github"></i><a href="http://github.com/TheSeg" target="_blank">GitHub: TheSeg</a></li>
-      </ul>
+    <div class="col-md-4">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Websites</h3>
+        </div>
+        <div class="list-group">
+          {% if page.layout == "valve" %}
+          <a href="http://steamcommunity.com/id/atrus/" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-user"></i>
+            </span>
+            Steam Community Profile
+          </a>
+          {% endif %}
+          <a href="http://www.linkedin.com/in/johnseggerson/" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-linkedin"></i>
+            </span>
+            LinkedIn Profile
+          </a>
+          <a href="http://www.mobygames.com/developer/sheet/view/developerId,290531/" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-gamepad"></i>
+            </span>
+            MobyGames Developer Profile
+          </a>
+          <a href="http://www.imdb.com/name/nm2980406/" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-film"></i>
+            </span>
+            <acronym title="Internet Movie Database">IMDb</acronym>
+          </a>
+          {% if page.layout != "valve" %}
+          <a href="http://raptr.com/TheSeg/" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-user"></i>
+            </span>
+            Raptr
+          </a>
+          {% endif %}
+          <a href="http://segonmedia.com" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-rss"></i>
+            </span>
+            Seg On Media (Blog)
+          </a>
+          <a href="http://github.com/TheSeg" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-github"></i>
+            </span>
+            GitHub: TheSeg
+          </a>
+        </div>
+      </div>
     </div>
-
-    <div class="span4">
-      <h3>Contact Info</h3>
-      <ul class="icons-ul">
-        <li><i class="icon-li icon-envelope-alt"></i><script type="text/javascript">
-        var x="function f(x){var i,o=\"\",l=x.length;for(i=l-1;i>=0;i--) {try{o+=x.c" +
-        "harAt(i);}catch(e){}}return o;}f(\")\\\"function f(x,y){var i,o=\\\"\\\\\\\""+
-        "\\\\,l=x.length;for(i=0;i<l;i++){if(i<69)y++;y%=127;o+=String.fromCharCode(" +
-        "x.charCodeAt(i)^(y++));}return o;}f(\\\"\\\\\\\\\\\\\\\"\\\\')9#5< x/(5*\\\\"+
-        "\\\\005\\\\\\\\016\\\\\\\\nNJV\\\\\\\\rN\\\\\\\\030\\\\\\\\000\\\\\\\\021\\" +
-        "\\\\\\020E&^\\\\\\\\023`jisf1~jvSfr~tsrDGLF\\\\\\\\007HBB\\\\\\\\016@@US^^K" +
-        "|}e\\\\\\\\023\\\\\\\\010\\\\\\\\000\\\\\\\\010o\\\\\\\\00345it\\\\\\\\ttw," +
-        "0.79`\\\\\\\\002}<C\\\\\\\\\\\\\\\\&I\\\\\\\\010\\\\\\\\007\\\\\\\\016\\\\\\"+
-        "\\004UE\\\\\\\\nROGT@J\\\"\\\\,69)\\\"(f};)lo,0(rtsbus.o nruter};)i(tArahc." +
-        "x=+o{)--i;0=>i;1-l=i(rof}}{)e(hctac};l=+l;x=+x{yrt{)55=!)31/l(tAedoCrahc.x(" +
-        "elihw;lo=l,htgnel.x=lo,\\\"\\\"=o,i rav{)x(f noitcnuf\")"                    ;
-        while(x=eval(x));</script></li>
-        <li><i class="icon-li icon-phone"></i>(415) 742-1SEG</li>
-        <li><i class="icon-li icon-skype"></i><a href="skype://johnseggerson?chat">Skype</a></li>
-        <li><i class="icon-li icon-google-plus"></i><a href="https://plus.google.com/113283982336373378707?rel=author" target="_blank">Google+</a></li>
-        <li><i class="icon-li icon-facebook-sign"></i><a href="https://www.facebook.com/TheSeg" target="_blank">Facebook</a></li>
-        <li><i class="icon-li icon-twitter"></i><a href="https://twitter.com/TheSeg">@TheSeg</a></li>
-      </ul>
+
+    <div class="col-md-4">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">Contact Info</h3>
+        </div>
+        <div class="list-group">
+          <script type="text/javascript">
+//<![CDATA[
+<!--
+var x="function f(x){var i,o=\"\",l=x.length;for(i=l-1;i>=0;i--) {try{o+=x.c" +
+"harAt(i);}catch(e){}}return o;}f(\")\\\"function f(x,y){var i,o=\\\"\\\\\\\""+
+"\\\\,l=x.length;for(i=0;i<l;i++){y%=127;o+=String.fromCharCode(x.charCodeAt" +
+"(i)^(y++));}return o;}f(\\\"\\\\u}paxsyl7miui{sN\\\\\\\\t\\\\\\\\000\\\\\\\\"+
+"037E\\\\\\\\005NUMO\\\\\\\\027w\\\\\\\\016@OF\\\\\\\\\\\\\\\\E]\\\\\\\\tGPQ" +
+"wK\\\\\\\\\\\\\\\\]TRP[[) l +(y4=+ ./9si7%is\\\\\\\\000\\\\\\\\024\\\\\\\\0" +
+"35\\\\\\\\022x\\\\\\\\n?<\\\\\\\\000\\\\\\\\177~<\\\\\\\\014\\\\\\\\000\\\\" +
+"\\\\021\\\\\\\\020Y9D\\\\\\\\013\\\\\\\\001\\\\\\\\032\\\\\\\\036F\\\\\\\\0" +
+"13\\\\\\\\037\\\\\\\\001\\\\\\\\032\\\\\\\\000\\\\\\\\\\\\\\\\\\\\\\\\033\\" +
+"\\\\\\007\\\\\\\\021\\\\\\\\030*UF%\\\\\\\\010'\\\\\\\\022]^ !\\\\\\\\\\\"\\"+
+"\\#$%&'()6x|l`/s}s`g(J5hlvw1owxHU~\\\\\\\\001\\\\\\\\032yT{F\\\\\\\\t\\\\\\" +
+"\\n\\\\\\\\013\\\\\\\\014\\\\\\\\r\\\\\\\\016\\\\\\\\017\\\\\\\\020\\\\\\\\" +
+"021\\\\\\\\022\\\\\\\\023\\\\\\\\024\\\\\\\\025\\\\\\\\026\\\\\\\\013Q\\\\\\"+
+"\\031YW]NM\\\\\\\\002\\\\\\\\034c+ ++k\\\\\\\\\\\"\\\\&?/'#=+b1=&\\\\\\\\01" +
+"7vkjx1g\\\\\\\\006)\\\\\\\\0003~\\\\\\\\177@ABCDEFGHIVD\\\\\\\\037\\\\\\\\0" +
+"35\\\\\\\\017\\\\\\\\001N-\\\\\\\\000/\\\\\\\\032UVWXYZ[\\\\\\\\\\\\\\\\]^ " +
+"!qfc%gs(zolcccjtxs=wz{KjEt;<=>?\\\\\\\\000\\\\\\\\001\\\\\\\\002\\\\\\\\003" +
+"\\\\\\\\004\\\\\\\\031\\\\\\\\tF\\\\\\\\026\\\\\\\\013\\\\\\\\003\\\\\\\\02" +
+"0\\\\\\\\034\\\\\\\\026\\\"\\\\,17)\\\"(f};)lo,0(rtsbus.o nruter};)i(tArahc" +
+".x=+o{)--i;0=>i;1-l=i(rof}}{)e(hctac};l=+l;x=+x{yrt{)94=!)31/l(tAedoCrahc.x" +
+"(elihw;lo=l,htgnel.x=lo,\\\"\\\"=o,i rav{)x(f noitcnuf\")"                   ;
+while(x=eval(x));
+//-->
+//]]>
+</script>
+          <noscript>
+          <div class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-envelope-alt"></i>
+            </span>
+            Enable JavaScript for E-mail address.
+          </div>
+          </noscript>
+          <a href="tel:4157421734" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-phone"></i>
+            </span>
+            (415) 742-1SEG
+          </a>
+          <a href="https://plus.google.com/113283982336373378707?rel=author" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-li icon-google-plus-sign"></i>
+            </span>
+            Google+
+          </a>
+          <a href="https://www.facebook.com/TheSeg" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-li icon-facebook-sign"></i>
+            </span>
+            Facebook
+          </a>
+          <a href="https://twitter.com/TheSeg" target="_blank" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-li icon-twitter-sign"></i>
+            </span>
+            @TheSeg
+          </a>
+          <a href="skype:johnseggerson?call" class="list-group-item">
+            <span class="pull-right">
+              <i class="icon-li icon-skype"></i>
+            </span>
+            Skype: JohnSeggerson
+          </a>
+        </div>
+      </div>
     </div>
 
   </div>

_includes/content/navigation.html

@@ -0,0 +1,24 @@
+
+  <nav id="navigation">
+  <div class="navbar navbar-default">
+    <div class="container">
+      <div class="navbar-header hidden-xs hidden-sm">
+        <a class="navbar-brand toTop" href="#top">John "Seg" Seggerson</a>
+      </div>
+      <div id="scrollTarget" class="">
+        <ul class="nav navbar-nav">
+          <li><a href="#introduction">Introduction</a></li>
+          <li><a href="#overview">Overview</a></li>
+          <li><a href="#skills">Skills</a></li>
+          <li><a href="#positions">Project Positions</a></li>
+          <li><a href="#releasedtitles">Projects &amp; Roles</a></li>
+          <li><a href="#share">Share</a></li>
+          <li class="pdf btn-warning hidden-md hidden-lg"><a href="{{site.baseurl}}pdf/John_Seg_Seggerson.pdf"><i class="icon-file"></i> PDF</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
+          <li class="pdf btn-warning"><a href="{{site.baseurl}}pdf/John_Seg_Seggerson.pdf"><i class="icon-file"></i> PDF</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  </nav>