I code. I teach. I travel. I help you hone your craft and bring your vision to life on the web.
michael @ michaelrog.com
713.581.4764
/ michaelrog
<head>   <meta charset="utf-8">  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">   <title>Michael Rog: code, for humans</title>  <link rel="canonical" href="https://michaelrog.com">  <link rel="amphtml" href="https://amp.michaelrog.com">   <meta name="description" content="I run a small web tech team based in Houston, Texas. Code is my happy place. I'd like to be a teacher when I grow up. When not programming, I cook with friends, travel the world, and work out with the circus.">    <script async="" src="https://www.google-analytics.com/analytics.js"></script><script type="application/ld+json">  {   "@context": "http://schema.org/",   "@type": "Person",   "name": "Michael Rog",   "jobTitle": "Developer",   "gender": "male",   "alumniOf": "Rice University",   "birthPlace": "Houston, Texas",   "nationality": "Texan",   "address": {    "@type": "PostalAddress",    "addressLocality": "Houston",    "addressRegion": "Texas",    "addressCountry": "United States of America"   },   "telephone": "+17135814764",   "url": "https://michaelrog.com",   "sameAs": [    "https://twitter.com/michaelrog",    "https://www.linkedin.com/in/michaelrog/",    "https://www.facebook.com/michaelrog",    "https://motivationalpenguin.com"   ],   "image": "https://michaelrog.com/michael-rog.jpg",  }  </script>   <script async="">    // Code background setup    makeCodeSpans = function makeCodeSpans(sourceId, targetId)   {     var sourceElement = document.getElementById(sourceId);    var targetElement = document.getElementById(targetId);     var text = sourceElement.innerHTML;     targetElement.innerHTML = null;     for (var i = 0, length = text.length; i < length; i++) {     var span = document.createElement('span');     var char = (text[i].match(/\s/g) ? span.innerHTML = '&nbsp;' : span.appendChild(document.createTextNode(text[i])));     targetElement.appendChild(span);    }    };   </script>   <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">  </head>  <body>   <div class="awesomeSauce superBio" id="bang">   I <a href="https://github.com/michaelrog">code</a>. I <a href="https://www.youtube.com/watch?v=ybQwpqD3VCU">teach</a>. I <a href="https://www.instagram.com/rogzor/">travel</a>. I help you hone your <a href="https://topshelfcraft.com">craft</a> and bring your vision to life on&nbsp;the&nbsp;web<span id="punc">.</span>  </div>   <div class="awesomeSauce contactInfo">   <a id="mailz" href="mailto:michael@michaelrog.com">michael @ michaelrog.com</a>   <br> 713.581.4764   <br> <img src="twitter.svg" width="15"> / <a href="https://twitter.com/michaelrog">michaelrog</a>  </div>   <style>    * {    cursor: default;   }    body {    background-color: #111;    color: #fff;    height: 100vh;    margin: 0;    min-height: 500px;    position: relative;    padding: 0;    width: 100vw;   }    ::selection {    background: #999;    color: #fff;   }   ::-moz-selection {    background: #999;    color: #fff;   }    .bgCode {    box-sizing: border-box;    cursor: default;    font-family: monospace;    margin: 30px;    overflow: hidden;    position: fixed;    -moz-user-select: none;    -ms-user-select: none;    -khtml-user-select: none;    -webkit-user-select: none;    -webkit-touch-callout: none;   }    .bgCode span {    display: block;    float: left;    font-size: 13px;    line-height: 1;    opacity: .2;    padding: 7px;    transition: all 2s linear;   }    .bgCode span:hover,   .bgCode span:hover + span,   .bgCode span:hover + span + span,   .bgCode span:hover + span + span + span + span + span + span + span {    background: #222;    color: #ee7;    opacity: 1;    transition: all 0.05s linear;   }    .awesomeSauce {    background: #111;    font-family: "Abril Fatface", serif;    letter-spacing: .4px;    max-width: 64%;    min-width: 100px;    padding: 10px;    position: absolute;    z-index: 42;   }    .superBio {    font-size: 28px;    left: 18px;    line-height: 1.3;    top: 118px;    max-width: 777px;   }    .contactInfo {    bottom: 90px;    font-size: 1rem;    line-height: 1.8;    right: 18px;   }    @media (max-width: 321px) {    .superBio {     left: 0;     max-width: 90%;     padding: 5%;     top: 80px;     width: 90%;    }    .contactInfo {     bottom: 20px;     max-width: 90%;     padding: 5%;     right: 0;     width: 90%;    }   }    @keyframes pulse {    0% { color: #fff; }    9% { color: #99f; }    25% { color: #fff; }   }    a, a:link, a:visited, a:active {    border-bottom: 1px dotted #99f;    color: #fff;    cursor: pointer;    text-decoration: none;    transition: all .5s ease;   }   a:hover {    animation: none;    border-bottom: 1px dotted #99f;    color: #99f;    transition: all .5s ease;   }    #ASTEROIDS-NAVIGATION, #ASTEROIDS-NAVIGATION *, #ASTEROIDS-POINTS {    font-family: "Abril Fatface", serif !important;    color: white !important;    background: #111 !important;    border: none !important;    box-shadow: none !important;   }   .ASTEROIDSYEAH {    font-family: "Abril Fatface", serif !important;   }   </style>   <div id="bgCodeContainer" class="bgCode"></div>   <script async="">    // --- No spam for me plz.    var addyBits = new Array("mail","","to","",":","","michael","","@","","michael","rog","",".","","com");   document.getElementById('mailz').href = addyBits.join('');    // --- The famous exclamation point    var punc = document.getElementById('punc');   var bang = document.getElementById('bang');   bang.addEventListener('mouseover', function(){    punc.innerHTML = "!";   });   bang.addEventListener('mouseout', function(){    punc.innerHTML = ".";   });    // --- Konami code    var konamiKeys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];   var konamiIndex = 0;    konamiHandler = function(e) {     if (e.keyCode === konamiKeys[konamiIndex++])    {     if (konamiIndex === konamiKeys.length)     {      window.removeEventListener("keydown", konamiHandler);      (function (k, o, n, a, m, i) {       m = o.createElement(n);       i = o.getElementsByTagName(n)[0];       m.async = 1;       m.src = a;       i.parentNode.insertBefore(m, i);      })(window, document, 'script', 'asteroids.js', 'konami');     }    }    else    {     konamiIndex = 0;    }    };    window.addEventListener("keydown", konamiHandler);    // --- Google Analytics    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');   ga('create', 'UA-8709696-1', 'auto');   ga('send', 'pageview');    // The Canterbury Tales    var Here_Bygynneth_The_Book_Of_The_Tales_Of_Caunterbury = "" +     "Whan that aprill with his shoures soote" +     "The droghte of march hath perced to the roote," +     "And bathed every veyne in swich licour" +     "Of which vertu engendred is the flour;" +     "Whan zephirus eek with his sweete breeth" +     "Inspired hath in every holt and heeth" +     "Tendre croppes, and the yonge sonne" +     "Hath in the ram his halve cours yronne," +     "And smale foweles maken melodye," +     "That slepen al the nyght with open ye" +     "(so priketh hem nature in hir corages);" +     "Thanne longen folk to goon on pilgrimages," +     "And palmeres for to seken straunge strondes," +     "To ferne halwes, kowthe in sondry londes;" +     "And specially from every shires ende" +     "Of engelond to caunterbury they wende," +     "The hooly blisful martir for to seke," +     "That hem hath holpen whan that they were seeke."   </script>   <script async="">    // Code background activation    makeCodeSpans('bgCodeSource', 'bgCodeContainer');   </script></body>