changed how a few code snippets work and added in all projects section to view all the current projects includig <div class="grid__item"></div>

<div class="grid__item"></div>
                                                                                                                   <div class="grid__item"></div>
                                                                                                                   <div class="grid__item"></div>the one as the main

Signed-off-by: rodude123 <rodude123@gmail.com>

.gitignore

@@ -77,3 +77,4 @@ vendor/*
 node_modules/*
 src/api/config.php
 dist/api/config.php
+dist/api/.htaccess

dist/api/index.php

@@ -225,10 +225,19 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
+        $update = $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
+
+        if ($update === "unset main project")
         {
             // uh oh 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"]))));
+            $response->getBody()->write(json_encode(array("error" => "Can't unset project as main project, try updating another project as the main project")));
+            return $response->withStatus(400);
+        }
+
+        if (!$update)
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
             return $response->withStatus(500);
         }
         return $response;

dist/api/projectData.php

@@ -41,12 +41,25 @@ class projectData
      * @param string $information - Information about the project
      * @param string $projectLink - Link to the project
      * @param string $gitLink - Link to the git repository
-     * @return bool - True if project was updated, false if not and there was an error
+     * @return bool|string - True if project was updated, false if not and there was an error, or an error string
      */
-    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
+    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool | string
     {
         $conn = dbConn();
 
+        if ($isMainProject === "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 "unset main project";
+            }
+        }
+
         if ($isMainProject === "true")
         {
             $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
@@ -55,7 +68,7 @@ class projectData
 
         $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information,  projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
         $stmt->bindParam(":title", $title);
-        $isMainProj = ($isMainProject) ? 1 : 0;
+        $isMainProj = ($isMainProject === "true") ? 1 : 0;
         $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
@@ -120,7 +133,7 @@ class projectData
 
         $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
-        $isMainProj = ($isMainProject) ? 1 : 0;
+        $isMainProj = ($isMainProject === "true") ? 1 : 0;
         $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);

dist/js/projects.js

@@ -0,0 +1 @@
+const scrollLimit=150;function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((n=>{t.ok&&n.forEach((t=>{if("1"===t.isMainProject)return document.querySelector("#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").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")},document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.addEventListener("DOMContentLoaded",(()=>{getProjectData(),document.getElementById("year").innerHTML=(new Date).getFullYear().toString()}));

dist/js/text.js

@@ -0,0 +1 @@
+let 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)}))}document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));

dist/js/typewriter.js

@@ -0,0 +1 @@
+let 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)}))}document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));

dist/projects.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - All Projects</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav><input type="checkbox" id="nav-check"> <a href="/"><h1>rohit pai</h1></a><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li><li><a href="/#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li><li><a href="#allProjects" class="textShadow active"><span>&lt;</span>projects<span>&gt;</span></a></li><li><a href="/#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li><li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="#allProjects"><i class="fa-solid fa-chevron-down"></i></a></div></header><main><section id="allProjects"><div class="mainProj" id="mainProj"></div><div class="otherProj" id="otherProj"></div></section></main><footer class="flexRow"><div class="spacer"></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="js/typewriter.js"></script><script src="js/projects.js"></script></body></html>

src/api/index.php

@@ -81,6 +81,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
+        $response->withStatus(201);
         return $response;
     }
 
@@ -100,6 +101,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
             return $response->withStatus(500);
         }
 
+        $response->withStatus(201);
         return $response;
     }
 
@@ -160,6 +162,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
     
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        $response->withStatus(201);
         return $response;
     }
 
@@ -186,6 +189,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
         }
         
         $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        $response->withStatus(201);
         return $response;
     }
 
@@ -225,10 +229,19 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
             return $response->withStatus(400);
         }
 
-        if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
+        $update = $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
+
+        if ($update === "unset main project")
         {
             // uh oh 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"]))));
+            $response->getBody()->write(json_encode(array("error" => "Can't unset project as main project, try updating another project as the main project")));
+            return $response->withStatus(400);
+        }
+
+        if (!$update)
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
             return $response->withStatus(500);
         }
         return $response;

