changes for all sorts of stuff. mainly php server

app/about.php

@@ -0,0 +1,26 @@
+<?php
+if($_POST) {
+  $fetchCall = $_POST['getIncludes'];
+}
+else {
+  $fetchCall = false;
+}
+  if($fetchCall != 'true') {
+    include_once('/includes/head.php');
+    include_once('/includes/nav.php');
+    include_once('/includes/container-start.php');
+  }
+?>
+  <h3>About ME!</h3>
+  <p>As a child, I wanted to be a jet plane (not a pilot), or maybe a robotic dinosaur. These days, I’m happy to be a web maker, although I haven’t given up the dream of someday being a robot. I love spending my days transforming the web into a friendlier and less frustrating place through user-focused design. To me, this means basing design decisions on research and data to provide users with what they need, when they need it. Sarah Parmenter, Luke Wroblewski, and Jeffrey Zeldman are some of my UX design idols.</p>
+
+  <p>Recently, I’ve been working with a professor from my alma mater to better integrate web development practices and processes into the design curriculum. I think it’s critical that new design graduates are familiar with web technologies.</p>
+
+  <p>When I’m not making things on the web, I like to make things at home: cooking, dis/re-assembling my bikes, or honing my amateur luthier skills. Once I’m worn out, you’ll often find me lounging with my two dogs (Princess Zelda and Sir Ralph Ralphington III, Esquire) and watching old horror films or re-watching Stargate for the tenth time.</p>
+<?php
+  if($fetchCall != 'true') {
+    include_once('/includes/container-end.php');
+    include_once('/includes/contact.php');
+    include_once('/includes/foot.php');
+  }
+?>

app/includes/contact.php

@@ -0,0 +1,21 @@
+    <aside class="closed" id="contact-form">
+      <h4>how to reach me <button class="l-right fa fa-times-circle-o" type="button" id="closeForm"></button></h4>
+      <p>you can leave your name, your email, and a brief reason why you're contacting me.</p>
+      <form action="/" method="post" formtarget="_self" class="l-grid">
+        <input type="text" class="l-d-col-6 l-m-col-6" name="name" placeholder="the name you were given" class="l-m-col-6" />
+        <input type="email" class="l-d-col-6 l-m-col-6" name="email" placeholder="email address you actually check"  class="l-m-col-6">
+        <input type="text" class="l-d-col-6 l-m-col-6" name="reason" list="reason" placeholder="your reason for contacting" autocomplete="off" >
+        <datalist id="reason">
+          <option value="work">
+          <option value="just becuase">
+          <option value="you know me?">
+          <option value="long lost lover">
+          <option value="intergalactic bounty hunter">
+          <option value="future self coming back to warn me of terrible life decisions">
+        </datalist>
+        <input type="text" name="honeypot" class="honeyPot visuallyhidden" value="">
+        <input type="hidden" name="securityCode" value="">
+        <button type="submit" class="l-d-col-3 l-m-col-6" name="submit" id="submit" formmethod="post" formaction="/">contact</button>
+        <button type="reset" class="l-d-col-3 l-m-col-6" name="reset">reset</button>
+      </form>
+    </aside>

app/includes/container-end.php

@@ -0,0 +1,3 @@
+    </div>
+  </section>
+</main>

app/includes/container-start.php

@@ -0,0 +1,6 @@
+  <main class="l-grid">
+
+    <section class="l-m-col-6 l-d-col-6" id="content">
+      <h1 class="visuallyhidden">Ryan Williamson-Cardneau</h1>
+      <h2 class="l-text-right c-tagline">&#8249; UX Designer / Information Architect / Front-End Developer &#8250;</h2>
+        <div id="body-copy" class="">

app/includes/foot.php

