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 “routes.php”;
-require "./vendor/autoload.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()}));

gulpfile.js

@@ -5,10 +5,10 @@ const cssMin = require("gulp-clean-css")
 const terser = require("gulp-terser");
 const ftp = require("vinyl-ftp");
 const env = require("gulp-env");
-/*env({
+env({
 	file: ".env",
 	type: ".ini"
-});*/
+});
 
 gulp.task("minifyHTML", () =>
 {
@@ -35,11 +35,11 @@ gulp.task("minifyJS", () =>
 	}
 
 	return gulp.src("src/js/*.js")
-	.on("error", createErrorHandler("gulp.src"))
+		.on("error", createErrorHandler("gulp.src"))
-	.pipe(terser())
+		.pipe(terser())
-	.on("error", createErrorHandler("terser"))
+		.on("error", createErrorHandler("terser"))
-	.pipe(gulp.dest("dist/js"))
+		.pipe(gulp.dest("dist/js"))
-	.on("error", createErrorHandler("gulp.dest"));
+		.on("error", createErrorHandler("gulp.dest"));
 });
 
 gulp.task("movePHPFiles", () =>
@@ -85,4 +85,4 @@ gulp.task("browserSync", () =>
 	gulp.watch("dist").on("change", browserSync.reload)
 });
 
-gulp.task("default", gulp.series(gulp.parallel("minifyHTML", "minifyCSS", "minifyJS", "movePHPFiles")));
+gulp.task("default", gulp.series(gulp.parallel("watchFiles", "deploy")));

src/api/index.php

@@ -40,7 +40,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     }
     else 
     {
-        $result = array("errorMessage" => "Error, timeline data not found");
+        $result = array(array("errorMessage" => "Error, timeline data not found"));
     }
     
     $json = json_encode($result);
@@ -48,7 +48,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     $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))
+    if(array_key_exists("errorMessage", $result[0]))
     {
         $response = $response->withStatus(404);
     }

src/api/timelineData.php

@@ -1,12 +1,16 @@
 <?php
 require_once "./config.php";
 
+/**
+ * TimelineData class
+ * Define all functions which either get, update, create or delete timeline data
+ */
 class TimelineData
 {
     function getEduData()
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT * FROM edu;"); 
+        $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, grade, course  FROM edu ORDER BY startPeriod DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -18,14 +22,14 @@ class TimelineData
         }
         else 
         {
-            return array("errorMessage" => "Error, edu data not found");
+            return array(array("errorMessage" => "Error, edu data not found"));
         }
     }
     
     function getWorkData()
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT * FROM work;"); 
+        $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title  FROM work ORDER BY startPeriod DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -37,7 +41,7 @@ class TimelineData
         }
         else 
         {
-            return array("errorMessage" => "Error, work data not found");
+            return array(array("errorMessage" => "Error, work data not found"));
         }
     }
     

src/css/main.css

@@ -211,6 +211,10 @@ div h1 span {
 
 /***** About Styles *****/
 
+section#about {
+    margin-bottom: 5rem;
+}
+
 section#about div {
     padding: 0.1em 5em;
 }
@@ -235,14 +239,13 @@ section#curriculumvitae .cvGrid > div {
     display: flex;
     flex-direction: column;
     min-height: 100%;
-
 }
 
-#curriculumvitae .cvGrid h2 {
+section#curriculumvitae .cvGrid h2 {
     text-align: center;
 }
 
-#curriculumvitae .timeline {
+section#curriculumvitae .timeline {
     position: relative;
     max-width: 30em;
     gap: 1em;
@@ -252,7 +255,11 @@ section#curriculumvitae .cvGrid > div {
     height: 100%;
 }
 
-#curriculumvitae .timeline:before {
+section#curriculumvitae #work {
+    margin: 0 auto 0 8rem;
+}
+
+section#curriculumvitae .timeline:before {
     content: "";
     position: absolute;
     height: 100%;
@@ -262,13 +269,13 @@ section#curriculumvitae .cvGrid > div {
     top: 0;
 }
 
-#curriculumvitae .timeline:after {
+section#curriculumvitae .timeline:after {
     content: "";
     display: table;
     clear: both;
 }
 
-#curriculumvitae .timelineItem {
+section#curriculumvitae .timelineItem {
     border: 2px solid var(--timelineItemBrdr);
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
@@ -279,12 +286,12 @@ section#curriculumvitae .cvGrid > div {
     background-color: var(--primaryHover);
 }
 
-#curriculumvitae .timelineItem:before, .timelineItem:after {
+section#curriculumvitae .timelineItem:before, .timelineItem:after {
     content: '';
     position: absolute;
 }
 