src/api/projectData.php

@@ -41,12 +41,25 @@ class projectData
      * @param string $information - Information about the project
      * @param string $projectLink - Link to the project
      * @param string $gitLink - Link to the git repository
-     * @return bool - True if project was updated, false if not and there was an error
+     * @return bool|string - True if project was updated, false if not and there was an error, or an error string
      */
-    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
+    function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool | string
     {
         $conn = dbConn();
 
+        if ($isMainProject === "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 "unset main project";
+            }
+        }
+
         if ($isMainProject === "true")
         {
             $stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
@@ -55,7 +68,7 @@ class projectData
 
         $stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information,  projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
         $stmt->bindParam(":title", $title);
-        $isMainProj = ($isMainProject) ? 1 : 0;
+        $isMainProj = ($isMainProject === "true") ? 1 : 0;
         $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);
@@ -120,7 +133,7 @@ class projectData
 
         $stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
         $stmt->bindParam(":title", $title);
-        $isMainProj = ($isMainProject) ? 1 : 0;
+        $isMainProj = ($isMainProject === "true") ? 1 : 0;
         $stmt->bindParam(":isMainProject", $isMainProj);
         $stmt->bindParam(":information", $information);
         $stmt->bindParam(":projectLink", $projectLink);

src/css/contact.css

@@ -53,7 +53,7 @@ div#findMe .socialIcons div a:hover svg {
     fill: var(--primaryHover);
 }
 
-div#sayHello  #contactForm{
+div#sayHello  #contactForm {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -64,6 +64,7 @@ div#sayHello  #contactForm{
     display: flex;
     flex-direction: row;
     gap: 1em;
+    width: 100%;
 }
 
 div.message {
@@ -89,6 +90,7 @@ div.message {
     transition: all 0.5s ease-in-out;
     opacity: 1;
     margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 div.message.error {

src/css/nav.css

@@ -18,11 +18,12 @@ nav {
     top: 0;
     width: 100%;
     transition: background-color 0.4s ease-in;
+    color: #FFFFFF;
+    z-index: 1;
 }
 
 nav.scrolled {
     background-color: var(--navBack);
-    z-index: 1;
 }
 
 nav #nav-check {
@@ -100,4 +101,4 @@ div h1 span {
     50% {
         visibility: hidden;
     }
-}
+}

src/css/projects.css

@@ -21,7 +21,7 @@ section#projects .mainProj {
     padding: 0 2.5em 5em 0;
 }
 
-section#projects .mainProj img, section#projects .otherProj .oProjItem img {
+section#projects img, section#allProjects img {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
@@ -56,12 +56,11 @@ section#projects .otherProj > div{
     gap: 2em;
 }
 
-section#projects .otherProj > div .oProjItem {
+section#projects .otherProj > div .oProjItem, section#allProjects #otherProj .oProjItem {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
-    margin: 0 auto;
     width: 90%;
     border: 1px solid var(--grey);
     gap: 1em;
@@ -72,6 +71,10 @@ section#projects .otherProj > div .oProjItem {
     padding: 0.75em 1em;
 }
 
+section#projects .otherProj > div .oProjItem {
+    margin: 0 auto;
+}
+
 section#projects .otherProj > div .oProjItem:nth-child(2) {
     flex-direction: row-reverse;
 }
@@ -92,4 +95,57 @@ section#projects .oProjItem .flexCol div:nth-child(2) {
 
 section#projects .flexCol div:nth-child(2) .btn {
     padding: 0.25em 0.5em;
