created backend for project section and updated the css for the images

dist/api/index.php

@@ -9,7 +9,8 @@ use Slim\Factory\AppFactory;
 
 //require “routes.php”;
 require "../vendor/autoload.php";
-include "timelineData.php"; 
+include "timelineData.php";
+include "projectData.php";
 
 // Start slim
 $app = AppFactory::create();

dist/api/timelineData.php

@@ -29,7 +29,7 @@ class TimelineData
     function getWorkData()
     {
         $conn = dbConn();
-        $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 = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
         $stmt->execute();
 
         // set the resulting array to associative

src/api/index.php

@@ -9,7 +9,8 @@ use Slim\Factory\AppFactory;
 
 //require “routes.php”;
 require "../vendor/autoload.php";
-include "timelineData.php"; 
+include "timelineData.php";
+include "projectData.php";
 
 // Start slim
 $app = AppFactory::create();
@@ -22,6 +23,7 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
 $app->setBasePath("/api");
 
 $timelineData = new TimelineData();
+$projectData = new ProjectData();
 
 $app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
 {
@@ -52,6 +54,26 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     {
         $response = $response->withStatus(404);
     }
+
+    //use content type json to indicate json data on frontend.
+    return $response->withHeader("Content-Type", "application/json");
+});
+
+$app->get('/projectData', function (Request $request, Response $response)
+{
+    global $projectData;
+
+    $result= $projectData->getProjectData();
+
+    $json = json_encode($result);
+
+    $response->getBody()->write($json);
+
+    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");
 });

src/api/projectData.php

@@ -0,0 +1,28 @@
+<?php
+require_once "./config.php";
+
+/**
+ * Project Data Class
+ * Define all functions which either get, update, create or delete timeline data
+ */
+class ProjectData
+{
+    function getProjectData()
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("SELECT title, information, imgLocation, projectLink, githubLink FROM projects;");
+        $stmt->execute();
+
+        // set the resulting array to associative
+        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+        if ($result)
+        {
+            return $result;
+        }
+        else
+        {
+            return array(array("errorMessage" => "Error, project data not found"));
+        }
+    }
+}

src/css/projects.css

@@ -17,13 +17,11 @@ section#projects .mainProj, section#projects .otherProj {
 
 
 section#projects .mainProj {
-    justify-content: center;
     border-right: 2px solid var(--mutedGrey);
     padding: 0 2.5em 5em 0;
 }
 
 section#projects .mainProj img, section#projects .otherProj .oProjItem img {
-
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
@@ -33,7 +31,7 @@ section#projects .mainProj img, section#projects .otherProj .oProjItem img {
 
 section#projects .mainProj img {
     width: 100%;
-    max-width: 30rem;
+    max-width: 40rem;
 }
 
 section#projects .mainProj .flexRow {
@@ -79,7 +77,7 @@ section#projects .otherProj > div .oProjItem:nth-child(2) {
 }
 
 section#projects .otherProj .oProjItem img {
-    max-width: 30rem;
+    max-width: 15rem;
     width: 100%;
     padding: 0 1em;
 }