Ported azure site over to github pages

2019-09-20 15:10:34 -07:00 · 2019-09-20 15:10:34 -07:00 · 55e96302c7
commit 55e96302c7
parent 4472f029b2
70 changed files with 47597 additions and 35 deletions
--- a/404.html
+++ b/404.html
@ -1,24 +1,9 @@
 ---
 layout: default
+title: 404 Error - Page Not Found
+imageUrl: ../img/404.jpg
+blurImageUrl: ../img/404_blur.jpg
+motto: HTTP 404 Error
 ---

-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>
+<p><em>That's geek speak for</em> "this page doesn't exist anymore, and maybe it never did!"</p>
--- a/AI.html
+++ b/AI.html
@ -0,0 +1,12 @@
+---
+layout: default
+title: Artificial Insemination Services
+imageUrl: ../img/Ai-calf.jpg
+blurImageUrl: ../img/Ai-calf_blur.jpg
+motto: Artificial Insemination
+---
+<p>
+    I am licensed in the Great State of Wyoming as a food animal artificial insemination technician, which means I can legally AI cows, goats, and sheep.
+    Practically speaking, I have only ever AIed cows, but my conception rates are very good for both beef and dairy cows.
+    When (if?) I standardize my rates, I will include them here. Until then, you will have to contact me directly and we can negotiate prices then.
+</p>
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -237,13 +237,20 @@ GEM
      ethon (>= 0.9.0)
    tzinfo (1.2.5)
      thread_safe (~> 0.1)
+    tzinfo-data (1.2019.3)
+      tzinfo (>= 1.0.0)
    unicode-display_width (1.6.0)
+    wdm (0.1.1)

 PLATFORMS
  x64-mingw32

 DEPENDENCIES
  github-pages
+  jekyll-feed (~> 0.6)
+  minima (~> 2.0)
+  tzinfo-data
+  wdm (~> 0.1.0)

 BUNDLED WITH
   2.0.2
