put in server and initial routes; setup ajax calls to work; more orga…

…nization; setup templates with pug

.gitignore

@@ -1,3 +1,3 @@
-dist
 node_modules
-.idea
+.idea
+/public/bundle.js

intro.js

@@ -2,7 +2,7 @@ import {
     TweenLite
 } from 'gsap';
 
-import Home from './pages/home';
+import Home from './public/scripts/pages/home';
 
 (async() => {
     const logoAnimation = () => new Promise(resolve => {
@@ -32,14 +32,11 @@ import Home from './pages/home';
 
     await logoAnimation();
 
-    const page = window.location.pathname.match(/\/website\/([a-z0-9]+).html/)[1];
+    const page = window.location.pathname;
 
     switch (page) {
-        case `index`: {
+        case `/`: {
             Home();
         }
-
-        default:
-            Home();
     }
 })();

package.json

@@ -5,9 +5,13 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "gsap": "^1.19.1"
+    "express": "^4.15.2",
+    "gsap": "^1.19.1",
+    "pug": "^2.0.0-beta11",
+    "whatwg-fetch": "^2.0.3"
   },
   "scripts": {
-    "start": "webpack -w"
+    "start": "webpack -w",
+    "start-server": "node server.js"
   }
 }

public/scripts/helpers/dom.js

@@ -0,0 +1,5 @@
+export function createElementFromString(string) {
+    const temp = document.createElement('div');
+    temp.innerHTML = string;
+    return temp.firstChild;
+}

public/scripts/navigation.js

@@ -0,0 +1,18 @@
+import {
+    createElementFromString
+} from './helpers/dom';
+
+export async function goTo(url) {
+    const location = window.location.host;
+    const fullURL = `http://${location}/api${url}`;
+
+    const res = await fetch(fullURL);
+    const html = await res.text();
+
+    document.body.appendChild(createElementFromString(html));
+
+    window.history.pushState({
+        html: html,
+        title: `this is the title`
+    }, "", url);
+}

pages/home.js → public/scripts/pages/home.js

@@ -4,7 +4,11 @@ import {
     Strong
 } from 'gsap';
 
-// const createEase = () => new Ease(BezierEasing(0, 1.01, .48, 1));
+import 'whatwg-fetch';
+
+import {
+    goTo
+} from '../../scripts/navigation';
 
 export default async() => {
     document.body.classList.add(`home`);
@@ -20,6 +24,18 @@ export default async() => {
 
     homeLogoContainer.appendChild(logo);
 
+    console.log(navLinks);
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', e => {
+            e.preventDefault();
+
+            const href = link.attributes.href.value;
+
+            goTo(href);
+        });
+    });
+
     tl
         .to(logo, .5, {
             opacity: 1,

public/scripts/pages/work.js

@@ -0,0 +1,65 @@
+import {
+    TweenLite,
+    TimelineLite,
+    Strong
+} from 'gsap';
+
+import fetchUrl from 'fetch-promise';
+
+export default async() => {
+    document.body.classList.add(`home`);
+
+    const tl = new TimelineLite();
+
+    const navigation = document.querySelector(`.navigation`);
+    const navLinks = document.querySelectorAll(`.navigation a`);
+    const blurb = document.querySelector(`.blurb`);
+
+    const homeLogoContainer = document.querySelector(`.home-logo-container`);
+    const logo = document.querySelector(`.logo`);
+
+    homeLogoContainer.appendChild(logo);
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', async e => {
+            e.preventDefault();
+
+            const location = window.location.host;
+            const href = link.attributes.href.value;
+            const url = `http://${location}/api${href}`;
+
+            console.log(url);
+
+            const res = await fetchUrl(url);
+
+            console.log(res);
+        });
+    });
+
+    tl
+        .to(logo, .5, {
+            opacity: 1,
+            filter: `blur(0)`,
+            transform: `scale(1)`,
+        })
+        .staggerFromTo(navLinks, .5, {
+            ease: Strong.easeInOut,
+            filter: `blur(20px)`,
+            transform: `translate3d(0, 3vh, 0)`,
+            opacity: 0
+        }, {
+            transform: `translate3d(0, 0, 0)`,
+            filter: `blur(0)`,
+            opacity: 1
+        }, .1)
+        .fromTo(blurb, 1, {
+            ease: Strong.easeInOut,
+            filter: `blur(20px)`,
+            transform: `translate3d(0, 3vh, 0)`,
+            opacity: 0
+        }, {
+            transform: `translate3d(0, 0, 0)`,
+            filter: `blur(0)`,
+            opacity: 1
+        });
+};