-}
+}
+
+/*All projects page*/
+
+section#allProjects {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 2.5rem;
+    gap: 5em;
+}
+
+section#allProjects #mainProj {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--grey);
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    padding: 1.5em 2em;
+    margin-top: 3em;
+    width: 50%;
+}
+
+section#allProjects #otherProj .oProjItem {
+    flex-direction: column;
+    /*width: 30%;*/
+}
+
+section#allProjects #mainProj img {
+    width: 100%;
+    max-width: 30rem;
+}
+
+section#allProjects #otherProj {
+    /*display: flex;*/
+    /*flex-direction: row;*/
+    /*justify-content: flex-start;*/
+    /*align-items: center;*/
+    /*flex-wrap: wrap;*/
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
+    gap: 2rem;
+}
+
+section#allProjects #otherProj img {
+    width: 100%;
+    max-width: 20rem;
+}
+

src/editor/js/editor.js

@@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 for (let i = 0; i < json.length; i++)
                 {
-                    let endPeriod = json[i].endPeriod === null ? "Present" : json[i].endPeriod;
+                    let endPeriod = json[i].endPeriod === "0000-00-00" ? "Present" : json[i].endPeriod;
                     addWorkData(json[i].ID, json[i].startPeriod, endPeriod, json[i].companyName, json[i].area, json[i].title);
                 }
                 return;
