add about and various performance fixes

- add about page
- divide up main javascript file into multiple child proccess.

3 files changed, 79 insertions, 76 deletions

diff --git a/js/app.js b/js/app.js
index a14a758..f20085d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,8 +1,6 @@
-// LOADER ANIMATION

 $(window).on("load", function () {

-  $(".loader-wrapper").fadeOut("slow");

-

   console.log("UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A")

+

 })

 

 /*

@@ -18,79 +16,6 @@ if( screen.width <= 480 ) {
   location.href = '/mobile';

 }

 

-// BACKGROUND SPARKLES

-// SCRIPT #1

-

-// Set up base pattern

-var pattern = Trianglify({

-  height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300

-  width: window.innerWidth,

-  x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']

-  y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)

-  variance: 10,

-  seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.

-  cell_size: 160

-});

-

-// // Canvas

-// document.body.appendChild(pattern.canvas())

-

-// SVG

-document.body.appendChild(pattern.svg())

-

-

-

-// // PNG

-// var png = document.createElement('img')

-// png.src = pattern.png()

-// document.body.appendChild(png)

-

-// SCRIPT #2

-

-$('.title-wrapper').css('width', window.innerWidth);

-$('.title-wrapper').css('height', window.innerHeight);

-

-

-var time = 10,

-  $paths = $('body').find('svg').find('path'),

-  pathCollection = $paths.get(),

-  count = $paths.length;

-

-// // Log variable "count"

-// console.log(count);

-

-pathCollection.sort(function () {

-  return Math.random() * 10 > 5 ? 1 : -1;

-});

-

-function showText() {

-  var title = $('h1'),

-    subtitle = $('h2');

-

-  title.removeClass('hidden');

-  setTimeout(function () {

-    subtitle.removeClass('hidden');

-  }, 500);

-}

-

-setTimeout(function () {

-  $.each(pathCollection, function (i, el) {

-    var $path = $(this);

-    setTimeout(function () {

-

-      $path.css('opacity', '1');

-    }, time)

-    time += 10;

-

-    if (i + 1 === count) {

-      setTimeout(function () {

-        showText();

-      }, 2000);

-    }

-

-  });

-}, 2000);

-

 /* Honestly I have NO idea what this is but it was in the original site source code so I kept it :)

 **(async () => {

 **  if (navigator.webdriver || document.visibilityState === 'prerender' || !location.hostname) {

diff --git a/js/background-sparkles.js b/js/background-sparkles.js
new file mode 100644
index 0000000..16cfb4e
--- /dev/null
+++ b/js/background-sparkles.js
@@ -0,0 +1,72 @@
+// BACKGROUND SPARKLES
+// SCRIPT #1
+
+// Set up base pattern
+var pattern = Trianglify({
+    height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
+    width: window.innerWidth,
+    x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
+    y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
+    variance: 10,
+    seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
+    cell_size: 160
+});
+
+// // Canvas
+// document.body.appendChild(pattern.canvas())
+
+// SVG
+document.body.appendChild(pattern.svg())
+
+
+
+// // PNG
+// var png = document.createElement('img')
+// png.src = pattern.png()
+// document.body.appendChild(png)
+
+// SCRIPT #2
+
+$('.title-wrapper').css('width', window.innerWidth);
+$('.title-wrapper').css('height', window.innerHeight);
+
+
+var time = 10,
+    $paths = $('body').find('svg').find('path'),
+    pathCollection = $paths.get(),
+    count = $paths.length;
+
+// // Log variable "count"
+// console.log(count);
+
+pathCollection.sort(function () {
+    return Math.random() * 10 > 5 ? 1 : -1;
+});
+
+function showText() {
+    var title = $('h1'),
+        subtitle = $('h2');
+
+    title.removeClass('hidden');
+    setTimeout(function () {
+        subtitle.removeClass('hidden');
+    }, 500);
+}
+
+setTimeout(function () {
+    $.each(pathCollection, function (i, el) {
+        var $path = $(this);
+        setTimeout(function () {
+
+            $path.css('opacity', '1');
+        }, time)
+        time += 10;
+
+        if (i + 1 === count) {
+            setTimeout(function () {
+                showText();
+            }, 2000);
+        }
+
+    });
+}, 2000);
\ No newline at end of file
diff --git a/js/loader-animation.js b/js/loader-animation.js
new file mode 100644
index 0000000..81e6d5e
--- /dev/null
+++ b/js/loader-animation.js
@@ -0,0 +1,6 @@
+// LOADER ANIMATION
+$(window).on("load", function () {
+    $(".loader-wrapper").fadeOut("slow");
+
+    
+})
\ No newline at end of file