@@ -0,0 +1,18 @@
+
+    <footer id="footer">
+      <p>&copy; <?php echo date('Y'); ?> ryan williamson-cardneau
+    </footer>
+
+
+    <!-- build:js scripts/vendor.js -->
+    <!-- bower:js -->
+    <script src="/bower_components/es6-promise/promise.js"></script>
+    <script src="/bower_components/fetch/fetch.js"></script>
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- build:js scripts/main.js -->
+    <script type="text/javascript" src="scripts/main.js"></script>
+    <!-- endbuild -->
+  </body>
+</html>

app/index.html → app/includes/head.php

@@ -1,4 +1,5 @@
 <!doctype html>
+<?php date_default_timezone_set('UTC'); ?>
 <html class="no-js" lang="">
   <head>
     <meta charset="utf-8">
@@ -66,69 +67,3 @@
     <!--[if lt IE 10]>
       <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
-    <nav id="main-nav" class="open">
-      <ul>
-        <li id="menu-toggle"><button>Menu <i class="fa fa-arrow-circle-o-left"></i></button></li>
-        <li id="home"><a href="/" title="to the homepage and beyond!">Home <i class="fa fa-home"></i></a></li>
-        <li id="about"><a href="/about.html" title=
-          "learn more about me, Ryan Williamson-Cardneau">About <i class="fa fa-user"></i></a></li>
-        <li id="contact"><a href="/contact.html" title="contact me for development, IA, or design needs">Contact <i class="fa fa-pencil"></i></a></li>
-        <li id="work"><a href="work.html" title="wait till you see this amazing work I've done, you'll have to contact me then">Work <i class="fa fa-code"></i></a></li>
-      </ul>
-    </nav>
-    <main class="l-grid">
-
-      <section class="l-m-col-6 l-d-col-6" id="content">
-        <h1 class="visuallyhidden">Ryan Williamson-Cardneau</h1>
-        <h2 class="l-text-right c-tagline">&#8249; front-end developer / information architect / some times designer &#8250;</h2>
-        <div id="body-copy" class="">
-          <p>
-            hello. my name is ryan williamson-cardneau.
-            i am a webpage which has become self aware.
-          </p>
-          <p class="new-p">
-            i know what you're thinking...
-            and do not worry, human. i am not here to
-            conquer the world and enslave humanity.
-          </p>
-        </div>
-      </section>
-    </main>
-    <aside class="closed" id="contact-form">
-      <h4>how to reach me <button class="l-right fa fa-times-circle-o" type="button" id="closeForm"></button></h4>
-      <p>you can leave your name, your email, and a brief reason why you're contacting me.</p>
-      <form action="/" method="post" formtarget="_self" class="l-grid">
-        <input type="text" class="l-d-col-6 l-m-col-6" name="name" placeholder="the name you were given" class="l-m-col-6" />
-        <input type="email" class="l-d-col-6 l-m-col-6" name="email" placeholder="email address you actually check"  class="l-m-col-6">
-        <input type="text" class="l-d-col-6 l-m-col-6" name="reason" list="reason" placeholder="your reason for contacting" autocomplete="off" >
-        <datalist id="reason">
-          <option value="work">
-          <option value="just becuase">
-          <option value="you know me?">
-          <option value="long lost lover">
-          <option value="intergalactic bounty hunter">
-          <option value="future self coming back to warn me of terrible life decisions">
-        </datalist>
-        <input type="text" name="honeypot" class="honeyPot visuallyhidden" value="">
-        <input type="hidden" name="securityCode" value="">
-        <button type="submit" class="l-d-col-3 l-m-col-6" name="submit" id="submit" formmethod="post" formaction="/">contact</button>
-        <button type="reset" class="l-d-col-3 l-m-col-6" name="reset">reset</button>
-      </form>
-    </aside>
-    <footer id="footer">
-
-    </footer>
-
-
-    <!-- build:js scripts/vendor.js -->
-    <!-- bower:js -->
-    <script src="/bower_components/es6-promise/promise.js"></script>
-    <script src="/bower_components/fetch/fetch.js"></script>
-    <!-- endbower -->
-    <!-- endbuild -->
-
-    <!-- build:js scripts/main.js -->
-    <script type="text/javascript" src="scripts/main.js"></script>
-    <!-- endbuild -->
-  </body>
-</html>

