Merge pull request #10 from rodude123/projects

Created Projects Section

dist/api/config.php

@@ -0,0 +1,21 @@
+<?php
+//////////// Config file /////////////////////
+/// Used for storing important information ///
+/// such as passwords, usernames etc.      ///
+//////////////////////////////////////////////
+
+function dbConn(): PDO|string
+{
+    $host = "localhost";
+    $dbName = "u987021215_cms";
+    $username = "u987021215_rodude123";
+    $password = "pFHS5qKhkyaDumgf";
+    try
+    {
+        return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
+    }
+    catch (PDOException $e)
+    {
+        return "Connection failed: " . $e->getMessage();
+    }
+}

dist/api/index.php

@@ -3,13 +3,15 @@
 /// Creates base routes and runs         ///
 /// respective functions                 ///
 ////////////////////////////////////////////
-use Psr\Http\Message\ResponseInterface as Response;
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Slim\Factory\AppFactory;
-
 //require “routes.php”;
 require "../vendor/autoload.php";
 include "timelineData.php";
+include "projectData.php";
+use api\projectData;
+use api\timelineData;
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Slim\Factory\AppFactory;
 
 // Start slim
 $app = AppFactory::create();
@@ -21,7 +23,8 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
 
 $app->setBasePath("/api");
 
-$timelineData = new TimelineData();
+$timelineData = new timelineData();
+$projectData = new projectData();
 
 $app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
 {
@@ -46,12 +49,31 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     $json = json_encode($result);
 
     $response->getBody()->write($json);
-    
-    //if it is an error give a 404 code since it can't find the data
+    //if it is an error give a 403 code since it can't find the data
     if(array_key_exists("errorMessage", $result[0]))
     {
-        $response = $response->withStatus(404);
+        $response = $response->withStatus(403);
     }
+
+    //use content type json to indicate json data on frontend.
+    return $response->withHeader("Content-Type", "application/json");
+});
+
+$app->get('/projectData', function (Request $request, Response $response)
+{
+    global $projectData;
+
+    $result= $projectData->getProjectData();
+
+    $json = json_encode($result);
+
+    $response->getBody()->write($json);
+
+    if(array_key_exists("errorMessage", $result[0]))
+    {
+        $response = $response->withStatus(403);
+    }
+
     //use content type json to indicate json data on frontend.
     return $response->withHeader("Content-Type", "application/json");
 });

dist/api/projectData.php

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

dist/api/timelineData.php

@@ -0,0 +1,52 @@
+<?php
+namespace api;
+use PDO;
+
+require_once "./config.php";
+
+/**
+ * TimelineData class
+ * Define all functions which either get, update, create or delete timeline data
+ */
+class timelineData
+{
+    function getEduData()
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, grade, course  FROM edu ORDER BY startPeriod DESC;");
+        $stmt->execute();
+
+        // set the resulting array to associative
+        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+        
+        if ($result)
+        {
+            return $result;
+        }
+        else 
+        {
+            return array(array("errorMessage" => "Error, edu data not found"));
+        }
+    }
+    
+    function getWorkData()
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
+        $stmt->execute();
+
+        // set the resulting array to associative
+        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+        
+        if ($result)
+        {
+            return $result;
+        }
+        else 
+        {
+            return array(array("errorMessage" => "Error, work data not found"));
+        }
+    }
+    
+    
+}

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

gulpfile.js

@@ -67,7 +67,7 @@ gulp.task("ftp", () =>
 		parallel: 1,
 	});
 	return gulp.src("dist/**", {base: "dist", dot: true})
-		.pipe(conn.newer("/"))
+		.pipe(conn.newerOrDifferentSize("/"))
 		.pipe(conn.dest("/"));
 });
 