-#curriculumvitae .timelineItem:before{
+section#curriculumvitae .timelineItem:before{
     content: '';
     right: -20px;
     top: calc(50% - 5px);
@@ -293,23 +300,24 @@ section#curriculumvitae .cvGrid > div {
     border-width: 20px;
     transform: rotate(45deg);
 }
-#curriculumvitae .timelineItem:nth-child(2n) {
+section#curriculumvitae .timelineItem:nth-child(2n) {
     margin-left: 21em;
 }
 
-#curriculumvitae .timelineItem:nth-child(2n):before {
+section#curriculumvitae .timelineItem:nth-child(2n):before {
     right: auto;
     left: -20px;
     border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
 }
 
-#curriculumvitae .timelineItem h3 {
+section#curriculumvitae .timelineItem h3 {
     font-weight: normal;
 }
 
-#curriculumvitae .timelineItem span {
+section#curriculumvitae .timelineItem span {
     color: hsl(0, 0%, 90%);
 }
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 90em) {
@@ -521,6 +529,40 @@ section#curriculumvitae .cvGrid > div {
         padding: 0.1em 2.5em;
     }
 
+    /****** CV Styles *******/
+
+    section#curriculumvitae .cvGrid {
+        padding: 0;
+    }
+}
+
+@media screen and (max-width: 55em) {
+
+    /****** CV Styles *******/
+
+    section#curriculumvitae .cvGrid .timeline {
+        margin: 0 1em;
+        max-width: 100%;
+    }
+
+    section#curriculumvitae .timeline:before {
+        border: none;
+    }
+
+    section#curriculumvitae .timelineItem{
+        width: 95%;
+    }
+
+    section#curriculumvitae .timelineItem:nth-child(2n) {
+        margin-left: 0;
+    }
+
+    section#curriculumvitae .timelineItem:before {
+        right: unset;
+        left: unset;
+        border:none
+    }
+
 }
 
 @media screen and (max-width: 31em) {

src/index.html

@@ -58,52 +58,12 @@
                 <!-- https://codepen.io/keithwyland/pen/wqNqvy -->
                 <div>
                     <h2>Education</h2>
-                    <div class="timeline">
+                    <div class="timeline" id="edu">
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
                     </div>
                 </div>
                 <div>
                     <h2>Work</h2>
-                    <div class="timeline">
+                    <div class="timeline" id="work">
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
-                        <div class="timelineItem">
-                            <h3 class="timelineHeader">Sep 2016 - July 2018</h3>
-                            <span>Grade: D*D*D*</span>
-                            <p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
-                        </div>
                     </div>
                 </div>
             </div>

src/js/main.js

@@ -101,16 +101,53 @@ function StartTextAnimation(i)
 }
 
 // cv timeline data
-
+/**
+ * getTimelineData function
+ * Gets the timeline data from backend route and appends the data on to the timeline.
+ */
 function getTimelineData()
 {
 	fetch("/api/timelineData/edu").then(res =>
 	{
 		res.json().then(json =>
 		{
-			json
+			if (res.ok)
+			{
+				json.forEach(item =>
+				{
+					let timelineItem = document.createElement("div")
+					timelineItem.classList.add("timelineItem");
+					timelineItem.innerHTML = `
+					<h3 class="timelineHeader">${item["startPeriod"]} - ${item["endPeriod"]}</h3>
+					<span>Grade: ${item["grade"]}</span>
+					<p class="timelineText">${item["course"]}</p>
+				`;
+					document.getElementById("edu").appendChild(timelineItem);
+				});
+			}
 		})
 	});
+
+	fetch("/api/timelineData/work").then(res =>
+	{
+		res.json().then(json =>
+		{
+			if (res.ok)
+			{
+				json.forEach(item =>
+				{
+					let timelineItem = document.createElement("div")
+					timelineItem.classList.add("timelineItem");
+					timelineItem.innerHTML = `
+					<h3 class="timelineHeader">${item["startPeriod"]} - ${item["endPeriod"]}</h3>
+					<span>${item["companyName"]} - ${item["area"]}</span>
+					<p class="timelineText">${item["title"]}</p>
+				`;
+					document.getElementById("work").appendChild(timelineItem);
+				})
+			}
+		})
+	})
 }
 
 document.addEventListener('DOMContentLoaded', () =>
@@ -119,5 +156,5 @@ document.addEventListener('DOMContentLoaded', () =>
     StartTextAnimation(0);
 
     // get timeline data and add it to the timeline
-	//getTimelineData();
+	getTimelineData();
 });