Linked backend with frontend and styled curriculum vitae for mobile

dist/api/index.php

@@ -7,17 +7,53 @@ use Psr\Http\Message\ResponseInterface as Response;
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Slim\Factory\AppFactory;
 
-require "routes.php";
-require "./vendor/autoload.php";
+//require “routes.php”;
+require "../vendor/autoload.php";
+include "timelineData.php"; 
 
 // Start slim
 $app = AppFactory::create();
 // create middleware
 $app->addRoutingMiddleware();
 
-$errorMiddleware = $app->addErrorMiddleware(false, true, true);
+// for error checking
+$errorMiddleware = $app->addErrorMiddleware(true, true, true);
 
-$app->get("/getTimelineData", function (Request $request, Response $response)
+$app->setBasePath("/api");
+
+$timelineData = new TimelineData();
+
+$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
 {
+    global $timelineData;
+    $json = $result = "";
+    
+    //check if route is available if it is get the data 
+    //otherwise return an error
+    if($args["timeline"] == "edu")
+    {
+        $result = $timelineData->getEduData();
+    }
+    else if($args["timeline"] == "work")
+    {
+        $result = $timelineData->getWorkData();
+    }
+    else 
+    {
+        $result = array(array("errorMessage" => "Error, timeline data not found"));
+    }
+    
+    $json = json_encode($result);
 
+    $response->getBody()->write($json);
+    
+    //if it is an error give a 404 code since it can't find the data
+    if(array_key_exists("errorMessage", $result[0]))
+    {
+        $response = $response->withStatus(404);
+    }
+    //use content type json to indicate json data on frontend.
+    return $response->withHeader("Content-Type", "application/json");
 });
+
+$app->run();

dist/js/main.js

@@ -1 +1 @@
-const scrollLimit=150;var dataText=["full stack developer","web designer","student","gamer","drummer"];function typeWriter(e,t,n){t<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,t+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){typeWriter(e,t+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}function StartTextAnimation(e){void 0===dataText[e]?setTimeout((function(){StartTextAnimation(0)}),1500):e<dataText[e].length&&typeWriter(dataText[e],0,(function(){setTimeout(StartTextAnimation,1500,e+1)}))}function getTimelineData(){fetch("/api/timelineData").then((e=>{e.json().then((e=>{}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const n=t.offsetTop;window.pageYOffset>=n-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));
+const scrollLimit=150;var dataText=["full stack developer","web designer","student","gamer","drummer"];function typeWriter(t,e,n){e<t.length?(document.querySelector("header div h1").innerHTML=t.substring(0,e+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){typeWriter(t,e+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}function StartTextAnimation(t){void 0===dataText[t]?setTimeout((function(){StartTextAnimation(0)}),1500):t<dataText[t].length&&typeWriter(dataText[t],0,(function(){setTimeout(StartTextAnimation,1500,t+1)}))}function getTimelineData(){fetch("/api/timelineData/edu").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>Grade: ${t.grade}</span>\n\t\t\t\t\t<p class="timelineText">${t.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(e)}))}))})),fetch("/api/timelineData/work").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>${t.companyName} - ${t.area}</span>\n\t\t\t\t\t<p class="timelineText">${t.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(e)}))}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0),getTimelineData()}));