REFACTOR: Hot Swap Content.

Fix Resume Data.

_src/css/style.css

@@ -11,7 +11,7 @@ body {
   flex-direction: column;
 }
 
-main {
+content {
   flex: 1 0 auto;
 }
 

_src/data/about.json

@@ -1,31 +1,43 @@
 {
-    "bio": {
-        "name": "Mark N Carpenter Jr",
-        "role": "Front-End Web Developer",
-        "contacts": {
-            "mobile": "(203)816-5206",
-            "email": "marksthings24@gmail.com",
-            "github": "mcarpenterjr",
-            "linkedin": "mcarpenterjr",
-            "twitter": "BeardySmeardy",
-            "location": "Newtown, CT"
-        },
-        "pic": "img/mncheadshot.jpg",
-        "welcomeMessage": "With strong problem solving skills, the ability to adapt, and capability to quickly learn new tasks, I know I will become a vital asset to almost any team. ",
-        "keyPoints": [
-            "HTML", "CSS", "JavaScript", "Jquery", "Bootstrap", "CMS", "Netbeans",
-            "Git", "GitHub", "MySql", "iOS", "Windows", "CLI", "PhotoShop", "Fireworks",
-            "Premier Pro", "Illustrator", "DreamWeaver", "Joomla", "WordPress", "MVC",
-            "CodeIgniter"
-        ]
+  "name":  {
+    "first": "Mark",
+    "last": "Carpenter",
+    "middle": "N",
+    "suffix": "Jr"
+  },
+  "locations": {
+    "home": {
+      "city": "Newtown",
+      "state": "CT",
+      "zip": "06470"
     },
-    "work": {
-
-    },
-    "education": {
+    "alt": {
+      "city": "West Dover",
+      "state": "VT",
+      "zip": "05356"
+    }
+  },
+  "roles": [
+    "Software Engineer",
+    "Open Source Contributor",
+    "Business Consultant"
+  ],
+  "socials": {
+      "mobile": "(203)816-5206",
+      "email": "marksthings24@gmail.com",
+      "github": "mcarpenterjr",
+      "linkedin": "mcarpenterjr",
+      "twitter": "beardySmeardy",
+      "instagram": "beardysmeardy"
+  },
+  "pic": "img/mncheadshot.jpg",
+  "work": {
+
+  },
+  "education": {
 
-    },
-    "projects": {
+  },
+  "projects": {
 
-    }
+  }
 }

_src/data/resume.json

@@ -1,49 +1,15 @@
-{
-    "bio": {
-        "name":  {
-          "first": "Mark",
-          "last": "Carpenter",
-          "middle": "N",
-          "suffix": "Jr"
-        },
-        "locations": {
-          "home": {
-            "city": "Newtown",
-            "state": "CT",
-            "zip": "06470"
-          },
-          "alt": {
-            "city": "West Dover",
-            "state": "VT",
-            "zip": "05356"
-          }
-        },
-        "roles": [
-          "Software Engineer",
-          "Open Source Contributor",
-          "Business Consultant"
-        ],
-        "socials": {
-            "mobile": "(203)816-5206",
-            "email": "marksthings24@gmail.com",
-            "github": "mcarpenterjr",
-            "linkedin": "mcarpenterjr",
-            "twitter": "beardySmeardy",
-            "instagram": "beardysmeardy"
-        },
-        "bioPic": "img/mncheadshot.jpg",
-        "welcomeMessage": "With strong problem solving skills, the ability to adapt, and capability to quickly learn new tasks, I know I will become a vital asset to almost any team. ",
-        "skills": ["HTML", "CSS", "JavaScript", "Jquery", "Bootstrap", "CMS", "Netbeans",
-            "Git", "GitHub", "MySql", "iOS", "Windows", "CLI", "PhotoShop", "Fireworks",
-            "Premier Pro", "Illustrator", "DreamWeaver", "Joomla", "WordPress", "MVC",
-            "CodeIgniter"
-        ]
-    },
+{    
+    "welcomeMessage": "With strong problem solving skills, the ability to adapt, and capability to quickly learn new tasks, I know I will become a vital asset to almost any team. ",
+    "skills": ["HTML", "CSS", "JavaScript", "Jquery", "Bootstrap", "CMS", "Netbeans",
+        "Git", "GitHub", "MySql", "iOS", "Windows", "CLI", "PhotoShop", "Fireworks",
+        "Premier Pro", "Illustrator", "DreamWeaver", "Joomla", "WordPress", "MVC",
+        "CodeIgniter"
+    ],
     "work": {
         "jobs": [{
             "employer": "G. P. Tool Co.",
             "title": "CNC Machinist",
-            "dates": "2014 - Current",
+            "dates": "2014 - 2016",
             "location": "Danbury, CT",
             "description": "Producing machined parts for the Aerospace, Medical, and Energy Generation industries. Works from supplied blueprints and drawings to create excellent qaulity parts per customer specifications. Keeps a clean and safe work area along with routine equipment maintinence and quality checks. Works closely with Quality Control to meet Zero-Loss Certified Material requirements.",
             "duties": [

_src/index.html

@@ -25,7 +25,7 @@
 
 </head>
 
-<body>
+<body class="grey darken-3">
   <!-- Don't make fun of me I'm running quick and dirty with jQuery -->
   <!-- And I'm thinking I could have just created something just as nice -->
   <!-- in react. -->
@@ -34,11 +34,12 @@
     <slider-full></slider-full>
     <floaters></floaters>
   </content>
-  <footer></footer>
+  <footer class="page-footer pink"></footer>
   <!-- JavaScript libs are placed at the end of the document so the pages load faster -->
 	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
 	<script src="js/materialize.js"></script>
-	<script src="js/sweetalert-dev.js"></script>
+  <script src="js/sweetalert-dev.js"></script>
+  <script src="js/knockout.js"></script>
 	<script src="js/app.js"></script>
 </body>
 

_src/js/app.js

@@ -1,7 +1,51 @@
-class NavBar {
+class App {
+  constructor() {
+    let self = this;
+
+  }
+
+  /**
+   * Wrapper for the jQ ajax method so we can reuse throughout our classes
+   * 
+   * @param string url is required.
+   * @param array  opts is not required defaults to an empty arrary.
+   * @param string method is the request method, POST or GET but regex checking
+   *               will look for other parts of the CRUD model.
+  */  
+  fetchData(url, opts = [], method = 'GET') {
+    let request;
+
+    const regex = RegExp('/[GETPOSDL]{3,}/g');
+    method = regex.test(method)
+      ? method.toUpperCase() : 'GET';
+
+    // We made a convention for the options/params array but haven't done
+    // anything to implement it yet.
+    for (let idx = 0; idx < opts.length; idx++) {
+      const option = opts[idx];
+
+    }
+
+    if (typeof url !== 'undefined') {
+      request = $.ajax({
+        url: url,
+        type: method,
+        dataType: 'JSON'
+      });
+    } else {
+      request = 'Request location required!';
+    }
+
+    return request;
+  }
+}
+
+class NavBar extends App {
   constructor(data) {
+    super(data);
     let self = this;
 
+    self.init();
     // self.socials = [];
     // for (let i = 0; i < navData.socials.length; i++) {
     //   const social = navData.socials[i];
@@ -10,14 +54,84 @@ class NavBar {
   }
 
   init() {
+    let self = this;
+    let goto;
     // Load material tooltips
     $('nav .tooltipped').tooltip();
     // do some jq majick for link clicks
     $('nav a').click((e) => {
-      e.preventDefault();
-      console.log(e.currentTarget);
+      if (goto = $(e.currentTarget).attr('id')) {
+        e.preventDefault();
+        self.loadLink(goto);
+      }
     });
   }
+
+  loadLink(link) {
+    let self = this;
+    if (link == 'resume') {
+      $('body content').load('partials/resume.html');
+      self.resume = new Resume;
+    }
+    // self.fetchData('data/about.json').done((a) => { console.log(a) });
+    $('body footer').load('partials/footer.html');
+
+  }
+
+};
+
+class Resume extends App {
+  constructor(data) {
+    super(data);
+    let self = this;
+    let resData = {
+      'welcomeMessage': ko.observable(''),
+      'skills': ko.observableArray(''),
+      'work': {
+        'jobs': ko.observableArray(''),
+      },
+      'education': {
+        'schools': ko.observableArray(''),
+        'onlineCourses': ko.observableArray(''),
+      },
+      'projects': {
+        'projects': ko.observableArray(''),
+      },
+      'isReady': ko.observable(false)
+    };
+
+
+    self.fetchData('data/resume.json').done((data) => {
+      console.log(data);
+      resData.welcomeMessage(data.welcomeMessage);
+      for (let i = 0; i < data.skills.length; i++) {
+        const skill = data.skills[i];
+        resData.skills.push(skill);
+      }
+
+      for (let widx = 0; widx < data.work.jobs.length; widx++) {
+        const job = data.work.jobs[widx];
+        let duties = ko.observableArray();
+        for (var didx = 0; didx < job.duties.length; didx++) {
+          const duty = job.duties[didx];
+          duties.push(duty);
+        }
+        resData.work.jobs.push({
+          employer: ko.observable(job.employer),
+          title: ko.observable(job.title),
+          dates: ko.observable(job.dates),
+          location: ko.observable(job.location),
+          description: ko.observable(job.description),
+          duties: duties
+        });
+
+      }
+      console.log(resData.work.jobs());
+    }).then(() => {
+      ko.applyBindings(resData)
+    });
+  }
+
 };
 
 
@@ -179,7 +293,6 @@ $('document').ready(() => {
     (response, status, obj) => {
       // We could use the callback data for something.
       const navbar = new NavBar();
-      navbar.init();
     }
   );
   $('body content slider-full').load(
@@ -189,5 +302,5 @@ $('document').ready(() => {
   $('body content floaters').load('partials/floaters.html');
 });
 
-var resumeBuilder = new resumeBuilder();
-ko.applyBindings(resumeBuilder);
+// var resumeBuilder = new resumeBuilder();
+// ko.applyBindings(resumeBuilder);

_src/partials/footer.html

@@ -1,10 +1,10 @@
-<div class="container">
+<!-- <div class="container">
   <div class="row">
 
   </div>
-</div>
+</div> -->
 <div class="footer-copyright">
   <div class="container">
-      ©2014-2020 Copyright Mark N Carpenter Jr
+      © 2016-2020 Copyright Mark N Carpenter Jr
   </div>
 </div>