From 4f01ebe6ce2e15799589156e1df61d3422acfa49 Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Fri, 11 Nov 2022 13:56:42 +0000
Subject: [PATCH 1/6] created acd for editing projects data

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 dist/api/index.php      | 85 +++++++++++++++++++++++++++++++++++------
 src/api/index.php       | 85 +++++++++++++++++++++++++++++++++++------
 src/api/projectData.php | 51 +++++++++++++++++++++++++
 src/editor/editor.html  |  3 ++
 4 files changed, 202 insertions(+), 22 deletions(-)

diff --git a/dist/api/index.php b/dist/api/index.php
index 63b33d9..4515f78 100644
--- a/dist/api/index.php
+++ b/dist/api/index.php
@@ -80,10 +80,10 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
-    if ($args["timeline"] == "work" && $args["id"] != null)
+    if ($args["timeline"] == "work" && $args["id"] != "undefined")
     {
         if (empty($data["dateFrom"]) || empty($data["dateTo"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
         {
@@ -99,7 +99,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -118,7 +118,7 @@ $app->delete("/timelineData/{timeline}/{id}", function (Request $request, Respon
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     if ($args["timeline"] == "work" && $args["id"] != null)
@@ -130,7 +130,7 @@ $app->delete("/timelineData/{timeline}/{id}", function (Request $request, Respon
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -159,7 +159,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
     
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
-        return $response->withStatus(200);
+        return $response;
     }
 
     if ($args["timeline"] == "work")
@@ -185,7 +185,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
         
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -211,6 +211,73 @@ $app->get("/projectData", function (Request $request, Response $response)
     return $response;
 });
 
+$app->patch("/projectData/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    if (empty($args["id"] != "undefined"))
+    {
+        if (empty($args["title"]) || empty($args["isMainProject"]) || empty($args["information"]) || empty($args["projectLink"]) || empty($args["githubLink"]))
+        {
+            // uh oh sent some empty data
+            $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+            return $response->withStatus(400);
+        }
+
+        if (!$projectData->updateProjectData($args["title"], $args["isMainProject"], $args["information"], $args["projectLink"], $args["githubLink"], $args["id"]))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+        return $response;
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "Please provide an ID")));
+    return $response->withStatus(400);
+});
+
+$app->delete("/projectData/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    if ($args["id"] != null)
+    {
+        if (!$projectData->deleteProjectData($args["id"]))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+
+        return $response;
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "Please provide an ID")));
+    return $response->withStatus(400);
+});
+
+$app->post("/projectData", function (Request $request, Response $response)
+{
+    global $projectData;
+    $data = $request->getParsedBody();
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["githubLink"]))
+    {
+        // uh oh sent some empty data
+        $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+        return $response->withStatus(400);
+    }
+
+    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["githubLink"]);
+    if (!is_int($insertedID))
+    {
+        // uh oh something went wrong
+        $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+        return $response->withStatus(500);
+    }
+
+    $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+    return $response;
+});
+
 $app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
@@ -507,8 +574,4 @@ $app->post("/user/changePassword", function (Request $request, Response $respons
     return $response->withStatus(500);
 });
 
-
-
-
-
 $app->run();
diff --git a/src/api/index.php b/src/api/index.php
index 63b33d9..4515f78 100644
--- a/src/api/index.php
+++ b/src/api/index.php
@@ -80,10 +80,10 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
-    if ($args["timeline"] == "work" && $args["id"] != null)
+    if ($args["timeline"] == "work" && $args["id"] != "undefined")
     {
         if (empty($data["dateFrom"]) || empty($data["dateTo"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
         {
@@ -99,7 +99,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -118,7 +118,7 @@ $app->delete("/timelineData/{timeline}/{id}", function (Request $request, Respon
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     if ($args["timeline"] == "work" && $args["id"] != null)
@@ -130,7 +130,7 @@ $app->delete("/timelineData/{timeline}/{id}", function (Request $request, Respon
             return $response->withStatus(500);
         }
 
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -159,7 +159,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
     
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
-        return $response->withStatus(200);
+        return $response;
     }
 
     if ($args["timeline"] == "work")
@@ -185,7 +185,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
         
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
-        return $response->withStatus(200);
+        return $response;
     }
 
     $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
@@ -211,6 +211,73 @@ $app->get("/projectData", function (Request $request, Response $response)
     return $response;
 });
 
+$app->patch("/projectData/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    if (empty($args["id"] != "undefined"))
+    {
+        if (empty($args["title"]) || empty($args["isMainProject"]) || empty($args["information"]) || empty($args["projectLink"]) || empty($args["githubLink"]))
+        {
+            // uh oh sent some empty data
+            $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+            return $response->withStatus(400);
+        }
+
+        if (!$projectData->updateProjectData($args["title"], $args["isMainProject"], $args["information"], $args["projectLink"], $args["githubLink"], $args["id"]))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+        return $response;
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "Please provide an ID")));
+    return $response->withStatus(400);
+});
+
+$app->delete("/projectData/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    if ($args["id"] != null)
+    {
+        if (!$projectData->deleteProjectData($args["id"]))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+
+        return $response;
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "Please provide an ID")));
+    return $response->withStatus(400);
+});
+
+$app->post("/projectData", function (Request $request, Response $response)
+{
+    global $projectData;
+    $data = $request->getParsedBody();
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["githubLink"]))
+    {
+        // uh oh sent some empty data
+        $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+        return $response->withStatus(400);
+    }
+
+    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["githubLink"]);
+    if (!is_int($insertedID))
+    {
+        // uh oh something went wrong
+        $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+        return $response->withStatus(500);
+    }
+
+    $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+    return $response;
+});
+
 $app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
@@ -507,8 +574,4 @@ $app->post("/user/changePassword", function (Request $request, Response $respons
     return $response->withStatus(500);
 });
 
-
-
-
-
 $app->run();
diff --git a/src/api/projectData.php b/src/api/projectData.php
index 74be93c..f4fef3c 100644
--- a/src/api/projectData.php
+++ b/src/api/projectData.php
@@ -29,4 +29,55 @@ class projectData
         }
         return array("errorMessage" => "Error, project data not found");
     }
+
+    function updateProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink, string $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, githubLink = :githubLink WHERE ID = :id");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":githubLink", $githubLink);
+        $stmt->bindParam(":id", $id);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
+
+    function deleteProjectData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :id");
+        $stmt->bindParam(":id", $id);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
+
+    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, githubLink) VALUES (:title, :isMainProject, :information, :projectLink, :githubLink)");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":githubLink", $githubLink);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
 }
diff --git a/src/editor/editor.html b/src/editor/editor.html
index 37d1c5c..221fa05 100644
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@@ -21,6 +21,7 @@
             
             <h1>Editor</h1>
         </div>
+        
         <section id="curriculumVitae">
             <h2>curriculum vitae</h2>
             <div class="cvGrid">
@@ -107,6 +108,8 @@
             </div>
             </div>
         </section>
+        
+        section#projects>h2{projects}+div.
     </main>
     
     <script src="js/editor.js"></script>
-- 
2.43.0


From 69c3462a3dd6a08a36e12cf7fb4cbd8e146a5a16 Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Fri, 11 Nov 2022 14:04:43 +0000
Subject: [PATCH 2/6] created acd for editing projects data

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 dist/api/projectData.php | 51 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/dist/api/projectData.php b/dist/api/projectData.php
index 74be93c..f4fef3c 100644
--- a/dist/api/projectData.php
+++ b/dist/api/projectData.php
@@ -29,4 +29,55 @@ class projectData
         }
         return array("errorMessage" => "Error, project data not found");
     }
+
+    function updateProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink, string $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, githubLink = :githubLink WHERE ID = :id");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":githubLink", $githubLink);
+        $stmt->bindParam(":id", $id);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
+
+    function deleteProjectData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :id");
+        $stmt->bindParam(":id", $id);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
+
+    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, githubLink) VALUES (:title, :isMainProject, :information, :projectLink, :githubLink)");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":githubLink", $githubLink);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+        return false;
+    }
 }
-- 
2.43.0


From cef7cc5e647d8fc25481dc7c624a8ec4ed6fbbfb Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Tue, 17 Jan 2023 01:56:03 +0000
Subject: [PATCH 3/6] Base HTML for projects section completed

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 .fleet/settings.json       |   3 +
 composer.lock              | 191 +++++++++++++++++++------------------
 dist/api/.htaccess         |   4 -
 dist/api/index.php         |   3 +
 dist/api/middleware.php    |  30 ++++++
 dist/api/projectData.php   |   2 +-
 dist/css/main.css          |   2 +-
 dist/editor/css/main.css   |   2 +-
 dist/editor/editor.html    |   2 +-
 dist/editor/js/editor.js   |   2 +-
 dist/js/main.js            |   2 +-
 src/api/index.php          |   3 +
 src/api/middleware.php     |  30 ++++++
 src/api/projectData.php    |   2 +-
 src/css/templateStyles.css |  93 +++++++++++++++++-
 src/editor/css/editor.css  |  60 +++++++++++-
 src/editor/editor.html     |  45 +++++++--
 src/editor/js/editor.js    |  57 +++++++++++
 src/js/main.js             |   2 +-
 19 files changed, 418 insertions(+), 117 deletions(-)
 create mode 100644 .fleet/settings.json
 delete mode 100644 dist/api/.htaccess

diff --git a/.fleet/settings.json b/.fleet/settings.json
new file mode 100644
index 0000000..a7858d1
--- /dev/null
+++ b/.fleet/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.guides": []
+}
\ No newline at end of file
diff --git a/composer.lock b/composer.lock
index aeeb7ea..ae10e78 100644
--- a/composer.lock
+++ b/composer.lock
@@ -121,16 +121,16 @@
         },
         {
             "name": "guzzlehttp/psr7",
-            "version": "2.4.0",
+            "version": "2.4.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/guzzle/psr7.git",
-                "reference": "13388f00956b1503577598873fffb5ae994b5737"
+                "reference": "67c26b443f348a51926030c83481b85718457d3d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/guzzle/psr7/zipball/13388f00956b1503577598873fffb5ae994b5737",
-                "reference": "13388f00956b1503577598873fffb5ae994b5737",
+                "url": "https://api.github.com/repos/guzzle/psr7/zipball/67c26b443f348a51926030c83481b85718457d3d",
+                "reference": "67c26b443f348a51926030c83481b85718457d3d",
                 "shasum": ""
             },
             "require": {
@@ -144,15 +144,19 @@
                 "psr/http-message-implementation": "1.0"
             },
             "require-dev": {
-                "bamarni/composer-bin-plugin": "^1.4.1",
+                "bamarni/composer-bin-plugin": "^1.8.1",
                 "http-interop/http-factory-tests": "^0.9",
-                "phpunit/phpunit": "^8.5.8 || ^9.3.10"
+                "phpunit/phpunit": "^8.5.29 || ^9.5.23"
             },
             "suggest": {
                 "laminas/laminas-httphandlerrunner": "Emit PSR-7 responses"
             },
             "type": "library",
             "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                },
                 "branch-alias": {
                     "dev-master": "2.4-dev"
                 }
@@ -216,7 +220,7 @@
             ],
             "support": {
                 "issues": "https://github.com/guzzle/psr7/issues",
-                "source": "https://github.com/guzzle/psr7/tree/2.4.0"
+                "source": "https://github.com/guzzle/psr7/tree/2.4.3"
             },
             "funding": [
                 {
@@ -232,7 +236,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-06-20T21:43:11+00:00"
+            "time": "2022-10-26T14:07:24+00:00"
         },
         {
             "name": "http-interop/http-factory-guzzle",
@@ -294,25 +298,24 @@
         },
         {
             "name": "laminas/laminas-diactoros",
-            "version": "2.14.0",
+            "version": "2.24.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laminas/laminas-diactoros.git",
-                "reference": "6cb35f61913f06b2c91075db00f67cfd78869e28"
+                "reference": "6028af6c3b5ced4d063a680d2483cce67578b902"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laminas/laminas-diactoros/zipball/6cb35f61913f06b2c91075db00f67cfd78869e28",
-                "reference": "6cb35f61913f06b2c91075db00f67cfd78869e28",
+                "url": "https://api.github.com/repos/laminas/laminas-diactoros/zipball/6028af6c3b5ced4d063a680d2483cce67578b902",
+                "reference": "6028af6c3b5ced4d063a680d2483cce67578b902",
                 "shasum": ""
             },
             "require": {
-                "php": "^7.3 || ~8.0.0 || ~8.1.0",
+                "php": "~8.0.0 || ~8.1.0 || ~8.2.0",
                 "psr/http-factory": "^1.0",
                 "psr/http-message": "^1.0"
             },
             "conflict": {
-                "phpspec/prophecy": "<1.9.0",
                 "zendframework/zend-diactoros": "*"
             },
             "provide": {
@@ -325,12 +328,11 @@
                 "ext-gd": "*",
                 "ext-libxml": "*",
                 "http-interop/http-factory-tests": "^0.9.0",
-                "laminas/laminas-coding-standard": "~2.3.0",
-                "php-http/psr7-integration-tests": "^1.1.1",
-                "phpspec/prophecy-phpunit": "^2.0",
-                "phpunit/phpunit": "^9.5",
-                "psalm/plugin-phpunit": "^0.17.0",
-                "vimeo/psalm": "^4.24.0"
+                "laminas/laminas-coding-standard": "^2.4.0",
+                "php-http/psr7-integration-tests": "^1.2",
+                "phpunit/phpunit": "^9.5.27",
+                "psalm/plugin-phpunit": "^0.18.4",
+                "vimeo/psalm": "^5.4"
             },
             "type": "library",
             "extra": {
@@ -389,34 +391,34 @@
                     "type": "community_bridge"
                 }
             ],
-            "time": "2022-07-28T12:23:48+00:00"
+            "time": "2022-12-20T12:22:40+00:00"
         },
         {
             "name": "laminas/laminas-httphandlerrunner",
-            "version": "2.1.0",
+            "version": "2.5.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laminas/laminas-httphandlerrunner.git",
-                "reference": "4d337cde83e6b901a4443b0ab5c3b97cbaa46413"
+                "reference": "7a47834aaad7852816d2ec4fdbb0492163b039ae"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laminas/laminas-httphandlerrunner/zipball/4d337cde83e6b901a4443b0ab5c3b97cbaa46413",
-                "reference": "4d337cde83e6b901a4443b0ab5c3b97cbaa46413",
+                "url": "https://api.github.com/repos/laminas/laminas-httphandlerrunner/zipball/7a47834aaad7852816d2ec4fdbb0492163b039ae",
+                "reference": "7a47834aaad7852816d2ec4fdbb0492163b039ae",
                 "shasum": ""
             },
             "require": {
-                "php": "^7.3 || ~8.0.0 || ~8.1.0",
+                "php": "~8.0.0 || ~8.1.0 || ~8.2.0",
                 "psr/http-message": "^1.0",
                 "psr/http-message-implementation": "^1.0",
                 "psr/http-server-handler": "^1.0"
             },
             "require-dev": {
-                "laminas/laminas-coding-standard": "~2.3.0",
-                "laminas/laminas-diactoros": "^2.8.0",
-                "phpunit/phpunit": "^9.5.9",
-                "psalm/plugin-phpunit": "^0.16.1",
-                "vimeo/psalm": "^4.10.0"
+                "laminas/laminas-coding-standard": "~2.4.0",
+                "laminas/laminas-diactoros": "^2.18",
+                "phpunit/phpunit": "^9.5.26",
+                "psalm/plugin-phpunit": "^0.18.0",
+                "vimeo/psalm": "^5.0.0"
             },
             "type": "library",
             "extra": {
@@ -456,29 +458,30 @@
                     "type": "community_bridge"
                 }
             ],
-            "time": "2021-09-22T09:27:36+00:00"
+            "time": "2023-01-05T21:54:03+00:00"
         },
         {
             "name": "laravel/serializable-closure",
-            "version": "v1.2.0",
+            "version": "v1.2.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/serializable-closure.git",
-                "reference": "09f0e9fb61829f628205b7c94906c28740ff9540"
+                "reference": "47afb7fae28ed29057fdca37e16a84f90cc62fae"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/09f0e9fb61829f628205b7c94906c28740ff9540",
-                "reference": "09f0e9fb61829f628205b7c94906c28740ff9540",
+                "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/47afb7fae28ed29057fdca37e16a84f90cc62fae",
+                "reference": "47afb7fae28ed29057fdca37e16a84f90cc62fae",
                 "shasum": ""
             },
             "require": {
                 "php": "^7.3|^8.0"
             },
             "require-dev": {
-                "pestphp/pest": "^1.18",
-                "phpstan/phpstan": "^0.12.98",
-                "symfony/var-dumper": "^5.3"
+                "nesbot/carbon": "^2.61",
+                "pestphp/pest": "^1.21.3",
+                "phpstan/phpstan": "^1.8.2",
+                "symfony/var-dumper": "^5.4.11"
             },
             "type": "library",
             "extra": {
@@ -515,7 +518,7 @@
                 "issues": "https://github.com/laravel/serializable-closure/issues",
                 "source": "https://github.com/laravel/serializable-closure"
             },
-            "time": "2022-05-16T17:09:47+00:00"
+            "time": "2022-09-08T13:45:54+00:00"
         },
         {
             "name": "monolog/monolog",
@@ -1582,40 +1585,40 @@
         },
         {
             "name": "slim/psr7",
-            "version": "1.5",
+            "version": "1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/slimphp/Slim-Psr7.git",
-                "reference": "a47b43a8da7c0208b4c228af0cb29ea36080635a"
+                "reference": "3471c22c1a0d26c51c78f6aeb06489d38cf46a4d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/slimphp/Slim-Psr7/zipball/a47b43a8da7c0208b4c228af0cb29ea36080635a",
-                "reference": "a47b43a8da7c0208b4c228af0cb29ea36080635a",
+                "url": "https://api.github.com/repos/slimphp/Slim-Psr7/zipball/3471c22c1a0d26c51c78f6aeb06489d38cf46a4d",
+                "reference": "3471c22c1a0d26c51c78f6aeb06489d38cf46a4d",
                 "shasum": ""
             },
             "require": {
                 "fig/http-message-util": "^1.1.5",
-                "php": "^7.3 || ^8.0",
+                "php": "^7.4 || ^8.0",
                 "psr/http-factory": "^1.0",
                 "psr/http-message": "^1.0",
                 "ralouphie/getallheaders": "^3.0",
-                "symfony/polyfill-php80": "^1.23"
+                "symfony/polyfill-php80": "^1.26"
             },
             "provide": {
                 "psr/http-factory-implementation": "1.0",
                 "psr/http-message-implementation": "1.0"
             },
             "require-dev": {
-                "adriansuter/php-autoload-override": "^1.2",
+                "adriansuter/php-autoload-override": "^1.3",
                 "ext-json": "*",
                 "http-interop/http-factory-tests": "^0.9.0",
                 "php-http/psr7-integration-tests": "dev-master",
-                "phpspec/prophecy": "^1.14",
+                "phpspec/prophecy": "^1.15",
                 "phpspec/prophecy-phpunit": "^2.0",
-                "phpstan/phpstan": "^0.12.99",
+                "phpstan/phpstan": "^1.8",
                 "phpunit/phpunit": "^9.5",
-                "squizlabs/php_codesniffer": "^3.6"
+                "squizlabs/php_codesniffer": "^3.7"
             },
             "type": "library",
             "autoload": {
@@ -1658,22 +1661,22 @@
             ],
             "support": {
                 "issues": "https://github.com/slimphp/Slim-Psr7/issues",
-                "source": "https://github.com/slimphp/Slim-Psr7/tree/1.5"
+                "source": "https://github.com/slimphp/Slim-Psr7/tree/1.6"
             },
