JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://andybaacke.com/new/js/respond.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-sanitize.min.js"></script>
<body ng-app="baacke" ng-controller="PageController as page" ng-style="page.background">
    <header class="clear">
        <div id="header-area">
            <a id="logo" href="index">
                <img src="http://andybaacke.com/new/images/logo.png" alt="" title="" />
            </a>
            <nav>
                <a href="" ng-repeat="link in page.links" ng-click="page.setPage($index)">{{link.name}}</a>
            </nav>
        </div>
    </header>
    <section class="clear">
        <div class="content-area" ng-bind-html="page.currentPage.html"></div>
    </section>
    <footer class="clear">
        <div id="icons" ng-controller="IconController as icons">
            <img ng-repeat="icon in icons.icons" ng-src="{{icon.src}}" alt="{{icon.alt}}" title="{{icon.title}}" />
        </div>
        <div id="copyright">
            Copyright &copy; 2014 <a href="">Andrew Baacke</a>.
        </div>
    </footer>
</body>



<!-- http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io -->
<!-- https://developers.google.com/webmasters/ajax-crawling/docs/getting-started -->
<!-- https://prerender.io/ -->

CSS

html {height: 100%;
   background-color: #e3bd95;
   background-image: url(http://andybaacke.com/new/images/bgs/loading.gif);
   background-repeat: no-repeat;
   background-position: center center;
   overflow-y: hidden;
   font-family: 'jurabook', sans-serif;}

body {height: 100%;
   background-repeat: no-repeat;
   background-size: cover !important;
   background-position: center bottom;
   background-attachment: fixed !important;
   overflow-y: scroll;
   margin: 0;
   transition: opacity 0.3s linear;
   opacity: 0}

header {width: 100%;
   box-sizing: border-box;
   padding: 5px 10px 0}

   #header-area {margin: 0 auto;
      max-width: 1200px}

      #header-area #logo {float: left;
         margin-bottom: 3px}

         #logo>img {height: 50px;
            width: auto;
            padding: 5px}

      #header-area>nav {float: right;
         margin-top: 10px;
         cursor: default}

         #header-area>nav a {color: #000;
            text-decoration: none;
            font-weight: normal;
            font-style: normal;
            font-family: 'juralight', sans-serif;
            margin: 0 5px;
            padding: 5px 10px;
            font-size: 24px;
            display: inline-block}

section,
footer {margin: 0 auto;
   max-width: 1200px;
   box-sizing: border-box}

section {}

   section>.content-area {margin: 20px 20px 0;
      padding: 5px 20px;
      border-radius: 20px;
      background-image: url(http://andybaacke.com/new/images/nav-bg.png);
      background-repeat: repeat;
      box-shadow: 0 0 1px #666;
      font-size: 20px}

footer {padding: 20px}

   footer #icons {float: left;
      margin-left: 13px}

      #icons>img {height: 35px;
         width: auto;
         margin: 0 2px}

   footer #copyright {float: right;
      font-size: 14px;
      font-family: 'jurademibold', sans-serif;
      margin-right: 15px}

      #copyright a {color: inherit;
         text-decoration: none}

/* MISC */
.clear:before,
.clear:after {content: " ";
   ...

JavaScript

$(document).ready(function(){
    var pageBG = "index.jpg";
    $('body').css('opacity', '1');
});


var homeHTML = '<div id="intro">' + 
                   '<h1><span>Andrew</span>Baacke</h1>' + 
                   '<h2>&#92;&#92;Web Developer</h2>' + 
               '</div>';
var aboutMeHTML = 'About Me Here';
var portfolioHTML = 'Portfolio Here';
var contactHTML = 'Contact Here';


//// ANGULAR.JS ////
(function(){
    var website = angular.module('baacke', ['ngSanitize']);
    
    website.controller('PageController', function(){
        this.links = pages;
        this.currentPage = pages[0];
        this.background = { background: 'url(' + this.currentPage.background + ')' };
        
        this.setPage = function(pageIndex){
            this.currentPage = pages[pageIndex];
            this.background = { background: 'url(' + this.currentPage.background + ')' };
        };
    });
    
    website.controller('IconController', function(){
        this.icons = icons;
    });
    
    var pages = [
        {
            name: "Home",
            title: "page title here",
            background: "http://andybaacke.com/new/images/bgs/index.jpg",
            html: homeHTML,
            contentURL: "index" /*will want html include here*/
        },{
            name: "About Me",
            title: "page title here",
            background: "http://andybaacke.com/new/images/bgs/aboutme.jpg",
            html: aboutMeHTML,
            contentURL: "about-me"
        },{
            name: "Portfolio",
            title: "page title here",
            background: "http://andybaacke.com/new/images/bgs/portfolio.jpg",
            html: portfolioHTML,
            contentURL: "portfolio"
        },{
            name: "Contact",
            title: "page title here",
            background: "http://andybaacke.com/new/images/bgs/contact.jpg",
            html: contactHTML,
            contentURL: "contact"
        }
    ];
    
    var icons = [
        {
            src:...