rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created Projects Section #10

Merged
rodude123 merged 7 commits from projects into master 2021-12-28 21:45:42 +00:00
Conversation 0 Commits 7 Files Changed 28 +139 -118
12 changed files with 139 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9c4e487b11 - Show all commits

38
dist/api/index.php vendored
View File

@ -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,7 +23,8 @@ $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)
{ {
@ -48,11 +50,31 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
$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
View File

File diff suppressed because one or more lines are too long

BIN
dist/imgs/placeholder.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

2
dist/index.html vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/main.js vendored
View File

@ -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()}));

23
src/api/index.php
View File

@ -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,8 +23,8 @@ $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)
{ {
@ -49,10 +50,10 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
$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.

5
src/api/timelineData.php
View File

@ -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()
{ {

30
src/css/cv.css
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

62
src/index.html
View File

@ -28,7 +28,7 @@
<ul> <ul>
<li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li> <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="#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="#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> <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</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>

55
src/js/main.js
View File

@ -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();
}); });

10
test.html
View File

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>