@@ -154,7 +154,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
     {
         if (res.ok)
         {
-            let endPeriod = data.get("dateTo") === null ? "Present" : data.get("dateTo ");
+            let endPeriod = data.get("dateTo") === "" ? "Present" : data.get("dateTo ");
             addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
             document.querySelector("#addWork").reset();
             return;
@@ -384,7 +384,7 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
         -
         <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod === 'Present' ? '' : endPeriod}">
     </div>
-    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? '' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
+    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? 'Present' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
     <div class="companyAreaContainer formControl">
         <input type="text" name="companyName${id}" id="companyName${id}" value="${companyName}" disabled>
         -
@@ -579,7 +579,7 @@ function updateProjectItem(id, e)
     data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
     data["gitLink"] = document.querySelector(`#git${id}`).value;
 
-let imgData = new FormData();
+    let imgData = new FormData();
     imgData.append("img", document.querySelector(`#img${id}`).files[0]);
 
     fetch("/api/projectData/" + id, {

src/imgs/gitea.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#609926;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Guides">
+</g>
+<g id="Icon">
+	<circle class="st0" cx="512" cy="512" r="512"/>
+	<g>
+		<path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6
+			c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6
+			H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9
+			C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3
+			c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
+		<path class="st1" d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6
+			c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1
+			c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9
+			c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9
+			c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3
+			c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3
+			c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
+	</g>
+</g>
+</svg>

src/index.html

@@ -10,30 +10,29 @@
     <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
 </head>
 <body>
+    <nav>
+        <input type="checkbox" id="nav-check">
+        <a href="/">
+            <h1>rohit pai</h1>
+        </a>
+
+        <div class="nav-btn">
+            <label for="nav-check">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+        </div>
+
+        <ul>
+            <li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
+            <li><a href="#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
+            <li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
+            <li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
+            <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
+        </ul>
+    </nav>
     <header>
-        <nav>
-            <input type="checkbox" id="nav-check">
-            <a href="/">
-                <h1>rohit pai</h1>
-            </a>
-
-            <div class="nav-btn">
-                <label for="nav-check">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </label>
-            </div>
-
-            <ul>
-                <li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
-                <li><a href="#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
-                <li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
-                <li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
-                <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
-            </ul>
-        </nav>
-
         <div>
             <h1>full stack developer</h1>
             <a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
@@ -45,13 +44,10 @@
         <section id="about">
             <h1>about</h1>
             <div>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus
+                <p>Hi, I'm Rohit, a computer science student at The University of Nottingham with experience in multiple
-                molestias
+                    programming languages such as Java, C#, Python, HTML, CSS, JS, PHP. Bringing forth a motivated
-                officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
+                    attitude and a variety of powerful skills. Very good at bringing a team together to get a project
-                nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
+                    finished. Below are some of my projects that I have worked on. </p>
-                exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
-                beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
-                nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
                 <a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
             </div>
         </section>
@@ -83,7 +79,7 @@
                 <div>
 
                 </div>
-                <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
+                <a href="projects.html" class="btn btnPrimary boxShadowIn boxShadowOut">View All</a>
             </div>
         </section>
 
@@ -93,31 +89,53 @@
                 <div class="findMeContainer">
                     <div class="flexRow socialIcons">
                         <div>
-                            <a href="https://linkedin.com/in/username">
+                            <a href="https://linkedin.com/in/rohitpai98">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            </a >
+                                    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/>
-                            <a href="https://github.com/rodude123">
+                                </svg>
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
                             </a>
-                            <a href="https://instagram.com/username/">
+                            <a href="https://github.com/rodude123">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg> 
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/>
+                                </svg>
+                            </a>
+                            <a href="https://instagram.com/rodude123/">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/>
+                                </svg>
                             </a>
                         </div>
                         <div>
                             <a href="#">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/>
+                                </svg>
                             </a>
                             <a href="mailto:rohit@rohitpai.co.uk">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/>
+                                </svg>
                             </a>
-                            <a href="tel:07123456789">
+                            <a href="https://gitea.rohitpai.co.uk/rodude123">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg"
+                                     x="0px" y="0px" viewBox="0 0 1024 1024"
+                                     style="enable-background:new -1 0 1024 1024;" xml:space="preserve">
+                                    <style type="text/css">.st1 {fill: #FFFFFF;}</style>
+                                    <g id="Guides"></g>
+                                    <g id="Icon"><circle class="st0" cx="512" cy="512" r="512"/>
+                                        <g><path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6 c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6 H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9 C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3 c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
+                                            <path class="st1"
+                                                  d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6 c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1 c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9 c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9 c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3 c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3 c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
+                                        </g>
+                                    </g>
+                                </svg>
                             </a>
                         </div>
                     </div>
                     <img src="./imgs/profile.jpg"
                          alt="My professional picture taken in brighton near north street at night wearing a bage jacket and checkered shirt"
-                         class="profile"></div>
+                         class="profile">
+                </div>
             </div>
             <div id="sayHello">
                 <h1>say hello</h1>
@@ -161,6 +179,7 @@
             </div>
         </footer>
     </main>
-    <script src="js/main.js"></script>
+    <script src="js/index.js"></script>
+    <script src="js/typewriter.js"></script>
 </body>
 </html> 

src/js/index.js

@@ -1,9 +1,6 @@
 // scrolling effect
 const scrollLimit = 150;
 
-// array with texts to type in typewriter
-var dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
-
 window.onscroll = () =>
 {
 	// check if scrolled past limit if so add scrolled class to change background of nav
@@ -43,63 +40,6 @@ window.onscroll = () =>
 	});
 };
 
-// typewriter effect
-
-/**
- * typeWriter function
- * type one character at a time in the typewriter
- * keeps calling itself until the text is finished
- * @param {string} text text to type
- * @param {number} i current index at which the next character should be typed
- * @param {function} fnCallback function to call back in this case the StartTextAnimation function
- */
-function typeWriter(text, i, fnCallback)
-{
-    // check if text isn't finished yet
-    if (i < (text.length))
-    {
-        // add next character to h1
-        document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";
-
-        // wait for a while and call this function again for next character
-        setTimeout(function ()
-        {
-            typeWriter(text, i + 1, fnCallback)
-        }, 100);
-    }
-    // text finished, call callback if there is a callback function
-    else if (typeof fnCallback == "function")
-    {
-        // call callback after timeout
-        setTimeout(fnCallback, 700);
-    }
-}
-
-/**
- * StartTextAnimation function
- * start a typewriter animation for a text in the dataText array
- * @param {number} i current index at which text should be typed next
- */
-function StartTextAnimation(i)
-{
-    if (typeof dataText[i] === "undefined")
-    {
-        setTimeout(function ()
-        {
-            StartTextAnimation(0);
-        }, 1500);
-    }
-    else if (i < dataText[i].length)
-    {
-        // text exists! start typewriter animation
-        typeWriter(dataText[i], 0, function ()
-        {
-            // after callback (and whole text has been animated), start next text
-            setTimeout(StartTextAnimation, 1500, i + 1);
-        });
-    }
-}
-
 // cv timeline data
 /**
  * getTimelineData function
@@ -139,7 +79,7 @@ function getTimelineData()
 				{
 					let timelineItem = document.createElement("div")
 					timelineItem.classList.add("timelineItem");
-					let endPeriod = item["endPeriod"] === null ? "Present" : new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions);
+					let endPeriod = item["endPeriod"] === "0000-00-00" ? "Present" : new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions);
 					timelineItem.innerHTML = `
 					<h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${endPeriod}</h3>
 					<span>${item["companyName"]} - ${item["area"]}</span>
@@ -164,42 +104,42 @@ function getProjectData()
 		{
 			if (res.ok)
 			{
-				json.forEach(item =>
+				for (let i = 0; i < 4; i++){
-				{
+					const item = json[i];
-					if (item["isMainProject"] === "1")
+					if (json[i]["isMainProject"] === "1")
 					{
 						document.getElementById("mainProj").innerHTML = `
-						<h1>${item["title"]}</h1>
+						<h1>${json[i]["title"]}</h1>
 						<div>
-							<img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
+							<img src="${(json[i]["imgLocation"] === "") ?  "../imgs/placeholder.png" : json[i]["imgLocation"]}" alt="">
 							<div class="flexRow">
 								<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="${(json[i]["projectLink"] === "N/A") ? "#" : json[i]["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(json[i]["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\"" : ""}>Git</a>
+									<a href="${(json[i]["gitLink"] === "N/A") ? "#" : json[i]["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(json[i]["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
 								</div>
 							</div>
 						</div>
 						`;
-                        return null;
+                        continue;
 					}
 
                     document.querySelector("#otherProj div").innerHTML += `
                     <div class="oProjItem">
-                        <img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
+                        <img src="${(json[i]["imgLocation"] === "") ?  "../imgs/placeholder.png" : json[i]["imgLocation"]}" alt="">
                         <div class="flexCol">
                             <div>
-                            	<h3>${item["title"]}</h3>
+                            	<h3>${json[i]["title"]}</h3>
-                                <p>${item["information"]}</p>
+                                <p>${json[i]["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="${(json[i]["projectLink"] === "N/A") ? "#" : json[i]["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(json[i]["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\"" : ""}Git</a>
+                                <a href="${(json[i]["githubLink"] === "N/A") ? "#" : json[i]["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(json[i]["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
                             </div>
                         </div>
                     </div>
                     `;
-				})
+				}
 			}
 		})
 	})
@@ -207,9 +147,6 @@ function getProjectData()
 
 document.addEventListener('DOMContentLoaded', () =>
 {
-    // start the text animation
-    StartTextAnimation(0);
-
     // get timeline data and add it to the timeline
 	getTimelineData();
 

src/js/projects.js

@@ -0,0 +1,83 @@
+
+// nav bar scroll effect
+const scrollLimit = 150;
+
+window.onscroll = () =>
+{
+    // check if scrolled past limit if so add scrolled class to change background of nav
+    if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
+    {
+        document.querySelector("nav").classList.add("scrolled");
+    }
+    else
+    {
+        document.querySelector("nav").classList.remove("scrolled");
+    }
+};
+
+document.querySelector("#goBackToTop").addEventListener("click", () =>
+{
+    window.scrollTo(0, 0);
+});
+
+/**
+ * getProjectData function
+ * Gets the project data from the backend route and appends the data on to the timeline.
+ */
+function getProjectData()
+{
+    fetch("/api/projectData").then(res =>
+    {
+        res.json().then(json =>
+        {
+            if (res.ok)
+            {
+                json.forEach(item =>
+                {
+                    if (item["isMainProject"] === "1")
+                    {
+                        document.querySelector("#mainProj").innerHTML = `
+						<h1>${item["title"]}</h1>
+						<div>
+							<img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
+							<div class="flexRow">
+								<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\"" : ""}>Git</a>
+								</div>
+							</div>
+						</div>
+						`;
+                        return null;
+                    }
+
+                    document.querySelector("#otherProj").innerHTML += `
+                    <div class="oProjItem">
+                        <img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" 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\"" : ""}Git</a>
+                            </div>
+                        </div>
+                    </div>
+                    `;
+                })
+            }
+        })
+    })
+}
+
+document.addEventListener('DOMContentLoaded', () =>
+{
+    // get projectData
+    getProjectData();
+
+    // update the year in the footer
+    document.getElementById("year").innerHTML = new Date().getFullYear().toString();
+});

src/js/typewriter.js

@@ -0,0 +1,66 @@
+// array with texts to type in typewriter
+let dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
+
+// typewriter effect
+
+/**
+ * typewriter function
+ * type one character at a time in the typewriter
+ * keeps calling itself until the text is finished
+ * @param {string} text text to type
+ * @param {number} i current index at which the next character should be typed
+ * @param {function} fnCallback function to call back in this case the StartTextAnimation function
+ */
+function typewriter(text, i, fnCallback)
+{
+    // check if text isn't finished yet
+    if (i < (text.length))
+    {
+        // add next character to h1
+        document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";
+
+        // wait for a while and call this function again for next character
+        setTimeout(function ()
+        {
+            typewriter(text, i + 1, fnCallback)
+        }, 100);
+    }
+    // text finished, call callback if there is a callback function
+    else if (typeof fnCallback == "function")
+    {
+        // call callback after timeout
+        setTimeout(fnCallback, 700);
+    }
+}
+
+/**
+ * StartTextAnimation function
+ * start a typewriter animation for a text in the dataText array
+ * @param {number} i current index at which text should be typed next
+ */
+function StartTextAnimation(i)
+{
+    if (typeof dataText[i] === "undefined")
+    {
+        setTimeout(function ()
+        {
+            StartTextAnimation(0);
+        }, 1500);
+    }
+    else if (i < dataText[i].length)
+    {
+        // text exists! start typewriter animation
+        typewriter(dataText[i], 0, function ()
+        {
+            // after callback (and whole text has been animated), start next text
+            setTimeout(StartTextAnimation, 1500, i + 1);
+        });
+    }
+}
+
+
+document.addEventListener('DOMContentLoaded', () =>
+{
+    // start the text animation
+    StartTextAnimation(0);
+});

src/projects.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Rohit Pai - All Projects</title>
+    <link rel="stylesheet" href="css/main.css">
+    <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <nav>
+        <input type="checkbox" id="nav-check">
+        <a href="/">
+            <h1>rohit pai</h1>
+        </a>
+
+        <div class="nav-btn">
+            <label for="nav-check">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+        </div>
+
+        <ul>
+            <li><a href="/#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li>
+            <li><a href="/#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
+            <li><a href="#allProjects" class="textShadow active"><span>&lt;</span>projects<span>&gt;</span></a></li>
+            <li><a href="/#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
+            <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
+        </ul>
+    </nav>
+
+    <header>
+        <div>
+            <h1>full stack developer</h1>
+            <a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
+            <a href="#allProjects"><i class="fa-solid fa-chevron-down"></i></a>
+        </div>
+    </header>
+
+    <main>
+        <section id="allProjects">
+            <div class="mainProj" id="mainProj">
+
+            </div>
+            <div class="otherProj" id="otherProj">
+
+            </div>
+        </section>
+    </main>
+
+    <footer class="flexRow">
+        <div class="spacer"></div>
+        <p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p>
+        <div class="button">
+            <button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button>
+        </div>
+    </footer>
+
+    <script src="js/typewriter.js"></script>
+    <script src="js/projects.js"></script>
+</body>
+</html>