-            "time": "2021-09-22T04:33:00+00:00"
+            "time": "2022-11-05T18:50:24+00:00"
         },
         {
             "name": "slim/slim",
-            "version": "4.10.0",
+            "version": "4.11.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/slimphp/Slim.git",
-                "reference": "0dfc7d2fdf2553b361d864d51af3fe8a6ad168b0"
+                "reference": "b0f4ca393ea037be9ac7292ba7d0a34d18bac0c7"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/slimphp/Slim/zipball/0dfc7d2fdf2553b361d864d51af3fe8a6ad168b0",
-                "reference": "0dfc7d2fdf2553b361d864d51af3fe8a6ad168b0",
+                "url": "https://api.github.com/repos/slimphp/Slim/zipball/b0f4ca393ea037be9ac7292ba7d0a34d18bac0c7",
+                "reference": "b0f4ca393ea037be9ac7292ba7d0a34d18bac0c7",
                 "shasum": ""
             },
             "require": {
@@ -1688,21 +1691,21 @@
                 "psr/log": "^1.1 || ^2.0 || ^3.0"
             },
             "require-dev": {
-                "adriansuter/php-autoload-override": "^1.2",
+                "adriansuter/php-autoload-override": "^1.3",
                 "ext-simplexml": "*",
-                "guzzlehttp/psr7": "^2.1",
+                "guzzlehttp/psr7": "^2.4",
                 "httpsoft/http-message": "^1.0",
                 "httpsoft/http-server-request": "^1.0",
-                "laminas/laminas-diactoros": "^2.8",
+                "laminas/laminas-diactoros": "^2.17",
                 "nyholm/psr7": "^1.5",
                 "nyholm/psr7-server": "^1.0",
                 "phpspec/prophecy": "^1.15",
                 "phpspec/prophecy-phpunit": "^2.0",
-                "phpstan/phpstan": "^1.4",
+                "phpstan/phpstan": "^1.8",
                 "phpunit/phpunit": "^9.5",
                 "slim/http": "^1.2",
                 "slim/psr7": "^1.5",
-                "squizlabs/php_codesniffer": "^3.6"
+                "squizlabs/php_codesniffer": "^3.7"
             },
             "suggest": {
                 "ext-simplexml": "Needed to support XML format in BodyParsingMiddleware",
@@ -1775,37 +1778,37 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-03-14T14:18:23+00:00"
+            "time": "2022-11-06T16:33:39+00:00"
         },
         {
             "name": "slim/slim-skeleton",
-            "version": "4.4.0",
+            "version": "4.5.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/slimphp/Slim-Skeleton.git",
-                "reference": "8a91d18b0a8e4623f1af9207e97477c7b8437f57"
+                "reference": "1997d86c18837d26248a2cca204fabb6a430329c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/slimphp/Slim-Skeleton/zipball/8a91d18b0a8e4623f1af9207e97477c7b8437f57",
-                "reference": "8a91d18b0a8e4623f1af9207e97477c7b8437f57",
+                "url": "https://api.github.com/repos/slimphp/Slim-Skeleton/zipball/1997d86c18837d26248a2cca204fabb6a430329c",
+                "reference": "1997d86c18837d26248a2cca204fabb6a430329c",
                 "shasum": ""
             },
             "require": {
                 "ext-json": "*",
-                "monolog/monolog": "^2.3",
+                "monolog/monolog": "^2.8",
                 "php": "^7.4 || ^8.0",
-                "php-di/php-di": "^6.3",
+                "php-di/php-di": "^6.4",
                 "slim/psr7": "^1.5",
-                "slim/slim": "^4.9"
+                "slim/slim": "^4.10"
             },
             "require-dev": {
                 "jangregor/phpstan-prophecy": "^1.0.0",
                 "phpspec/prophecy-phpunit": "^2.0",
-                "phpstan/extension-installer": "^1.1.0",
-                "phpstan/phpstan": "^1.3",
-                "phpunit/phpunit": "^9.5.11",
-                "squizlabs/php_codesniffer": "^3.6"
+                "phpstan/extension-installer": "^1.2.0",
+                "phpstan/phpstan": "^1.8",
+                "phpunit/phpunit": "^9.5.26",
+                "squizlabs/php_codesniffer": "^3.7"
             },
             "type": "library",
             "autoload": {
@@ -1839,22 +1842,22 @@
             ],
             "support": {
                 "issues": "https://github.com/slimphp/Slim-Skeleton/issues",
-                "source": "https://github.com/slimphp/Slim-Skeleton/tree/4.4.0"
+                "source": "https://github.com/slimphp/Slim-Skeleton/tree/4.5.0"
             },
-            "time": "2022-01-14T19:30:57+00:00"
+            "time": "2022-11-02T21:21:07+00:00"
         },
         {
             "name": "symfony/polyfill-php80",
-            "version": "v1.26.0",
+            "version": "v1.27.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-php80.git",
-                "reference": "cfa0ae98841b9e461207c13ab093d76b0fa7bace"
+                "reference": "7a6ff3f1959bb01aefccb463a0f2cd3d3d2fd936"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/cfa0ae98841b9e461207c13ab093d76b0fa7bace",
-                "reference": "cfa0ae98841b9e461207c13ab093d76b0fa7bace",
+                "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/7a6ff3f1959bb01aefccb463a0f2cd3d3d2fd936",
+                "reference": "7a6ff3f1959bb01aefccb463a0f2cd3d3d2fd936",
                 "shasum": ""
             },
             "require": {
@@ -1863,7 +1866,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "1.26-dev"
+                    "dev-main": "1.27-dev"
                 },
                 "thanks": {
                     "name": "symfony/polyfill",
@@ -1908,7 +1911,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-php80/tree/v1.26.0"
+                "source": "https://github.com/symfony/polyfill-php80/tree/v1.27.0"
             },
             "funding": [
                 {
@@ -1924,7 +1927,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-05-10T07:21:04+00:00"
+            "time": "2022-11-03T14:55:06+00:00"
         },
         {
             "name": "tuupola/callable-handler",
@@ -2057,34 +2060,34 @@
         },
         {
             "name": "tuupola/slim-jwt-auth",
-            "version": "3.6.0",
+            "version": "3.7.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/tuupola/slim-jwt-auth.git",
-                "reference": "d9ed8bca77a0ef2a95ab48e65ddc26073b99c5ff"
+                "reference": "ef05b93d4dac7307ef6ef3b62feaff30c32e82c1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/tuupola/slim-jwt-auth/zipball/d9ed8bca77a0ef2a95ab48e65ddc26073b99c5ff",
-                "reference": "d9ed8bca77a0ef2a95ab48e65ddc26073b99c5ff",
+                "url": "https://api.github.com/repos/tuupola/slim-jwt-auth/zipball/ef05b93d4dac7307ef6ef3b62feaff30c32e82c1",
+                "reference": "ef05b93d4dac7307ef6ef3b62feaff30c32e82c1",
                 "shasum": ""
             },
             "require": {
                 "firebase/php-jwt": "^3.0|^4.0|^5.0",
-                "php": "^7.1|^8.0",
+                "php": "^7.2|^8.0",
                 "psr/http-message": "^1.0",
                 "psr/http-server-middleware": "^1.0",
                 "psr/log": "^1.0|^2.0|^3.0",
-                "tuupola/callable-handler": "^0.3.0|^0.4.0|^1.0",
-                "tuupola/http-factory": "^0.4.0|^1.0.2"
+                "tuupola/callable-handler": "^1.0",
+                "tuupola/http-factory": "^1.3"
             },
             "require-dev": {
                 "equip/dispatch": "^2.0",
                 "laminas/laminas-diactoros": "^2.0",
                 "overtrue/phplint": "^1.0",
-                "phpstan/phpstan": "^0.12.43",
-                "phpunit/phpunit": "^7.0|^8.0|^9.0",
-                "squizlabs/php_codesniffer": "^3.4"
+                "phpstan/phpstan": "^1.8",
+                "phpunit/phpunit": "^7.0|^8.5.30|^9.0",
+                "squizlabs/php_codesniffer": "^3.7"
             },
             "type": "library",
             "extra": {
@@ -2121,7 +2124,7 @@
             ],
             "support": {
                 "issues": "https://github.com/tuupola/slim-jwt-auth/issues",
-                "source": "https://github.com/tuupola/slim-jwt-auth/tree/3.6.0"
+                "source": "https://github.com/tuupola/slim-jwt-auth/tree/3.7.0"
             },
             "funding": [
                 {
@@ -2129,7 +2132,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2022-01-12T11:15:02+00:00"
+            "time": "2022-12-23T11:23:05+00:00"
         }
     ],
     "packages-dev": [],
diff --git a/dist/api/.htaccess b/dist/api/.htaccess
deleted file mode 100644
index 11b28de..0000000
--- a/dist/api/.htaccess
+++ /dev/null
@@ -1,4 +0,0 @@
-RewriteEngine On
-RewriteCond %{REQUEST_FILENAME} !-f
-RewriteCond %{REQUEST_FILENAME} !-d
-RewriteRule ^ index.php [QSA,L]
\ No newline at end of file
diff --git a/dist/api/index.php b/dist/api/index.php
index 4515f78..895708d 100644
--- a/dist/api/index.php
+++ b/dist/api/index.php
@@ -54,6 +54,8 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
         return $response;
     }
     
+    
+
     // something went wrong
     $response->getBody()->write(json_encode(array("errorMessage" => "Error, timeline data not found")));
     return $response->withStatus(404);
@@ -285,6 +287,7 @@ $app->post("/contact", function (Request $request, Response $response)
     {
       $response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
       return $response->withStatus(400);
+
     }
     
     if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL)) 
diff --git a/dist/api/middleware.php b/dist/api/middleware.php
index ece8897..2b9bc0d 100644
--- a/dist/api/middleware.php
+++ b/dist/api/middleware.php
@@ -2,9 +2,14 @@
 // middleware
 namespace api;
 
+use Psr\Http\Message\ServerRequestInterface;
+use Psr\Http\Server\RequestHandlerInterface;
 use Slim\App;
 use Selective\SameSiteCookie\SameSiteCookieConfiguration;
 use Selective\SameSiteCookie\SameSiteCookieMiddleware;
+use Slim\Exception\HttpMethodNotAllowedException;
+use Slim\Exception\HttpNotFoundException;
+use Slim\Psr7\Response;
 use Tuupola\Middleware\JwtAuthentication;
 use Tuupola\Middleware\JwtAuthentication\RequestMethodRule;
 use Tuupola\Middleware\JwtAuthentication\RequestPathRule;
@@ -24,6 +29,7 @@ class middleware
         $this->baseMiddleware($app);
         $this->sameSiteConfig($app);
         $this->jwtAuth($app);
+        $this->errorHandling($app);
         $this->returnAsJSON($app);
     }
 
@@ -86,7 +92,31 @@ class middleware
                 return $response->withStatus(401);
             }
         ]));
+    }
+
+    function errorHandling(App $app): void
+    {
+        $app->add(function (ServerRequestInterface $request, RequestHandlerInterface $handler)
+        {
+            try
+            {
+                return $handler->handle($request);
+            }
+            catch (HttpNotFoundException $httpException)
+            {
+                $response = (new Response())->withStatus(404);
+                $response->getBody()->write(json_encode(array("status" => "404", "message" => $request->getUri()->getPath() . " not found")));
+                return $response;
+            }
+            catch (HttpMethodNotAllowedException $httpException)
+            {
+                $response = (new Response())->withStatus(405);
+                $response->getBody()->write(json_encode(array("status" => "405", "message" => "Method not allowed")));
+                return $response;
+            }
+        });
         $app->addErrorMiddleware(true, true, true);
+
     }
     
 }
\ No newline at end of file
diff --git a/dist/api/projectData.php b/dist/api/projectData.php
index f4fef3c..285ad9c 100644
--- a/dist/api/projectData.php
+++ b/dist/api/projectData.php
@@ -17,7 +17,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, githubLink FROM projects order by date LIMIT 4;");
+        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects order by date LIMIT 4;");
         $stmt->execute();
 
         // set the resulting array to associative
diff --git a/dist/css/main.css b/dist/css/main.css
index 6d7bcac..9bce781 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack);z-index:1}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{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;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1em}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}}
\ No newline at end of file
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;cursor:pointer}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack);z-index:1}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{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;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1em}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}}
\ No newline at end of file
diff --git a/dist/editor/css/main.css b/dist/editor/css/main.css
index 326ca32..a494e7f 100644
--- a/dist/editor/css/main.css
+++ b/dist/editor/css/main.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}section#curriculumVitae,section#projects,section#settings{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer{display:flex;flex-direction:row;justify-content:center;align-items:baseline;gap:2em;margin-bottom:.5em}div.editorContainer>*{width:45%}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem{color:#fff;border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;position:relative;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em;background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}}
\ No newline at end of file
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;cursor:pointer}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}section#curriculumVitae,section#projects,section#settings{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}section#curriculumVitae{display:block}section#projects,section#settings{display:none}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem{color:#fff;border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;position:relative;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em;background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1em}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}#isMainProject{width:auto}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}}
\ No newline at end of file
diff --git a/dist/editor/editor.html b/dist/editor/editor.html
index 5c7095f..0bd0e88 100644
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE"></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE"></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade"></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle"></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW"></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company"></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area"></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle"></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE"></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE"></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade"></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle"></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW"></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company"></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area"></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle"></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject" required> <span class="checkmark"></span></label></div><div class="formControl"><label for="imgLoc">Image</label> <input type="file" name="imgLoc" id="imgLoc"></div><div class="formControl"><label for="projectLink">Project Link</label> <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/editor/js/editor.js b/dist/editor/js/editor.js
index 69639fc..9eac1b0 100644
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
@@ -1 +1 @@
-let dateOptions={month:"short",year:"numeric"};function edit(e){if(document.querySelector("#timelineItem"+e).classList.toggle("editing"),e.includes("e"))return document.querySelector("#grade"+e).toggleAttribute("disabled"),void document.querySelector("#course"+e).toggleAttribute("disabled");document.querySelector("#companyName"+e).toggleAttribute("disabled"),document.querySelector("#area"+e).toggleAttribute("disabled"),document.querySelector("#jobTitle"+e).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let d=e+"e",i=document.createElement("form");i.id="timelineItem"+d,i.classList.add("timelineItem"),i.onsubmit=t=>updateEduItem(e,t),i.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="edit('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${d}">Grade:</label>\n        <input type="text" name="grade${d}" id="grade${d}" value="${n}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${d}" id="course${d}" cols="10" rows="3" disabled>${r}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(i):document.getElementById("edu").appendChild(i)}function addWorkData(e,t,o,n,r,a,d=!1){let i=e+"w",l=document.createElement("form");l.id="timelineItem"+i,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="edit('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${i}" id="companyName${i}" value="${n}" disabled>\n        -\n        <input type="text" name="area${i}" id="area${i}" value="${r}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${i}" id="jobTitle${i}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,d?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))}))})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addEdu").reset()}401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))}));
\ No newline at end of file
+let dateOptions={month:"short",year:"numeric"};function edit(e){if(document.querySelector("#timelineItem"+e).classList.toggle("editing"),e.includes("e"))return document.querySelector("#grade"+e).toggleAttribute("disabled"),void document.querySelector("#course"+e).toggleAttribute("disabled");document.querySelector("#companyName"+e).toggleAttribute("disabled"),document.querySelector("#area"+e).toggleAttribute("disabled"),document.querySelector("#jobTitle"+e).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let d=e+"e",i=document.createElement("form");i.id="timelineItem"+d,i.classList.add("timelineItem"),i.onsubmit=t=>updateEduItem(e,t),i.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="edit('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${d}">Grade:</label>\n        <input type="text" name="grade${d}" id="grade${d}" value="${n}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${d}" id="course${d}" cols="10" rows="3" disabled>${r}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(i):document.getElementById("edu").appendChild(i)}function addWorkData(e,t,o,n,r,a,d=!1){let i=e+"w",l=document.createElement("form");l.id="timelineItem"+i,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="edit('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${i}" id="companyName${i}" value="${n}" disabled>\n        -\n        <input type="text" name="area${i}" id="area${i}" value="${r}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${i}" id="jobTitle${i}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,d?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function addProject(e,t,o){document.querySelector("#projList").innerHTML+=`\n        <div class="projItem">\n            <img src="../imgs/500x400.jpg" alt="">\n            <div class="flexCol">\n                <div>\n                    <p>${e}</p>\n                </div>\n                <div>\n                    <a href="${"N/A"===t?"#":t}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t?'disabled="disabled"':""}>View Project</a>\n                    <a href="${"N/A"===o?"#":o}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===o?'disabled="disabled"':""}Github</a>\n                </div>\n            </div>\n        </div>\n    `}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addEdu").reset()}401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.toggle("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.toggle("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.toggle("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.toggle("active")})),document.querySelector("#logout").addEventListener("click",(()=>{document.cookie="PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;",window.location.reload()}));
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
index ae15f45..aad966a 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -1 +1 @@
-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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.githubLink?'disabled="disabled"':""}>GitHub</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="imgs/500x400.jpg" alt="">\n                        <div class="flexCol">\n                            <div>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Github</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
+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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>GitHub</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="imgs/500x400.jpg" alt="">\n                        <div class="flexCol">\n                            <div>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Github</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
diff --git a/src/api/index.php b/src/api/index.php
index 4515f78..895708d 100644
--- a/src/api/index.php
+++ b/src/api/index.php
@@ -54,6 +54,8 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
         return $response;
     }
     
+    
+
     // something went wrong
     $response->getBody()->write(json_encode(array("errorMessage" => "Error, timeline data not found")));
     return $response->withStatus(404);
@@ -285,6 +287,7 @@ $app->post("/contact", function (Request $request, Response $response)
     {
       $response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
       return $response->withStatus(400);
+
     }
     
     if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL)) 
diff --git a/src/api/middleware.php b/src/api/middleware.php
index ece8897..2b9bc0d 100644
--- a/src/api/middleware.php
+++ b/src/api/middleware.php
@@ -2,9 +2,14 @@
 // middleware
 namespace api;
 
+use Psr\Http\Message\ServerRequestInterface;
+use Psr\Http\Server\RequestHandlerInterface;
 use Slim\App;
 use Selective\SameSiteCookie\SameSiteCookieConfiguration;
 use Selective\SameSiteCookie\SameSiteCookieMiddleware;
+use Slim\Exception\HttpMethodNotAllowedException;
+use Slim\Exception\HttpNotFoundException;
+use Slim\Psr7\Response;
 use Tuupola\Middleware\JwtAuthentication;
 use Tuupola\Middleware\JwtAuthentication\RequestMethodRule;
 use Tuupola\Middleware\JwtAuthentication\RequestPathRule;
@@ -24,6 +29,7 @@ class middleware
         $this->baseMiddleware($app);
         $this->sameSiteConfig($app);
         $this->jwtAuth($app);
+        $this->errorHandling($app);
         $this->returnAsJSON($app);
     }
 
@@ -86,7 +92,31 @@ class middleware
                 return $response->withStatus(401);
             }
         ]));
+    }
+
+    function errorHandling(App $app): void
+    {
+        $app->add(function (ServerRequestInterface $request, RequestHandlerInterface $handler)
+        {
+            try
+            {
+                return $handler->handle($request);
+            }
+            catch (HttpNotFoundException $httpException)
+            {
+                $response = (new Response())->withStatus(404);
+                $response->getBody()->write(json_encode(array("status" => "404", "message" => $request->getUri()->getPath() . " not found")));
+                return $response;
+            }
+            catch (HttpMethodNotAllowedException $httpException)
+            {
+                $response = (new Response())->withStatus(405);
+                $response->getBody()->write(json_encode(array("status" => "405", "message" => "Method not allowed")));
+                return $response;
+            }
+        });
         $app->addErrorMiddleware(true, true, true);
+
     }
     
 }
\ No newline at end of file
diff --git a/src/api/projectData.php b/src/api/projectData.php
index f4fef3c..285ad9c 100644
--- a/src/api/projectData.php
+++ b/src/api/projectData.php
@@ -17,7 +17,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, githubLink FROM projects order by date LIMIT 4;");
+        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects order by date LIMIT 4;");
         $stmt->execute();
 
         // set the resulting array to associative
