Created Projects Section #10
48
dist/api/index.php
vendored
48
dist/api/index.php
vendored
@ -3,14 +3,15 @@
|
|||||||
/// Creates base routes and runs ///
|
/// Creates base routes and runs ///
|
||||||
/// respective functions ///
|
/// respective functions ///
|
||||||
////////////////////////////////////////////
|
////////////////////////////////////////////
|
||||||
use Psr\Http\Message\ResponseInterface as Response;
|
|
||||||
use Psr\Http\Message\ServerRequestInterface as Request;
|
|
||||||
use Slim\Factory\AppFactory;
|
|
||||||
|
|
||||||
//require “routes.php”;
|
//require “routes.php”;
|
||||||
require "../vendor/autoload.php";
|
require "../vendor/autoload.php";
|
||||||
include "timelineData.php";
|
include "timelineData.php";
|
||||||
include "projectData.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
|
// Start slim
|
||||||
$app = AppFactory::create();
|
$app = AppFactory::create();
|
||||||
@ -22,14 +23,15 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
|
|||||||
|
|
||||||
$app->setBasePath("/api");
|
$app->setBasePath("/api");
|
||||||
|
|
||||||
$timelineData = new TimelineData();
|
$timelineData = new timelineData();
|
||||||
|
$projectData = new projectData();
|
||||||
|
|
||||||
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
|
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
|
||||||
{
|
{
|
||||||
global $timelineData;
|
global $timelineData;
|
||||||
$json = $result = "";
|
$json = $result = "";
|
||||||
|
|
||||||
//check if route is available if it is get the data
|
//check if route is available if it is get the data
|
||||||
//otherwise return an error
|
//otherwise return an error
|
||||||
if($args["timeline"] == "edu")
|
if($args["timeline"] == "edu")
|
||||||
{
|
{
|
||||||
@ -39,20 +41,40 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
{
|
{
|
||||||
$result = $timelineData->getWorkData();
|
$result = $timelineData->getWorkData();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
||||||
}
|
}
|
||||||
|
|
||||||
$json = json_encode($result);
|
$json = json_encode($result);
|
||||||
|
|
||||||
$response->getBody()->write($json);
|
$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]))
|
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");
|
||||||
|
});
|
||||||
|
|
||||||
|
$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(403);
|
||||||
|
}
|
||||||
|
|
||||||
//use content type json to indicate json data on frontend.
|
//use content type json to indicate json data on frontend.
|
||||||
return $response->withHeader("Content-Type", "application/json");
|
return $response->withHeader("Content-Type", "application/json");
|
||||||
});
|
});
|
||||||
|
2
dist/css/main.css
vendored
2
dist/css/main.css
vendored
File diff suppressed because one or more lines are too long
BIN
dist/imgs/placeholder.png
vendored
Normal file
BIN
dist/imgs/placeholder.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/js/main.js
vendored
2
dist/js/main.js
vendored
@ -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()}));
|
@ -3,14 +3,15 @@
|
|||||||
/// Creates base routes and runs ///
|
/// Creates base routes and runs ///
|
||||||
/// respective functions ///
|
/// respective functions ///
|
||||||
////////////////////////////////////////////
|
////////////////////////////////////////////
|
||||||
use Psr\Http\Message\ResponseInterface as Response;
|
|
||||||
use Psr\Http\Message\ServerRequestInterface as Request;
|
|
||||||
use Slim\Factory\AppFactory;
|
|
||||||
|
|
||||||
//require “routes.php”;
|
//require “routes.php”;
|
||||||
require "../vendor/autoload.php";
|
require "../vendor/autoload.php";
|
||||||
include "timelineData.php";
|
include "timelineData.php";
|
||||||
include "projectData.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
|
// Start slim
|
||||||
$app = AppFactory::create();
|
$app = AppFactory::create();
|
||||||
@ -22,15 +23,15 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
|
|||||||
|
|
||||||
$app->setBasePath("/api");
|
$app->setBasePath("/api");
|
||||||
|
|
||||||
$timelineData = new TimelineData();
|
$timelineData = new timelineData();
|
||||||
$projectData = new ProjectData();
|
$projectData = new projectData();
|
||||||
|
|
||||||
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
|
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
|
||||||
{
|
{
|
||||||
global $timelineData;
|
global $timelineData;
|
||||||
$json = $result = "";
|
$json = $result = "";
|
||||||
|
|
||||||
//check if route is available if it is get the data
|
//check if route is available if it is get the data
|
||||||
//otherwise return an error
|
//otherwise return an error
|
||||||
if($args["timeline"] == "edu")
|
if($args["timeline"] == "edu")
|
||||||
{
|
{
|
||||||
@ -40,19 +41,19 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
{
|
{
|
||||||
$result = $timelineData->getWorkData();
|
$result = $timelineData->getWorkData();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
||||||
}
|
}
|
||||||
|
|
||||||
$json = json_encode($result);
|
$json = json_encode($result);
|
||||||
|
|
||||||
$response->getBody()->write($json);
|
$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]))
|
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.
|
//use content type json to indicate json data on frontend.
|
||||||
@ -69,9 +70,9 @@ $app->get('/projectData', function (Request $request, Response $response)
|
|||||||
|
|
||||||
$response->getBody()->write($json);
|
$response->getBody()->write($json);
|
||||||
|
|
||||||
if(array_key_exists("errorMessage", $result[0]))
|
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.
|
//use content type json to indicate json data on frontend.
|
||||||
|
@ -1,11 +1,14 @@
|
|||||||
<?php
|
<?php
|
||||||
|
namespace api;
|
||||||
|
use PDO;
|
||||||
|
|
||||||
require_once "./config.php";
|
require_once "./config.php";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TimelineData class
|
* TimelineData class
|
||||||
* Define all functions which either get, update, create or delete timeline data
|
* Define all functions which either get, update, create or delete timeline data
|
||||||
*/
|
*/
|
||||||
class TimelineData
|
class timelineData
|
||||||
{
|
{
|
||||||
function getEduData()
|
function getEduData()
|
||||||
{
|
{
|
||||||
@ -46,4 +49,4 @@ class TimelineData
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,30 +1,30 @@
|
|||||||
/****** CV Styles *******/
|
/****** CV Styles *******/
|
||||||
|
|
||||||
section#curriculumvitae{
|
section#curriculumVitae{
|
||||||
background-color: var(--primaryDefault);
|
background-color: var(--primaryDefault);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
padding: 2em 0;
|
padding: 2em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .cvGrid {
|
section#curriculumVitae .cvGrid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .cvGrid > div {
|
section#curriculumVitae .cvGrid > div {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .cvGrid h2 {
|
section#curriculumVitae .cvGrid h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timeline {
|
section#curriculumVitae .timeline {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 30em;
|
max-width: 30em;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
@ -33,11 +33,11 @@ section#curriculumvitae .timeline {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae #work {
|
section#curriculumVitae #work {
|
||||||
margin: 0 auto 0 8rem;
|
margin: 0 auto 0 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timeline:before {
|
section#curriculumVitae .timeline:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -46,13 +46,13 @@ section#curriculumvitae .timeline:before {
|
|||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timeline:after {
|
section#curriculumVitae .timeline:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem {
|
section#curriculumVitae .timelineItem {
|
||||||
border: 2px solid var(--timelineItemBrdr);
|
border: 2px solid var(--timelineItemBrdr);
|
||||||
-webkit-border-radius: 10px;
|
-webkit-border-radius: 10px;
|
||||||
-moz-border-radius: 10px;
|
-moz-border-radius: 10px;
|
||||||
@ -63,12 +63,12 @@ section#curriculumvitae .timelineItem {
|
|||||||
background-color: var(--primaryHover);
|
background-color: var(--primaryHover);
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem:before, .timelineItem:after {
|
section#curriculumVitae .timelineItem:before, .timelineItem:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem:before{
|
section#curriculumVitae .timelineItem:before{
|
||||||
content: '';
|
content: '';
|
||||||
right: -20px;
|
right: -20px;
|
||||||
top: calc(50% - 5px);
|
top: calc(50% - 5px);
|
||||||
@ -77,20 +77,20 @@ section#curriculumvitae .timelineItem:before{
|
|||||||
border-width: 20px;
|
border-width: 20px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
section#curriculumvitae .timelineItem:nth-child(2n) {
|
section#curriculumVitae .timelineItem:nth-child(2n) {
|
||||||
margin-left: 21em;
|
margin-left: 21em;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem:nth-child(2n):before {
|
section#curriculumVitae .timelineItem:nth-child(2n):before {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: -20px;
|
left: -20px;
|
||||||
border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
|
border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem h3 {
|
section#curriculumVitae .timelineItem h3 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#curriculumvitae .timelineItem span {
|
section#curriculumVitae .timelineItem span {
|
||||||
color: hsl(0, 0%, 90%);
|
color: hsl(0, 0%, 90%);
|
||||||
}
|
}
|
BIN
src/imgs/placeholder.png
Normal file
BIN
src/imgs/placeholder.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#about" class="textShadow active"><span><</span>about<span>></span></a></li>
|
<li><a href="#about" class="textShadow active"><span><</span>about<span>></span></a></li>
|
||||||
<li><a href="#curriculumvitae" class="textShadow"><span><</span>cv<span>></span></a></li>
|
<li><a href="#curriculumVitae" class="textShadow"><span><</span>cv<span>></span></a></li>
|
||||||
<li><a href="#projects" class="textShadow"><span><</span>projects<span>></span></a></li>
|
<li><a href="#projects" class="textShadow"><span><</span>projects<span>></span></a></li>
|
||||||
<li><a href="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
<li><a href="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
||||||
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
||||||
@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="curriculumvitae">
|
<section id="curriculumVitae">
|
||||||
<h1>curriculum vitae</h1>
|
<h1>curriculum vitae</h1>
|
||||||
<div class="cvGrid">
|
<div class="cvGrid">
|
||||||
<!-- https://codepen.io/keithwyland/pen/wqNqvy -->
|
<!-- https://codepen.io/keithwyland/pen/wqNqvy -->
|
||||||
@ -75,64 +75,14 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="projects">
|
<section id="projects">
|
||||||
<div class="mainProj">
|
<div class="mainProj" id="mainProj">
|
||||||
<h1>project title to be generated</h1>
|
|
||||||
<div>
|
|
||||||
<img src="imgs/1000x800.jpg" 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" disabled="disabled">testing</a>
|
|
||||||
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="otherProj">
|
<div class="otherProj" id="otherProj">
|
||||||
<h1>other projects</h1>
|
<h1>other projects</h1>
|
||||||
<div>
|
<div>
|
||||||
<div class="oProjItem">
|
|
||||||
<img src="imgs/500x400.jpg" 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">View Project</a>
|
|
||||||
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="oProjItem">
|
|
||||||
<img src="imgs/500x400.jpg" 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">View Project</a>
|
|
||||||
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="oProjItem">
|
|
||||||
<img src="imgs/500x400.jpg" 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">View Project</a>
|
|
||||||
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
|
||||||
</div>
|
</div>
|
||||||
@ -179,11 +129,11 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="flexRow">
|
<footer class="flexRow">
|
||||||
<p>© 2021 Rohit Pai all rights reserved</p>
|
<p>© 2021 Rohit Pai all rights reserved</p>
|
||||||
<button class="goBackToTop"></button>
|
<button class="goBackToTop"></button>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -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', () =>
|
document.addEventListener('DOMContentLoaded', () =>
|
||||||
{
|
{
|
||||||
// start the text animation
|
// start the text animation
|
||||||
@ -157,4 +209,7 @@ document.addEventListener('DOMContentLoaded', () =>
|
|||||||
|
|
||||||
// get timeline data and add it to the timeline
|
// get timeline data and add it to the timeline
|
||||||
getTimelineData();
|
getTimelineData();
|
||||||
|
|
||||||
|
// get projectData
|
||||||
|
getProjectData();
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user