@@ -79,11 +79,14 @@ gulp.task("deploy", () =>
 gulp.task("browserSync", () =>
 {
 	browserSync.init({
-		server: {
-			baseDir: "dist"
-		}
+		// server: {
+		// 	baseDir: "dist"
+		// },
+		proxy: "https://rohitpai.tech/",
+		serveStatic: ["./dist"]
+
 	});
 	gulp.watch("dist").on("change", browserSync.reload)
 });
 
-gulp.task("default", gulp.series(gulp.parallel("watchFiles", "deploy")));
+gulp.task("default", gulp.series(gulp.parallel("watchFiles", "browserSync")));

package.json

@@ -12,7 +12,7 @@
   "author": "Rohit Pai",
   "license": "ISC",
   "dependencies": {
-    "browser-sync": "^2.26.14",
+    "browser-sync": "^2.27.5",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-deploy-ftp": "^1.0.1",
@@ -20,8 +20,9 @@
     "gulp-htmlmin": "^5.0.1",
     "gulp-terser": "^2.0.1",
     "gulp-uglify": "^3.0.2",
+    "jest": "^27.2.0",
     "normalize.css": "^8.0.1",
-    "require": "^0.4.4",
+    "require": "^2.4.20",
     "vinyl-ftp": "^0.6.1"
   }
 }

src/api/config.php

@@ -0,0 +1,21 @@
+<?php
+//////////// Config file /////////////////////
+/// Used for storing important information ///
+/// such as passwords, usernames etc.      ///
+//////////////////////////////////////////////
+
+function dbConn(): PDO|string
+{
+    $host = "localhost";
+    $dbName = "u987021215_cms";
+    $username = "u987021215_rodude123";
+    $password = "pFHS5qKhkyaDumgf";
+    try
+    {
+        return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
+    }
+    catch (PDOException $e)
+    {
+        return "Connection failed: " . $e->getMessage();
+    }
+}

src/api/index.php

@@ -3,13 +3,15 @@
 /// Creates base routes and runs         ///
 /// respective functions                 ///
 ////////////////////////////////////////////
-use Psr\Http\Message\ResponseInterface as Response;
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Slim\Factory\AppFactory;
-
 //require “routes.php”;
 require "../vendor/autoload.php";
 include "timelineData.php";
+include "projectData.php";
+use api\projectData;
+use api\timelineData;
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Slim\Factory\AppFactory;
 
 // Start slim
 $app = AppFactory::create();
@@ -21,7 +23,8 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
 
 $app->setBasePath("/api");
 
-$timelineData = new TimelineData();
+$timelineData = new timelineData();
+$projectData = new projectData();
 
 $app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
 {
@@ -46,12 +49,32 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     $json = json_encode($result);
 
     $response->getBody()->write($json);
+    return $response;
+//    //if it is an error give a 403 code since it can't find the data
+//    if(array_key_exists("errorMessage", $result[-1]))
+//    {
+//        $response = $response->withStatus(403);
+//    }
+//
+//    //use content type json to indicate json data on frontend.
+//    return $response->withHeader("Content-Type", "application/json");
+});
 
-    //if it is an error give a 404 code since it can't find the data
-    if(array_key_exists("errorMessage", $result[0]))
+$app->get('/projectData', function (Request $request, Response $response)
+{
+    global $projectData;
+
+    $result= $projectData->getProjectData();
+
+    $json = json_encode($result);
+
+    $response->getBody()->write($json);
+
+    if(array_key_exists("errorMessage", $result[-1]))
     {
-        $response = $response->withStatus(404);
+        $response = $response->withStatus(403);
     }
+
     //use content type json to indicate json data on frontend.
     return $response->withHeader("Content-Type", "application/json");
 });

src/api/projectData.php

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

src/api/timelineData.php

@@ -1,11 +1,14 @@
 <?php
+namespace api;
+use PDO;
+
 require_once "./config.php";
 
 /**
  * TimelineData class
  * Define all functions which either get, update, create or delete timeline data
  */
-class TimelineData
+class timelineData
 {
     function getEduData()
     {

src/css/cv.css

@@ -1,30 +1,30 @@
 /****** CV Styles *******/
 
-section#curriculumvitae{
+section#curriculumVitae{
     background-color: var(--primaryDefault);
     color: #FFFFFF;
     padding: 2em 0;
 }
 
-section#curriculumvitae .cvGrid {
+section#curriculumVitae .cvGrid {
     display: flex;
     flex-direction: row;
     padding: 0 1.5rem;
     flex-wrap: wrap;
 }
 