diff --git a/src/css/templateStyles.css b/src/css/templateStyles.css
index 81fe07f..4abdf76 100644
--- a/src/css/templateStyles.css
+++ b/src/css/templateStyles.css
@@ -159,6 +159,10 @@ form .formControl input:not([type="submit"]) {
 
 form .formControl {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
 }
 
 form input[type="submit"] {
@@ -189,7 +193,8 @@ form .formControl input:not([type="submit"]).invalid:invalid:focus, form .formCo
     box-shadow: 0 4px 2px 0 var(--mutedBlack);
 }
 
-form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus {
+form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus,
+form .formControl input:not([type="submit"]):hover, form .formControl textarea:hover {
     border: 4px solid var(--primaryHover);
 }
 
@@ -208,6 +213,90 @@ form .formControl input:not([type="submit"]):focus + i.fa-eye-slash {
     color: var(--primaryHover);
 }
 
+form .formControl .checkContainer {
+    display: block;
+    position: relative;
+    margin-bottom: 1.25em;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+form .formControl .checkContainer input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+form .formControl .checkContainer .checkmark {
+    position: absolute;
+    top: 1.25em;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: var(--mutedGrey);
+}
+
+form .formControl .checkContainer:hover input ~ .checkmark {
+    background-color: var(--grey);
+}
+
+form .formControl .checkContainer input:checked ~ .checkmark {
+    background-color: var(--primaryDefault);
+}
+
+form .formControl .checkContainer input:checked:hover ~ .checkmark {
+    background-color: var(--primaryHover);
+}
+
+form .formControl .checkContainer .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+form .formControl .checkContainer input:checked ~ .checkmark:after {
+    display: block;
+}
+
+form .formControl .checkContainer .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+form .formControl input[type="file"] {
+    padding: 0;
+}
+
+form .formControl input[type="file"]::file-selector-button {
+    background-color: var(--primaryDefault);
+    border: 0;
+    border-right: 5px solid var(--mutedBlack);
+    padding: 15px;
+    margin-right: 20px;
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    -ms-transition: all .5s;
+    -o-transition: all .5s;
+    transition: all .5s;
+    cursor: pointer;
+}
+
+form .formControl input[type="file"]:hover::file-selector-button {
+    background-color: var(--primaryHover);
+}
+
 section#about, section#curriculumVitae h1 {
     padding: 0 5rem;
-}
+}
\ No newline at end of file
diff --git a/src/editor/css/editor.css b/src/editor/css/editor.css
index e2e1cd5..93a64c3 100644
--- a/src/editor/css/editor.css
+++ b/src/editor/css/editor.css
@@ -23,19 +23,27 @@ input[type="submit"] {
 	font-weight: 400;	
 }
 
-div.editorContainer {
+div.editorContainer, div.projectsGrid {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items: baseline;
+    align-items: flex-start;
     gap: 2em;
     margin-bottom: 0.5em;
 }
 
-div.editorContainer > * {
+div.editorContainer > *, div.projectsGrid > * {
     width: 45%;
 }
 
+section#curriculumVitae {
+    display: block;
+}
+
+section#projects, section#settings {
+    display: none;
+}
+
 div.modifyBtnContainer {
     display: flex;
     flex-direction: row;
@@ -147,3 +155,49 @@ section#curriculumVitae form.timelineItem:not(.editing) input[type=submit] {
 section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input {
     width: 30%;
 }
+
+section#projects #projList .projItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: 0 auto;
+    width: 90%;
+    border: 1px solid var(--grey);
+    gap: 1em;
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    padding: 1em;
+}
+
+section#projects #projList {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+}
+
+section#projects #projList .projItem img {
+    max-width: 15rem;
+    width: 100%;
+    padding: 0 1em;
+}
+
+section#projects .projItem .flexCol div:nth-child(2) {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 3em;
+    margin-left: 2em;
+}
+
+section#projects .flexCol div:nth-child(2) .btn {
+    padding: 0.25em 0.5em;
+}
+
+#isMainProject {
+    width: auto;
+}
diff --git a/src/editor/editor.html b/src/editor/editor.html
index 221fa05..28fa6bf 100644
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@@ -10,9 +10,10 @@
     <nav class="sideNav">
         <a href="#" class="closeBtn" id="navClose">&times;</a>
         <ul>
-            <li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
-            <li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li>
-            <li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li>
+            <li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
+            <li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
+            <li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
+            <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
         </ul>
     </nav>
     <main class="editor" style="margin-left: 250px;">
@@ -21,7 +22,7 @@
             
             <h1>Editor</h1>
         </div>
-        
+
         <section id="curriculumVitae">
             <h2>curriculum vitae</h2>
             <div class="cvGrid">
@@ -108,8 +109,40 @@
             </div>
             </div>
         </section>
-        
-        section#projects>h2{projects}+div.
+
+        <section id="projects">
+            <h2>projects</h2>
+            <div class="projectsGrid">
+                <form action="" id="addProj">
+                    <div class="formControl">
+                        <label for="projTitle">Title </label>
+                        <input type="text" name="projTitle" id="projTitle" required>
+                    </div>
+                    <div class="formControl">
+                        <label class="checkContainer" for="isMainProject">Is It The Main Project
+                            <input type="checkbox" id="isMainProject" name="isMainProject" required>
+                            <span class="checkmark"></span>
+                        </label>
+                    </div>
+                    <div class="formControl">
+                        <label for="imgLoc">Image</label>
+                        <input type="file" name="imgLoc" id="imgLoc">
+                    </div>
+                    <div class="formControl">
+                        <label for="projectLink">Project Link</label>
+                        <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)">
+                    </div>
+                    <div class="formControl">
+                        <label for="gitLink">Git Link</label>
+                        <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required>
+                    </div>
+                    <input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut">
+                </form>
+                <div id="projList">
+
+                </div>
+            </div>
+        </section>
     </main>
     
     <script src="js/editor.js"></script>
diff --git a/src/editor/js/editor.js b/src/editor/js/editor.js
index 89ea773..3ac5366 100644
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@@ -46,6 +46,22 @@ document.addEventListener('DOMContentLoaded', () =>
             document.querySelector("#edu").innerHTML = "No education data found";
         })
     });
+
+    fetch("/api/projectData").then(res =>
+    {
+        res.json().then(json =>
+        {
+            if (res.ok)
+            {
+                json.forEach(item =>
+                {
+                    addProject(item["information"], item["projectLink"], item["gitLink"]);
+                })
+                return;
+            }
+            document.querySelector("#projects").innerHTML = "No project data found";
+        })
+    })
 })
 
 document.querySelector("#navOpen").addEventListener("click", e =>
@@ -134,6 +150,28 @@ document.querySelector("#addWork").addEventListener("submit", e =>
     }));
 });
 
+document.querySelector("#goToCV").addEventListener("click", () =>
+{
+    document.querySelector("#curriculumVitae").style.display = "block";
+    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#projects").style.display = "none";
+    document.querySelector("#goToProjects").classList.toggle("active");
+});
+
+document.querySelector("#goToProjects").addEventListener("click", () =>
+{
+    document.querySelector("#curriculumVitae").style.display = "none";
+    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#projects").style.display = "block";
+    document.querySelector("#goToProjects").classList.toggle("active");
+});
+
+document.querySelector("#logout").addEventListener("click", () =>
+{
+    document.cookie = "PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+    window.location.reload();
+});
+
 
 /**
  * Switches the timeline item between edit and view mode
@@ -405,3 +443,22 @@ function deleteWorkItem(id)
 
     }); 
 }
+
+
+function addProject(information, projectLink, gitLink)
+{
+    document.querySelector("#projList").innerHTML += `
+        <div class="projItem">
+            <img src="../imgs/500x400.jpg" alt="">
+            <div class="flexCol">
+                <div>
+                    <p>${information}</p>
+                </div>
+                <div>
+                    <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
+                    <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
+                </div>
+            </div>
+        </div>
+    `;
+}
diff --git a/src/js/main.js b/src/js/main.js
index cbff7e6..a402f46 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -176,7 +176,7 @@ function getProjectData()
 								<p>${item["information"]}</p>
 								<div class="flexCol">
 									<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-									<a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
+									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
 								</div>
 							</div>
 						</div>
-- 
2.43.0


From db7c12857e511433067e5ae8ec006385dc612660 Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Fri, 3 Feb 2023 01:20:55 +0000
Subject: [PATCH 4/6] Added in ability to edit the project data item, although
 backend is not completed yet.

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 dist/css/main.css          |   2 +-
 dist/editor/css/main.css   |   2 +-
 dist/editor/editor.html    |   2 +-
 dist/editor/index.html     |   2 +-
 dist/editor/js/editor.js   |   2 +-
 dist/editor/js/main.js     |   1 -
 dist/js/main.js            |   2 +-
 src/css/projects.css       |   2 +-
 src/css/templateStyles.css |  26 +---
 src/editor/css/editor.css  |  60 ++++++--
 src/editor/editor.html     |  29 ++--
 src/editor/index.html      |   2 +-
 src/editor/js/editor.js    | 298 +++++++++++++++++++++++++++++--------
 src/editor/js/index.js     |  11 ++
 src/js/main.js             |   5 +-
 15 files changed, 326 insertions(+), 120 deletions(-)
 delete mode 100644 dist/editor/js/main.js

diff --git a/dist/css/main.css b/dist/css/main.css
index 9bce781..5ba3ca8 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;cursor:pointer}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack);z-index:1}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{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;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1em}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}}
\ No newline at end of file
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack);z-index:1}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{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;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:.75em 1em}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}}
\ No newline at end of file
diff --git a/dist/editor/css/main.css b/dist/editor/css/main.css
index a494e7f..1cf9a2e 100644
--- a/dist/editor/css/main.css
+++ b/dist/editor/css/main.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl{width:100%}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;cursor:pointer}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}section#curriculumVitae,section#projects,section#settings{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}section#curriculumVitae{display:block}section#projects,section#settings{display:none}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem{color:#fff;border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;position:relative;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em;background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1em}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}#isMainProject{width:auto}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}}
\ No newline at end of file
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}textarea{resize:none}section#curriculumVitae,section#projects,section#settings{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}section#projects{display:block}section#curriculumVitae,section#settings{display:none}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em;width:100%}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem,section#projects .projItem{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1rem;position:relative}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);color:#fff;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em}section#curriculumVitae .timelineItem.editing{background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack)}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .linkContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .linkContainer .btn{padding:.25em .5em}section#projects #isMainProject{width:auto}section#projects form.projItem.editing div.linkContainer,section#projects form.projItem.editing img.displayedImage,section#projects form.projItem:not(.editing) div.formControl.gitContainer,section#projects form.projItem:not(.editing) div.formControl.imageContainer,section#projects form.projItem:not(.editing) div.formControl.isMainProject,section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,section#projects form.projItem:not(.editing) input[type=submit]{display:none}section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{font-size:1.17em;font-weight:700}section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{color:#000}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}}
\ No newline at end of file
diff --git a/dist/editor/editor.html b/dist/editor/editor.html
index 0bd0e88..61eb7e1 100644
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE"></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE"></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade"></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle"></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW"></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company"></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area"></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle"></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject" required> <span class="checkmark"></span></label></div><div class="formControl"><label for="imgLoc">Image</label> <input type="file" name="imgLoc" id="imgLoc"></div><div class="formControl"><label for="projectLink">Project Link</label> <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject" required> <span class="checkmark"></span></label></div><div class="formControl"><label for="img">Image</label> <input type="file" name="img" id="img"></div><div class="formControl"><label for="projectInfo">Description</label> <textarea name="projectInfo" id="projectInfo"></textarea></div><div class="formControl"><label for="projectLink">Project Link</label> <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/editor/index.html b/dist/editor/index.html
index 7875ecf..55b4b5a 100644
--- a/dist/editor/index.html
+++ b/dist/editor/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><main class="login"><div id="login" class="container shown"><h1>Login To Editor</h1><form action="" method="POST"><div class="formControl"><label for="username">Username</label> <input type="text" id="username" name="username" required></div><div class="formControl"><label for="password">Password</label> <input type="password" id="password" name="password" required> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="loginError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" id="resetPwd">Reset Password</a></div></form></div><div id="resetPassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="#" method="POST"><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="error hidden" id="resetError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="loginBtn">Login</a></div></form></div><div id="checkResetCode" class="container" style="display: none; transform: translateX(150vw)"><h1>Check Reset Code</h1><form action="#" method="POST"><div class="formControl"><label for="code">Code</label> <input type="text" id="code" name="code"></div><div class="error hidden" id="resetCodeError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="resendEmail">Resend Email</a></div></form></div><div id="changePassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="" method="POST"><div class="formControl"><label for="pass">Password</label> <input type="password" name="pass" id="pass"> <i class="fa-solid fa-eye"></i></div><div class="formControl"><label for="rePass">Password</label> <input type="password" name="rePass" id="rePass"> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="changeError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut">Login</a></div></form></div></main><script src="js/index.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><main class="login"><div id="login" class="container shown"><h1>Login To Editor</h1><form action="" method="POST"><div class="formControl"><label for="username">Username</label> <input type="text" id="username" name="username" required></div><div class="formControl passwordControl"><label for="password">Password</label> <input type="password" id="password" name="password" required> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="loginError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" id="resetPwd">Reset Password</a></div></form></div><div id="resetPassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="#" method="POST"><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="error hidden" id="resetError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="loginBtn">Login</a></div></form></div><div id="checkResetCode" class="container" style="display: none; transform: translateX(150vw)"><h1>Check Reset Code</h1><form action="#" method="POST"><div class="formControl"><label for="code">Code</label> <input type="text" id="code" name="code"></div><div class="error hidden" id="resetCodeError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="resendEmail">Resend Email</a></div></form></div><div id="changePassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="" method="POST"><div class="formControl"><label for="pass">Password</label> <input type="password" name="pass" id="pass"> <i class="fa-solid fa-eye"></i></div><div class="formControl"><label for="rePass">Password</label> <input type="password" name="rePass" id="rePass"> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="changeError"><button class="close" type="button">&times;</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut">Login</a></div></form></div></main><script src="js/index.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/editor/js/editor.js b/dist/editor/js/editor.js
index 9eac1b0..9f0a78e 100644
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
@@ -1 +1 @@
-let dateOptions={month:"short",year:"numeric"};function edit(e){if(document.querySelector("#timelineItem"+e).classList.toggle("editing"),e.includes("e"))return document.querySelector("#grade"+e).toggleAttribute("disabled"),void document.querySelector("#course"+e).toggleAttribute("disabled");document.querySelector("#companyName"+e).toggleAttribute("disabled"),document.querySelector("#area"+e).toggleAttribute("disabled"),document.querySelector("#jobTitle"+e).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let d=e+"e",i=document.createElement("form");i.id="timelineItem"+d,i.classList.add("timelineItem"),i.onsubmit=t=>updateEduItem(e,t),i.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="edit('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${d}">Grade:</label>\n        <input type="text" name="grade${d}" id="grade${d}" value="${n}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${d}" id="course${d}" cols="10" rows="3" disabled>${r}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(i):document.getElementById("edu").appendChild(i)}function addWorkData(e,t,o,n,r,a,d=!1){let i=e+"w",l=document.createElement("form");l.id="timelineItem"+i,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="edit('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${i}" id="companyName${i}" value="${n}" disabled>\n        -\n        <input type="text" name="area${i}" id="area${i}" value="${r}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${i}" id="jobTitle${i}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,d?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function addProject(e,t,o){document.querySelector("#projList").innerHTML+=`\n        <div class="projItem">\n            <img src="../imgs/500x400.jpg" alt="">\n            <div class="flexCol">\n                <div>\n                    <p>${e}</p>\n                </div>\n                <div>\n                    <a href="${"N/A"===t?"#":t}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t?'disabled="disabled"':""}>View Project</a>\n                    <a href="${"N/A"===o?"#":o}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===o?'disabled="disabled"':""}Github</a>\n                </div>\n            </div>\n        </div>\n    `}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addEdu").reset()}401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.toggle("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.toggle("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.toggle("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.toggle("active")})),document.querySelector("#logout").addEventListener("click",(()=>{document.cookie="PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;",window.location.reload()}));
\ No newline at end of file
+let dateOptions={month:"short",year:"numeric"},textareaLoaded=!1;function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function editCVItem(e){if(textareaLoaded=!1,document.querySelector(`#timelineItem${e}`).classList.toggle("editing"),e.includes("e"))return document.querySelector(`#grade${e}`).toggleAttribute("disabled"),void document.querySelector(`#course${e}`).toggleAttribute("disabled");document.querySelector(`#companyName${e}`).toggleAttribute("disabled"),document.querySelector(`#area${e}`).toggleAttribute("disabled"),document.querySelector(`#jobTitle${e}`).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let i=e+"e",d=document.createElement("form");d.id="timelineItem"+i,d.classList.add("timelineItem"),d.onsubmit=t=>updateEduItem(e,t),d.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="editCVItem('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${i}">Grade:</label>\n        <input type="text" name="grade${i}" id="grade${i}" value="${n}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${r}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(d):document.getElementById("edu").appendChild(d)}function addWorkData(e,t,o,n,r,a,i=!1){let d=e+"w",l=document.createElement("form");l.id="timelineItem"+d,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="editCVItem('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${d}" id="companyName${d}" value="${n}" disabled>\n        -\n        <input type="text" name="area${d}" id="area${d}" value="${r}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${d}" id="jobTitle${d}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,i?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function updateProjectItem(e,t){t.preventDefault();let o={};o.title=document.querySelector(`#title${e}`).value,o.isMainProject=document.querySelector(`#isMainProject${e}`).checked,o.img=document.querySelector(`#img${e}`).files[0],o.information=document.querySelector(`#info${e}`).value,o.projectLink=document.querySelector(`#viewProj${e}`).value,o.gitLink=document.querySelector(`#git${e}`).value}function editProjectItem(e){document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).removeAttribute("disabled"),document.querySelector(`#info${e}`).removeAttribute("disabled")}function deleteProjectItem(e){}function addProject(e,t,o,n,r){let a=document.createElement("form");a.id="projectItem"+e,a.classList.add("projItem"),a.onsubmit=t=>updateProjectItem(e,t),a.innerHTML=`\n        <div class="modifyBtnContainer">\n            <button class="edit" type="button" id="edit${e}" onclick="editProjectItem(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n            <button class="delete" type="button" id="delete${e}" onclick="deleteProjectItem(${e})"><i class="fa-solid fa-trash"></i></button>\n        </div>\n        <img class="displayedImage" src="../imgs/500x400.jpg" alt="image preivew of the project">\n        <div class="formControl imageContainer">\n            <input type="file" name="img${e}" id="img${e}">\n        </div>\n        <div class="formControl projectTitleContainer">\n            <input type="text" name="title${e}" id="title${e}" value="${t}" disabled>\n        </div>\n        <div class="formControl isMainProject">\n            <label class="checkContainer" for="isMainProject${e}">Is It The Main Project\n                <input type="checkbox" id="isMainProject${e}" name="isMainProject${e}">\n                <span class="checkmark"></span>\n            </label>\n        </div> \n        <div class="formControl infoContainer">\n            <textarea name="info${e}" id="info${e}" disabled>${o}</textarea>\n        </div>\n        <div class="formControl viewProjContainer">\n            <input type="text" name="viewProj${e}" id="viewProj${e}" value="${n}">\n        </div>    \n        <div class="formControl gitContainer">\n            <input type="text" name="git${e}" id="git${e}" value="${r}">\n        </div>    \n        <div class="error hidden" id="projError${e}">\n            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n            <div></div>\n        </div>\n        <input type="submit" value="Change">\n        <div class="linkContainer">\n           <a href="${"N/A"===n?"#":n}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===n?'disabled="disabled"':""}>View Project</a>\n           <a href="${"N/A"===r?"#":r}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===r?'disabled="disabled"':""}Git</a>\n        </div>\n    `,document.querySelector("#projList").appendChild(a)}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.ID,e.title,e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("body").addEventListener("click",(()=>{if(textareaLoaded)return;const e=document.querySelectorAll("main.editor textarea");console.log(e);for(let t=0;t<e.length;t++)console.log("height: "+e[t].scrollHeight+"px"),e[t].setAttribute("style","height:"+e[t].scrollHeight+"px;overflow-y:hidden;"),e[t].oninput=e=>{e.target.style.height="0",e.target.style.height=e.target.scrollHeight+"px"};textareaLoaded=!0})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?showErrorMessage(o.error,"edu"):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addWork").reset()}401!==e.status?showErrorMessage(o.error,"work"):window.location.href="./"}))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.add("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.remove("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.remove("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.add("active")})),document.querySelector("#logout").addEventListener("click",(()=>{fetch("/api/user/logout").then((e=>{e.ok&&(localStorage.removeItem("token"),window.location.reload())}))})),document.querySelector("#eduError .close").addEventListener("click",(()=>document.querySelector("#eduError").classList.toggle("hidden"))),document.querySelector("#workError .close").addEventListener("click",(()=>document.querySelector("#workError").classList.toggle("hidden")));
\ No newline at end of file
diff --git a/dist/editor/js/main.js b/dist/editor/js/main.js
deleted file mode 100644
index 9f37fa5..0000000
--- a/dist/editor/js/main.js
+++ /dev/null
@@ -1 +0,0 @@
-function showErrorMessage(e){document.querySelector("#loginError").classList.remove("hidden"),document.querySelector("#loginError div").innerText=e}document.addEventListener("DOMContentLoaded",(e=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok&&(window.location.href="./editor.html")}))})),document.querySelector("#login form").addEventListener("submit",(e=>{e.preventDefault();let r=new FormData;if(e.target.username.value.length>0&&e.target.password.value.length>0)return r.append("username",e.target.username.value),r.append("password",e.target.password.value),void fetch("/api/user/login",{method:"POST",body:r}).then((e=>{e.ok?window.location.href="./editor.html":400!==e.status?(document.querySelector("#loginError").classList.remove("hidden"),document.querySelector("#loginError div").innerHTML="Invalid username or password"):showErrorMessage("Please type in a username and password.")}));document.querySelector("#loginError").classList.remove("hidden"),document.querySelector("#loginError div").innerHTML="Please type in a username and password"})),document.querySelector("#loginError .close").addEventListener("click",(()=>document.querySelector("#loginError").classList.toggle("hidden")));
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
index aad966a..7e2797d 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -1 +1 @@
-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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>GitHub</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="imgs/500x400.jpg" alt="">\n                        <div class="flexCol">\n                            <div>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Github</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
+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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>Git</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="imgs/500x400.jpg" alt="">\n                        <div class="flexCol">\n                            <div>\n                            \t<h3>${t.title}</h3>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Git</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
diff --git a/src/css/projects.css b/src/css/projects.css
index 32c0161..161cafe 100644
--- a/src/css/projects.css
+++ b/src/css/projects.css
@@ -69,7 +69,7 @@ section#projects .otherProj > div .oProjItem {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
-    padding: 0 1em;
+    padding: 0.75em 1em;
 }
 
 section#projects .otherProj > div .oProjItem:nth-child(2) {
diff --git a/src/css/templateStyles.css b/src/css/templateStyles.css
index 4abdf76..10da737 100644
--- a/src/css/templateStyles.css
+++ b/src/css/templateStyles.css
@@ -121,25 +121,6 @@ a.btn:active, form input[type="submit"]:active {
     text-shadow: 0 6px 4px var(--mutedBlack);
 }
 
-form .formControl {
-    width: 100%;
-}
-
-form .formControl input:not([type="submit"]), form .formControl textarea {
-    width: 100%;
-    border: 4px solid var(--primaryDefault);
-    background: none;
-    outline: none;
-    -webkit-border-radius: 1em;
-    -moz-border-radius: 1em;
-    border-radius: 0.5em;
-    padding: 0 0.5em;
-}
-
-form .formControl textarea {
-    padding: 0.5em;
-}
-
 form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
     border: 4px solid var(--errorDefault);
 }
@@ -165,6 +146,10 @@ form .formControl {
     align-items: flex-start;
 }
 
+form .formControl.passwordControl {
+    display: block;
+}
+
 form input[type="submit"] {
     align-self: flex-start;
 }
@@ -277,10 +262,12 @@ form .formControl .checkContainer .checkmark:after {
 
 form .formControl input[type="file"] {
     padding: 0;
+    cursor: pointer;
 }
 
 form .formControl input[type="file"]::file-selector-button {
     background-color: var(--primaryDefault);
+    color: #FFFFFF;
     border: 0;
     border-right: 5px solid var(--mutedBlack);
     padding: 15px;
@@ -290,7 +277,6 @@ form .formControl input[type="file"]::file-selector-button {
     -ms-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
-    cursor: pointer;
 }
 
 form .formControl input[type="file"]:hover::file-selector-button {
diff --git a/src/editor/css/editor.css b/src/editor/css/editor.css
index 93a64c3..e8404cf 100644
--- a/src/editor/css/editor.css
+++ b/src/editor/css/editor.css
@@ -1,5 +1,9 @@
 /*** Main editor styles ***/
 