--- a/KeepEPDsReal.html
+++ b/KeepEPDsReal.html
@ -0,0 +1,167 @@
+---
+layout: default
+title: Keep EPDs Real
+imageUrl: ../img/cannulated-cows.jpg
+blurImageUrl: ../img/cannulated-cows_blur.jpg
+motto: Keep EPDs Real
+---
+
+<p>
+    In the <a href="https://podcasts.apple.com/us/podcast/selection-for-milk-in-the-cowherd-how-much-is-too-much/id964198047?i=1000431062519">March 4, 2019 episode of BeefWatch Podcast</a>, Dr. Travis Mulliniks of the University of Nebraska-Lincoln presented the research he conducted and published in <a href="https://doi.org/10.2527/tas2016.0006">"High milk production decreases cow-calf productivity within a highly available feed resource environment."</a>
+    In the paper, he discovered that milk production in beef cattle has no correlation with calf weaning weights, but has a significant negative correlation with breedback rates.
+    Dr. Mulliniks' paper is in agreement with several others on this topic, and was by far the largest and most conclusive study to find these results.
+</p>
+<p>At the conclusion of the podcast episode, Dr. Mulliniks stated</p>
+<blockquote>As producers looking at bulls: we highly suggest, in our environment in Nebraska, from an Angus standpoint, an EPD of 22 or lower. ... Above that we start seeing an increase in that milking potential. But it's something that we really need to pay attention to, 'cause as our costs continue to go up, and we're not necessarily seeing an increase in the output. ... We really need to manage and moderate milk in a lot of our cow-calf setups.</blockquote>
+<p>Mathematically, he is saying:</p>
+<a href="https://www.codecogs.com/eqnedit.php?latex=\inline&space;\small&space;High\&space;Fertility=Low\&space;Milk\&space;Production=Low\&space;MILK\&space;EPD\neq&space;Low\&space;Weaning\&space;Weights" target="_blank"><img class="img img-responsive math" src="https://latex.codecogs.com/svg.latex?\inline&space;\small&space;High\&space;Fertility=Low\&space;Milk\&space;Production=Low\&space;MILK\&space;EPD\neq&space;Low\&space;Weaning\&space;Weights" title="\small High\ Fertility=Low\ Milk\ Production=Low\ MILK\ EPD\neq Low\ Weaning\ Weights" /></a>
+<p><em><strong>WHAT!?!</strong></em></p>
+<p>
+    The MILK EPD is calculated from calf weaning weights. The <a href="https://www.angus.org/Nce/Definitions.aspx">Angus Association sort of admits it</a>, the <a href="http://nbcec.org/producers/sire_selection/manual.pdf">National Beef Cattle Evaluation Consortium knows it</a>, and professors in both <a href="https://www.worldcat.org/search?q=isbn%3A9781845939816">Scotland</a> and <a href="https://www.worldcat.org/search?q=isbn%3A0646387138">Australia</a> teach students how to calculate it.
+    Mathematically, that means:
+</p>
+<a href="https://www.codecogs.com/eqnedit.php?latex=\inline&space;\small&space;Low\&space;MILK\&space;EPD=&space;Low\&space;Weaning\&space;Weights" target="_blank"><img class="img img-responsive math" src="https://latex.codecogs.com/svg.latex?\inline&space;\small&space;Low\&space;MILK\&space;EPD=&space;Low\&space;Weaning\&space;Weights" title="\small Low\ MILK\ EPD= Low\ Weaning\ Weights" /></a>
+<p>
+    Of course, Mulliniks' research said very clearly:
+</p>
+<a href="https://www.codecogs.com/eqnedit.php?latex=\inline&space;\small&space;Low\&space;Milk\&space;Production\neq&space;Low\&space;Weaning\&space;Weights" target="_blank"><img class="img img-responsive math" src="https://latex.codecogs.com/svg.latex?\inline&space;\small&space;Low\&space;Milk\&space;Production\neq&space;Low\&space;Weaning\&space;Weights" title="\small Low\ Milk\ Production\neq Low\ Weaning\ Weights" /></a>
+<p>
+    So both of these pieces of information lead to something more like:
+</p>
+<a href="https://www.codecogs.com/eqnedit.php?latex=\inline&space;\small&space;High\&space;Fertility=Low\&space;Milk\&space;Production\neq&space;Low\&space;MILK\&space;EPD=Low\&space;Weaning\&space;Weights" target="_blank"><img class="img img-responsive math" src="https://latex.codecogs.com/svg.latex?\inline&space;\small&space;High\&space;Fertility=Low\&space;Milk\&space;Production\neq&space;Low\&space;MILK\&space;EPD=Low\&space;Weaning\&space;Weights" title="\small High\ Fertility=Low\ Milk\ Production\neq Low\ MILK\ EPD=Low\ Weaning\ Weights" /></a>
+<p>I contacted Mulliniks and asked him if there was something I missed. He replied</p>
+<blockquote>
+    The milk EPD is actually associated with milk production.
+    If you reread the description for milk EPD, <strong>it is a direct correlation between milk</strong> and mothering ability <strong>on weaning weight</strong>, which would be the maternal component of weaning weight.
+    So using bulls with high milk EPDs will increase milk production of your cowherd if you retain heifers out them.
+    <br />
+    &hellip;
+    <br />
+    Selecting for low milk EPD does not mean you will necessarily decrease calf weaning weight.
+    You can still select for growth through WW EPD that would be independent from maternal traits.
+    <br />
+    <em>[Emphasis mine]</em>
+</blockquote>
+<h2>This was the last straw</h2>
+<p>
+    I was formally introduced to EPDs at the age of 13 by my local semen sales rep.
+    He gave a slide presentation with lots of pretty pictures: one had lots of bell curves to illustrate accuracies, another had colored bars in four colors to illustrate SNPs, and another one had little bull silhouettes in little pens to illustrate contemporary groups.
+    He even defined Expected Progeny Difference: <em>expected</em> means a statistical prediction, <em>progeny</em> means the offspring - not the animal itself, and <em>difference</em> means compared to &hellip; something.
+    Not the breed averages, though.
+    That's why you really need to compare your potential sires against the breed averages, which are handily published in every sire catalog.
+</p>
+<p>
+    At the end of the presentation, he asked for questions.
+    I had one.
+</p>
+<p>
+    <em>&quot;How are they calculated?&quot;</em>
+</p>
+<p>
+    He knew the answer to that, too. It turns out that EPDs are generated by computers that take into account <b>all</b> of an animal's relatives, from his sons and daughters to his distant cousins.
+    It reminded me of the Yahtzee game that was installed on my computer.
+    That answer didn't satisfy me.
+    If you're reading this, I'm guessing that answer doesn't satisfy you, either.
+</p>
+<p>
+    I knew some extension agents and professors through 4-H and started making phone calls to get a real handle on how EPDs are calculated.
+    One of these calls yielded the name and phone number of a professor (both of which I have now forgotten) at Colorado State University who specialized in these things.
+    I eagerly called him.
+</p>
+<blockquote>
+    <table>
+        <tr>
+            <th>Professor</th>
+            <td>Hello?</td>
+        </tr>
+        <tr>
+            <th>Me</th>
+            <td>Hello, my name is Thomas Christensen. I'm a 4-H member interested in learning about EPDs.</td>
+        </tr>
+        <tr>
+            <th>
+                Professor
+            </th>
+            <td>
+                <em>(Repeat slideshow presentation from semen rep, except exclude the pretty pictures, because FaceTime wasn't a thing, yet.)</em>
+            </td>
+        </tr>
+        <tr>
+            <th>Professor</th>
+            <td>
+                Does that answer your questions?
+            </td>
+        </tr>
+        <tr>
+            <th>Me</th>
+            <td>Well, I was really looking for information on how they're calculated.</td>
+        </tr>
+        <tr>
+            <th>Professor <small>(indignantly)</small></th>
+            <td>You can't possibly understand that. The Angus Association has all the resource you need to understand EPDs as a producer: you don't need to know how they're calculated.</td>
+        </tr>
+        <tr>
+            <td></td>
+            <td><em>Click</em></td>
+        </tr>
+    </table>
+</blockquote>
+<p>
+    Maybe it's a good thing that I've forgotten his name, after all.
+</p>
+<p>
+    From that day forward, I read everything I could get my hands on about EPDs, and asked anyone who might know something about how they were calculated.
+    Every time it was the same non-answers that the semen rep had used: usually his exact language.
+    What they all amounted to was &quot;you don't need to know <b>how</b> EPDs are calculated, you just need to know that they work.&quot;
+    It was almost like I was asking sacrilegious questions, like Martin Luther of his bishops.
+    Every time I was rebuffed, I grew even more upset at those who perpetuated these hand-waving definitions..
+</p>
+<p>
+    I eventually learned how EPDs were calculated after all. In a chance encounter at a library in a far-away state, I read <a href="https://www.worldcat.org/search?q=isbn%3A0646387138"><em>Animal Breeding: Use of New Technologies</em> by Brian Kinghorn, Julius van der Werf and Margaret Ryan</a>.
+    (I highly recommend this book, but it's extremely hard to find a copy in this country.)
+    I learned the truths that the sire rep and the BIF had been hiding (or ignorant of) the entire time.
+    It wasn't that mysterious of difficult, after all.
+    Most of the things that had been said were, in fact, lies, but only lies because they had been deprived of their mathematical context.
+    Knowing the truth became a whole new burden, though, as I became more angry every time I heard the half-truths and misunderstandings of the High Priests of Beef.
+    It was upon this sore toe and disgruntled spirit that the hammer of Mulliniks' ill-fated words fell.
+    As Marty Robbins put it, &quot;I couldn't stand no more.&quot;
+</p>
+<h2>Something had to be done</h2>
+<div class="row">
+    <div class="col-md-3">
+        <img class="img img-responsive img-rounded" src="../img/milk-is-not-milk-button.jpg" alt="MILK &ne; Milk" />
+    </div>
+    <div class="col-md-9">
+        <p>
+            So I founded the #KeepEPDsReal movement.
+            The movement officially launched at the Albany County Fair 2019, where my colleagues and I wore and gave out buttons with the message MILK &ne; Milk.
+            The premises of the movement are simple:
+        </p>
+        <h3>
+            Measure what you actually want to measure
+            <br />
+            <small>MILK &ne; Milk</small>
+        </h3>
+        <p>
+            EPDs are useful tools to select for things that they actually measure, but if you try to use <code>MILK</code> to select for preg-rates or use <code>BW</code> to select for calving ease, then it's like you're using a wrench to pound nails with: you'll eventually get the job done, but it will take longer and the results might not be pretty.
+            The sire catalogs are riddled with these kinds of fake math, though.
+            Worse yet are the dollar-indexes that assume perfectly uniform conditions across the entire country all year long.
+            <a href="https://archive.org/details/animalbreedingpl032391mbp/page/n170">Selection indexes are important</a>,
+            but using them as the sole criteria for sire selection leads to <a href="https://archive.org/details/animalbreedingpl032391mbp/page/n164">genetic stagnation in the long term</a>.
+            And if you're assumptions are wrong going into a selection index system, then you're results will be flawed, too.
+            <a href="https://blog.steakgenomics.org/2018/12/bif-genetic-prediction-decision-support.html">Custom selection indexes</a> will never be a substitute for using the proper measurements at the proper time, either.
+        </p>
+        <h3>
+            Ranchers can do math, too
+            <br />
+            <small>Why doesn't everyone know <em>Y</em>=<em>Z&mu;</em>+<em>X&beta;</em>+<em>&epsilon;</em>?</small>
+        </h3>
+        <p>
+            EPDs are not hard to understand, and what with matrix algebra built into most scientific calculators, there is no technical reason ranchers shouldn't be taught how to create their own EPDs.
+            I'm convinced that as scientists, being open and transparent about the methods used to make EPDs will give producers more realistic expectations, wider acceptance, and lower skepticism of EPDs and genomic tools.
+            And I mean <strong>real</strong> transparency. Defining EPD by <a href="https://blog.steakgenomics.org/2019/03/epds-101-use-information-to-improve.html">reading the dictionary definitions of "Expected," "Progeny," and "Difference" and showing a bunch of pretty bell curves</a> doesn't cut it.
+            I'm trying my best to cover this point by publishing documents and computer programs for ranchers to calculate their own EPDs at <a href="https://github.com/millironx/beefblup">github.com/millironx/beefblup</a>, but I need help.
+            Like I said, I'm not an expert, so my programs and explanations are clunky at best.
+        </p>
+    </div>
+</div>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+
+    <!-- A LOT of this code comes from
+        https://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3/ -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>MILLIRON X - {{ page.title }}</title>
+	<!-- Bundle: bootstrap -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eumbg33EfHRpbzLIm0lGs0JresLNj7c+5beuRW4d11/vF3Wv3YYmuudfOwMsCmp5" crossorigin="anonymous" type="text/css">
+
+	<!-- Bundle: GSDK -->
+	<link href="../css/gsdk-main.css" rel="stylesheet" type="text/css">
+	<link href="../css/gsdk-demo.css" rel="stylesheet" type="text/css">
+
+	<!-- Bundle: Font Awesome -->
+	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" type="text/css">
+
+	<!-- Bundle: Grand Hotel font -->
+	<link href="https://fonts.googleapis.com/css?family=Grand+Hotel&display=swap" rel="stylesheet" type="text/css">
+
+	<!-- Bundle: Customcss -->
+	<link href="../css/millironx_customstyles.css" rel="stylesheet" type="text/css">
+	<link href="../css/socialflair.min.css" rel="stylesheet" type="text/css">
+
+	<!-- Azure Application Insights -->
+    <script type='text/javascript'>
+        var appInsights = window.appInsights || function (config) {
+            function r(config) { t[config] = function () { var i = arguments; t.queue.push(function () { t[config].apply(t, i) }) } }
+            var t = { config: config }, u = document, e = window, o = 'script', s = u.createElement(o), i, f; for (s.src = config.url || '//az416426.vo.msecnd.net/scripts/a/ai.0.js', u.getElementsByTagName(o)[0].parentNode.appendChild(s), t.cookie = u.cookie, t.queue = [], i = ['Event', 'Exception', 'Metric', 'PageView', 'Trace', 'Ajax']; i.length;)r('track' + i.pop()); return r('setAuthenticatedUserContext'), r('clearAuthenticatedUserContext'), config.disableExceptionTracking || (i = 'onerror', r('_' + i), f = e[i], e[i] = function (config, r, u, e, o) { var s = f && f(config, r, u, e, o); return s !== !0 && t['_' + i](config, r, u, e, o), s }), t
+        }({
+            instrumentationKey: '6a3cb8a6-9523-4f84-8237-915370d025ef'
+        });
+
+        window.appInsights = appInsights;
+        appInsights.trackPageView(null, null, { urlReferrer: document.referrer });
+    </script>
+</head>
+<body>
+    <div class="container">
+        <header class="hidden-xs text-center">
+            <h1 class="font-serif font-small-caps"><object data="../img/millironx-title.svg"><img src="../img/MillironX-Title.svg" alt="Milliron X" /></object>&emsp;Milliron X</h1>
+        </header>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="sidebar-nav">
+                    <nav class="navbar navbar-inverse" role="navigation">
+                        <div class="container">
+                            <div class="navbar-header">
+                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
+                                    <span class="sr-only">Toggle Navigation</span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                </button>
+                                <span class="visible-xs navbar-brand font-serif font-small-caps">
+                                    Milliron X
+                                </span>
+                            </div>
+
+                            <div class="navbar-collapse collapse sidebar-navbar-collapse">
+                                <ul class="nav navbar-nav">
+                                    <li class="nav-item"><a href="Index" class="nav-link">Home</a></li>
+                                    <li class="nav-item"><a href="Ai">Artificial Insemination</a></li>
+									<li class="nav-item"><a href="KeepEPDsReal">#KeepEPDsReal</a></li>
+                                    <li class="nav-item"><a href="Videos">Videos</a></li>
+                                    <li class="nav-item"><a href="Websites" class="nav-link">Websites</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+
+            <div class="col-sm-9">
+                <div class="tim-container">
+                    <div class="blurred-container">
+                        <div class="motto">
+                            <h1>
+                                {{ page.motto }}
+                            </h1>
+                        </div>
+                        <div class="img-src" style="background-image: url({{ page.imageUrl }})"></div>
+                        <div class="img-src blur" style="background-image: url({{ page.blurImageUrl }})"></div>
+                    </div>
+                    <br />
+                    <div class="main" id="main-content">
+                        {{ content }}
+                        <footer class="row">
+                            <div class="col-md-4">
+                                <div class="text-center">
+                                    <!--StackExchange flair-->
+                                    <a href="https://stackoverflow.com/users/3922521/milliron-x">
+                                        <img src="https://stackoverflow.com/users/flair/3922521.png" width="208" height="58" alt="profile for Milliron X at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Milliron X at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div class="col-md-4">
+                                <div class="text-center">
+                                    <!--Vimeo badge-->
+                                    <a href="https://vimeo.com/tchristensenii"><img src="https://f.vimeocdn.com/images_v6/blogbadge_channels.png" alt="Vimeo Blog Badge" /></a>
+                                </div>
+                            </div>
+
+                            <div class="col-md-4">
+                                <div class="text-center">
+                                    <!--GitHub "flair"-->
+                                    <div id="githubFlair"></div>
+                                </div>
+                            </div>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+	<!-- Script Bundle: JQuery -->
+	<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
+
+	<!-- Script Bundle: JQuery UI -->
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
+
+	<!-- Script Bundle: Bootstrap -->
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" integrity="sha384-DKoN2gpE9Yt/u0fuNvcJBn4n7wjnKFKjg4+Iz4ORs52lUc0Qp++smhHtWwHeapVW" crossorigin="anonymous" type="text/javascript"></script>
+
+	<!-- Script Bundle: GSDK -->
+	<script src="../js/gsdk-main.js" type="text/javascript"></script>
+	<script src="../js/gsdk-bootstrapswitch.js" type="text/javascript"></script>
+	<script src="../js/gsdk-checkbox.js" type="text/javascript"></script>
+	<script src="../js/gsdk-radio.js" type="text/javascript"></script>
+	<script src="../js/gsdk-custom.js" type="text/javascript"></script>
+
+	<!-- Script Bundle: Social Flair -->
+	<script src="../js/jquery.socialflair.js" type="text/javascript"></script>
+
+	<!-- Script Bundle: Custom -->
+	<script src="../js/MillironX_CustomScripts.js" type="text/javascript"></script>
+</body>
+</html>
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/font-awesome.css
+++ b/css/font-awesome.css
--- a/css/grand-hotel.css
+++ b/css/grand-hotel.css
@ -0,0 +1,16 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Grand Hotel';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Grand Hotel'), local('GrandHotel-Regular'), url(https://fonts.gstatic.com/s/grandhotel/v5/NrGQkrs9rbHm5EYx0Eil0iYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Grand Hotel';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Grand Hotel'), local('GrandHotel-Regular'), url(https://fonts.gstatic.com/s/grandhotel/v5/NrGQkrs9rbHm5EYx0Eil0o4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
--- a/css/gsdk-demo.css
+++ b/css/gsdk-demo.css
@ -0,0 +1,403 @@
+
+.tim-container{
+    background: #ffffff;
+
+}
+.tim-row{
+    margin-bottom: 20px;
+}
+.tim-title{
+    margin-top: 30px;
+    margin-bottom: 15px;
+}
+.tim-typo{
+    padding-left: 25%;
+    margin-bottom: 40px;
+    position: relative;   
+}
+.tim-typo .tim-note{
+    bottom: 10px;
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+    left: 0;
+    margin-left: 20px;
+    position: absolute;
+    width: 260px;
+}
+.tim-row{
+    margin-top: 50px;
+}
+.tim-row h3{
+    margin-top: 0;
+}
+.switch{
+    margin-right: 20px;
+}
+#navbar-full .navbar{
+    border-radius: 0 !important;
+    margin-bottom: 0;
+}
+.navigation-example{
+    margin-top: 0px;
+}
+.space{
+    height: 130px;
+    display: block;
+}
+.navigation-example .img-src{
+    background-attachment: scroll; 
+}
+.main{
+    background-color: #FFFFFF;
+}
+.navigation-example{
+    height: 660px;
+    background-image: url('../img/bg.jpg');
+    background-position: center center;
+    background-size: cover;
+    position: relative;
+}
+#notifications{
+    background-color: #FFFFFF;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+.tim-note{
+    text-transform: capitalize;
+}
+
+.card{
+    background-color: #FFFFFF;
+    padding: 10px 0 20px;
+    width: 100%;
+}
+.card h3{
+    margin-bottom: 20px;
+}
+.card button{
+    margin-top: 30px;
+}
+.subscribe-form{
+    padding-top: 20px;
+}
+.subscribe-form .form-control{
+    
+}
+
+.space-100{
+    height: 100px;
+    display: block;
+    width: 100%;
+}
+
+.be-social{
+    padding-bottom: 20px;
+/*     border-bottom: 1px solid #aaa; */
+    margin: 0 auto 40px;
+}
+.txt-white{
+    color: #FFFFFF;
+}
+.txt-gray{
+    color: #ddd !important;
+}
+.footer{
+    background-color: #DDDDDD;
+    background-image: url('../img/cover_4_blur.jpg');
+    background-attachment: fixed;
+    position: relative;
+}
+.heart{
+    color: #FF3B30;
+}
+.footer .overlayer{
+    background-color: rgba(27, 27, 27, 0.7);
+    position: relative;
+}
+.footer .credits {
+    margin-top: 25px;
+    padding: 20px 0 15px;
+    text-align: center;
+    color: #EEE;
+}
+.footer .credits a{
+    color: #FFFFFF;
+}
+.social-share{
+    float: left;
+    margin-right: 8px;
+}
+.social-share a{
+    color: #FFFFFF;
+}
+#subscribe_email{
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+}
+.pick-class-label{
+    border-radius: 8px;
+    color: #ffffff;
+    cursor: pointer;
+    display: inline;
+    font-size: 75%;
+    font-weight: bold;
+    line-height: 1;
+    margin-right: 10px;
+    padding: 15px 23px;
+    text-align: center;
+    vertical-align: baseline;
+    white-space: nowrap;
+}
+
+.parallax-pro{
+  width:100%;
+  display: block;
+  position: relative;
+  background-color: #000;
+}
+.parallax-pro > .img-src{
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    
+}
+.parallax-pro:after{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.3);
+    display: block;
+    content: "";
+    z-index: 0;
+}
+.parallax-pro .container{
+    padding-top: 20px;
+    z-index: 1;
+    position: relative;
+}
+.parallax-pro .hello a{
+    color: #fff;
+    text-decoration: none;
+}
+.parallax-pro .hello{
+    font-size: 48px;
+    font-weight: 300;
+    position: relative;
+/*     width: 430px; */
+    margin: 30px auto 50px;
+}
+.parallax-pro .label{
+    font-size: 18px;
+    position: absolute;
+    text-transform: uppercase;
+    background-color: #FF9500;
+    color: #FFFFFF;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    padding: 0;
+    line-height: 30px;
+    text-align: center;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+.parallax-pro small{
+    padding-top: 15px;
+    font-size: 20px;
+    display: block;
+    color: #fff;
+}
+.parallax-pro ul{
+     width: 280px;
+    margin: 0 auto;
+}
+.parallax-pro li{
+    padding: 9px 0;
+    border-bottom: 1px solid #777;
+}
+.parallax-pro .actions{
+    margin-top: 40px;
+}
+.parallax-pro .actions{
+    margin-left: 10px;
+}
+.parallax-pro .motto{
+    color: #FFFFFF;
+    font-size: 64px;
+    font-weight: 600;
+    position: relative;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
+    text-transform: uppercase;
+    z-index: 3;
+    margin: 0 auto;
+    top: 22%;
+    width: 285px;
+}
+.parallax-pro .motto .pro{
+    position: absolute;
+    font-size: 18px;
+    background-color: #FFFFFF;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 70px;
+    color: #333333;
+    text-shadow: 0 0 0;
+}
+.parallax-pro .motto .square{
+       padding: 7px 14px;
+    height: auto;
+    width: auto;
+    line-height: inherit;
+    border-radius: 6px;
+    bottom: 22px;
+    right: -25px;
+    color: #FFFFFF;
+    background-color: #ff9500;
+    font-weight: 300;
+    background-color: #ff9500;
+}
+.social-share{
+    margin-right: 0px;
+    margin-top: 10px;
+}
+.footer h4{
+    margin: 0px 0 20px;
+}
+.space-30{
+    height: 30px;
+    display: block;
+}
+.credits{
+    display: block;
+    margin: 15px 0;
+    color: #ddd;
+    opacity: .8;
+}
+.credits a{
+    color: #FFFFFF;
+}
+.sharing-title{
+    margin: 10px;
+    line-height: 40px;
+}
+.social-line{
+    padding: 5px 0;
+}
+.section-gray{
+    padding: 10px 0;
+    background-color: #EEE;
+}
+.section-gray h5{
+    margin: 0;
+    line-height: 40px;
+}
+
+/*   EXTRA SHIT  */
+/* @cristina: fisier singular, folosit pentru efectul de blur la parallax in header */
+
+.blurred-container{
+  position:relative;
+  width:100%;
+  height:440px;
+  top:0;
+  left:0;
+}
+.blurred-container > .img-src{
+    position:fixed;
+    width:100%;
+    /*Modified from original to adapt to my sidebar layout better*/
+    height:440px;
+    background-repeat:no-repeat;
+    background-size:cover;
+    background-position: center center;
+}
+.blur{
+  opacity:0;
+}
+
+.logo-container{
+    margin-top: 10px;
+}
+.logo-container .logo{
+    overflow: hidden;
+    border-radius: 50%;
+    border: 1px solid #333333;
+    height: 50px;
+    width: 50px;
+    float: left;
+}
+.logo-container .logo img{
+    width: 100%;
+}
+.logo-container .brand{
+    font-size: 18px;
+    color: #FFFFFF;
+    float: left;
+    height: 50px;
+    line-height: 20px;
+    margin-left: 10px;
+    margin-top: 5px;
+    width: 60px;
+}
+.blurred-container .motto{
+    color: #FFFFFF;
+    font-size: 76px;
+    font-weight: 600;
+
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
+    text-transform: uppercase;
+    /*Modified from the original to suit my sidebar layout*/
+    top: 50px;
+    z-index: 3;
+
+    display: block;
+    margin: 0 auto;
+    position: relative;
+    width: 306px;
+    height: 0;
+}
+.blurred-container .motto .border{
+    float: left;
+    border: 3px solid #FFFFFF;
+    padding: 0px 30px;
+    text-align: center;
+}
+.blurred-container .motto .no-right-border{
+    border-right: none;
+}
+
+@media (max-width: 768px){
+    .blurred-container .motto{
+        font-size: 60px;
+        width: 268px;
+        /*Modified from original to suit my sidebar layout*/
+        top: 75px;
+    }
+}
+.main{
+    background-color: #FFFFFF;
+    position: relative;
+}
+
+#buttons .btn, #tooltips .btn{
+    margin-bottom: 15px;
+}
+.img-dog{
+    display: inline-block;
+    margin-bottom: 25px;
+}
--- a/css/gsdk-main.css
+++ b/css/gsdk-main.css
--- a/css/gskd-demo.css
+++ b/css/gskd-demo.css
@ -0,0 +1,400 @@
+
+.tim-container{
+    background: #ffffff;
+
+}
+.tim-row{
+    margin-bottom: 20px;
+}
+.tim-title{
+    margin-top: 30px;
+    margin-bottom: 15px;
+}
+.tim-typo{
+    padding-left: 25%;
+    margin-bottom: 40px;
+    position: relative;   
+}
+.tim-typo .tim-note{
+    bottom: 10px;
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+    left: 0;
+    margin-left: 20px;
+    position: absolute;
+    width: 260px;
+}
+.tim-row{
+    margin-top: 50px;
+}
+.tim-row h3{
+    margin-top: 0;
+}
+.switch{
+    margin-right: 20px;
+}
+#navbar-full .navbar{
+    border-radius: 0 !important;
+    margin-bottom: 0;
+}
+.navigation-example{
+    margin-top: 0px;
+}
+.space{
+    height: 130px;
+    display: block;
+}
+.navigation-example .img-src{
+    background-attachment: scroll; 
+}
+.main{
+    background-color: #FFFFFF;
+}
+.navigation-example{
+    height: 660px;
+    background-image: url('../img/bg.jpg');
+    background-position: center center;
+    background-size: cover;
+    position: relative;
+}
+#notifications{
+    background-color: #FFFFFF;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+.tim-note{
+    text-transform: capitalize;
+}
+
+.card{
+    background-color: #FFFFFF;
+    padding: 10px 0 20px;
+    width: 100%;
+}
+.card h3{
+    margin-bottom: 20px;
+}
+.card button{
+    margin-top: 30px;
+}
+.subscribe-form{
+    padding-top: 20px;
+}
+.subscribe-form .form-control{
+    
+}
+
+.space-100{
+    height: 100px;
+    display: block;
+    width: 100%;
+}
+
+.be-social{
+    padding-bottom: 20px;
+/*     border-bottom: 1px solid #aaa; */
+    margin: 0 auto 40px;
+}
+.txt-white{
+    color: #FFFFFF;
+}
+.txt-gray{
+    color: #ddd !important;
+}
+.footer{
+    background-color: #DDDDDD;
+    background-image: url('../img/cover_4_blur.jpg');
+    background-attachment: fixed;
+    position: relative;
+}
+.heart{
+    color: #FF3B30;
+}
+.footer .overlayer{
+    background-color: rgba(27, 27, 27, 0.7);
+    position: relative;
+}
+.footer .credits {
+    margin-top: 25px;
+    padding: 20px 0 15px;
+    text-align: center;
+    color: #EEE;
+}
+.footer .credits a{
+    color: #FFFFFF;
+}
+.social-share{
+    float: left;
+    margin-right: 8px;
+}
+.social-share a{
+    color: #FFFFFF;
+}
+#subscribe_email{
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+}
+.pick-class-label{
+    border-radius: 8px;
+    color: #ffffff;
+    cursor: pointer;
+    display: inline;
+    font-size: 75%;
+    font-weight: bold;
+    line-height: 1;
+    margin-right: 10px;
+    padding: 15px 23px;
+    text-align: center;
+    vertical-align: baseline;
+    white-space: nowrap;
+}
+
+.parallax-pro{
+  width:100%;
+  display: block;
+  position: relative;
+  background-color: #000;
+}
+.parallax-pro > .img-src{
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    
+}
+.parallax-pro:after{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.3);
+    display: block;
+    content: "";
+    z-index: 0;
+}
+.parallax-pro .container{
+    padding-top: 20px;
+    z-index: 1;
+    position: relative;
+}
+.parallax-pro .hello a{
+    color: #fff;
+    text-decoration: none;
+}
+.parallax-pro .hello{
+    font-size: 48px;
+    font-weight: 300;
+    position: relative;
+/*     width: 430px; */
+    margin: 30px auto 50px;
+}
+.parallax-pro .label{
+    font-size: 18px;
+    position: absolute;
+    text-transform: uppercase;
+    background-color: #FF9500;
+    color: #FFFFFF;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    padding: 0;
+    line-height: 30px;
+    text-align: center;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+.parallax-pro small{
+    padding-top: 15px;
+    font-size: 20px;
+    display: block;
+    color: #fff;
+}
+.parallax-pro ul{
+     width: 280px;
+    margin: 0 auto;
+}
+.parallax-pro li{
+    padding: 9px 0;
+    border-bottom: 1px solid #777;
+}
+.parallax-pro .actions{
+    margin-top: 40px;
+}
+.parallax-pro .actions{
+    margin-left: 10px;
+}
+.parallax-pro .motto{
+    color: #FFFFFF;
+    font-size: 64px;
+    font-weight: 600;
+    position: relative;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
+    text-transform: uppercase;
+    z-index: 3;
+    margin: 0 auto;
+    top: 22%;
+    width: 285px;
+}
+.parallax-pro .motto .pro{
+    position: absolute;
+    font-size: 18px;
+    background-color: #FFFFFF;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 70px;
+    color: #333333;
+    text-shadow: 0 0 0;
+}
+.parallax-pro .motto .square{
+       padding: 7px 14px;
+    height: auto;
+    width: auto;
+    line-height: inherit;
+    border-radius: 6px;
+    bottom: 22px;
+    right: -25px;
+    color: #FFFFFF;
+    background-color: #ff9500;
+    font-weight: 300;
+    background-color: #ff9500;
+}
+.social-share{
+    margin-right: 0px;
+    margin-top: 10px;
+}
+.footer h4{
+    margin: 0px 0 20px;
+}
+.space-30{
+    height: 30px;
+    display: block;
+}
+.credits{
+    display: block;
+    margin: 15px 0;
+    color: #ddd;
+    opacity: .8;
+}
+.credits a{
+    color: #FFFFFF;
+}
+.sharing-title{
+    margin: 10px;
+    line-height: 40px;
+}
+.social-line{
+    padding: 5px 0;
+}
+.section-gray{
+    padding: 10px 0;
+    background-color: #EEE;
+}
+.section-gray h5{
+    margin: 0;
+    line-height: 40px;
+}
+
+/*   EXTRA SHIT  */
+/* @cristina: fisier singular, folosit pentru efectul de blur la parallax in header */
+
+.blurred-container{
+  position:relative;
+  width:100%;
+  height:540px;
+  top:0;
+  left:0;
+}
+.blurred-container > .img-src{
+    position:fixed;
+    width:100%;
+    height:540px;
+    background-repeat:no-repeat;
+    background-size:cover;
+    background-position: center center;
+}
+.blur{
+  opacity:0;
+}
+
+.logo-container{
+    margin-top: 10px;
+}
+.logo-container .logo{
+    overflow: hidden;
+    border-radius: 50%;
+    border: 1px solid #333333;
+    height: 50px;
+    width: 50px;
+    float: left;
+}
+.logo-container .logo img{
+    width: 100%;
+}
+.logo-container .brand{
+    font-size: 18px;
+    color: #FFFFFF;
+    float: left;
+    height: 50px;
+    line-height: 20px;
+    margin-left: 10px;
+    margin-top: 5px;
+    width: 60px;
+}
+.blurred-container .motto{
+    color: #FFFFFF;
+    font-size: 76px;
+    font-weight: 600;
+
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
+    text-transform: uppercase;
+    top: 100px;
+    z-index: 3;
+
+    display: block;
+    margin: 0 auto;
+    position: relative;
+    width: 306px;
+    height: 0;
+}
+.blurred-container .motto .border{
+    float: left;
+    border: 3px solid #FFFFFF;
+    padding: 0px 30px;
+    text-align: center;
+}
+.blurred-container .motto .no-right-border{
+    border-right: none;
+}
+
+@media (max-width: 768px){
+    .blurred-container .motto{
+        font-size: 60px;
+        width: 268px;
+        top: 130px;
+    }
+}
+.main{
+    background-color: #FFFFFF;
+    position: relative;
+}
+
+#buttons .btn, #tooltips .btn{
+    margin-bottom: 15px;
+}
+.img-dog{
+    display: inline-block;
+    margin-bottom: 25px;
+}
--- a/css/millironx_customstyles.css
+++ b/css/millironx_customstyles.css
@ -0,0 +1,138 @@
+/* Used for making the vertical bootstrap menu work */
+@media (min-width: 768px) {
+    .sidbar-nav .navbar .navbar-collapse {
+        padding: 0;
+        max-height: none;
+    }
+
+    .sidebar-nav .navbar ul {
+        float: none;
+    }
+
+        .sidebar-nav .navbar ul:not {
+            display: block;
+        }
+
+    .sidebar-nav .navbar li {
+        float: none;
+        display: block;
+    }
+
+        .sidebar-nav .navbar li a {
+            padding-top: 12px;
+            padding-bottom: 12px;
+        }
+}
+
+/* Gives me greater control over fonts */
+.font-serif {
+    font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+.font-sans {
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.font-mono {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.font-small-caps {
+    font-variant-caps: small-caps;
+}
+
+.strikethrough {
+    text-decoration: line-through;
+}
+
+.sfTable {
+    margin: 0 auto;
+}
+
+.text-align-left {
+    text-align: left
+}
+
+.text-align-right {
+    text-align: right;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+.media-object {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+@media (min-width: 768px) {
+    .pull-left {
+        max-width: 25%;
+    }
+}
+
+/* This embed responsive stuff is included in future versions of Bootstrap, but I am using
+    an old version because of other toolkit compatibilities, so I will need to add it here
+*/
+.embed-responsive {
+    position: relative;
+    display: block;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+    .embed-responsive .embed-responsive-item,
+    .embed-responsive iframe,
+    .embed-responsive embed,
+    .embed-responsive object,
+    .embed-responsive video {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
+
+.embed-responsive-16by9 {
+    padding-bottom: 56.25%;
+}
+
+.embed-responsive-4by3 {
+    padding-bottom: 75%;
+}
+
+.math {
+    margin: 8px auto;
+    text-align: center;
+    vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+    .small-margins {
+        margin: inherit !important;
+    }
+}
+
+body {
+    word-wrap: break-word;
+}
+
+.web-logo {
+    margin: 0 5pt;
+}
+
+.motto > h1 {
+    background: #0000007d;
+}
+
+h1 {
+    word-wrap: normal;
+}
--- a/css/socialflair.css
+++ b/css/socialflair.css
@ -0,0 +1,112 @@
+.sfTable {
+  display : table;
+  border-collapse: collapse;
+  width : 207px;
+  height : 57px;
+}
+.sfTwitter {
+  background : url(../img/twitter-watermark.png) no-repeat right bottom;
+  border : 1px solid #CCCCCC;
+  background-color : #F9F9F9;
+}
+.sfFacebook {
+  background : url(../img/facebook-watermark.gif) no-repeat right bottom;
+  border : 1px solid #C4CDE0;
+  background-color : #EDEFF4; 
+}
+.sfGithub {
+  background : url(../img/github-watermark.gif) no-repeat right bottom;
+  border : 1px solid #D4D4D4;
+  background-color: #ececec;
+}
+.sfBitbucket {
+  background : url(../img/bitbucket-watermark.png) no-repeat right bottom;
+  border : 1px solid #D4D4D4;
+  background-color: #ececec;
+}
+.sfRow {
+  display : table-row;
+  width : 100%;
+}
+.sfCell1 {
+  display : table-cell;
+  width : 48px;
+  padding : 4px 0px 0px 5px;
+}
+.sfCell2 {
+  display : table-cell;
+  vertical-align : top;
+  text-align : left;
+  padding-left : 10px;
+  padding-top : 3px;
+  width : 146px;
+}
+.sfCell2 div.sfHandle {
+  font : 13px "Tahoma",Helvetica,Arial,sans-serif;
+  font-weight : bold;
+  margin-right : 5px;
+  width : 140px;
+  word-wrap: break-word;
+}
+.sfTwitter div.sfHandle {
+  color : #0084B4;
+}
+.sfFacebook div.sfHandle {
+  color : #627AAD;
+}
+.sfGithub div.sfHandle {
+  color : #333;
+}
+.sfCell2 div.sfFans {
+  font : 11px "Tahoma",Helvetica,Arial,sans-serif;
+  color : #999;
+  font-weight : bold;
+  padding-top : 5px;
+}
+.sfCell2 div.sfFans span { padding-right : 10px; }
+.sfCell2 div.sfFans span.hireable { color : #A229A9; }
+.sfTwitter .sfCell2 div.sfFans span.following { 
+  background : url(../img/twitter.ico) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfTwitter .sfCell2 div.sfFans span.followers { 
+  background : url(../img/twitterr.ico) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfGithub .sfCell2 div.sfFans span.public_repos { 
+  background : url(../img/repos.gif) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfGithub .sfCell2 div.sfFans span.followers { 
+  background : url(../img/githubr.ico) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfBitbucket .sfCell2 div.sfFans span.public_repos { 
+  background : url(../img/repos.gif) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfBitbucket .sfCell2 div.sfFans span.followers { 
+  background : url(../img/bitbucket.ico) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfFacebook .sfCell2 div.sfFans span.following { 
+  background : url(../img/friends.gif) no-repeat left center; 
+  padding-left : 20px;
+}
+.sfFacebook .sfCell2 div.sfFans span.following { 
+  background : url(../img/friends.gif) no-repeat left center; 
+  padding-left : 20px;
+}
+img.ico {
+  vertical-align : middle;
+  margin-right : 5px;
+}
+img.sfProfilePic {
+  -webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
+  border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
+  /* useful if you don't want a bg color from leaking outside the border: */
+  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
+}
+a.sfLink {
+  text-decoration: none;
+}
--- a/css/socialflair.min.css
+++ b/css/socialflair.min.css
@ -0,0 +1 @@
+.sfTable{display:table;border-collapse:collapse;width:207px;height:57px}.sfTwitter{background:url(../img/twitter-watermark.png) no-repeat right bottom;border:1px solid #ccc;background-color:#f9f9f9}.sfFacebook{background:url(../img/facebook-watermark.gif) no-repeat right bottom;border:1px solid #c4cde0;background-color:#edeff4}.sfGithub{background:url(../img/github-watermark.gif) no-repeat right bottom;border:1px solid #d4d4d4;background-color:#ececec}.sfBitbucket{background:url(../img/bitbucket-watermark.png) no-repeat right bottom;border:1px solid #d4d4d4;background-color:#ececec}.sfRow{display:table-row;width:100%}.sfCell1{display:table-cell;width:48px;padding:4px 0 0 5px}.sfCell2{display:table-cell;vertical-align:top;text-align:left;padding-left:10px;padding-top:3px;width:146px}.sfCell2 div.sfHandle{font:13px "Tahoma",Helvetica,Arial,sans-serif;font-weight:bold;margin-right:5px;width:140px;word-wrap:break-word}.sfTwitter div.sfHandle{color:#0084b4}.sfFacebook div.sfHandle{color:#627aad}.sfGithub div.sfHandle{color:#333}.sfCell2 div.sfFans{font:11px "Tahoma",Helvetica,Arial,sans-serif;color:#999;font-weight:bold;padding-top:5px}.sfCell2 div.sfFans span{padding-right:10px}.sfCell2 div.sfFans span.hireable{color:#a229a9}.sfTwitter .sfCell2 div.sfFans span.following{background:url(../img/twitter.ico) no-repeat left center;padding-left:20px}.sfTwitter .sfCell2 div.sfFans span.followers{background:url(../img/twitterr.ico) no-repeat left center;padding-left:20px}.sfGithub .sfCell2 div.sfFans span.public_repos{background:url(../img/repos.gif) no-repeat left center;padding-left:20px}.sfGithub .sfCell2 div.sfFans span.followers{background:url(../img/githubr.ico) no-repeat left center;padding-left:20px}.sfBitbucket .sfCell2 div.sfFans span.public_repos{background:url(../img/repos.gif) no-repeat left center;padding-left:20px}.sfBitbucket .sfCell2 div.sfFans span.followers{background:url(../img/bitbucket.ico) no-repeat left center;padding-left:20px}.sfFacebook .sfCell2 div.sfFans span.following{background:url(../img/friends.gif) no-repeat left center;padding-left:20px}.sfFacebook .sfCell2 div.sfFans span.following{background:url(../img/friends.gif) no-repeat left center;padding-left:20px}img.ico{vertical-align:middle;margin-right:5px}img.sfProfilePic{-webkit-border-radius:4px;border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}a.sfLink{text-decoration:none}
--- a/favicon.ico
+++ b/favicon.ico
--- a/img/404.jpg
+++ b/img/404.jpg
--- a/img/404_blur.jpg
+++ b/img/404_blur.jpg
--- a/img/404_tmp29837
+++ b/img/404_tmp29837
--- a/img/Ai-calf.jpg
+++ b/img/Ai-calf.jpg
--- a/img/Ai-calf_blur.jpg
+++ b/img/Ai-calf_blur.jpg
--- a/img/MillironX-title.svg
+++ b/img/MillironX-title.svg
@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="Main" inkscape:version="0.92.1 r15371"
+	 sodipodi:docname="Milliron X.svg"
+	 xmlns:cc="http://creativecommons.org/ns#"
+	 xmlns:dc="http://purl.org/dc/elements/1.1/"
+	 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+	 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+	 xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg"
+	 xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 86.1 86.1"
+	 style="enable-background:new 0 0 86.1 86.1;"
+	 width="29.935179mm"
+     height="8.7677584mm"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<g id="Brand" transform="translate(-201.95728,-469.32877)" inkscape:groupmode="layer" inkscape:label="Layer 1">
+	
+		<path id="Milliron" inkscape:connector-curvature="0" inkscape:original-d="m 206.56251,485.17471 h 20 c 5,0 13.85903,-4.10006 15,-10 3.82765,-19.79272 9.87303,10 15,10 h 20" inkscape:path-effect="#path-effect4154" sodipodi:nodetypes="csssc" class="st0" d="
+		M205.6,512.6h16c1.3,0,2.6-0.1,3.8-0.5c1.2-0.5,2.2-1.3,3-2.3s1.3-2.2,2.1-3.2c0.4-0.5,0.8-1,1.4-1.3c0.5-0.4,1.2-0.6,1.8-0.6
+		s1.3,0.2,1.8,0.6s1,0.8,1.4,1.3c0.8,1,1.3,2.2,2.1,3.2s1.8,1.9,3,2.3c1.2,0.5,2.5,0.5,3.8,0.5h16"/>
+	<path id="X_Stroke_1" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M268.4,522.4l16-20"/>
+	<path id="X_Stroke_2" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M268.4,502.4l16,20"/>
+</g>
+</svg>
--- a/img/bitbucket-watermark.png
+++ b/img/bitbucket-watermark.png
--- a/img/bitbucket.ico
+++ b/img/bitbucket.ico
--- a/img/bitbucket.png
+++ b/img/bitbucket.png
--- a/img/camera.jpg
+++ b/img/camera.jpg
--- a/img/camera_blur.jpg
+++ b/img/camera_blur.jpg
--- a/img/cannulated-cows.jpg
+++ b/img/cannulated-cows.jpg
--- a/img/cannulated-cows_blur.jpg
+++ b/img/cannulated-cows_blur.jpg
--- a/img/eclipse.jpg
+++ b/img/eclipse.jpg
--- a/img/eclipse_blur.jpg
+++ b/img/eclipse_blur.jpg
--- a/img/facebook-watermark.gif
+++ b/img/facebook-watermark.gif
--- a/img/friends.gif
+++ b/img/friends.gif
--- a/img/github-watermark.gif
+++ b/img/github-watermark.gif
--- a/img/githubr.ico
+++ b/img/githubr.ico
--- a/img/milk-is-not-milk-button.jpg
+++ b/img/milk-is-not-milk-button.jpg
--- a/img/milliron-x-thumbnail.png
+++ b/img/milliron-x-thumbnail.png
--- a/img/record-book-thumbnail.png
+++ b/img/record-book-thumbnail.png
--- a/img/recordbooks-thumbnail.png
+++ b/img/recordbooks-thumbnail.png
--- a/img/repos.gif
+++ b/img/repos.gif
--- a/img/saddles.jpg
+++ b/img/saddles.jpg
--- a/img/saddles_blur.jpg
+++ b/img/saddles_blur.jpg
--- a/img/twitter-watermark.png
+++ b/img/twitter-watermark.png
--- a/img/twitter.ico
+++ b/img/twitter.ico
--- a/img/twitterr.ico
+++ b/img/twitterr.ico
--- a/img/vedauwoo-goats-thumbnail.jpg
+++ b/img/vedauwoo-goats-thumbnail.jpg
--- a/img/vedauwoo-goats-thumbnail.png
+++ b/img/vedauwoo-goats-thumbnail.png
--- a/index.html
+++ b/index.html
@ -1,9 +1,22 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>millironx.github.io</title>
-  </head>
-  <body>
-    <h1>Welcome to millironx.github.io</h1>
-  </body>
-</html>
+---
+layout: default
+title: Home
+imageUrl: ../img/saddles.jpg
+blurImageUrl: ../img/saddles_blur.jpg
+motto: <small>My name is Thomas Christensen</small><br />I am Milliron X
+---
+
+<h2>Milliron X - The homepage of Thomas Christensen</h2>
+<p>
+    I'm one of those crazy, Wyoming dairy cow people. (Just in case you couldn't tell by the background image.) Some of my other favorite pastimes are videography, ranching/livestock, the history of the American West.
+    I love anything to do with cattle or technology, but especially anything to do with both of them.
+</p>
+<div class="panel panel-warning">
+    <div class="panel-heading">
+	    <h5>Warning: Construction Zone!</h3>
+	</div>
+	<div class="panel-body">
+	    <p>This is sort of my landing page, and also my internet workshop. Please forgive any mistakes you find here: I use this site to test things that I will put other places, and it's not always the cleanest. </p>
+	</div>
+
+</div>
--- a/index.md
+++ b/index.md
@ -1,6 +0,0 @@
---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: home
---
--- a/js/MillironX_CustomScripts.js
+++ b/js/MillironX_CustomScripts.js
@ -0,0 +1,3 @@
+$(function () { $('#githubFlair').socialFlair('github', 'millironx', {}); });
+$(".img-src").width($("#main-content").width());
+$(window).resize(function () { $(".img-src").width($("#main-content").width()); })
--- a/js/bootstrap.js
+++ b/js/bootstrap.js
--- a/js/bootstrap.min.js
+++ b/js/bootstrap.min.js
--- a/js/gsdk-bootstrapswitch.js
+++ b/js/gsdk-bootstrapswitch.js
@ -0,0 +1,249 @@
+/* ============================================================
+ * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
+ * http://www.larentis.eu/switch/
+ * ============================================================
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * ============================================================ */
+
+!function ($) {
+  "use strict";
+
+  $.fn['bootstrapSwitch'] = function (method) {
+    var methods = {
+      init: function () {
+        return this.each(function () {
+            var $element = $(this)
+              , $div
+              , $switchLeft
+              , $switchRight
+              , $label
+              , myClasses = ""
+              , classes = $element.attr('class')
+              , color
+              , moving
+              , onLabel = "ON"
+              , offLabel = "OFF"
+              , icon = false;
+
+            $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
+              if (classes.indexOf(el) >= 0)
+                myClasses = el;
+            });
+
+            $element.addClass('has-switch');
+
+            if ($element.data('on') !== undefined)
+              color = "switch-" + $element.data('on');
+
+            if ($element.data('on-label') !== undefined)
+              onLabel = $element.data('on-label');
+
+            if ($element.data('off-label') !== undefined)
+              offLabel = $element.data('off-label');
+
+            if ($element.data('icon') !== undefined)
+              icon = $element.data('icon');
+
+            $switchLeft = $('<span>')
+              .addClass("switch-left")
+              .addClass(myClasses)
+              .addClass(color)
+              .html(onLabel);
+
+            color = '';
+            if ($element.data('off') !== undefined)
+              color = "switch-" + $element.data('off');
+
+            $switchRight = $('<span>')
+              .addClass("switch-right")
+              .addClass(myClasses)
+              .addClass(color)
+              .html(offLabel);
+
+            $label = $('<label>')
+              .html("&nbsp;")
+              .addClass(myClasses)
+              .attr('for', $element.find('input').attr('id'));
+
+            if (icon) {
+              $label.html('<i class="' + icon + '"></i>');
+            }
+
+            $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
+
+            if ($element.data('animated') !== false)
+              $div.addClass('switch-animate').data('animated', true);
+
+            $div
+              .append($switchLeft)
+              .append($label)
+              .append($switchRight);
+
+            $element.find('>div').addClass(
+              $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
+            );
+
+            if ($element.find('input').is(':disabled'))
+              $(this).addClass('deactivate');
+
+            var changeStatus = function ($this) {
+              $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
+            };
+
+            $element.on('keydown', function (e) {
+              if (e.keyCode === 32) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                changeStatus($(e.target).find('span:first'));
+              }
+            });
+
+            $switchLeft.on('click', function (e) {
+              changeStatus($(this));
+            });
+
+            $switchRight.on('click', function (e) {
+              changeStatus($(this));
+            });
+
+            $element.find('input').on('change', function (e) {
+              var $this = $(this)
+                , $element = $this.parent()
+                , thisState = $this.is(':checked')
+                , state = $element.is('.switch-off');
+
+              e.preventDefault();
+
+              $element.css('left', '');
+
+              if (state === thisState) {
+
+                if (thisState)
+                  $element.removeClass('switch-off').addClass('switch-on');
+                else $element.removeClass('switch-on').addClass('switch-off');
+
+                if ($element.data('animated') !== false)
+                  $element.addClass("switch-animate");
+
+                $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
+              }
+            });
+
+            $element.find('label').on('mousedown touchstart', function (e) {
+              var $this = $(this);
+              moving = false;
+
+              e.preventDefault();
+              e.stopImmediatePropagation();
+
+              $this.closest('div').removeClass('switch-animate');
+
+              if ($this.closest('.has-switch').is('.deactivate'))
+                $this.unbind('click');
+              else {
+                $this.on('mousemove touchmove', function (e) {
+                  var $element = $(this).closest('.switch')
+                    , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
+                    , percent = (relativeX / $element.width()) * 100
+                    , left = 25
+                    , right = 75;
+
+                  moving = true;
+
+                  if (percent < left)
+                    percent = left;
+                  else if (percent > right)
+                    percent = right;
+
+                  $element.find('>div').css('left', (percent - right) + "%")
+                });
+
+                $this.on('click touchend', function (e) {
+                  var $this = $(this)
+                    , $target = $(e.target)
+                    , $myCheckBox = $target.siblings('input');
+
+                  e.stopImmediatePropagation();
+                  e.preventDefault();
+
+                  $this.unbind('mouseleave');
+
+                  if (moving)
+                    $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
+                  else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
+
+                  moving = false;
+                  $myCheckBox.trigger('change');
+                });
+
+                $this.on('mouseleave', function (e) {
+                  var $this = $(this)
+                    , $myCheckBox = $this.siblings('input');
+
+                  e.preventDefault();
+                  e.stopImmediatePropagation();
+
+                  $this.unbind('mouseleave');
+                  $this.trigger('mouseup');
+
+                  $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
+                });
+
+                $this.on('mouseup', function (e) {
+                  e.stopImmediatePropagation();
+                  e.preventDefault();
+
+                  $(this).unbind('mousemove');
+                });
+              }
+            });
+          }
+        );
+      },
+      toggleActivation: function () {
+        $(this).toggleClass('deactivate');
+      },
+      isActive: function () {
+        return !$(this).hasClass('deactivate');
+      },
+      setActive: function (active) {
+        if (active)
+          $(this).removeClass('deactivate');
+        else $(this).addClass('deactivate');
+      },
+      toggleState: function (skipOnChange) {
+        var $input = $(this).find('input:checkbox');
+        $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
+      },
+      setState: function (value, skipOnChange) {
+        $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
+      },
+      status: function () {
+        return $(this).find('input:checkbox').is(':checked');
+      },
+      destroy: function () {
+        var $div = $(this).find('div')
+          , $checkbox;
+
+        $div.find(':not(input:checkbox)').remove();
+
+        $checkbox = $div.children();
+        $checkbox.unwrap().unwrap();
+
+        $checkbox.unbind('change');
+
+        return $checkbox;
+      }
+    };
+
+    if (methods[method])
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    else if (typeof method === 'object' || !method)
+      return methods.init.apply(this, arguments);
+    else
+      $.error('Method ' + method + ' does not exist!');
+  };
+}(jQuery);
+
+
--- a/js/gsdk-checkbox.js
+++ b/js/gsdk-checkbox.js
@ -0,0 +1,109 @@
+!function ($) {
+
+ /* CHECKBOX PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Checkbox = function (element, options) {
+    this.init(element, options);
+  }
+
+  Checkbox.prototype = {
+    
+    constructor: Checkbox
+    
+  , init: function (element, options) {      
+    var $el = this.$element = $(element)
+    
+    this.options = $.extend({}, $.fn.checkbox.defaults, options);      
+    $el.before(this.options.template);    
+    this.setState(); 
+  }  
+   
+  , setState: function () {    
+      var $el = this.$element
+        , $parent = $el.closest('.checkbox');
+        
+        $el.prop('disabled') && $parent.addClass('disabled');   
+        $el.prop('checked') && $parent.addClass('checked');
+    }  
+    
+  , toggle: function () {    
+      var ch = 'checked'
+        , $el = this.$element
+        , $parent = $el.closest('.checkbox')
+        , checked = $el.prop(ch)
+        , e = $.Event('toggle')
+      
+      if ($el.prop('disabled') == false) {
+        $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.prop(ch, ch);
+        $el.trigger(e).trigger('change'); 
+      }
+    }  
+    
+  , setCheck: function (option) {    
+      var d = 'disabled'
+        , ch = 'checked'
+        , $el = this.$element
+        , $parent = $el.closest('.checkbox')
+        , checkAction = option == 'check' ? true : false
+        , e = $.Event(option)
+      
+      $parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch);
+      $el.trigger(e).trigger('change');       
+    }  
+      
+  }
+
+
+ /* CHECKBOX PLUGIN DEFINITION
+  * ======================== */
+
+  var old = $.fn.checkbox
+
+  $.fn.checkbox = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('checkbox')
+        , options = $.extend({}, $.fn.checkbox.defaults, $this.data(), typeof option == 'object' && option);
+      if (!data) $this.data('checkbox', (data = new Checkbox(this, options)));
+      if (option == 'toggle') data.toggle()
+      if (option == 'check' || option == 'uncheck') data.setCheck(option)
+      else if (option) data.setState(); 
+    });
+  }
+  
+  $.fn.checkbox.defaults = {
+    template: '<span class="icons"><span class="first-icon fa fa-square-o"></span><span class="second-icon fa fa-check-square-o"></span></span>'
+  }
+
+
+ /* CHECKBOX NO CONFLICT
+  * ================== */
+
+  $.fn.checkbox.noConflict = function () {
+    $.fn.checkbox = old;
+    return this;
+  }
+
+
+ /* CHECKBOX DATA-API
+  * =============== */
+
+  $(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) {
+    var $checkbox = $(e.target);
+    if (e.target.tagName != "A") {      
+      e && e.preventDefault() && e.stopPropagation();
+      if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox');
+      $checkbox.find(':checkbox').checkbox('toggle');
+    }
+  });
+  
+  $(function () {
+    $('[data-toggle="checkbox"]').each(function () {
+      var $checkbox = $(this);
+      $checkbox.checkbox();
+    });
+  });
+
+}(window.jQuery);
+
--- a/js/gsdk-custom.js
+++ b/js/gsdk-custom.js
@ -0,0 +1,9 @@
+var transparentDemo = true;
+var fixedTop = false;
+
+$(window).scroll(function(e) {
+    oVal = ($(window).scrollTop() / 170);
+    $(".blur").css("opacity", oVal);
+    
+});
+
--- a/js/gsdk-main.js
+++ b/js/gsdk-main.js
@ -0,0 +1,126 @@
+/*!
+    
+ =========================================================
+ * Get Shit Done Kit - v1.4.1.0
+ =========================================================
+ 
+ * Product Page: http://www.creative-tim.com/product/get-shit-done-kit
+ * Copyright 2017 Creative Tim (http://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md)
+ 
+ =========================================================
+ 
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ 
+ */
+
+searchVisible = 0;
+transparent = true;
+
+$(document).ready(function(){
+    /*      Activate the switches with icons      */
+    $('.switch')['bootstrapSwitch']();
+      
+    /*      Activate regular switches        */
+    $("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch();
+    
+    $('[data-toggle="search"]').click(function(){
+        if(searchVisible == 0){
+            searchVisible = 1;
+            $(this).parent().addClass('active');
+            $('.navbar-search-form').fadeIn(function(){
+                $('.navbar-search-form input').focus();
+            });
+        } else {
+            searchVisible = 0;
+            $(this).parent().removeClass('active');
+            $(this).blur();
+            $('.navbar-search-form').fadeOut(function(){
+                $('.navbar-search-form input').blur();
+            });
+        } 
+    });
+    
+    $('[data-toggle="gsdk-collapse"]').hover(
+    function(){
+            console.log('on hover');
+            var thisdiv = $(this).attr("data-target");
+
+            if(!$(this).hasClass('state-open')){
+                $(this).addClass('state-hover');                
+                $(thisdiv).css({
+                    'height':'30px'
+                });    
+            }
+            
+        },
+        function(){
+            var thisdiv = $(this).attr("data-target");
+            $(this).removeClass('state-hover');
+            
+            if(!$(this).hasClass('state-open')){
+                $(thisdiv).css({
+                    'height':'0px'
+                });     
+            }          
+        }
+    );
+    
+    $('[data-toggle="gsdk-collapse"]').click(
+    function(event){
+            event.preventDefault();
+                        
+            var thisdiv = $(this).attr("data-target");
+            var height = $(thisdiv).children('.panel-body').height();
+            
+            if($(this).hasClass('state-open')){
+                $(thisdiv).css({
+                    'height':'0px',
+                }); 
+                $(this).removeClass('state-open');    
+            } else {
+                $(thisdiv).css({
+                    'height':height,
+                }); 
+                $(this).addClass('state-open');
+            }
+        }
+    );
+});
+
+$(function () {
+    $('[data-toggle="gsdk-collapse"]').each(function () {
+        var thisdiv = $(this).attr("data-target");
+        $(thisdiv).addClass("gsdk-collapse");
+    });
+    
+});
+
+/* Remove the transparent navbar controls, because they get in the way of my cooler sidebar nav */
+/*
+$(document).scroll(function() {
+    if( $(this).scrollTop() > 260 ) {
+        if(transparent) {
+            transparent = false;
+            $('nav[role="navigation"]').removeClass('navbar-transparent');
+        }
+    } else {
+        if( !transparent ) {
+            transparent = true;
+            $('nav[role="navigation"]').addClass('navbar-transparent');
+        }
+    }
+});
+*/
+
+
+
+
+
+
+
+
+
+
+
+
--- a/js/gsdk-radio.js
+++ b/js/gsdk-radio.js
@ -0,0 +1,140 @@
+/* =============================================================
+ * flatui-radio v0.0.3
+ * ============================================================ */
+
+!function ($) {
+
+ /* RADIO PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Radio = function (element, options) {
+    this.init(element, options);
+  }
+
+  Radio.prototype = {
+  
+    constructor: Radio
+    
+  , init: function (element, options) {      
+      var $el = this.$element = $(element)
+      
+      this.options = $.extend({}, $.fn.radio.defaults, options);      
+      $el.before(this.options.template);    
+      this.setState();
+    }   
+    
+  , setState: function () {    
+      var $el = this.$element
+        , $parent = $el.closest('.radio');
+        
+        $el.prop('disabled') && $parent.addClass('disabled');   
+        $el.prop('checked') && $parent.addClass('checked');
+    } 
+    
+  , toggle: function () {    
+      var d = 'disabled'
+        , ch = 'checked'
+        , $el = this.$element
+        , checked = $el.prop(ch)
+        , $parent = $el.closest('.radio')      
+        , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
+        , $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]')
+        , e = $.Event('toggle')
+      
+        if ($el.prop(d) == false) {
+            $elemGroup.not($el).each(function () {
+              var $el = $(this)
+                , $parent = $(this).closest('.radio');
+                
+                if ($el.prop(d) == false) {
+                  $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change');
+                } 
+            });
+            
+            if (checked == false) $parent.addClass(ch) && $el.prop(ch, true);
+            $el.trigger(e);
+          
+            if (checked !== $el.prop(ch)) {
+                $el.trigger('change'); 
+            }
+        }               
+    } 
+     
+  , setCheck: function (option) {    
+      var ch = 'checked'
+        , $el = this.$element
+        , $parent = $el.closest('.radio')
+        , checkAction = option == 'check' ? true : false
+        , checked = $el.prop(ch)
+        , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
+        , $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]')
+        , e = $.Event(option)
+        
+      $elemGroup.not($el).each(function () {
+        var $el = $(this)
+          , $parent = $(this).closest('.radio');
+          
+          $parent.removeClass(ch) && $el.removeAttr(ch);
+      });
+            
+      $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch);
+      $el.trigger(e);  
+          
+      if (checked !== $el.prop(ch)) {
+        $el.trigger('change'); 
+      }
+    }  
+     
+  }
+
+
+ /* RADIO PLUGIN DEFINITION
+  * ======================== */
+
+  var old = $.fn.radio
+
+  $.fn.radio = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('radio')
+        , options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option);
+      if (!data) $this.data('radio', (data = new Radio(this, options)));
+      if (option == 'toggle') data.toggle()
+      if (option == 'check' || option == 'uncheck') data.setCheck(option)
+      else if (option) data.setState(); 
+    });
+  }
+  
+  $.fn.radio.defaults = {
+    template: '<span class="icons"><span class="first-icon fa fa-circle-o"></span><span class="second-icon fa fa-dot-circle-o"></span></span>'
+  }
+
+
+ /* RADIO NO CONFLICT
+  * ================== */
+
+  $.fn.radio.noConflict = function () {
+    $.fn.radio = old;
+    return this;
+  }
+
+
+ /* RADIO DATA-API
+  * =============== */
+
+  $(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
+    var $radio = $(e.target);
+    e && e.preventDefault() && e.stopPropagation();
+    if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio');
+    $radio.find(':radio').radio('toggle');
+  });
+  
+  $(function () {
+    $('[data-toggle="radio"]').each(function () {
+      var $radio = $(this);
+      $radio.radio();
+    });
+  });
+
+}(window.jQuery);
+
--- a/js/jquery-3.1.1.min.js
+++ b/js/jquery-3.1.1.min.js
--- a/js/jquery-3.2.1.intellisense.js
+++ b/js/jquery-3.2.1.intellisense.js
--- a/js/jquery-3.2.1.js
+++ b/js/jquery-3.2.1.js
--- a/js/jquery-ui-1.12.1.js
+++ b/js/jquery-ui-1.12.1.js
--- a/js/jquery.socialflair.js
+++ b/js/jquery.socialflair.js
@ -0,0 +1,189 @@
+/*!
+ * jQuery socialFlair - Stackoverflow like User Flairs to showcase your
+ * Social Profiles
+ * ---------------------------------------------------------------------
+ *
+ * This is a simple jQuery plugin which lets you embed social flairs
+ * into your personal website or blog.
+ *
+ * Licensed under Mozilla Public License
+ *
+ * @version        1.0.0
+ * @since          2012.05.01
+ * @author         Amit Gharat a.k.a. codef0rmer
+ * @blog           http://goo.gl/frl5a
+ * @twitter        twitter.com/codef0rmer
+ *
+ * Usage:
+ * ---------------------------------------------------------------------
+ * Twitter Flair:
+ *    $(ele).socialFlair('twitter', 'twitterUsername', {});
+ *
+ * Github Flair:
+ *    $(ele).socialFlair('github', 'githubUsername', {});
+ *
+ * Facebook Flair:
+ *    Create an App and get the details here: https://developers.facebook.com/apps
+ *    $(ele).socialFlair('facebook', 'facebookUsername', {clientId : clientId, clientSecret : clientSecrete});
+ *
+ */
+(function($) {
+  $.fn.extend({
+    socialFlair : function(service, handler, options) {
+      var defaults = {
+
+      };
+      options = $.extend({}, defaults, options);
+
+      return this.each(function() {
+        var $ele = $(this),
+            followers = 0,
+            following = 0,
+            access_token = null,
+            public_repos = 0;
+
+        // Twitter API
+        if (service === 'twitter' && handler !== undefined) {
+          $(document).queue("ajaxRequests", function() {
+            $.ajax({
+              url : 'http://api.twitter.com/1/followers/ids.json?screen_name=' + handler + '&cursor=-1',
+              method : 'get',
+              dataType : 'jsonp',
+              success : function (data) {
+                followers = data.ids.length;
+              }
+            });
+          });
+          $(document).queue("ajaxRequests", function() {
+            $.ajax({
+              url : 'https://api.twitter.com/1/friends/ids.json?cursor=-1&screen_name=' + handler,
+              method : 'get',
+              dataType : 'jsonp',
+              success : function (data) {
+                following = data.ids.length;
+                $ele.html(
+                  "<a class='sfLink' href='http://twitter.com/#!/" + handler +"'><div class='sfTable sfTwitter'><div class='sfRow'>" +
+                  " <div class='sfCell1'>" +
+                  "  <img class='sfProfilePic' src='https://api.twitter.com/1/users/profile_image?screen_name=" + handler + "&size=normal' width='48px' height='48px' />" +
+                  " </div>"+
+                  " <div class='sfCell2'>" +
+                  "  <div class='sfHandle'>" + truncateName(handler) + "</div>" +
+                  "  <div class='sfFans'>"+
+                  " <span class='following' alt='Following' title='Following'>" + following + "</span>" +
+                  " <span class='followers' alt='Followers' title='Followers'>" + followers + "</span>" +
+                  "  </div>" +
+                  "</div>" +
+                  "</div></div></a>"
+                );
+              }
+            });
+          });
+          $(document).dequeue("ajaxRequests");
+          $(document).dequeue("ajaxRequests");
+        } else if (service === 'github' && handler !== undefined) {
+          // Github API
+          $.ajax({
+            url : 'https://api.github.com/users/' + handler,
+            method : 'get',
+            dataType : 'jsonp',
+            success : function (data) {
+              followers = data.data.followers;
+              public_repos = data.data.public_repos;
+              $ele.html(
+                "<a class='sfLink' href='" + data.data.html_url +"'><div class='sfTable sfGithub'><div class='sfRow'>" +
+                " <div class='sfCell1'>" +
+                "  <img class='sfProfilePic' src='" + data.data.avatar_url + "' width='48px' height='48px' />" +
+                " </div>" +
+                " <div class='sfCell2'>" +
+                "  <div class='sfHandle'>" + truncateName(data.data.name || data.data.login) + "</div>" +
+                "  <div class='sfFans'>" +
+                "   <span class='public_repos' alt='Public Repositories' title='Public Repositories'>" + public_repos + "</span>" +
+                "   <span class='followers' alt='Followers' title='Followers'>" + followers + "</span>" +
+                 ( data.data.hireable === true ? "<span class='hireable'>Hire Me!</span>" : '' ) +
+                "  </div>" +
+                "</div>" +
+                "</div></div></a>"
+              );
+            }
+          });
+        } else if (service === 'bitbucket' && handler !== undefined) {
+          // BitBucket API
+          $.ajax({
+            url : 'https://api.bitbucket.org/1.0/users/' + handler + '/followers',
+            method : 'get',
+            dataType : 'jsonp',
+            success : function (data) {
+              var followers = data.count;
+              $.ajax({
+                url : 'https://api.bitbucket.org/1.0/users/' + handler,
+                method : 'get',
+                dataType : 'jsonp',
+                success : function (data) {
+                  var public_repos = data.repositories.length;
+                  $ele.html(
+                    "<a class='sfLink' href='https://bitbucket.org/" + data.user.username +"'><div class='sfTable sfBitbucket'><div class='sfRow'>" +
+                    " <div class='sfCell1'>" +
+                    "  <img class='sfProfilePic' src='" + data.user.avatar + "' width='48px' height='48px' />" +
+                    " </div>" +
+                    " <div class='sfCell2'>" +
+                    "  <div class='sfHandle'>" + truncateName(data.user.username) + "</div>" +
+                    "  <div class='sfFans'>" +
+                    "   <span class='public_repos' alt='Public Repositories' title='Public Repositories'>" + public_repos + "</span>" +
+                    "   <span class='followers' alt='Followers' title='Followers'>" + followers + "</span>" +
+                    "  </div>" +
+                    "</div>" +
+                    "</div></div></a>"
+                  );
+                }
+              });
+            }
+          });
+        } else if (service === 'facebook' && handler !== undefined) {
+          // Facebook API
+          $.ajax({
+            url : 'https://graph.facebook.com/oauth/access_token?client_id=' + options.clientId + '&client_secret=' + options.clientSecret + '&grant_type=client_credentials',
+            method : 'get',
+            dataType : 'text',
+            success : function (data) {
+              access_token = data;
+
+              $.ajax({
+                url : 'https://api.facebook.com/method/friends.get?uid=' + handler + '&' + access_token + '&format=json',
+                method : 'get',
+                dataType : 'json',
+                success : function (data) {
+                  following = data.length;
+
+                  $.ajax({
+                    url : 'https://graph.facebook.com/' + handler,
+                    method : 'get',
+                    dataType : 'json',
+                    success : function (data) {
+                      $ele.html(
+                        "<a class='sfLink' href='" + data.link + "'><div class='sfTable sfFacebook'><div class='sfRow'>" +
+                        " <div class='sfCell1'>" +
+                        "  <img class='sfProfilePic' src='http://graph.facebook.com/" + handler + "/picture' width='48px' height='48px' />" +
+                        " </div>" +
+                        " <div class='sfCell2'>" +
+                        "  <div class='sfHandle'>" + truncateName(data.name) + "</div>" +
+                        "  <div class='sfFans'>" +
+                        "   <span class='following' alt='Friends' title='Friends'>" + following + "</span>" +
+                        "  </div>" +
+                        "</div>" +
+                        "</div></div></a>"
+                      );
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+})(jQuery);
+
+function truncateName(handler) {
+  return ( handler.length > 28 ? handler.substring(0, 28) + '...' : handler );
+}
--- a/shapes/Adobe-Dreamweaver.svg
+++ b/shapes/Adobe-Dreamweaver.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
+  <g>
+    <rect height="48" width="48" fill="#0C1800" />
+    <path id="path1" transform="rotate(0,24,24) translate(11,16.4559361505318) scale(0.812500242143942,0.812500242143942)  " fill="#73FB00" d="M22.384391,4.44497C22.410392,4.4439706 22.43743,4.4439706 22.465446,4.4459695 22.915399,4.4799694 25.115415,4.44497 25.115415,4.44497 25.115415,4.44497 25.374448,4.5069698 25.442441,5.0669674 25.510434,5.6269611 27.122437,14.570905 27.122437,14.570905L28.720462,4.9429678C28.720462,4.9429678 28.747441,4.4369706 29.335454,4.44497 29.921454,4.4519695 31.79243,4.44497 31.79243,4.44497 31.79243,4.44497 32.093453,4.4939693 31.970469,4.9299673 31.847423,5.3669647 28.85645,17.958883 28.85645,17.958883 28.85645,17.958883 28.733462,18.395876 28.337405,18.395876L25.524411,18.395876C25.524411,18.395876 25.182431,18.408876 25.128415,18.012874 25.074399,17.616882 23.448419,8.1669482 23.448419,8.1669482L21.345448,18.067875C21.345448,18.067875,21.250417,18.395876,20.922414,18.395876L18.150435,18.395876C18.150435,18.395876,17.808394,18.367876,17.685407,17.903883L14.817421,4.8759664C14.817421,4.8759664 14.61338,4.4659694 15.268411,4.452969 15.924417,4.4389695 18.300399,4.452969 18.300399,4.452969 18.300399,4.452969 18.532393,4.452969 18.627425,4.9439672 18.723433,5.4359645 20.170398,14.680904 20.170398,14.680904L21.932425,4.8069667C21.932425,4.8069667,22.004447,4.4609684,22.384391,4.44497z M4.9303784,2.8039817C4.2013731,2.8069803,3.6883716,2.9229807,3.6883719,2.9229807L3.6883719,15.636892C8.0854139,16.128893 9.212369,13.328909 9.212369,13.328909 9.212369,13.328909 10.762421,9.3139361 9.3963899,5.6269611 8.5003929,3.2069792 6.3224096,2.7989811 4.9303784,2.8039817z M5.2483721,0C5.7074184,4.655044E-08 6.0473847,0.0069999691 6.1603613,0.027999871 6.6114116,0.10999991 12.326388,0.075000304 13.494421,6.7939528 14.661415,13.512906 11.219392,16.17589 11.219392,16.17589 11.219392,16.17589 8.8233909,18.354875 5.3543901,18.517877 1.8853896,18.681877 0.80640803,18.408876 0.67036043,18.381876 0.5343738,18.354875 -0.015615012,18.217876 0.00037622751,17.548881 0.014353307,16.878887 0.0013527939,0.53299743 0.0013527899,0.53299749 0.0013527939,0.53299743 -0.067617066,0.12300032 0.77936922,0.096000175 1.4143804,0.075999747 3.8703787,0.00099949047 5.2483721,0z" />
+  </g>
+</svg>
+
--- a/shapes/HTML5-Logo.svg
+++ b/shapes/HTML5-Logo.svg
@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo</title>
+  
+  <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512    "/>
+  <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894    "/>
+  <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
+  <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
+  <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
+  <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
+  <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
+  <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
+  <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
+  <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
+</svg>
--- a/shapes/Reading-panel-WF.svg
+++ b/shapes/Reading-panel-WF.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
+  <g>
+    <rect height="32" width="32" fill="#5C4185" />
+    <path id="path1" transform="rotate(0,16,16) translate(4,4) scale(0.75,0.75)  " fill="#FFFFFF" d="M13.99999,18.000015L27.99999,18.000015 27.99999,20.000015 13.99999,20.000015z M13.99999,14.000014L27.99999,14.000014 27.99999,16.000015 13.99999,16.000015z M13.99999,10.000014L27.99999,10.000014 27.99999,12.000014 13.99999,12.000014z M11.99999,7.0000148L11.99999,30 30,30 30,7.0000148z M2,7.0000148L2,30 9.9999895,30 9.9999895,7.0000148z M2,2L2,5.0000148 30,5.0000148 30,2z M1,0L31,0C31.552002,0,32,0.44702148,32,1L32,31C32,31.552002,31.552002,32,31,32L1,32C0.44696045,32,0,31.552002,0,31L0,1C0,0.44702148,0.44696045,0,1,0z" />
+  </g>
+</svg>
+
--- a/shapes/Visual-Studio-2012.svg
+++ b/shapes/Visual-Studio-2012.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
+  <g>
+    <rect height="48" width="48" fill="#2D2D30" />
+    <path id="path1" transform="rotate(0,24,24) translate(11.1304051357749,11) scale(0.812500048428777,0.812500048428777)  " fill="#865FC5" d="M3.519011,11.413999L3.519011,20.373 7.572994,16.107001z M23.572985,9.5999993L15.892997,16.000003 23.572985,21.973002z M23.892993,0L31.679,3.5200008 31.679,28.907004 24.852984,31.999999 23.572985,31.999999 11.626001,19.947001 10.346003,19.947001 2.5599966,26.240004 0,23.999999 0,7.8929985 3.6260056,6.5059975 11.412988,12.160002z" />
+  </g>
+</svg>
+
--- a/shapes/bootswatch.png
+++ b/shapes/bootswatch.png
--- a/shapes/gsdk.png
+++ b/shapes/gsdk.png
--- a/shapes/mvc-hero.png
+++ b/shapes/mvc-hero.png
--- a/videos.html
+++ b/videos.html
@ -0,0 +1,39 @@
+---
+layout: default
+title: Videos
+imageUrl: ../img/camera.jpg
+blurImageUrl: ../img/camera_blur.jpg
+motto: Videography Portfolio
+---
+<h2>The culmination of all art forms is that of film.</h2>
+<p> A good film must have the plot of a good novel, the legendary characters of sculpture, the tantalizing rhythm of poetry, the stellar composition of photography, and the swelling melodies of music.</p>
+<p>But I digress. Most of my forays into the world of film are immortalized on <a href="https://vimeo.com/tchristensenii">my Vimeo account</a>, but I decided to share a few highlights here. Enjoy!</p>
+<div class="well" id="albany-county-fair-2016">
+    <h3>If You Come Out to the Fair</h3>
+    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/191326975?color=ffffff" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
+    <p>My extension agent asked me to make a promotional video for our county fair. This is the only film of mine that has drawn an emotional response. I think I retired after this.</p>
+</div>
+<hr />
+<div class="well" id="ag-olympics">
+    <h3>Farm Bureau Ag Olympics Reel</h3>
+    <div class="embed-responsive embed-responsive-16by9">
+        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jhLJp3OFsYM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    </div>
+    <p>The Albany County Farm Bureau Young Farmer's and Rancher's committee asked me to come and shoot a highlight reel of the Ag Olympics booth they ran at the Wyoming Football Wyoming Needs Agriculture Day. I gave away all rights to this one except for bragging rights.</p>
+</div>
+<hr />
+<div class="well" id="non-verum">
+    <h3>Non Verum: <small>The Mystery Killer</small></h3>
+    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/130557155?color=ffffff" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
+    <p>My first <span class="strikethrough">documentary</span> mockumentary. This film won 2<sup>nd</sup> place at the <a href="http://4h.missouri.edu/filmfest4h/">2016 National 4-H Film Festival</a>, and I've been told that it's more polished than the pieces done by the local TV stations. No one seems to think it's funny, though, so I'm not sure how successful it was. Please do me a favor and google <strong>every</strong> term you don't understand while watching it, and perhaps you'll fare better.</p>
+</div>
+<hr />
+<div class="well" id="in-the-hayfields">
+    <h3>In the Hayfields</h3>
+    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/144811104?color=ffffff" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
+    <p>I always get the comment that our implements are <em>old</em> whenever I show this video off. I just ignore the naysayers, though, and good thing, too, because a version of this video won a <a href="https://gopro.com/awards">GoPro Award</a>. Still waiting to see my footage on their channel, though.</p>
+</div>
+<hr />
+<p>Want to see more videos? Please petition Vimeo to loosen their overall storage limits. They used to be the coolest site for video uploading, but have priced me out now.</p>
+
+<script src="https://player.vimeo.com/api/player.js"></script>
--- a/websites.html
+++ b/websites.html
@ -0,0 +1,135 @@
+---
+layout: default
+title: My Websites
+imageUrl: ../img/eclipse.jpg
+blurImageUrl: ../img/eclipse_blur.jpg
+motto: Websites
+---
+
+<p>
+    I do occasionally build websites for myself and other people.
+    Here is a list of websites I have contributed code to directly, in a vain attempt to gain each of them some <a href="https://en.wikipedia.org/wiki/Search_engine_optimization">search engine cred</a>
+</p>
+<br />
+<div class="well row">
+    <div class="col-md-3">
+        <a href="https://vedauwoogoats.azurewebsites.net">
+            <img src="../img/vedauwoo-goats-thumbnail.png" alt="Thumbnail of Vedauwoo Goats homepage" class="img-responsive img-thumbnail" />
+        </a>
+    </div>
+    <div class="col-md-9">
+
+        <h4 class="small-margins">Vedauwoo Goats</h4>
+        <h5><a href="https://vedauwoogoats.azurewebsites.net">https://vedauwoogoats.azurewebsites.net</a></h5>
+        <p>
+            Lists all the goats owned by my friend over at Vedauwoo Goats. I built the site to act as a
+            <a href="https://en.wikipedia.org/wiki/Content_management_system">content management system</a>
+            , meaning that I'm responsible for the design, and someone else is responsible for the mistakes,
+            I mean, content. Sometimes, I will put my two cents on the blog under the moniker "The Web Guru,"
+            but only when important web stuff is going on.
+        </p>
+        <div class="row">
+            <div class="col-xs-4">
+                <a href="https://asp.net/mvc">
+                    <img src="../shapes/mvc-hero.png" class="float-left web-logo" height="32" alt="ASP.NET MVC Logo" />
+                    <span class="visible-md visible-lg">ASP.NET MVC 5.0</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://visualstudio.com">
+                    <img src="../shapes/Visual-Studio-2012.svg" class="float-left web-logo" height="32" alt="Visual Studio Logo" />
+                    <span class="visible-lg visible-md">Visual Studio 2019</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://bootswatch.com/3/readable/">
+                    <img src="../shapes/bootswatch.png" class="float-left web-logo" height="32" alt="Bootswatch Logo" />
+                    <span class="visible-md visible-lg">Bootswatch Readable 3.x</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<hr />
+
+<div class="row well">
+    <div class="col-md-3">
+        <a href="https://millironx.azurewebsites.net">
+            <img src="../img/milliron-x-thumbnail.png" alt="Thumbnail of Milliron X website" class="img-thumbnail img-responsive" />
+        </a>
+    </div>
+    <div class="col-md-9">
+        <h4 class="small-margins">Milliron X</h4>
+        <h5><a href="https://millironx.github.io">https://millironx.github.io</a></h5>
+        <p>
+            Lo and behold: I made my own website!
+        </p>
+        <div class="row">
+            <div class="col-xs-4">
+                <a href="https://asp.net/mvc">
+                    <img src="https://github.com/jekyll/jekyll/raw/master/docs/img/logo-rss.png" class="float-left web-logo" height="32" alt="Jekyll Logo" />
+                    <span class="visible-md visible-lg">Jekyll</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://visualstudio.com">
+                    <img src="../shapes/Visual-Studio-2012.svg" class="float-left web-logo" height="32" alt="Visual Studio Logo" />
+                    <span class="visible-lg visible-md">Visual Studio 2019</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://www.creative-tim.com/product/get-shit-done-kit">
+                    <img src="../shapes/gsdk.png" class="float-left img-thumbnail web-logo" height="32" alt="GSD Kit image" />
+                    <span class="visible-md visible-lg">GSD Kit</span>
+                </a>
+                <br />
+                <div style="text-align: center">
+                    <span class="glyphicon glyphicon-plus"></span>
+                </div>
+                <br />
+                <a href="https://web.archive.org/web/20140302232556/http://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3">
+                    <img src="../shapes/Reading-panel-WF.svg" class="float-left web-logo" height="32" alt="Sidebar rendering" />
+                    <span class="visible-md visible-lg">Vertical Menu for Bootstrap</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+<hr />
+
+<div class="row well">
+    <div class="col-md-3">
+        <img src="../img/recordbooks-thumbnail.png" alt="Thumbnail of Albany County 4-H Record Book website" class="img-thumbnail img-responsive" />
+    </div>
+    <div class="col-md-9">
+        <h4 class="small-margins">Albany County 4-H Record Books</h4>
+        <h5><a href="http://wyoming4h.org/albany4h/record-book/">http://wyoming4h.org/albany4h/record-book/</a></h5>
+        <p>
+            I constructed this site to hold the record book helps of the rebellious Albany County, Wyoming.
+            It looks "<a href="http://bigidea.wikia.com/wiki/Larry-Boy!_and_the_Fib_from_Outer_Space!#Plot">so early nineties</a>" because of my emerging web guru-ing skills, and the bueracratic lag
+            that it takes to update. <a href="https://getbootstrap.com">Bootstrap</a> update coming soon!
+        </p>
+        <div class="row">
+            <div class="col-xs-4">
+                <a href="https://www.w3.org/html/">
+                    <img src="../shapes/HTML5-Logo.svg" class="float-left web-logo" height="32" alt="HTML 5 Logo" />
+                    <span class="visible-md visible-lg">Plain ol' HTML5</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://adobe.com/dreamweaver">
+                    <img src="../shapes/Adobe-Dreamweaver.svg" class="float-left web-logo" height="32" alt="Dreamweaver Logo" />
+                    <span class="visible-lg visible-md">Adobe Dreamweaver CC</span>
+                </a>
+            </div>
+            <div class="col-xs-4">
+                <a href="https://bootswatch.com/3/lumen/">
+                    <img src="../shapes/bootswatch.png" class="float-left web-logo" height="32" alt="Bootswatch Logo" />
+                    <span class="visible-md visible-lg">Bootswatch Lumen 3.x</span>
+                </a>
+            </div>
+        </div>
+
+    </div>
+</div>
				`@ -0,0 +1 @@`
				.sfTable{display:table;border-collapse:collapse;width:207px;height:57px}.sfTwitter{background:url(../img/twitter-watermark.png) no-repeat right bottom;border:1px solid #ccc;background-color:#f9f9f9}.sfFacebook{background:url(../img/facebook-watermark.gif) no-repeat right bottom;border:1px solid #c4cde0;background-color:#edeff4}.sfGithub{background:url(../img/github-watermark.gif) no-repeat right bottom;border:1px solid #d4d4d4;background-color:#ececec}.sfBitbucket{background:url(../img/bitbucket-watermark.png) no-repeat right bottom;border:1px solid #d4d4d4;background-color:#ececec}.sfRow{display:table-row;width:100%}.sfCell1{display:table-cell;width:48px;padding:4px 0 0 5px}.sfCell2{display:table-cell;vertical-align:top;text-align:left;padding-left:10px;padding-top:3px;width:146px}.sfCell2 div.sfHandle{font:13px "Tahoma",Helvetica,Arial,sans-serif;font-weight:bold;margin-right:5px;width:140px;word-wrap:break-word}.sfTwitter div.sfHandle{color:#0084b4}.sfFacebook div.sfHandle{color:#627aad}.sfGithub div.sfHandle{color:#333}.sfCell2 div.sfFans{font:11px "Tahoma",Helvetica,Arial,sans-serif;color:#999;font-weight:bold;padding-top:5px}.sfCell2 div.sfFans span{padding-right:10px}.sfCell2 div.sfFans span.hireable{color:#a229a9}.sfTwitter .sfCell2 div.sfFans span.following{background:url(../img/twitter.ico) no-repeat left center;padding-left:20px}.sfTwitter .sfCell2 div.sfFans span.followers{background:url(../img/twitterr.ico) no-repeat left center;padding-left:20px}.sfGithub .sfCell2 div.sfFans span.public_repos{background:url(../img/repos.gif) no-repeat left center;padding-left:20px}.sfGithub .sfCell2 div.sfFans span.followers{background:url(../img/githubr.ico) no-repeat left center;padding-left:20px}.sfBitbucket .sfCell2 div.sfFans span.public_repos{background:url(../img/repos.gif) no-repeat left center;padding-left:20px}.sfBitbucket .sfCell2 div.sfFans span.followers{background:url(../img/bitbucket.ico) no-repeat left center;padding-left:20px}.sfFacebook .sfCell2 div.sfFans span.following{background:url(../img/friends.gif) no-repeat left center;padding-left:20px}.sfFacebook .sfCell2 div.sfFans span.following{background:url(../img/friends.gif) no-repeat left center;padding-left:20px}img.ico{vertical-align:middle;margin-right:5px}img.sfProfilePic{-webkit-border-radius:4px;border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}a.sfLink{text-decoration:none}