<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 = ' ' : 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 the 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>