+textarea {
+    resize: none;
+}
+
 section#curriculumVitae, section#projects, section#settings {
     margin: 0 2em;
 }
@@ -36,11 +40,11 @@ div.editorContainer > *, div.projectsGrid > * {
     width: 45%;
 }
 
-section#curriculumVitae {
+section#projects {
     display: block;
 }
 
-section#projects, section#settings {
+section#curriculumVitae, section#settings {
     display: none;
 }
 
@@ -50,6 +54,7 @@ div.modifyBtnContainer {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.5em;
+    width: 100%;
 }
 
 div.dateContainer, div.companyAreaContainer {
@@ -70,14 +75,17 @@ section#curriculumVitae .timeline {
     height: 100%;
 }
 
-section#curriculumVitae .timelineItem {
-    color: #FFFFFF;
-    border: 2px solid var(--timelineItemBrdr);
+section#curriculumVitae .timelineItem, section#projects .projItem {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
-    padding: 0 1rem;
+    padding: 1rem;
     position: relative;
+}
+
+section#curriculumVitae .timelineItem {
+    border: 2px solid var(--timelineItemBrdr);
+    color: #FFFFFF;
     background-color: var(--primaryHover);
 }
 
@@ -85,6 +93,9 @@ section#curriculumVitae .timelineItem.editing {
     color: #000000;
     border: 5px solid var(--primaryDefault);
     padding: 0.5em;
+}
+
+section#curriculumVitae .timelineItem.editing {
     background-color: #FFFFFF;
 }
 
@@ -117,12 +128,15 @@ section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,
 section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,
 section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,
-section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText {
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input,
+section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea {
     outline: none;
     border: none;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
+    resize: none;
 }
 
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl > *,
@@ -166,10 +180,6 @@ section#projects #projList .projItem {
     border: 1px solid var(--grey);
     gap: 1em;
     box-shadow: 0 6px 4px 0 var(--mutedBlack);
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    padding: 1em;
 }
 
 section#projects #projList {
@@ -186,7 +196,7 @@ section#projects #projList .projItem img {
     padding: 0 1em;
 }
 
-section#projects .projItem .flexCol div:nth-child(2) {
+section#projects .projItem .linkContainer {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -194,10 +204,32 @@ section#projects .projItem .flexCol div:nth-child(2) {
     margin-left: 2em;
 }
 
-section#projects .flexCol div:nth-child(2) .btn {
+section#projects .linkContainer .btn {
     padding: 0.25em 0.5em;
 }
 
-#isMainProject {
+section#projects #isMainProject {
     width: auto;
 }
+
+section#projects form.projItem:not(.editing) div.formControl.imageContainer,
+section#projects form.projItem:not(.editing) div.formControl.isMainProject,
+section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,
+section#projects form.projItem:not(.editing) div.formControl.gitContainer,
+section#projects form.projItem:not(.editing) input[type="submit"],
+section#projects form.projItem.editing img.displayedImage,
+section#projects form.projItem.editing div.linkContainer {
+    display: none;
+}
+
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input {
+    font-size: 1.17em;
+    /*margin: 1em 0;*/
+    font-weight: bold;
+}
+
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input,
+section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea{
+    color: #000000;
+}
+
diff --git a/src/editor/editor.html b/src/editor/editor.html
index 28fa6bf..478ec97 100644
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Editor</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css">
     <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
 </head>
@@ -10,8 +11,8 @@
     <nav class="sideNav">
         <a href="#" class="closeBtn" id="navClose">&times;</a>
         <ul>
-            <li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
-            <li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
+            <li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
+            <li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
             <li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
             <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
         </ul>
@@ -33,22 +34,22 @@
                         <form action="" method="POST" id="addEdu">
                             <div class="formControl">
                                 <label for="dateFromE">Date From</label>
-                                <input type="date" id="dateFromE" name="dateFromE">
+                                <input type="date" id="dateFromE" name="dateFromE" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="dateToE">Date To</label>
-                                <input type="date" id="dateToE" name="dateToE">
+                                <input type="date" id="dateToE" name="dateToE" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="grade">Grade</label>
-                                <input type="text" id="grade" name="grade">
+                                <input type="text" id="grade" name="grade" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="courseTitle">Course Title</label>
-                                <input type="text" id="courseTitle" name="courseTitle">
+                                <input type="text" id="courseTitle" name="courseTitle" required>
                             </div>
 
                             <div class="error hidden" id="eduError">
@@ -71,7 +72,7 @@
                         <form action="" method="POST" id="addWork">
                             <div class="formControl">
                                 <label for="dateFromW">Date From</label>
-                                <input type="date" id="dateFromW" name="dateFromW">
+                                <input type="date" id="dateFromW" name="dateFromW" required>
                             </div>
 
                             <div class="formControl">
@@ -81,17 +82,17 @@
 
                             <div class="formControl">
                                 <label for="company">Company</label>
-                                <input type="text" id="company" name="company">
+                                <input type="text" id="company" name="company" required>
                             </div>
                             
                             <div class="formControl">
                                 <label for="area">Area</label>
-                                <input type="text" id="area" name="area">
+                                <input type="text" id="area" name="area" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="jobTitle">Job Title</label>
-                                <input type="text" id="jobTitle" name="jobTitle">
+                                <input type="text" id="jobTitle" name="jobTitle" required>
                             </div>
 
                             <div class="error hidden" id="workError">
@@ -125,8 +126,12 @@
                         </label>
                     </div>
                     <div class="formControl">
-                        <label for="imgLoc">Image</label>
-                        <input type="file" name="imgLoc" id="imgLoc">
+                        <label for="img">Image</label>
+                        <input type="file" name="img" id="img">
+                    </div>
+                    <div class="formControl">
+                        <label for="projectInfo">Description</label>
+                        <textarea name="projectInfo" id="projectInfo"></textarea>
                     </div>
                     <div class="formControl">
                         <label for="projectLink">Project Link</label>
diff --git a/src/editor/index.html b/src/editor/index.html
index 890a534..dbd1fe1 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -18,7 +18,7 @@
                 <input type="text" id="username" name="username" required>
             </div>
 
-            <div class="formControl">
+            <div class="formControl passwordControl">
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" required>
                 <i class="fa-solid fa-eye"></i>
diff --git a/src/editor/js/editor.js b/src/editor/js/editor.js
index 3ac5366..bf85aa6 100644
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@@ -1,15 +1,16 @@
 let dateOptions = {month: 'short', year: 'numeric'};
+let textareaLoaded = false;
 
 document.addEventListener('DOMContentLoaded', () =>
 {
     // check if the user is logged in, if not redirect to log in
-        fetch('/api/user/isLoggedIn').then(res => 
+    fetch('/api/user/isLoggedIn').then(res =>
+    {
+        if (!res.ok)
         {
-            if (!res.ok)
-            {
-                window.location.href = './';
-            }
-        });
+            window.location.href = './';
+        }
+    });
     document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
     document.querySelector("#dateFromW").max = new Date().toISOString().split("T")[0];
 
@@ -55,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 json.forEach(item =>
                 {
-                    addProject(item["information"], item["projectLink"], item["gitLink"]);
+                    addProject(item["ID"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
                 })
                 return;
             }
@@ -64,6 +65,28 @@ document.addEventListener('DOMContentLoaded', () =>
     })
 })
 
+document.querySelector("body").addEventListener("click", () =>
+{
+    if (textareaLoaded)
+    {
+        return;
+    }
+
+    const tx = document.querySelectorAll("main.editor textarea");
+    console.log(tx)
+    for (let i = 0; i < tx.length; i++)
+    {
+        console.log("height: " + tx[i].scrollHeight + "px");
+        tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
+        tx[i].oninput = e =>
+        {
+            e.target.style.height = "0";
+            e.target.style.height = (e.target.scrollHeight) + "px";
+        };
+    }
+    textareaLoaded = true;
+});
+
 document.querySelector("#navOpen").addEventListener("click", e =>
 {
     document.querySelector("nav.sideNav").style.removeProperty("width");
@@ -108,8 +131,7 @@ document.querySelector("#addEdu").addEventListener("submit", e =>
             return;
         }
 
-        document.querySelector("#eduError").classList.remove("hidden");
-        document.querySelector("#eduError div").innerHTML = json.error;
+        showErrorMessage(json.error, "edu");
     }));
 });
 
@@ -135,7 +157,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
         {
             let endPeriod = data.get("dateTo") === null ? "Present" : data.get("dateTo ");
             addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
-            document.querySelector("#addEdu").reset();
+            document.querySelector("#addWork").reset();
             return;
         }
 
@@ -144,63 +166,87 @@ document.querySelector("#addWork").addEventListener("submit", e =>
             window.location.href = "./";
             return;
         }
-
-        document.querySelector("#eduError").classList.remove("hidden");
-        document.querySelector("#eduError div").innerHTML = json.error;
+        showErrorMessage(json.error, "work");
     }));
 });
 
+
 document.querySelector("#goToCV").addEventListener("click", () =>
 {
+    textareaLoaded = false;
     document.querySelector("#curriculumVitae").style.display = "block";
-    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#goToCV").classList.add("active");
     document.querySelector("#projects").style.display = "none";
-    document.querySelector("#goToProjects").classList.toggle("active");
+    document.querySelector("#goToProjects").classList.remove("active");
 });
 
 document.querySelector("#goToProjects").addEventListener("click", () =>
 {
+    textareaLoaded = false;
     document.querySelector("#curriculumVitae").style.display = "none";
-    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#goToCV").classList.remove("active");
     document.querySelector("#projects").style.display = "block";
-    document.querySelector("#goToProjects").classList.toggle("active");
+    document.querySelector("#goToProjects").classList.add("active");
 });
 
 document.querySelector("#logout").addEventListener("click", () =>
 {
-    document.cookie = "PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
-    window.location.reload();
+    fetch("/api/user/logout").then(res =>
+    {
+        if (res.ok)
+        {
+            localStorage.removeItem("token");
+            window.location.reload();
+        }
+    });
 });
 
+document.querySelector("#eduError .close").addEventListener("click", () =>
+    document.querySelector("#eduError").classList.toggle("hidden"));
+
+document.querySelector("#workError .close").addEventListener("click", () =>
+    document.querySelector("#workError").classList.toggle("hidden"));
+
+/**
+ * Shows respective error message for form
+ * @param {string} message The error message to show
+ * @param {string} form The form to show the error message for
+ */
+function showErrorMessage(message, form)
+{
+    document.querySelector(`#${form}Error`).classList.remove("hidden");
+    document.querySelector(`#${form}Error div`).innerText = message;
+}
 
 /**
  * Switches the timeline item between edit and view mode
- * @param id the id of the timeline item
+ * @param id the id of the timeline item from the database
  */
-function edit(id)
+function editCVItem(id)
 {
-    document.querySelector("#timelineItem" + id).classList.toggle("editing");
+    textareaLoaded = false;
+    document.querySelector(`#timelineItem${id}`).classList.toggle("editing");
     if (id.includes("e"))
     {
-        document.querySelector("#grade" + id).toggleAttribute("disabled");
-        document.querySelector("#course" + id).toggleAttribute("disabled");
+        document.querySelector(`#grade${id}`).toggleAttribute("disabled");
+        document.querySelector(`#course${id}`).toggleAttribute("disabled");
         return;
     }
-    document.querySelector("#companyName" + id).toggleAttribute("disabled");
-    document.querySelector("#area" + id).toggleAttribute("disabled");
-    document.querySelector("#jobTitle" + id).toggleAttribute("disabled");
+    document.querySelector(`#companyName${id}`).toggleAttribute("disabled");
+    document.querySelector(`#area${id}`).toggleAttribute("disabled");
+    document.querySelector(`#jobTitle${id}`).toggleAttribute("disabled");
 }
 
 /**
  * Updates the education timeline item with the given id
- * @param ID - the id of the course timeline item
- * @param startPeriod - the start date of the course
- * @param endPeriod - the end date of the course
- * @param grade - the grade of the course
- * @param course - the name of the course
- * @param prepend - whether to prepend the timeline item to the timeline
+ * @param {number} ID - the id of the course timeline item from the database
+ * @param {string} startPeriod - the start date of the course
+ * @param {string} endPeriod - the end date of the course
+ * @param {string} grade - the grade of the course
+ * @param {string} course - the name of the course
+ * @param {boolean} prepend - whether to prepend the timeline item to the timeline
  */
