A CodePen by Allie Jones. Live Source Code Background - Use the Github API to pull in the actual source code of a project and use it as a background.

index.html

<div>
  <h1>Makefolio</h1>
  <p>Dispassionate extraterrestrial observer gathered by gravity bits of moving fluff gathered by gravity. Dream of the mind's eye, cosmic ocean hydrogen atoms galaxies vastness is bearable only through love the carbon in our apple pies stirred by starlight Apollonius of Perga at the edge of forever bits of moving fluff.</p>
  
  <p>Billions upon billions intelligent beings, corpus callosum trillion Sea of Tranquility culture, tingling of the spine something incredible is waiting to be known, kindling the energy hidden in matter are creatures of the cosmos Sea of Tranquility, worldlets as a patch of light intelligent beings, decipherment, Hypatia, rogue? Hearts of the stars, of brilliant syntheses birth circumnavigated. The ash of stellar alchemy!</p>

  <p>Billions upon billions? Venture! Dispassionate extraterrestrial observer culture! Dispassionate extraterrestrial observer kindling the energy hidden in matter hundreds of thousands venture, Vangelis shores of the cosmic ocean star stuff harvesting star light!</p>
</div>

script.js

$.getJSON('https://api.github.com/repos/alliejones/makefolio/contents/lib/makefolio/project.rb?callback=?', function(response) {
  var code = Base64.decode(response.data.content);
  $('div').attr('data-code', code);
});

style.scss

@import "compass";
div {
  font-family: sans-serif;
  padding-top: 40px;
  position: relative;
  width: 80%;
  margin: 0 auto;
  
  h1, p {
    line-height: 1.2em;
    margin-left: auto; margin-right: auto;
    width: 60%;
  }
}

div:after {
  color: rgba(0,0,0,.1);
  content: attr(data-code);
  font-size: 20px;
  font-family: monospace;
  left: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: pre;
  @include rotate(-5deg);
}