-section#curriculumvitae .cvGrid > div {
+section#curriculumVitae .cvGrid > div {
     width: 45%;
     display: flex;
     flex-direction: column;
     min-height: 100%;
 }
 
-section#curriculumvitae .cvGrid h2 {
+section#curriculumVitae .cvGrid h2 {
     text-align: center;
 }
 
-section#curriculumvitae .timeline {
+section#curriculumVitae .timeline {
     position: relative;
     max-width: 30em;
     gap: 1em;
@@ -33,35 +33,26 @@ section#curriculumvitae .timeline {
     height: 100%;
 }
 
-/*section#curriculumvitae .timeline#edu {
-    margin: 0 auto;
-}
-
-section#curriculumvitae .timeline#work {
-    margin-left: auto;
-}*/
-
-section#curriculumvitae #work {
+section#curriculumVitae #work {
     margin: 0 auto 0 8rem;
 }
 
-section#curriculumvitae .timeline:before {
+section#curriculumVitae .timeline:before {
     content: "";
     position: absolute;
     height: 100%;
     border: 4px var(--timelineItemBrdr) solid;
-    /*border-bottom: 4;*/
     right: 194px;
     top: 0;
 }
 
-section#curriculumvitae .timeline:after {
+section#curriculumVitae .timeline:after {
     content: "";
     display: table;
     clear: both;
 }
 
-section#curriculumvitae .timelineItem {
+section#curriculumVitae .timelineItem {
     border: 2px solid var(--timelineItemBrdr);
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
@@ -72,12 +63,12 @@ section#curriculumvitae .timelineItem {
     background-color: var(--primaryHover);
 }
 
-section#curriculumvitae .timelineItem:before, .timelineItem:after {
+section#curriculumVitae .timelineItem:before, .timelineItem:after {
     content: '';
     position: absolute;
 }
 
-section#curriculumvitae .timelineItem:before{
+section#curriculumVitae .timelineItem:before{
     content: '';
     right: -20px;
     top: calc(50% - 5px);
@@ -86,20 +77,20 @@ section#curriculumvitae .timelineItem:before{
     border-width: 20px;
     transform: rotate(45deg);
 }
-section#curriculumvitae .timelineItem:nth-child(2n) {
+section#curriculumVitae .timelineItem:nth-child(2n) {
     margin-left: 21em;
 }
 
-section#curriculumvitae .timelineItem:nth-child(2n):before {
+section#curriculumVitae .timelineItem:nth-child(2n):before {
     right: auto;
     left: -20px;
     border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
 }
 
-section#curriculumvitae .timelineItem h3 {
+section#curriculumVitae .timelineItem h3 {
     font-weight: normal;
 }
 
-section#curriculumvitae .timelineItem span {
+section#curriculumVitae .timelineItem span {
     color: hsl(0, 0%, 90%);
 }

src/css/main.css

@@ -2,10 +2,11 @@
 @import "/node_modules/normalize.css/normalize.css";
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
 /*local imports*/
+@import "templateStyles.css";
 @import "nav.css";
 @import "about.css";
 @import "cv.css";
-@import "templateStyles.css";
+@import "projects.css";
 
 /****** Root Style ******/
 :root {
@@ -18,7 +19,9 @@
     --timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
     --errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1);
     --grey: hsla(0, 0%, 39%, 1);
-    --mutedGrey: hsla(0, 0%, 67%, 0.58);
+    --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);
 
@@ -28,7 +31,9 @@
     --headingFS: 1.5rem;
 }
 
-
+*{
+    box-sizing: border-box;
+}
 
 /**** Media Queries *****/
 
@@ -246,6 +251,63 @@
     section#curriculumvitae .cvGrid {
         padding: 0;
     }
+
+    /**** Projects Styles ***/
+
+    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;
+
+    }
+
 }
 
 @media screen and (max-width: 55em) {
@@ -296,4 +358,16 @@
         padding: 0.1em 1em;
     }
 
+    /**** Projects Styles ***/
+
+    section#projects .mainProj .flexCol {
+        flex-direction: column;
+    }
+
+    section#projects .oProjItem .flexCol div:nth-child(2) {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
 }

src/css/nav.css