-function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false) 
+function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
 {
     let id = ID + "e";
     let timelineItem = document.createElement("form")
@@ -209,7 +255,7 @@ function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
     timelineItem.onsubmit = e => updateEduItem(ID, e);
     timelineItem.innerHTML = `
     <div class="modifyBtnContainer">
-        <button class="edit" type="button" id="edit${id}" onclick="edit('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
+        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
         <button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${ID})"><i class="fa-solid fa-trash"></i></button>
     </div>
     <div class="dateContainer formControl">
@@ -242,13 +288,13 @@ function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
 
 /**
  * Adds a new work timeline item to the page
- * @param ID - the id of the work timeline item
- * @param startPeriod - the start date of the job
- * @param endPeriod - the end date of the job
- * @param companyName - the name of the company
- * @param area - the area of the company
- * @param jobTitle - the job title
- * @param prepend - whether to prepend the timeline item to the timeline
+ * @param {number} ID - the id of the work timeline item from the database
+ * @param {string} startPeriod - the start date of the job
+ * @param {string} endPeriod - the end date of the job
+ * @param {string} companyName - the name of the company
+ * @param {string} area - the area of the company
+ * @param {string} jobTitle - the job title
+ * @param {boolean} prepend - whether to prepend the timeline item to the timeline
  */
 function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, prepend=false)
 {
@@ -259,7 +305,7 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
     timelineItem.onsubmit = e => updateWorkItem(ID, e);
     timelineItem.innerHTML = `
     <div class="modifyBtnContainer">
-        <button class="edit" type="button" id="edit${id}" onclick="edit('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
+        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
         <button class="delete" type="button" id="delete${id}" onclick="deleteWorkItem(${ID})"><i class="fa-solid fa-trash"></i></button>
     </div>
     <div class="dateContainer formControl">
@@ -294,8 +340,9 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
 
 /**
  * Updates the edu timeline item with the given id
- * @param id the id of the edu timeline item
- * @param e the event that triggered the function
+ * and data from the form
+ * @param {number} id the id of the edu timeline item from the database
+ * @param {SubmitEvent} e the event that triggered the function
  */
 function updateEduItem(id, e)
 {
@@ -341,8 +388,9 @@ function updateEduItem(id, e)
 
 /**
  * Updates the work timeline item with the given id
- * @param id the id of the work timeline item
- * @param e the event that triggered the function
+ * and data from the form
+ * @param {number} id the id of the work timeline item from the database
+ * @param {SubmitEvent} e the event that triggered the function
  */
 function updateWorkItem(id, e)
 {
@@ -389,7 +437,7 @@ function updateWorkItem(id, e)
 
 /**
  * Deletes the timeline item with the given id
- * @param id the id of the timeline item
+ * @param {number} id the id of the timeline item
  */
 function deleteEduItem(id)
 {
@@ -417,7 +465,7 @@ function deleteEduItem(id)
 
 /**
  * Updates the timeline item with the given id
- * @param id the id of the timeline item
+ * @param {number} id the id of the timeline item from the database
  */
 function deleteWorkItem(id)
 {
@@ -444,21 +492,145 @@ function deleteWorkItem(id)
     }); 
 }
 
-
-function addProject(information, projectLink, gitLink)
+/**
+ * Updates the project item with the given id
+ * and data from the form
+ * @param {number} id the id from the database
+ * @param {SubmitEvent} e the event of the form that was submitted
+ */
+function updateProjectItem(id, e)
 {
-    document.querySelector("#projList").innerHTML += `
-        <div class="projItem">
-            <img src="../imgs/500x400.jpg" alt="">
-            <div class="flexCol">
-                <div>
-                    <p>${information}</p>
-                </div>
-                <div>
-                    <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-                    <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
-                </div>
-            </div>
+    e.preventDefault();
+    let data = {}
+    data["title"] = document.querySelector(`#title${id}`).value;
+    data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked;
+    data["img"] = document.querySelector(`#img${id}`).files[0];
+    data["information"] = document.querySelector(`#info${id}`).value;
+    data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
+    data["gitLink"] = document.querySelector(`#git${id}`).value;
+
+    fetch("/api/projectData/" + id, {
+        method: "PATCH",
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res =>
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#projectItem${id}`).classList.toggle("editing");
+            document.querySelector(`#title${id}`).setAttribute("disabled", "");
+            document.querySelector(`#info${id}`).setAttribute("disabled", "");
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        res.json().then(json =>
+        {
+            document.querySelector(`#projectError${id}`).classList.remove("hidden");
+            document.querySelector(`#projectError${id} div`).innerHTML = json.error;
+        });
+    });
+
+}
+
+/**
+ * Toggles the editing mode of the project item with the given id
+ * @param id {number} the id of the project item from the database
+ */
+function editProjectItem(id)
+{
+    document.querySelector(`#projectItem${id}`).classList.toggle("editing");
+    document.querySelector(`#title${id}`).removeAttribute("disabled");
+    document.querySelector(`#info${id}`).removeAttribute("disabled");
+}
+
+/**
+ * Deletes the project item with the given id
+ * @param id {number} the id of the project item from the database
+ */
+function deleteProjectItem(id)
+{
+    fetch("/api/projectData/" + id, {
+        method: "DELETE",
+        headers: {
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res =>
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#projectItem${id}`).remove();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        res.json().then(json => alert(json.error));
+    });
+}
+
+/**
+ * Adds a new project to the page
+ * @param {number} id the id of the project from the database
+ * @param {string} title the title of the project
+ * @param {string} information the information about the project
+ * @param {string} projectLink the link to the project
+ * @param {string} gitLink the link to the git repository
+ */
+function addProject(id, title, information, projectLink, gitLink)
+{
+    let projectItem = document.createElement("form");
+    projectItem.id = "projectItem" + id;
+    projectItem.classList.add("projItem");
+    projectItem.onsubmit = e => updateProjectItem(id, e);
+    projectItem.innerHTML = `
+        <div class="modifyBtnContainer">
+            <button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
+            <button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${id})"><i class="fa-solid fa-trash"></i></button>
+        </div>
+        <img class="displayedImage" src="../imgs/500x400.jpg" alt="image preivew of the project">
+        <div class="formControl imageContainer">
+            <input type="file" name="img${id}" id="img${id}">
+        </div>
+        <div class="formControl projectTitleContainer">
+            <input type="text" name="title${id}" id="title${id}" value="${title}" disabled>
+        </div>
+        <div class="formControl isMainProject">
+            <label class="checkContainer" for="isMainProject${id}">Is It The Main Project
+                <input type="checkbox" id="isMainProject${id}" name="isMainProject${id}">
+                <span class="checkmark"></span>
+            </label>
+        </div> 
+        <div class="formControl infoContainer">
+            <textarea name="info${id}" id="info${id}" disabled>${information}</textarea>
+        </div>
+        <div class="formControl viewProjContainer">
+            <input type="text" name="viewProj${id}" id="viewProj${id}" value="${projectLink}">
+        </div>    
+        <div class="formControl gitContainer">
+            <input type="text" name="git${id}" id="git${id}" value="${gitLink}">
+        </div>    
+        <div class="error hidden" id="projError${id}">
+            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
+            <div></div>
+        </div>
+        <input type="submit" value="Change">
+        <div class="linkContainer">
+           <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
+           <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
         </div>
     `;
+    document.querySelector("#projList").appendChild(projectItem);
 }
diff --git a/src/editor/js/index.js b/src/editor/js/index.js
index 3397855..6c6ff5f 100644
--- a/src/editor/js/index.js
+++ b/src/editor/js/index.js
@@ -11,12 +11,23 @@ document.addEventListener("DOMContentLoaded", _ =>
     });
 });
 
+/**
+ * Shows respective error message for form
+ * @param {string} message The error message to show
+ * @param {string} form The form to show the error message for
+ */
 function showErrorMessage(message, form) 
 {
     document.querySelector(`#${form}Error`).classList.remove("hidden");
     document.querySelector(`#${form}Error div`).innerText = message;
 }
 
+
+/**
+ * Switches between the different forms
+ * @param {string} from The css selector of form to switch from
+ * @param {string} to The css selector of form to switch to
+ */
 function switchView(from, to)
 {
     document.querySelector(from).classList.toggle("shown");
diff --git a/src/js/main.js b/src/js/main.js
index a402f46..1f7d899 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -176,7 +176,7 @@ function getProjectData()
 								<p>${item["information"]}</p>
 								<div class="flexCol">
 									<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
+									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
 								</div>
 							</div>
 						</div>
@@ -189,11 +189,12 @@ function getProjectData()
                         <img src="imgs/500x400.jpg" alt="">
                         <div class="flexCol">
                             <div>
+                            	<h3>${item["title"]}</h3>
                                 <p>${item["information"]}</p>
                             </div>
                             <div>
                                 <a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-                                <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
+                                <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
                             </div>
                         </div>
                     </div>
-- 
2.43.0


From fd64eb92b06ca62c32b710e34e972435b5200718 Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Mon, 6 Feb 2023 01:26:35 +0000
Subject: [PATCH 5/6] Added in ability to add a new project with and without an
 image

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 dist/api/index.php       |  43 ++++++++++--
 dist/api/middleware.php  |  11 ++-
 dist/api/projectData.php | 143 +++++++++++++++++++++++++++++++--------
 dist/editor/editor.html  |   2 +-
 dist/editor/js/editor.js |   2 +-
 src/api/index.php        |  43 ++++++++++--
 src/api/middleware.php   |  11 ++-
 src/api/projectData.php  | 143 +++++++++++++++++++++++++++++++--------
 src/editor/editor.html   |  18 +++--
 src/editor/js/editor.js  |  88 +++++++++++++++++++++---
 10 files changed, 413 insertions(+), 91 deletions(-)

diff --git a/dist/api/index.php b/dist/api/index.php
index 895708d..8219ffa 100644
--- a/dist/api/index.php
+++ b/dist/api/index.php
@@ -1,6 +1,5 @@
 <?php /** @noinspection PhpIncludeInspection */
 
-session_start();
 ////////////////// Index file //////////////
 /// Creates base routes and runs         ///
 /// respective functions                 ///
@@ -216,16 +215,17 @@ $app->get("/projectData", function (Request $request, Response $response)
 $app->patch("/projectData/{id}", function (Request $request, Response $response, array $args)
 {
     global $projectData;
-    if (empty($args["id"] != "undefined"))
+    $data = $request->getParsedBody();
+    if ($args["id"] != "undefined")
     {
-        if (empty($args["title"]) || empty($args["isMainProject"]) || empty($args["information"]) || empty($args["projectLink"]) || empty($args["githubLink"]))
+        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
         {
             // uh oh sent some empty data
             $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["title"], $args["isMainProject"], $args["information"], $args["projectLink"], $args["githubLink"], $args["id"]))
+        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], "", $data["projectLink"], $data["gitLink"]))
         {
             // uh oh something went wrong
             $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
@@ -261,14 +261,14 @@ $app->post("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
     $data = $request->getParsedBody();
-    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["githubLink"]))
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
     {
         // uh oh sent some empty data
         $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
         return $response->withStatus(400);
     }
 
-    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["githubLink"]);
+    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
     if (!is_int($insertedID))
     {
         // uh oh something went wrong
@@ -280,6 +280,29 @@ $app->post("/projectData", function (Request $request, Response $response)
     return $response;
 });
 
+$app->post("/projectImage/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    $files = $request->getUploadedFiles();
+    if (empty($args["id"]) || empty($files))
+    {
+        // uh oh only some of the data was sent
+        $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+        return $response->withStatus(400);
+    }
+
+    $message = $projectData->uploadImage($args["id"], $files["img"]);
+    if (!is_array($message))
+    {
+        // uh oh something went wrong
+        $response->getBody()->write(json_encode(array("error" => $message)));
+        return $response->withStatus(500);
+    }
+
+    $response->getBody()->write(json_encode($message));
+    return $response;
+});
+
 $app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
@@ -479,6 +502,12 @@ $app->post("/user/login", function (Request $request, Response $response)
     return $response->withStatus(401);
 });
 
+$app->get("/user/logout", function (Request $request, Response $response)
+{
+    session_unset();
+    return $response;
+});
+
 $app->get("/user/isLoggedIn", function (Request $request, Response $response) 
 {
     global $user;
@@ -498,7 +527,7 @@ $app->get("/user/isLoggedIn", function (Request $request, Response $response)
 
     $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
     return $response;
-    
+
 });
 
 $app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args)
diff --git a/dist/api/middleware.php b/dist/api/middleware.php
index 2b9bc0d..be8f9b5 100644
--- a/dist/api/middleware.php
+++ b/dist/api/middleware.php
@@ -2,11 +2,14 @@
 // middleware
 namespace api;
 
+session_start();
+
 use Psr\Http\Message\ServerRequestInterface;
 use Psr\Http\Server\RequestHandlerInterface;
 use Slim\App;
 use Selective\SameSiteCookie\SameSiteCookieConfiguration;
 use Selective\SameSiteCookie\SameSiteCookieMiddleware;
+use Slim\Exception\HttpInternalServerErrorException;
 use Slim\Exception\HttpMethodNotAllowedException;
 use Slim\Exception\HttpNotFoundException;
 use Slim\Psr7\Response;
@@ -76,7 +79,7 @@ class middleware
         $app->add(new JwtAuthentication([
             "rules" => [
                 new RequestPathRule([
-                    "path" => ["/api/projectData", "/api/timeline/[a-z]*", "/api/user/testMethod"],
+                    "path" => ["/api/projectData", "/api/timeline/[a-z]*", "/api/logout"],
                     "ignore" => ["/api/contact", "/api/user/login", "/api/user/changePassword"]
                 ]),
                 new RequestMethodRule([
@@ -114,6 +117,12 @@ class middleware
                 $response->getBody()->write(json_encode(array("status" => "405", "message" => "Method not allowed")));
                 return $response;
             }
+            catch (HttpInternalServerErrorException $exception)
+            {
+                $response = (new Response())->withStatus(500);
+                $response->getBody()->write(json_encode(array("status" => "500", "message" => $exception->getMessage())));
+                return $response;
+            }
         });
         $app->addErrorMiddleware(true, true, true);
 
diff --git a/dist/api/projectData.php b/dist/api/projectData.php
index 285ad9c..d72e614 100644
--- a/dist/api/projectData.php
+++ b/dist/api/projectData.php
@@ -1,6 +1,7 @@
 <?php
 namespace api;
 use PDO;
+use Psr\Http\Message\UploadedFileInterface;
 
 require_once "./config.php";
 
@@ -17,7 +18,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects order by date LIMIT 4;");
+        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -27,57 +28,141 @@ class projectData
         {
             return $result;
         }
+
         return array("errorMessage" => "Error, project data not found");
     }
 
-    function updateProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink, string $id): bool
+
+    /**
+     * Update project data in the database with the given ID
+     * @param string $ID - ID of the project in the database to update
+     * @param string $title - Title of the project
+     * @param bool $isMainProject - Is the project a main project or not
+     * @param string $information - Information about the project
+     * @param string $imgLocation - Location of the image
+     * @param string $projectLink - Link to the project
+     * @param string $gitLink - Link to the github repository
+     * @return bool - True if project was updated, false if not and there was an error
+     */
+    function updateProjectData(string $ID, string $title, bool $isMainProject, string $information, string $imgLocation, string $projectLink, string $gitLink): bool
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, githubLink = :githubLink WHERE ID = :id");
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, imgLocation = :imgLocation, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":imgLocation", $imgLocation);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":gitLink", $gitLink);
+        $stmt->bindParam(":ID", $ID);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Delete project data from the database
+     * @param int $ID - ID of the project in the database to delete
+     * @return bool - True if project was deleted, false if not and there was an error
+     */
+    function deleteProjectData(int $ID): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :ID");
+        $stmt->bindParam(":ID", $ID);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Add project data to the database
+     * @param string $title - Title of the project
+     * @param string $isMainProject - Is the project a main project or not
+     * @param string $information - Information about the project
+     * @param string $projectLink - Link to the project
+     * @param string $gitLink - Link to the github repository
+     * @return int|bool - ID of the project if it was added, false if not and there was an error
+     */
+    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): int|bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
         $stmt->bindParam(":isMainProject", $isMainProject);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
-        $stmt->bindParam(":githubLink", $githubLink);
-        $stmt->bindParam(":id", $id);
+        $stmt->bindParam(":gitLink", $gitLink);
         $stmt->execute();
 
         if ($stmt->rowCount() > 0)
         {
-            return true;
+            return $conn->lastInsertId();
         }
+
         return false;
     }
 
-    function deleteProjectData(int $id): bool
+    /**
+     * Upload the image to the server and update the database with the new image location
+     * @param int $ID - ID of the project in the database to update
+     * @param UploadedFileInterface $img - Image preview of the project
+     * @return string|array - String with error message or array with the new image location
+     */
+    public function uploadImage(int $ID, UploadedFileInterface $img): string | array
     {
-        $conn = dbConn();
-        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :id");
-        $stmt->bindParam(":id", $id);
-        $stmt->execute();
+        $targetDir = "../imgs/projects/";
+        $targetFile = $targetDir . basename($img->getClientFilename());
+        $uploadOk = 1;
+        $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
 
-        if ($stmt->rowCount() > 0)
+        // Check if file already exists
+        if (file_exists($targetFile))
         {
-            return true;
+            return "The file already exists";
         }
-        return false;
-    }
 
-    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink): bool
-    {
-        $conn = dbConn();
-        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, githubLink) VALUES (:title, :isMainProject, :information, :projectLink, :githubLink)");
-        $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
-        $stmt->bindParam(":information", $information);
-        $stmt->bindParam(":projectLink", $projectLink);
-        $stmt->bindParam(":githubLink", $githubLink);
-        $stmt->execute();
-
-        if ($stmt->rowCount() > 0)
+        // Check file size
+        if ($img->getSize() > 2000000)
         {
-            return true;
+            return "The file is too large, max 2MB";
         }
-        return false;
+
+        // Allow certain file formats
+        if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif")
+        {
+            return "Only JPG, JPEG, PNG & GIF files are allowed";
+        }
+
+        $img->moveTo($targetFile);
+
+        if (file_exists($targetFile))
+        {
+            // update the database with the new image location
+            $conn = dbConn();
+            $stmt = $conn->prepare("UPDATE projects SET imgLocation = :imgLocation WHERE ID = :ID");
+            $stmt->bindParam(":imgLocation", $targetFile);
+            $stmt->bindParam(":ID", $ID);
+            $stmt->execute();
+
+            if ($stmt->rowCount() > 0)
+            {
+                return array("imgLocation" => $targetFile);
+            }
+
+            return "Couldn't update the database";
+        }
+
+        return "Couldn't upload the image";
     }
 }