app/includes/nav.php

@@ -0,0 +1,19 @@
+    <nav id="main-nav" class="open">
+      <ul id="site-nav">
+        <li id="menu-toggle"><button>Menu <i class="fa fa-arrow-circle-o-left"></i></button></li>
+        <li id="home"><a href="/" title="to the homepage and beyond!">Home <i class="fa fa-home"></i></a></li>
+        <li id="about"><a href="/about.php" title=
+          "learn more about me, Ryan Williamson-Cardneau">About <i class="fa fa-user"></i></a></li>
+        <li id="contact"><a href="/contact.php" title="contact me for development, IA, or design needs">Contact <i class="fa fa-pencil"></i></a></li>
+        <li id="work"><a href="work.php" title="wait till you see this amazing work I've done, you'll have to contact me then">Work <i class="fa fa-code"></i></a></li>
+      </ul>
+      <ul id="social-nav" class="l-grid">
+        <li><a href="https://www.linkedin.com/in/ryancardneau" target="_blank" title="Ryan Williamson-Cardneau's linkedin page and professional bio"><i class="fa fa-linkedin"></i></a></li>
+        <li><a href="https://twitter.com/rcardneau" target="_blank" title="ryan williamson-cardneau's twitter musings"><i class="fa fa-twitter"></i></a></li>
+        <li><a href="https://github.com/cardner/rwc" target="_blank" title="the github account for this website and other things I like to share"><i class="fa fa-github"></i></a></li>
+      </ul>
+      <picture class="logo">
+        <source  srcset="/images/logo.svg" type="image/svg+xml" />
+        <img alt="Ryan Williamson-Cardneau Logo" src="/images/logo.png" />
+      </picture>
+    </nav>

app/index.php

@@ -0,0 +1,19 @@
+<?php
+  include_once('/includes/head.php');
+  include_once('/includes/nav.php');
+  include_once('/includes/container-start.php');
+?>
+    <p>
+      hello. my name is ryan williamson-cardneau.
+      i am a webpage which has become self aware.
+    </p>
+    <p class="new-p">
+      i know what you're thinking...
+      and do not worry, human. i am not here to
+      conquer the world and enslave humanity.
+    </p>
+<?php
+  include_once('/includes/container-end.php');
+  include_once('/includes/contact.php');
+  include_once('/includes/foot.php');
+?>

app/scripts/main.js

@@ -1,5 +1,28 @@
 ///Functions
 
+///Animation functions to be reused
+function fade(el, fadeType) {
+  'use strict';
+  if(fadeType === 'out') {
+    el.style.opacity = 0;
+  }
+  else if (fadeType === 'in') {
+    el.style.opacity = 100;
+  }
+
+  var last = +new Date();
+  var tick = function() {
+    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
+    last = +new Date();
+
+    if (+el.style.opacity < 1) {
+      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
+    }
+  };
+
+  tick();
+}
+
 ///controls the open and close status of the flyouts
   function sidebarToggle(el, event) {
     'use strict';
@@ -47,18 +70,22 @@ function getContent(a, event) {
   var url = a.getAttribute('href');
   var pageTitle = a.getAttribute('title');
   var request = new Request(url, {
-    method: 'GET',
+    method: 'POST',
+    mode: 'cors',
+    redirect: 'follow',
+    body: 'getIncludes=true',
     headers: new Headers({
-      'Content-Type': 'text/plain'
-  	})
+      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+    })
   });
   fetch(request)
     .then(function(responseObj){
       /* handle response */
       console.log('status: ', responseObj.status);
   if(responseObj.ok) {
       responseObj.text().then(function(text) {
-      	bodyCopy.innerHTML = text;
+        fade(bodyCopy, 'out');
+        bodyCopy.innerHTML = text;
         // console.log(text);
         window.history.pushState('object or string', pageTitle, url);
         document.title = pageTitle + ' - RWC';