@@ -86,7 +86,7 @@ header div button {
 }
 
 i.fa-chevron-down {
-    color: var(--mutedGrey);
+    color: hsla(0, 0%, 67%, 0.58);
     font-size: 3.75em;
     margin: 1.5rem 0;
 }

src/css/projects.css

@@ -0,0 +1,95 @@
+/*** Projects Styles ****/
+
+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: 0.25em 0.5em;
+}

src/css/templateStyles.css

@@ -40,6 +40,7 @@ a.btn, form input[type="submit"] {
     border-radius: 0.625em;
     border: 0.3215em solid var(--primaryDefault);
     color: #FFFFFF;
+    text-align: center;
 }
 
 a.btn:hover {
@@ -56,6 +57,17 @@ a.btnOutline {
     color: var(--primaryDefault);
 }
 
+a.btnPrimary[disabled] {
+    pointer-events: none;
+    background: var(--notAvailableDefault);
+    border: 0.3215em solid var(--notAvailableDefault);
+}
+
+a.btnPrimary[disabled]:hover {
+    background: var(--notAvailableHover);
+    border: 0.3215em solid var(--notAvailableHover);
+}
+
 a.btnPrimary:hover, form input[type="submit"]:hover {
     background: var(--primaryHover);
 }

src/index.html

@@ -28,7 +28,7 @@
 
             <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="#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>
@@ -57,7 +57,7 @@
             </div>
         </section>
 
-        <section id="curriculumvitae">
+        <section id="curriculumVitae">
             <h1>curriculum vitae</h1>
             <div class="cvGrid">
                 <!-- https://codepen.io/keithwyland/pen/wqNqvy -->
@@ -75,62 +75,19 @@
         </section>
 
         <section id="projects">
-            <div class="mainProj">
-                <h1>project title to be generated</h1>
-                <div><img src="" alt="">
-                    <div class="flexRow">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque
-                            iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
-                            repudiandae.</p>
-                        <div class="flexCol">
-                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
-                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
-                        </div>
-                    </div>
-                </div>
+            <div class="mainProj" id="mainProj">
+
             </div>
 
-            <div class="otherProj">
+            <div class="otherProj" id="otherProj">
                 <h1>other projects</h1>
-                <div class="oProjGrid">
-                    <img src="" alt="">
-                    <div class="flexCol">
-                        <div>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
-                        </div>
-                        <div>
-                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
-                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
-                        </div>
-                    </div>
+                <div>
+
                 </div>
-                <div class="oProjGrid">
-                    <img src="" alt="">
-                    <div class="flexCol">
-                        <div>
-                            <p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
-                        </div>
-                        <div>
-                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
-                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="oProjGrid">
-                    <img src="" alt="">
-                    <div class="flexCol">
-                        <div>
-                            <p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
-                        </div>
-                        <div>
-                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
-                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
-                        </div>
-                    </div>
-                </div>
-                <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
+                <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
             </div>
         </section>
+
         <section id="contact">
             <div id="findme">
                 <h1>find me</h1>
@@ -172,6 +129,7 @@
                 </form>
             </div>
         </section>
+        
         <footer class="flexRow">
             <p>&copy; 2021 Rohit Pai all rights reserved</p>
             <button class="goBackToTop"></button>

src/js/main.js

@@ -150,6 +150,58 @@ function getTimelineData()
 	})
 }
 
+/**
+ * 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.getElementById("mainProj").innerHTML = `
+						<h1>${item["title"]}</h1>
+						<div>
+							<img src="imgs/1000x800.jpg" 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["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
+								</div>
+							</div>
+						</div>
+						`;
+                        return null;
+					}
+
+                    document.querySelector("#otherProj div").innerHTML += `
+                    <div class="oProjItem">
+                        <img src="imgs/500x400.jpg" alt="">
+                        <div class="flexCol">
+                            <div>
+                                <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>
+                            </div>
+                        </div>
+                    </div>
+                    `;
+				})
+			}
+		})
+	})
+}
+
 document.addEventListener('DOMContentLoaded', () =>
 {
     // start the text animation
@@ -157,4 +209,7 @@ document.addEventListener('DOMContentLoaded', () =>
 
     // get timeline data and add it to the timeline
 	getTimelineData();
+
+	// get projectData
+	getProjectData();
 });