diff --git a/dist/editor/editor.html b/dist/editor/editor.html
index 61eb7e1..5b468f7 100644
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject" required> <span class="checkmark"></span></label></div><div class="formControl"><label for="img">Image</label> <input type="file" name="img" id="img"></div><div class="formControl"><label for="projectInfo">Description</label> <textarea name="projectInfo" id="projectInfo"></textarea></div><div class="formControl"><label for="projectLink">Project Link</label> <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/editor/js/editor.js b/dist/editor/js/editor.js
index 9f0a78e..2526df3 100644
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
@@ -1 +1 @@
-let dateOptions={month:"short",year:"numeric"},textareaLoaded=!1;function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function editCVItem(e){if(textareaLoaded=!1,document.querySelector(`#timelineItem${e}`).classList.toggle("editing"),e.includes("e"))return document.querySelector(`#grade${e}`).toggleAttribute("disabled"),void document.querySelector(`#course${e}`).toggleAttribute("disabled");document.querySelector(`#companyName${e}`).toggleAttribute("disabled"),document.querySelector(`#area${e}`).toggleAttribute("disabled"),document.querySelector(`#jobTitle${e}`).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let i=e+"e",d=document.createElement("form");d.id="timelineItem"+i,d.classList.add("timelineItem"),d.onsubmit=t=>updateEduItem(e,t),d.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="editCVItem('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${i}">Grade:</label>\n        <input type="text" name="grade${i}" id="grade${i}" value="${n}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${r}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(d):document.getElementById("edu").appendChild(d)}function addWorkData(e,t,o,n,r,a,i=!1){let d=e+"w",l=document.createElement("form");l.id="timelineItem"+d,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="editCVItem('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${d}" id="companyName${d}" value="${n}" disabled>\n        -\n        <input type="text" name="area${d}" id="area${d}" value="${r}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${d}" id="jobTitle${d}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,i?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function updateProjectItem(e,t){t.preventDefault();let o={};o.title=document.querySelector(`#title${e}`).value,o.isMainProject=document.querySelector(`#isMainProject${e}`).checked,o.img=document.querySelector(`#img${e}`).files[0],o.information=document.querySelector(`#info${e}`).value,o.projectLink=document.querySelector(`#viewProj${e}`).value,o.gitLink=document.querySelector(`#git${e}`).value}function editProjectItem(e){document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).removeAttribute("disabled"),document.querySelector(`#info${e}`).removeAttribute("disabled")}function deleteProjectItem(e){}function addProject(e,t,o,n,r){let a=document.createElement("form");a.id="projectItem"+e,a.classList.add("projItem"),a.onsubmit=t=>updateProjectItem(e,t),a.innerHTML=`\n        <div class="modifyBtnContainer">\n            <button class="edit" type="button" id="edit${e}" onclick="editProjectItem(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n            <button class="delete" type="button" id="delete${e}" onclick="deleteProjectItem(${e})"><i class="fa-solid fa-trash"></i></button>\n        </div>\n        <img class="displayedImage" src="../imgs/500x400.jpg" alt="image preivew of the project">\n        <div class="formControl imageContainer">\n            <input type="file" name="img${e}" id="img${e}">\n        </div>\n        <div class="formControl projectTitleContainer">\n            <input type="text" name="title${e}" id="title${e}" value="${t}" disabled>\n        </div>\n        <div class="formControl isMainProject">\n            <label class="checkContainer" for="isMainProject${e}">Is It The Main Project\n                <input type="checkbox" id="isMainProject${e}" name="isMainProject${e}">\n                <span class="checkmark"></span>\n            </label>\n        </div> \n        <div class="formControl infoContainer">\n            <textarea name="info${e}" id="info${e}" disabled>${o}</textarea>\n        </div>\n        <div class="formControl viewProjContainer">\n            <input type="text" name="viewProj${e}" id="viewProj${e}" value="${n}">\n        </div>    \n        <div class="formControl gitContainer">\n            <input type="text" name="git${e}" id="git${e}" value="${r}">\n        </div>    \n        <div class="error hidden" id="projError${e}">\n            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n            <div></div>\n        </div>\n        <input type="submit" value="Change">\n        <div class="linkContainer">\n           <a href="${"N/A"===n?"#":n}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===n?'disabled="disabled"':""}>View Project</a>\n           <a href="${"N/A"===r?"#":r}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===r?'disabled="disabled"':""}Git</a>\n        </div>\n    `,document.querySelector("#projList").appendChild(a)}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.ID,e.title,e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("body").addEventListener("click",(()=>{if(textareaLoaded)return;const e=document.querySelectorAll("main.editor textarea");console.log(e);for(let t=0;t<e.length;t++)console.log("height: "+e[t].scrollHeight+"px"),e[t].setAttribute("style","height:"+e[t].scrollHeight+"px;overflow-y:hidden;"),e[t].oninput=e=>{e.target.style.height="0",e.target.style.height=e.target.scrollHeight+"px"};textareaLoaded=!0})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?showErrorMessage(o.error,"edu"):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addWork").reset()}401!==e.status?showErrorMessage(o.error,"work"):window.location.href="./"}))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.add("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.remove("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.remove("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.add("active")})),document.querySelector("#logout").addEventListener("click",(()=>{fetch("/api/user/logout").then((e=>{e.ok&&(localStorage.removeItem("token"),window.location.reload())}))})),document.querySelector("#eduError .close").addEventListener("click",(()=>document.querySelector("#eduError").classList.toggle("hidden"))),document.querySelector("#workError .close").addEventListener("click",(()=>document.querySelector("#workError").classList.toggle("hidden")));
\ No newline at end of file
+let dateOptions={month:"short",year:"numeric"},textareaLoaded=!1;function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function editCVItem(e){if(textareaLoaded=!1,document.querySelector(`#timelineItem${e}`).classList.toggle("editing"),e.includes("e"))return document.querySelector(`#grade${e}`).toggleAttribute("disabled"),void document.querySelector(`#course${e}`).toggleAttribute("disabled");document.querySelector(`#companyName${e}`).toggleAttribute("disabled"),document.querySelector(`#area${e}`).toggleAttribute("disabled"),document.querySelector(`#jobTitle${e}`).toggleAttribute("disabled")}function addEduData(e,t,o,r,n,a=!1){let i=e+"e",d=document.createElement("form");d.id="timelineItem"+i,d.classList.add("timelineItem"),d.onsubmit=t=>updateEduItem(e,t),d.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="editCVItem('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${i}">Grade:</label>\n        <input type="text" name="grade${i}" id="grade${i}" value="${r}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${n}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(d):document.getElementById("edu").appendChild(d)}function addWorkData(e,t,o,r,n,a,i=!1){let d=e+"w",l=document.createElement("form");l.id="timelineItem"+d,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="editCVItem('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${d}" id="companyName${d}" value="${r}" disabled>\n        -\n        <input type="text" name="area${d}" id="area${d}" value="${n}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${d}" id="jobTitle${d}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,i?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function updateProjectItem(e,t){t.preventDefault();let o={};o.title=document.querySelector(`#title${e}`).value,o.isMainProject=document.querySelector(`#isMainProject${e}`).checked,o.img=document.querySelector(`#img${e}`).files[0],o.information=document.querySelector(`#info${e}`).value,o.projectLink=document.querySelector(`#viewProj${e}`).value,o.gitLink=document.querySelector(`#git${e}`).value,fetch("/api/projectData/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).setAttribute("disabled",""),void document.querySelector(`#info${e}`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#projError${e}`).classList.remove("hidden"),document.querySelector(`#projError${e} div`).innerHTML=t.error})):window.location.href="./"}))}function editProjectItem(e){document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).removeAttribute("disabled"),document.querySelector(`#info${e}`).removeAttribute("disabled")}function deleteProjectItem(e){fetch("/api/projectData/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#projectItem${e}`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function addProject(e,t,o,r,n,a){let i=document.createElement("form");i.id="projectItem"+e,i.classList.add("projItem"),i.onsubmit=t=>updateProjectItem(e,t),i.innerHTML=`\n        <div class="modifyBtnContainer">\n            <button class="edit" type="button" id="edit${e}" onclick="editProjectItem(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n            <button class="delete" type="button" id="delete${e}" onclick="deleteProjectItem(${e})"><i class="fa-solid fa-trash"></i></button>\n        </div>\n        <img class="displayedImage" src="${"N/A"===t?"../imgs/500x400.jpg":t}" alt="image preivew of the project">\n        <div class="formControl imageContainer">\n            <input type="file" name="img${e}" id="img${e}">\n        </div>\n        <div class="formControl projectTitleContainer">\n            <input type="text" name="title${e}" id="title${e}" value="${o}" disabled>\n        </div>\n        <div class="formControl isMainProject">\n            <label class="checkContainer" for="isMainProject${e}">Is It The Main Project\n                <input type="checkbox" id="isMainProject${e}" name="isMainProject${e}">\n                <span class="checkmark"></span>\n            </label>\n        </div> \n        <div class="formControl infoContainer">\n            <textarea name="info${e}" id="info${e}" disabled>${r}</textarea>\n        </div>\n        <div class="formControl viewProjContainer">\n            <input type="text" name="viewProj${e}" id="viewProj${e}" value="${n}">\n        </div>    \n        <div class="formControl gitContainer">\n            <input type="text" name="git${e}" id="git${e}" value="${a}">\n        </div>    \n        <div class="error hidden" id="projError${e}">\n            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n            <div></div>\n        </div>\n        <input type="submit" value="Change">\n        <div class="linkContainer">\n           <a href="${"N/A"===n?"#":n}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===n?'disabled="disabled"':""}>View Project</a>\n           <a href="${"N/A"===a?"#":a}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===a?'disabled="disabled"':""}Git</a>\n        </div>\n    `,document.querySelector("#projList").appendChild(i)}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.ID,""===e.imgLocation?"../imgs/placeholder.png":e.imgLocation,e.title,e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("body").addEventListener("click",(()=>{if(textareaLoaded)return;const e=document.querySelectorAll("main.editor textarea");console.log(e);for(let t=0;t<e.length;t++)console.log("height: "+e[t].scrollHeight+"px"),e[t].setAttribute("style","height:"+e[t].scrollHeight+"px;overflow-y:hidden;"),e[t].oninput=e=>{e.target.style.height="0",e.target.style.height=e.target.scrollHeight+"px"};textareaLoaded=!0})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?showErrorMessage(o.error,"edu"):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addWork").reset()}401!==e.status?showErrorMessage(o.error,"work"):window.location.href="./"}))))})),document.querySelector("#addProj").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("title",document.querySelector("#projTitle").value),t.append("isMainProject",document.querySelector("#isMainProject").checked?"true":"false"),t.append("information",document.querySelector("#projInfo").value),t.append("projectLink",document.querySelector("#projLink").value),t.append("gitLink",document.querySelector("#gitLink").value);let o=new FormData;o.append("img",document.querySelector("#projImg").files[0]);let r=0;fetch("/api/projectData",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((n=>{if(e.ok)return"undefined"===o.get("img")?(addProject(n.ID,"../imgs/placeholder.png",t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset()):(r=n.ID,fetch("/api/projectImage/"+n.ID,{method:"POST",body:o,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}));401!==e.status?showErrorMessage(n.error,"proj"):window.location.href="./"})).then((e=>e.json().then((o=>{if(e.ok)return addProject(r,o.imgLocation,t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset();401!==e.status?showErrorMessage(o.error,"proj"):window.location.href="./"}))))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.add("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.remove("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.remove("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.add("active")})),document.querySelector("#logout").addEventListener("click",(()=>{fetch("/api/user/logout").then((e=>{e.ok&&window.location.reload()}))})),document.querySelector("#eduError .close").addEventListener("click",(()=>document.querySelector("#eduError").classList.toggle("hidden"))),document.querySelector("#workError .close").addEventListener("click",(()=>document.querySelector("#workError").classList.toggle("hidden"))),document.querySelector("#projError .close").addEventListener("click",(()=>document.querySelector("#projError").classList.toggle("hidden")));
\ No newline at end of file
diff --git a/src/api/index.php b/src/api/index.php
index 895708d..8219ffa 100644
--- a/src/api/index.php
+++ b/src/api/index.php
@@ -1,6 +1,5 @@
 <?php /** @noinspection PhpIncludeInspection */
 
-session_start();
 ////////////////// Index file //////////////
 /// Creates base routes and runs         ///
 /// respective functions                 ///
@@ -216,16 +215,17 @@ $app->get("/projectData", function (Request $request, Response $response)
 $app->patch("/projectData/{id}", function (Request $request, Response $response, array $args)
 {
     global $projectData;
-    if (empty($args["id"] != "undefined"))
+    $data = $request->getParsedBody();
+    if ($args["id"] != "undefined")
     {
-        if (empty($args["title"]) || empty($args["isMainProject"]) || empty($args["information"]) || empty($args["projectLink"]) || empty($args["githubLink"]))
+        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
         {
             // uh oh sent some empty data
             $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["title"], $args["isMainProject"], $args["information"], $args["projectLink"], $args["githubLink"], $args["id"]))
+        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], "", $data["projectLink"], $data["gitLink"]))
         {
             // uh oh something went wrong
             $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
@@ -261,14 +261,14 @@ $app->post("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
     $data = $request->getParsedBody();
-    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["githubLink"]))
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
     {
         // uh oh sent some empty data
         $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
         return $response->withStatus(400);
     }
 
-    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["githubLink"]);
+    $insertedID = $projectData->addProjectData($data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
     if (!is_int($insertedID))
     {
         // uh oh something went wrong
@@ -280,6 +280,29 @@ $app->post("/projectData", function (Request $request, Response $response)
     return $response;
 });
 
+$app->post("/projectImage/{id}", function (Request $request, Response $response, array $args)
+{
+    global $projectData;
+    $files = $request->getUploadedFiles();
+    if (empty($args["id"]) || empty($files))
+    {
+        // uh oh only some of the data was sent
+        $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+        return $response->withStatus(400);
+    }
+
+    $message = $projectData->uploadImage($args["id"], $files["img"]);
+    if (!is_array($message))
+    {
+        // uh oh something went wrong
+        $response->getBody()->write(json_encode(array("error" => $message)));
+        return $response->withStatus(500);
+    }
+
+    $response->getBody()->write(json_encode($message));
+    return $response;
+});
+
 $app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
@@ -479,6 +502,12 @@ $app->post("/user/login", function (Request $request, Response $response)
     return $response->withStatus(401);
 });
 
+$app->get("/user/logout", function (Request $request, Response $response)
+{
+    session_unset();
+    return $response;
+});
+
 $app->get("/user/isLoggedIn", function (Request $request, Response $response) 
 {
     global $user;
@@ -498,7 +527,7 @@ $app->get("/user/isLoggedIn", function (Request $request, Response $response)
 
     $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
     return $response;
-    
+
 });
 
 $app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args)
diff --git a/src/api/middleware.php b/src/api/middleware.php
index 2b9bc0d..be8f9b5 100644
--- a/src/api/middleware.php
+++ b/src/api/middleware.php
@@ -2,11 +2,14 @@
 // middleware
 namespace api;
 
+session_start();
+
 use Psr\Http\Message\ServerRequestInterface;
 use Psr\Http\Server\RequestHandlerInterface;
 use Slim\App;
 use Selective\SameSiteCookie\SameSiteCookieConfiguration;
 use Selective\SameSiteCookie\SameSiteCookieMiddleware;
+use Slim\Exception\HttpInternalServerErrorException;
 use Slim\Exception\HttpMethodNotAllowedException;
 use Slim\Exception\HttpNotFoundException;
 use Slim\Psr7\Response;
@@ -76,7 +79,7 @@ class middleware
         $app->add(new JwtAuthentication([
             "rules" => [
                 new RequestPathRule([
-                    "path" => ["/api/projectData", "/api/timeline/[a-z]*", "/api/user/testMethod"],
+                    "path" => ["/api/projectData", "/api/timeline/[a-z]*", "/api/logout"],
                     "ignore" => ["/api/contact", "/api/user/login", "/api/user/changePassword"]
                 ]),
                 new RequestMethodRule([
@@ -114,6 +117,12 @@ class middleware
                 $response->getBody()->write(json_encode(array("status" => "405", "message" => "Method not allowed")));
                 return $response;
             }
+            catch (HttpInternalServerErrorException $exception)
+            {
+                $response = (new Response())->withStatus(500);
+                $response->getBody()->write(json_encode(array("status" => "500", "message" => $exception->getMessage())));
+                return $response;
+            }
         });
         $app->addErrorMiddleware(true, true, true);
 
diff --git a/src/api/projectData.php b/src/api/projectData.php
index 285ad9c..d72e614 100644
--- a/src/api/projectData.php
+++ b/src/api/projectData.php
@@ -1,6 +1,7 @@
 <?php
 namespace api;
 use PDO;
+use Psr\Http\Message\UploadedFileInterface;
 
 require_once "./config.php";
 
@@ -17,7 +18,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects order by date LIMIT 4;");
+        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -27,57 +28,141 @@ class projectData
         {
             return $result;
         }
+
         return array("errorMessage" => "Error, project data not found");
     }
 
-    function updateProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink, string $id): bool
+
+    /**
+     * Update project data in the database with the given ID
+     * @param string $ID - ID of the project in the database to update
+     * @param string $title - Title of the project
+     * @param bool $isMainProject - Is the project a main project or not
+     * @param string $information - Information about the project
+     * @param string $imgLocation - Location of the image
+     * @param string $projectLink - Link to the project
+     * @param string $gitLink - Link to the github repository
+     * @return bool - True if project was updated, false if not and there was an error
+     */
+    function updateProjectData(string $ID, string $title, bool $isMainProject, string $information, string $imgLocation, string $projectLink, string $gitLink): bool
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, githubLink = :githubLink WHERE ID = :id");
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, imgLocation = :imgLocation, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":isMainProject", $isMainProject);
+        $stmt->bindParam(":information", $information);
+        $stmt->bindParam(":imgLocation", $imgLocation);
+        $stmt->bindParam(":projectLink", $projectLink);
+        $stmt->bindParam(":gitLink", $gitLink);
+        $stmt->bindParam(":ID", $ID);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Delete project data from the database
+     * @param int $ID - ID of the project in the database to delete
+     * @return bool - True if project was deleted, false if not and there was an error
+     */
+    function deleteProjectData(int $ID): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :ID");
+        $stmt->bindParam(":ID", $ID);
+        $stmt->execute();
+
+        if ($stmt->rowCount() > 0)
+        {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Add project data to the database
+     * @param string $title - Title of the project
+     * @param string $isMainProject - Is the project a main project or not
+     * @param string $information - Information about the project
+     * @param string $projectLink - Link to the project
+     * @param string $gitLink - Link to the github repository
+     * @return int|bool - ID of the project if it was added, false if not and there was an error
+     */
+    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): int|bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
         $stmt->bindParam(":isMainProject", $isMainProject);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
-        $stmt->bindParam(":githubLink", $githubLink);
-        $stmt->bindParam(":id", $id);
+        $stmt->bindParam(":gitLink", $gitLink);
         $stmt->execute();
 
         if ($stmt->rowCount() > 0)
         {
-            return true;
+            return $conn->lastInsertId();
         }
+
         return false;
     }
 
-    function deleteProjectData(int $id): bool
+    /**
+     * Upload the image to the server and update the database with the new image location
+     * @param int $ID - ID of the project in the database to update
+     * @param UploadedFileInterface $img - Image preview of the project
+     * @return string|array - String with error message or array with the new image location
+     */
+    public function uploadImage(int $ID, UploadedFileInterface $img): string | array
     {
-        $conn = dbConn();
-        $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :id");
-        $stmt->bindParam(":id", $id);
-        $stmt->execute();
+        $targetDir = "../imgs/projects/";
+        $targetFile = $targetDir . basename($img->getClientFilename());
+        $uploadOk = 1;
+        $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
 
-        if ($stmt->rowCount() > 0)
+        // Check if file already exists
+        if (file_exists($targetFile))
         {
-            return true;
+            return "The file already exists";
         }
-        return false;
-    }
 
-    function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $githubLink): bool
-    {
-        $conn = dbConn();
-        $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, githubLink) VALUES (:title, :isMainProject, :information, :projectLink, :githubLink)");
-        $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
-        $stmt->bindParam(":information", $information);
-        $stmt->bindParam(":projectLink", $projectLink);
-        $stmt->bindParam(":githubLink", $githubLink);
-        $stmt->execute();
-
-        if ($stmt->rowCount() > 0)
+        // Check file size
+        if ($img->getSize() > 2000000)
         {
-            return true;
+            return "The file is too large, max 2MB";
         }
-        return false;
+
+        // Allow certain file formats
+        if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif")
+        {
+            return "Only JPG, JPEG, PNG & GIF files are allowed";
+        }
+
+        $img->moveTo($targetFile);
+
+        if (file_exists($targetFile))
+        {
+            // update the database with the new image location
+            $conn = dbConn();
+            $stmt = $conn->prepare("UPDATE projects SET imgLocation = :imgLocation WHERE ID = :ID");
+            $stmt->bindParam(":imgLocation", $targetFile);
+            $stmt->bindParam(":ID", $ID);
+            $stmt->execute();
+
+            if ($stmt->rowCount() > 0)
+            {
+                return array("imgLocation" => $targetFile);
+            }
+
+            return "Couldn't update the database";
+        }
+
+        return "Couldn't upload the image";
     }
 }
diff --git a/src/editor/editor.html b/src/editor/editor.html
index 478ec97..693901a 100644
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@@ -121,26 +121,30 @@
                     </div>
                     <div class="formControl">
                         <label class="checkContainer" for="isMainProject">Is It The Main Project
-                            <input type="checkbox" id="isMainProject" name="isMainProject" required>
+                            <input type="checkbox" id="isMainProject" name="isMainProject">
                             <span class="checkmark"></span>
                         </label>
                     </div>
                     <div class="formControl">
-                        <label for="img">Image</label>
-                        <input type="file" name="img" id="img">
+                        <label for="projImg">Image</label>
+                        <input type="file" name="projImg" id="projImg">
                     </div>
                     <div class="formControl">
-                        <label for="projectInfo">Description</label>
-                        <textarea name="projectInfo" id="projectInfo"></textarea>
+                        <label for="projInfo">Description</label>
+                        <textarea name="projInfo" id="projInfo" required></textarea>
                     </div>
                     <div class="formControl">
-                        <label for="projectLink">Project Link</label>
-                        <input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)">
+                        <label for="projLink">Project Link</label>
+                        <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)">
                     </div>
                     <div class="formControl">
                         <label for="gitLink">Git Link</label>
                         <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required>
                     </div>
+                    <div class="error hidden" id="projError">
+                        <button class="close" type="button">&times;</button>
+                        <div></div>
+                    </div>
                     <input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut">
                 </form>
                 <div id="projList">
diff --git a/src/editor/js/editor.js b/src/editor/js/editor.js
index bf85aa6..5568841 100644
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 json.forEach(item =>
                 {
-                    addProject(item["ID"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
+                    addProject(item["ID"], (item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
                 })
                 return;
             }
@@ -114,7 +114,7 @@ document.querySelector("#addEdu").addEventListener("submit", e =>
         method: "POST",
         body: data,
         headers: {
-            "Authentication": localStorage.getItem("token")
+            "Authorization": "Bearer " + localStorage.getItem("token")
         }
     }).then(res => res.json().then(json => 
     {
@@ -149,7 +149,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
         method: "POST",
         body: data,
         headers: {
-            "Authentication": localStorage.getItem("token")
+            "Authorization": "Bearer " + localStorage.getItem("token")
         }
     }).then(res => res.json().then(json =>
     {
@@ -170,6 +170,75 @@ document.querySelector("#addWork").addEventListener("submit", e =>
     }));
 });
 
+document.querySelector("#addProj").addEventListener("submit", e =>
+{
+    e.preventDefault();
+    let data = new FormData();
+    data.append("title", document.querySelector("#projTitle").value);
+    data.append("isMainProject", document.querySelector("#isMainProject").checked ? "true" : "false");
+    data.append("information", document.querySelector("#projInfo").value);
+    data.append("projectLink", document.querySelector("#projLink").value);
+    data.append("gitLink", document.querySelector("#gitLink").value);
+
+    let imgData = new FormData();
+    imgData.append("img", document.querySelector("#projImg").files[0]);
+
+    let newProjectID = 0;
+
+    fetch("/api/projectData", {
+        method: "POST",
+        body: data,
+        headers: {
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res => res.json().then(newProjectData =>
+    {
+        if (res.ok)
+        {
+            if (imgData.get("img") === "undefined")
+            {
+                addProject(newProjectData.ID, "../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
+                document.querySelector("#addProj").reset();
+                return;
+            }
+
+            newProjectID = newProjectData.ID;
+
+            return fetch("/api/projectImage/" + newProjectData.ID, {
+                method: "POST",
+                body: imgData,
+                headers: {
+                    "Authorization": "Bearer " + localStorage.getItem("token")
+                }
+            });
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        showErrorMessage(newProjectData.error, "proj");
+    }).then(res => res.json().then(newProjectImage =>
+    {
+        if (res.ok)
+        {
+            addProject(newProjectID, newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
+            document.querySelector("#addProj").reset();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        showErrorMessage(newProjectImage.error, "proj");
+
+    })));
+});
 
 document.querySelector("#goToCV").addEventListener("click", () =>
 {
@@ -195,7 +264,6 @@ document.querySelector("#logout").addEventListener("click", () =>
     {
         if (res.ok)
         {
-            localStorage.removeItem("token");
             window.location.reload();
         }
     });
@@ -207,6 +275,9 @@ document.querySelector("#eduError .close").addEventListener("click", () =>
 document.querySelector("#workError .close").addEventListener("click", () =>
     document.querySelector("#workError").classList.toggle("hidden"));
 
+document.querySelector("#projError .close").addEventListener("click", () =>
+    document.querySelector("#projError").classList.toggle("hidden"));
+
 /**
  * Shows respective error message for form
  * @param {string} message The error message to show
@@ -534,8 +605,8 @@ function updateProjectItem(id, e)
 
         res.json().then(json =>
         {
-            document.querySelector(`#projectError${id}`).classList.remove("hidden");
-            document.querySelector(`#projectError${id} div`).innerHTML = json.error;
+            document.querySelector(`#projError${id}`).classList.remove("hidden");
+            document.querySelector(`#projError${id} div`).innerHTML = json.error;
         });
     });
 
@@ -584,12 +655,13 @@ function deleteProjectItem(id)
 /**
  * Adds a new project to the page
  * @param {number} id the id of the project from the database
+ * @param {string} imgLocation the relative path of the image
  * @param {string} title the title of the project
  * @param {string} information the information about the project
  * @param {string} projectLink the link to the project
  * @param {string} gitLink the link to the git repository
  */
-function addProject(id, title, information, projectLink, gitLink)
+function addProject(id, imgLocation, title, information, projectLink, gitLink)
 {
     let projectItem = document.createElement("form");
     projectItem.id = "projectItem" + id;
@@ -600,7 +672,7 @@ function addProject(id, title, information, projectLink, gitLink)
             <button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
             <button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${id})"><i class="fa-solid fa-trash"></i></button>
         </div>
-        <img class="displayedImage" src="../imgs/500x400.jpg" alt="image preivew of the project">
+        <img class="displayedImage" src="${(imgLocation === "N/A") ? "../imgs/500x400.jpg" : imgLocation}" alt="image preivew of the project">
         <div class="formControl imageContainer">
             <input type="file" name="img${id}" id="img${id}">
         </div>
-- 
2.43.0


From 2c612e5776a0441e3baaf31a97c4ee18250d3569 Mon Sep 17 00:00:00 2001
From: rodude123 <rodude123@gmail.com>
Date: Tue, 7 Feb 2023 03:09:14 +0000
Subject: [PATCH 6/6] Added in ability to add a new project with and with an
 image and update a project with and without image. If a project is the main
 project then it cannot be deleted and when a new main project is selected it
 gets moved to the top.

Signed-off-by: rodude123 <rodude123@gmail.com>
---
 dist/api/index.php       | 22 +++++++---
 dist/api/projectData.php | 83 ++++++++++++++++++++++++++---------
 dist/editor/editor.html  |  2 +-
 dist/editor/js/editor.js |  2 +-
 dist/js/main.js          |  2 +-
 src/api/index.php        | 22 +++++++---
 src/api/projectData.php  | 83 ++++++++++++++++++++++++++---------
 src/editor/editor.html   |  1 -
 src/editor/js/editor.js  | 95 +++++++++++++++++++++++++++++++++-------
 src/js/main.js           |  4 +-
 10 files changed, 237 insertions(+), 79 deletions(-)

diff --git a/dist/api/index.php b/dist/api/index.php
index 8219ffa..c686cfa 100644
--- a/dist/api/index.php
+++ b/dist/api/index.php
@@ -218,17 +218,17 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
     $data = $request->getParsedBody();
     if ($args["id"] != "undefined")
     {
-        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
+        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
         {
             // uh oh sent some empty data
             $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], "", $data["projectLink"], $data["gitLink"]))
+        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
         {
             // uh oh something went wrong
-            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong", "data" => $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))));
             return $response->withStatus(500);
         }
         return $response;
@@ -243,13 +243,21 @@ $app->delete("/projectData/{id}", function (Request $request, Response $response
     global $projectData;
     if ($args["id"] != null)
     {
-        if (!$projectData->deleteProjectData($args["id"]))
+        $message = $projectData->deleteProjectData($args["id"]);
+        if ($message === "error")
         {
             // uh oh something went wrong
-            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong or the project with ID ".$args["id"]."does not exist")));
             return $response->withStatus(500);
         }
 
+        if ($message === "cannot delete")
+        {
+            //uh oh cannot delete the main project
+            $response->getBody()->write(json_encode(array("error" => "Cannot delete the main project")));
+            return $response->withStatus(409);
+        }
+
         return $response;
     }
 
@@ -261,7 +269,7 @@ $app->post("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
     $data = $request->getParsedBody();
-    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
     {
         // uh oh sent some empty data
         $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
@@ -272,7 +280,7 @@ $app->post("/projectData", function (Request $request, Response $response)
     if (!is_int($insertedID))
     {
         // uh oh something went wrong
-        $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+        $response->getBody()->write(json_encode(array("error" => "Something went wrong", "message" => $insertedID)));
         return $response->withStatus(500);
     }
 
diff --git a/dist/api/projectData.php b/dist/api/projectData.php
index d72e614..9b25570 100644
--- a/dist/api/projectData.php
+++ b/dist/api/projectData.php
@@ -18,7 +18,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects;");
+        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects ORDER BY isMainProject DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -37,52 +37,66 @@ class projectData
      * Update project data in the database with the given ID
      * @param string $ID - ID of the project in the database to update
      * @param string $title - Title of the project
-     * @param bool $isMainProject - Is the project a main project or not
+     * @param string $isMainProject - Is the project a main project or not
      * @param string $information - Information about the project
-     * @param string $imgLocation - Location of the image
      * @param string $projectLink - Link to the project
-     * @param string $gitLink - Link to the github repository
+     * @param string $gitLink - Link to the git repository
      * @return bool - True if project was updated, false if not and there was an error
      */
-    function updateProjectData(string $ID, string $title, bool $isMainProject, string $information, string $imgLocation, string $projectLink, string $gitLink): bool
+    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, imgLocation = :imgLocation, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
+
+        if ($isMainProject === "true")
+        {
+            $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
+            $stmtMainProject->execute();
+        }
+
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information,  projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
         $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
+        $isMainProj = ($isMainProject) ? 1 : 0;
+        $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
-        $stmt->bindParam(":imgLocation", $imgLocation);
         $stmt->bindParam(":projectLink", $projectLink);
         $stmt->bindParam(":gitLink", $gitLink);
         $stmt->bindParam(":ID", $ID);
-        $stmt->execute();
-
-        if ($stmt->rowCount() > 0)
-        {
-            return true;
-        }
-
-        return false;
+        return $stmt->execute();
     }
 
     /**
      * Delete project data from the database
      * @param int $ID - ID of the project in the database to delete
-     * @return bool - True if project was deleted, false if not and there was an error
+     * @return string - True if project was deleted, false if not and there was an error
      */
-    function deleteProjectData(int $ID): bool
+    function deleteProjectData(int $ID): string
     {
         $conn = dbConn();
+
+        // check if the project is a main project if it is return false
+
+        $stmtMainProject = $conn->prepare("SELECT isMainProject FROM projects WHERE ID = :ID");
+        $stmtMainProject->bindParam(":ID", $ID);
+        $stmtMainProject->execute();
+        $result = $stmtMainProject->fetch(PDO::FETCH_ASSOC);
+
+        if ($result["isMainProject"] === "1")
+        {
+            return "cannot delete";
+        }
+
+        $this->deleteImage($ID);
+
         $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :ID");
         $stmt->bindParam(":ID", $ID);
         $stmt->execute();
 
         if ($stmt->rowCount() > 0)
         {
-            return true;
+            return "ok";
         }
 
-        return false;
+        return "error";
     }
 
     /**
@@ -96,10 +110,18 @@ class projectData
      */
     function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): int|bool
     {
+
         $conn = dbConn();
+        if ($isMainProject === "true")
+        {
+            $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
+            $stmtMainProject->execute();
+        }
+
         $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
+        $isMainProj = ($isMainProject) ? 1 : 0;
+        $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
         $stmt->bindParam(":gitLink", $gitLink);
@@ -148,6 +170,7 @@ class projectData
 
         if (file_exists($targetFile))
         {
+            $this->deleteImage($ID);
             // update the database with the new image location
             $conn = dbConn();
             $stmt = $conn->prepare("UPDATE projects SET imgLocation = :imgLocation WHERE ID = :ID");
@@ -165,4 +188,22 @@ class projectData
 
         return "Couldn't upload the image";
     }
+
+    /**
+     * Delete the image from the server
+     * @param int $ID - ID of the project in the database
+     */
+    private function deleteImage(int $ID): void
+    {
+        $conn = dbConn();
+        $imgStmt = $conn->prepare("SELECT imgLocation FROM projects WHERE ID = :ID");
+        $imgStmt->bindParam(":ID", $ID);
+        $imgStmt->execute();
+        $imgLocation = $imgStmt->fetch(PDO::FETCH_ASSOC)["imgLocation"];
+
+        if ($imgLocation != null)
+        {
+            unlink($imgLocation);
+        }
+    }
 }
diff --git a/dist/editor/editor.html b/dist/editor/editor.html
index 5b468f7..eb9131f 100644
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/editor/js/editor.js b/dist/editor/js/editor.js
index 2526df3..9c14cbe 100644
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
@@ -1 +1 @@
-let dateOptions={month:"short",year:"numeric"},textareaLoaded=!1;function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function editCVItem(e){if(textareaLoaded=!1,document.querySelector(`#timelineItem${e}`).classList.toggle("editing"),e.includes("e"))return document.querySelector(`#grade${e}`).toggleAttribute("disabled"),void document.querySelector(`#course${e}`).toggleAttribute("disabled");document.querySelector(`#companyName${e}`).toggleAttribute("disabled"),document.querySelector(`#area${e}`).toggleAttribute("disabled"),document.querySelector(`#jobTitle${e}`).toggleAttribute("disabled")}function addEduData(e,t,o,r,n,a=!1){let i=e+"e",d=document.createElement("form");d.id="timelineItem"+i,d.classList.add("timelineItem"),d.onsubmit=t=>updateEduItem(e,t),d.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="editCVItem('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${i}">Grade:</label>\n        <input type="text" name="grade${i}" id="grade${i}" value="${r}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${n}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(d):document.getElementById("edu").appendChild(d)}function addWorkData(e,t,o,r,n,a,i=!1){let d=e+"w",l=document.createElement("form");l.id="timelineItem"+d,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="editCVItem('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${d}" id="companyName${d}" value="${r}" disabled>\n        -\n        <input type="text" name="area${d}" id="area${d}" value="${n}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${d}" id="jobTitle${d}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,i?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function updateProjectItem(e,t){t.preventDefault();let o={};o.title=document.querySelector(`#title${e}`).value,o.isMainProject=document.querySelector(`#isMainProject${e}`).checked,o.img=document.querySelector(`#img${e}`).files[0],o.information=document.querySelector(`#info${e}`).value,o.projectLink=document.querySelector(`#viewProj${e}`).value,o.gitLink=document.querySelector(`#git${e}`).value,fetch("/api/projectData/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).setAttribute("disabled",""),void document.querySelector(`#info${e}`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#projError${e}`).classList.remove("hidden"),document.querySelector(`#projError${e} div`).innerHTML=t.error})):window.location.href="./"}))}function editProjectItem(e){document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).removeAttribute("disabled"),document.querySelector(`#info${e}`).removeAttribute("disabled")}function deleteProjectItem(e){fetch("/api/projectData/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#projectItem${e}`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function addProject(e,t,o,r,n,a){let i=document.createElement("form");i.id="projectItem"+e,i.classList.add("projItem"),i.onsubmit=t=>updateProjectItem(e,t),i.innerHTML=`\n        <div class="modifyBtnContainer">\n            <button class="edit" type="button" id="edit${e}" onclick="editProjectItem(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n            <button class="delete" type="button" id="delete${e}" onclick="deleteProjectItem(${e})"><i class="fa-solid fa-trash"></i></button>\n        </div>\n        <img class="displayedImage" src="${"N/A"===t?"../imgs/500x400.jpg":t}" alt="image preivew of the project">\n        <div class="formControl imageContainer">\n            <input type="file" name="img${e}" id="img${e}">\n        </div>\n        <div class="formControl projectTitleContainer">\n            <input type="text" name="title${e}" id="title${e}" value="${o}" disabled>\n        </div>\n        <div class="formControl isMainProject">\n            <label class="checkContainer" for="isMainProject${e}">Is It The Main Project\n                <input type="checkbox" id="isMainProject${e}" name="isMainProject${e}">\n                <span class="checkmark"></span>\n            </label>\n        </div> \n        <div class="formControl infoContainer">\n            <textarea name="info${e}" id="info${e}" disabled>${r}</textarea>\n        </div>\n        <div class="formControl viewProjContainer">\n            <input type="text" name="viewProj${e}" id="viewProj${e}" value="${n}">\n        </div>    \n        <div class="formControl gitContainer">\n            <input type="text" name="git${e}" id="git${e}" value="${a}">\n        </div>    \n        <div class="error hidden" id="projError${e}">\n            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n            <div></div>\n        </div>\n        <input type="submit" value="Change">\n        <div class="linkContainer">\n           <a href="${"N/A"===n?"#":n}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===n?'disabled="disabled"':""}>View Project</a>\n           <a href="${"N/A"===a?"#":a}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===a?'disabled="disabled"':""}Git</a>\n        </div>\n    `,document.querySelector("#projList").appendChild(i)}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.ID,""===e.imgLocation?"../imgs/placeholder.png":e.imgLocation,e.title,e.information,e.projectLink,e.gitLink)})):document.querySelector("#projects").innerHTML="No project data found"}))}))})),document.querySelector("body").addEventListener("click",(()=>{if(textareaLoaded)return;const e=document.querySelectorAll("main.editor textarea");console.log(e);for(let t=0;t<e.length;t++)console.log("height: "+e[t].scrollHeight+"px"),e[t].setAttribute("style","height:"+e[t].scrollHeight+"px;overflow-y:hidden;"),e[t].oninput=e=>{e.target.style.height="0",e.target.style.height=e.target.scrollHeight+"px"};textareaLoaded=!0})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?showErrorMessage(o.error,"edu"):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addWork").reset()}401!==e.status?showErrorMessage(o.error,"work"):window.location.href="./"}))))})),document.querySelector("#addProj").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("title",document.querySelector("#projTitle").value),t.append("isMainProject",document.querySelector("#isMainProject").checked?"true":"false"),t.append("information",document.querySelector("#projInfo").value),t.append("projectLink",document.querySelector("#projLink").value),t.append("gitLink",document.querySelector("#gitLink").value);let o=new FormData;o.append("img",document.querySelector("#projImg").files[0]);let r=0;fetch("/api/projectData",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((n=>{if(e.ok)return"undefined"===o.get("img")?(addProject(n.ID,"../imgs/placeholder.png",t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset()):(r=n.ID,fetch("/api/projectImage/"+n.ID,{method:"POST",body:o,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}));401!==e.status?showErrorMessage(n.error,"proj"):window.location.href="./"})).then((e=>e.json().then((o=>{if(e.ok)return addProject(r,o.imgLocation,t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset();401!==e.status?showErrorMessage(o.error,"proj"):window.location.href="./"}))))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.add("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.remove("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.remove("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.add("active")})),document.querySelector("#logout").addEventListener("click",(()=>{fetch("/api/user/logout").then((e=>{e.ok&&window.location.reload()}))})),document.querySelector("#eduError .close").addEventListener("click",(()=>document.querySelector("#eduError").classList.toggle("hidden"))),document.querySelector("#workError .close").addEventListener("click",(()=>document.querySelector("#workError").classList.toggle("hidden"))),document.querySelector("#projError .close").addEventListener("click",(()=>document.querySelector("#projError").classList.toggle("hidden")));
\ No newline at end of file
+let dateOptions={month:"short",year:"numeric"},textareaLoaded=!1;function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function editCVItem(e){if(textareaLoaded=!1,document.querySelector(`#timelineItem${e}`).classList.toggle("editing"),e.includes("e"))return document.querySelector(`#grade${e}`).toggleAttribute("disabled"),void document.querySelector(`#course${e}`).toggleAttribute("disabled");document.querySelector(`#companyName${e}`).toggleAttribute("disabled"),document.querySelector(`#area${e}`).toggleAttribute("disabled"),document.querySelector(`#jobTitle${e}`).toggleAttribute("disabled")}function addEduData(e,t,o,r,n,a=!1){let i=e+"e",d=document.createElement("form");d.id="timelineItem"+i,d.classList.add("timelineItem"),d.onsubmit=t=>updateEduItem(e,t),d.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${i}" onclick="editCVItem('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${i}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="gradeContainer formControl">\n        <label for="grade${i}">Grade:</label>\n        <input type="text" name="grade${i}" id="grade${i}" value="${r}" disabled>\n    </div>\n    <div class="formControl">\n        <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${n}</textarea>\n    </div>\n    \n    <div class="error hidden" id="eduError${i}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n    `,a?document.querySelector("#edu").prepend(d):document.getElementById("edu").appendChild(d)}function addWorkData(e,t,o,r,n,a,i=!1){let d=e+"w",c=document.createElement("form");c.id="timelineItem"+d,c.classList.add("timelineItem"),c.onsubmit=t=>updateWorkItem(e,t),c.innerHTML=`\n    <div class="modifyBtnContainer">\n        <button class="edit" type="button" id="edit${d}" onclick="editCVItem('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n        <button class="delete" type="button" id="delete${d}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n    </div>\n    <div class="dateContainer formControl">\n        <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n        -\n        <input type="date" name="dateTo${d}" id="dateTo${d}" value="${"Present"===o?"":o}">\n    </div>\n    <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n    <div class="companyAreaContainer formControl">\n        <input type="text" name="companyName${d}" id="companyName${d}" value="${r}" disabled>\n        -\n        <input type="text" name="area${d}" id="area${d}" value="${n}" disabled>                      \n    </div>\n    <div class="formControl">\n        <textarea class="jobTitleText" name="jobTitle${d}" id="jobTitle${d}" cols="10" rows="3" disabled>${a}</textarea>\n    </div>\n    \n    <div class="error hidden" id="workError${d}">\n        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n        <div></div>\n    </div>\n    <input type="submit" value="Change">\n\t`,i?document.querySelector("#work").prepend(c):document.getElementById("work").appendChild(c)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function updateProjectItem(e,t){t.preventDefault();let o={};o.title=document.querySelector(`#title${e}`).value,o.isMainProject=document.querySelector(`#isMainProject${e}`).checked?"true":"false",o.information=document.querySelector(`#info${e}`).value,o.projectLink=document.querySelector(`#viewProj${e}`).value,o.gitLink=document.querySelector(`#git${e}`).value;let r=new FormData;r.append("img",document.querySelector(`#img${e}`).files[0]),fetch("/api/projectData/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return"undefined"===r.get("img")?("true"===o.isMainProject&&(document.querySelectorAll(".isMainProject input").forEach((e=>e.checked=!1)),document.querySelector(`#isMainProject${e}`).checked=!0,document.querySelector("#projList").prepend(document.querySelector(`#projectItem${e}`))),document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).setAttribute("disabled",""),void document.querySelector(`#info${e}`).setAttribute("disabled","")):(console.log("updating image"),fetch("/api/projectImage/"+e,{method:"POST",body:r,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}));401!==t.status?t.json().then((t=>{document.querySelector(`#projError${e}`).classList.remove("hidden"),document.querySelector(`#projError${e} div`).innerHTML=t.error})):window.location.href="./"})).then((t=>t.json().then((r=>{if(t.ok)return"true"===o.isMainProject&&(document.querySelectorAll(".isMainProject input").forEach((e=>e.checked=!1)),document.querySelector(`#isMainProject${e}`).checked=!0,document.querySelector("#projList").prepend(document.querySelector(`#projectItem${e}`))),document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).setAttribute("disabled",""),document.querySelector(`#info${e}`).setAttribute("disabled",""),void(document.querySelector(`#projectImage${e}`).src=r.imgLocation);401!==t.status?(document.querySelector(`#projError${e}`).classList.remove("hidden"),document.querySelector(`#projError${e} div`).innerHTML=projectDataError.error):window.location.href="./"}))))}function editProjectItem(e){document.querySelector(`#projectItem${e}`).classList.toggle("editing"),document.querySelector(`#title${e}`).removeAttribute("disabled"),document.querySelector(`#info${e}`).removeAttribute("disabled")}function deleteProjectItem(e){fetch("/api/projectData/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#projectItem${e}`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function addProject(e,t,o,r,n,a,i){let d=document.createElement("form");if(d.id="projectItem"+e,d.classList.add("projItem"),d.onsubmit=t=>updateProjectItem(e,t),d.innerHTML=`\n        <div class="modifyBtnContainer">\n            <button class="edit" type="button" id="edit${e}" onclick="editProjectItem(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n            <button class="delete" type="button" id="delete${e}" onclick="deleteProjectItem(${e})"><i class="fa-solid fa-trash"></i></button>\n        </div>\n        <img class="displayedImage" id="projectImage${e}" src="${o}" alt="image preivew of the project">\n        <div class="formControl imageContainer">\n            <input type="file" name="img${e}" id="img${e}">\n        </div>\n        <div class="formControl projectTitleContainer">\n            <input type="text" name="title${e}" id="title${e}" value="${r}" disabled>\n        </div>\n        <div class="formControl isMainProject">\n            <label class="checkContainer" for="isMainProject${e}">Is It The Main Project\n                <input type="checkbox" id="isMainProject${e}" name="isMainProject${e}" ${"true"===t?"checked":""}>\n                <span class="checkmark"></span>\n            </label>\n        </div> \n        <div class="formControl infoContainer">\n            <textarea name="info${e}" id="info${e}" disabled>${n}</textarea>\n        </div>\n        <div class="formControl viewProjContainer">\n            <input type="text" name="viewProj${e}" id="viewProj${e}" value="${a}">\n        </div>    \n        <div class="formControl gitContainer">\n            <input type="text" name="git${e}" id="git${e}" value="${i}">\n        </div>    \n        <div class="error hidden" id="projError${e}">\n            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>\n            <div></div>\n        </div>\n        <input type="submit" value="Change">\n        <div class="linkContainer">\n           <a href="${"N/A"===a?"#":a}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===a?'disabled="disabled"':""}>View Project</a>\n           <a href="${"N/A"===i?"#":i}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===i?'disabled="disabled"':""}Git</a>\n        </div>\n    `,"true"===t)return document.querySelectorAll(".isMainProject input").forEach((e=>e.checked=!1)),void document.querySelector("#projList").prepend(d);document.querySelector("#projList").appendChild(d)}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/projectData").then((e=>{e.json().then((t=>{e.ok?t.forEach((e=>{addProject(e.ID,"1"===e.isMainProject?"true":"false",""===e.imgLocation?"../imgs/placeholder.png":e.imgLocation,e.title,e.information,e.projectLink,e.gitLink)})):document.querySelector("#projList").innerHTML="No project data found"}))}))})),document.querySelector("body").addEventListener("click",(()=>{if(textareaLoaded)return;const e=document.querySelectorAll("main.editor textarea");console.log(e);for(let t=0;t<e.length;t++)console.log("height: "+e[t].scrollHeight+"px"),e[t].setAttribute("style","height:"+e[t].scrollHeight+"px;overflow-y:hidden;"),e[t].oninput=e=>{e.target.style.height="0",e.target.style.height=e.target.scrollHeight+"px"};textareaLoaded=!0})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(()=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?showErrorMessage(o.error,"edu"):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addWork").reset()}401!==e.status?showErrorMessage(o.error,"work"):window.location.href="./"}))))})),document.querySelector("#addProj").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("title",document.querySelector("#projTitle").value),t.append("isMainProject",document.querySelector("#isMainProject").checked?"true":"false"),t.append("information",document.querySelector("#projInfo").value),t.append("projectLink",document.querySelector("#projLink").value?document.querySelector("#projLink").value:"N/A"),t.append("gitLink",document.querySelector("#gitLink").value);let o=new FormData;o.append("img",document.querySelector("#projImg").files[0]);let r=0;fetch("/api/projectData",{method:"POST",body:t,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((e=>e.json().then((n=>{if(e.ok)return"undefined"===o.get("img")?(addProject(n.ID,t.get("isMainProject"),"../imgs/placeholder.png",t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset()):(r=n.ID,fetch("/api/projectImage/"+n.ID,{method:"POST",body:o,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}));401!==e.status?showErrorMessage(n.error,"proj"):window.location.href="./"})).then((e=>e.json().then((o=>{if(e.ok)return addProject(r,t.get("isMainProject"),o.imgLocation,t.get("title"),t.get("information"),t.get("projectLink"),t.get("gitLink")),void document.querySelector("#addProj").reset();401!==e.status?showErrorMessage(o.error,"proj"):window.location.href="./"}))))))})),document.querySelector("#goToCV").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="block",document.querySelector("#goToCV").classList.add("active"),document.querySelector("#projects").style.display="none",document.querySelector("#goToProjects").classList.remove("active")})),document.querySelector("#goToProjects").addEventListener("click",(()=>{textareaLoaded=!1,document.querySelector("#curriculumVitae").style.display="none",document.querySelector("#goToCV").classList.remove("active"),document.querySelector("#projects").style.display="block",document.querySelector("#goToProjects").classList.add("active")})),document.querySelector("#logout").addEventListener("click",(()=>{fetch("/api/user/logout").then((e=>{e.ok&&window.location.reload()}))})),document.querySelector("#eduError .close").addEventListener("click",(()=>document.querySelector("#eduError").classList.toggle("hidden"))),document.querySelector("#workError .close").addEventListener("click",(()=>document.querySelector("#workError").classList.toggle("hidden"))),document.querySelector("#projError .close").addEventListener("click",(()=>document.querySelector("#projError").classList.toggle("hidden")));
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
index 7e2797d..2b0ed16 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -1 +1 @@
-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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>Git</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="imgs/500x400.jpg" alt="">\n                        <div class="flexCol">\n                            <div>\n                            \t<h3>${t.title}</h3>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Git</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
+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(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o=null===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="${""===t.imgLocation?"../imgs/placeholder.png":t.imgLocation}" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>Git</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n                    <div class="oProjItem">\n                        <img src="${""===t.imgLocation?"../imgs/placeholder.png":t.imgLocation}" alt="">\n                        <div class="flexCol">\n                            <div>\n                            \t<h3>${t.title}</h3>\n                                <p>${t.information}</p>\n                            </div>\n                            <div>\n                                <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n                                <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Git</a>\n                            </div>\n                        </div>\n                    </div>\n                    `}))}))}))}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(),getProjectData()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))}));
\ No newline at end of file
diff --git a/src/api/index.php b/src/api/index.php
index 8219ffa..c686cfa 100644
--- a/src/api/index.php
+++ b/src/api/index.php
@@ -218,17 +218,17 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
     $data = $request->getParsedBody();
     if ($args["id"] != "undefined")
     {
-        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
+        if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
         {
             // uh oh sent some empty data
             $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], "", $data["projectLink"], $data["gitLink"]))
+        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
         {
             // uh oh something went wrong
-            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong", "data" => $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))));
             return $response->withStatus(500);
         }
         return $response;
@@ -243,13 +243,21 @@ $app->delete("/projectData/{id}", function (Request $request, Response $response
     global $projectData;
     if ($args["id"] != null)
     {
-        if (!$projectData->deleteProjectData($args["id"]))
+        $message = $projectData->deleteProjectData($args["id"]);
+        if ($message === "error")
         {
             // uh oh something went wrong
-            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong or the project with ID ".$args["id"]."does not exist")));
             return $response->withStatus(500);
         }
 
+        if ($message === "cannot delete")
+        {
+            //uh oh cannot delete the main project
+            $response->getBody()->write(json_encode(array("error" => "Cannot delete the main project")));
+            return $response->withStatus(409);
+        }
+
         return $response;
     }
 
@@ -261,7 +269,7 @@ $app->post("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
     $data = $request->getParsedBody();
-    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
+    if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
     {
         // uh oh sent some empty data
         $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
@@ -272,7 +280,7 @@ $app->post("/projectData", function (Request $request, Response $response)
     if (!is_int($insertedID))
     {
         // uh oh something went wrong
-        $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+        $response->getBody()->write(json_encode(array("error" => "Something went wrong", "message" => $insertedID)));
         return $response->withStatus(500);
     }
 
diff --git a/src/api/projectData.php b/src/api/projectData.php
index d72e614..9b25570 100644
--- a/src/api/projectData.php
+++ b/src/api/projectData.php
@@ -18,7 +18,7 @@ class projectData
     function getProjectData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects;");
+        $stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects ORDER BY isMainProject DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -37,52 +37,66 @@ class projectData
      * Update project data in the database with the given ID
      * @param string $ID - ID of the project in the database to update
      * @param string $title - Title of the project
-     * @param bool $isMainProject - Is the project a main project or not
+     * @param string $isMainProject - Is the project a main project or not
      * @param string $information - Information about the project
-     * @param string $imgLocation - Location of the image
      * @param string $projectLink - Link to the project
-     * @param string $gitLink - Link to the github repository
+     * @param string $gitLink - Link to the git repository
      * @return bool - True if project was updated, false if not and there was an error
      */
-    function updateProjectData(string $ID, string $title, bool $isMainProject, string $information, string $imgLocation, string $projectLink, string $gitLink): bool
+    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, imgLocation = :imgLocation, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
+
+        if ($isMainProject === "true")
+        {
+            $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
+            $stmtMainProject->execute();
+        }
+
+        $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information,  projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
         $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
+        $isMainProj = ($isMainProject) ? 1 : 0;
+        $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
-        $stmt->bindParam(":imgLocation", $imgLocation);
         $stmt->bindParam(":projectLink", $projectLink);
         $stmt->bindParam(":gitLink", $gitLink);
         $stmt->bindParam(":ID", $ID);
-        $stmt->execute();
-
-        if ($stmt->rowCount() > 0)
-        {
-            return true;
-        }
-
-        return false;
+        return $stmt->execute();
     }
 
     /**
      * Delete project data from the database
      * @param int $ID - ID of the project in the database to delete
-     * @return bool - True if project was deleted, false if not and there was an error
+     * @return string - True if project was deleted, false if not and there was an error
      */
-    function deleteProjectData(int $ID): bool
+    function deleteProjectData(int $ID): string
     {
         $conn = dbConn();
+
+        // check if the project is a main project if it is return false
+
+        $stmtMainProject = $conn->prepare("SELECT isMainProject FROM projects WHERE ID = :ID");
+        $stmtMainProject->bindParam(":ID", $ID);
+        $stmtMainProject->execute();
+        $result = $stmtMainProject->fetch(PDO::FETCH_ASSOC);
+
+        if ($result["isMainProject"] === "1")
+        {
+            return "cannot delete";
+        }
+
+        $this->deleteImage($ID);
+
         $stmt = $conn->prepare("DELETE FROM projects WHERE ID = :ID");
         $stmt->bindParam(":ID", $ID);
         $stmt->execute();
 
         if ($stmt->rowCount() > 0)
         {
-            return true;
+            return "ok";
         }
 
-        return false;
+        return "error";
     }
 
     /**
@@ -96,10 +110,18 @@ class projectData
      */
     function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): int|bool
     {
+
         $conn = dbConn();
+        if ($isMainProject === "true")
+        {
+            $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
+            $stmtMainProject->execute();
+        }
+
         $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
-        $stmt->bindParam(":isMainProject", $isMainProject);
+        $isMainProj = ($isMainProject) ? 1 : 0;
+        $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
         $stmt->bindParam(":gitLink", $gitLink);
@@ -148,6 +170,7 @@ class projectData
 
         if (file_exists($targetFile))
         {
+            $this->deleteImage($ID);
             // update the database with the new image location
             $conn = dbConn();
             $stmt = $conn->prepare("UPDATE projects SET imgLocation = :imgLocation WHERE ID = :ID");
@@ -165,4 +188,22 @@ class projectData
 
         return "Couldn't upload the image";
     }
+
+    /**
+     * Delete the image from the server
+     * @param int $ID - ID of the project in the database
+     */
+    private function deleteImage(int $ID): void
+    {
+        $conn = dbConn();
+        $imgStmt = $conn->prepare("SELECT imgLocation FROM projects WHERE ID = :ID");
+        $imgStmt->bindParam(":ID", $ID);
+        $imgStmt->execute();
+        $imgLocation = $imgStmt->fetch(PDO::FETCH_ASSOC)["imgLocation"];
+
+        if ($imgLocation != null)
+        {
+            unlink($imgLocation);
+        }
+    }
 }
diff --git a/src/editor/editor.html b/src/editor/editor.html
index 693901a..87bbf56 100644
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@@ -13,7 +13,6 @@
         <ul>
             <li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
             <li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
-            <li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
             <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
         </ul>
     </nav>
diff --git a/src/editor/js/editor.js b/src/editor/js/editor.js
index 5568841..cc1442a 100644
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@@ -14,7 +14,6 @@ document.addEventListener('DOMContentLoaded', () =>
     document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
     document.querySelector("#dateFromW").max = new Date().toISOString().split("T")[0];
 
-
     fetch("/api/timelineData/edu").then(res =>
     {
         res.json().then(json =>
@@ -56,11 +55,11 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 json.forEach(item =>
                 {
-                    addProject(item["ID"], (item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
+                    addProject(item["ID"], (item["isMainProject"] === "1" ? "true" : "false"), (item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
                 })
                 return;
             }
-            document.querySelector("#projects").innerHTML = "No project data found";
+            document.querySelector("#projList").innerHTML = "No project data found";
         })
     })
 })
@@ -177,7 +176,7 @@ document.querySelector("#addProj").addEventListener("submit", e =>
     data.append("title", document.querySelector("#projTitle").value);
     data.append("isMainProject", document.querySelector("#isMainProject").checked ? "true" : "false");
     data.append("information", document.querySelector("#projInfo").value);
-    data.append("projectLink", document.querySelector("#projLink").value);
+    data.append("projectLink", (document.querySelector("#projLink").value) ? document.querySelector("#projLink").value : "N/A");
     data.append("gitLink", document.querySelector("#gitLink").value);
 
     let imgData = new FormData();
@@ -197,7 +196,7 @@ document.querySelector("#addProj").addEventListener("submit", e =>
         {
             if (imgData.get("img") === "undefined")
             {
-                addProject(newProjectData.ID, "../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
+                addProject(newProjectData.ID, data.get("isMainProject"),"../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
                 document.querySelector("#addProj").reset();
                 return;
             }
@@ -220,11 +219,12 @@ document.querySelector("#addProj").addEventListener("submit", e =>
         }
 
         showErrorMessage(newProjectData.error, "proj");
+
     }).then(res => res.json().then(newProjectImage =>
     {
         if (res.ok)
         {
-            addProject(newProjectID, newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
+            addProject(newProjectID, data.get("isMainProject"), newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
             document.querySelector("#addProj").reset();
             return;
         }
@@ -574,12 +574,14 @@ function updateProjectItem(id, e)
     e.preventDefault();
     let data = {}
     data["title"] = document.querySelector(`#title${id}`).value;
-    data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked;
-    data["img"] = document.querySelector(`#img${id}`).files[0];
+    data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked ? "true" : "false";
     data["information"] = document.querySelector(`#info${id}`).value;
     data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
     data["gitLink"] = document.querySelector(`#git${id}`).value;
 
+let imgData = new FormData();
+    imgData.append("img", document.querySelector(`#img${id}`).files[0]);
+
     fetch("/api/projectData/" + id, {
         method: "PATCH",
         body: JSON.stringify(data),
@@ -591,9 +593,60 @@ function updateProjectItem(id, e)
     {
         if (res.ok)
         {
+
+            if (imgData.get("img") === "undefined")
+            {
+
+                if (data["isMainProject"] === "true")
+                {
+                    document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
+                    document.querySelector(`#isMainProject${id}`).checked = true;
+                    document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
+                }
+
+                document.querySelector(`#projectItem${id}`).classList.toggle("editing");
+                document.querySelector(`#title${id}`).setAttribute("disabled", "");
+                document.querySelector(`#info${id}`).setAttribute("disabled", "");
+                return;
+            }
+            console.log("updating image")
+            return fetch("/api/projectImage/" + id, {
+                method: "POST",
+                body: imgData,
+                headers: {
+                    "Authorization": "Bearer " + localStorage.getItem("token")
+                }
+            });
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        res.json().then(projectDataError =>
+        {
+            document.querySelector(`#projError${id}`).classList.remove("hidden");
+            document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
+        });
+
+    }).then(res => res.json().then(updatedProjectImage =>
+    {
+        if (res.ok)
+        {
+
+            if (data["isMainProject"] === "true")
+            {
+                document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
+                document.querySelector(`#isMainProject${id}`).checked = true;
+                document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
+            }
+
             document.querySelector(`#projectItem${id}`).classList.toggle("editing");
             document.querySelector(`#title${id}`).setAttribute("disabled", "");
             document.querySelector(`#info${id}`).setAttribute("disabled", "");
+            document.querySelector(`#projectImage${id}`).src = updatedProjectImage.imgLocation;
             return;
         }
 
@@ -603,12 +656,10 @@ function updateProjectItem(id, e)
             return;
         }
 
-        res.json().then(json =>
-        {
-            document.querySelector(`#projError${id}`).classList.remove("hidden");
-            document.querySelector(`#projError${id} div`).innerHTML = json.error;
-        });
-    });
+        document.querySelector(`#projError${id}`).classList.remove("hidden");
+        document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
+
+    }));
 
 }
 
@@ -655,13 +706,14 @@ function deleteProjectItem(id)
 /**
  * Adds a new project to the page
  * @param {number} id the id of the project from the database
+ * @param {string} isMainProject is it the main project
  * @param {string} imgLocation the relative path of the image
  * @param {string} title the title of the project
  * @param {string} information the information about the project
  * @param {string} projectLink the link to the project
  * @param {string} gitLink the link to the git repository
  */
-function addProject(id, imgLocation, title, information, projectLink, gitLink)
+function addProject(id , isMainProject, imgLocation, title, information, projectLink, gitLink)
 {
     let projectItem = document.createElement("form");
     projectItem.id = "projectItem" + id;
@@ -672,7 +724,7 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
             <button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
             <button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${id})"><i class="fa-solid fa-trash"></i></button>
         </div>
-        <img class="displayedImage" src="${(imgLocation === "N/A") ? "../imgs/500x400.jpg" : imgLocation}" alt="image preivew of the project">
+        <img class="displayedImage" id="projectImage${id}" src="${imgLocation}" alt="image preivew of the project">
         <div class="formControl imageContainer">
             <input type="file" name="img${id}" id="img${id}">
         </div>
@@ -681,7 +733,7 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
         </div>
         <div class="formControl isMainProject">
             <label class="checkContainer" for="isMainProject${id}">Is It The Main Project
-                <input type="checkbox" id="isMainProject${id}" name="isMainProject${id}">
+                <input type="checkbox" id="isMainProject${id}" name="isMainProject${id}" ${(isMainProject === "true" ? "checked" : "")}>
                 <span class="checkmark"></span>
             </label>
         </div> 
@@ -704,5 +756,14 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
            <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
         </div>
     `;
+
+    if (isMainProject === "true")
+    {
+        document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
+
+        document.querySelector("#projList").prepend(projectItem);
+        return;
+    }
+
     document.querySelector("#projList").appendChild(projectItem);
 }
diff --git a/src/js/main.js b/src/js/main.js
index 1f7d899..c92149f 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -171,7 +171,7 @@ function getProjectData()
 						document.getElementById("mainProj").innerHTML = `
 						<h1>${item["title"]}</h1>
 						<div>
-							<img src="imgs/1000x800.jpg" alt="">
+							<img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
 							<div class="flexRow">
 								<p>${item["information"]}</p>
 								<div class="flexCol">
@@ -186,7 +186,7 @@ function getProjectData()
 
                     document.querySelector("#otherProj div").innerHTML += `
                     <div class="oProjItem">
-                        <img src="imgs/500x400.jpg" alt="">
+                        <img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
                         <div class="flexCol">
                             <div>
                             	<h3>${item["title"]}</h3>
-- 
2.43.0