Linked backend with frontend and styled curriculum vitae for mobile
This commit is contained in:
parent
539e6cc23d
commit
b88c35ca5b
44
dist/api/index.php
vendored
44
dist/api/index.php
vendored
@ -7,17 +7,53 @@ 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";
|
||||
//require “routes.php”;
|
||||
require "../vendor/autoload.php";
|
||||
include "timelineData.php";
|
||||
|
||||
// Start slim
|
||||
$app = AppFactory::create();
|
||||
// create middleware
|
||||
$app->addRoutingMiddleware();
|
||||
|
||||
$errorMiddleware = $app->addErrorMiddleware(false, true, true);
|
||||
// for error checking
|
||||
$errorMiddleware = $app->addErrorMiddleware(true, true, true);
|
||||
|
||||
$app->get("/getTimelineData", function (Request $request, Response $response)
|
||||
$app->setBasePath("/api");
|
||||
|
||||
$timelineData = new TimelineData();
|
||||
|
||||
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
|
||||
{
|
||||
global $timelineData;
|
||||
$json = $result = "";
|
||||
|
||||
//check if route is available if it is get the data
|
||||
//otherwise return an error
|
||||
if($args["timeline"] == "edu")
|
||||
{
|
||||
$result = $timelineData->getEduData();
|
||||
}
|
||||
else if($args["timeline"] == "work")
|
||||
{
|
||||
$result = $timelineData->getWorkData();
|
||||
}
|
||||
else
|
||||
{
|
||||
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
||||
}
|
||||
|
||||
$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(array_key_exists("errorMessage", $result[0]))
|
||||
{
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
//use content type json to indicate json data on frontend.
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
});
|
||||
|
||||
$app->run();
|
||||
|
||||
2
dist/css/main.css
vendored
2
dist/css/main.css
vendored
File diff suppressed because one or more lines are too long
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(e,t,n){t<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,t+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){typeWriter(e,t+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}function StartTextAnimation(e){void 0===dataText[e]?setTimeout((function(){StartTextAnimation(0)}),1500):e<dataText[e].length&&typeWriter(dataText[e],0,(function(){setTimeout(StartTextAnimation,1500,e+1)}))}function getTimelineData(){fetch("/api/timelineData").then((e=>{e.json().then((e=>{}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const n=t.offsetTop;window.pageYOffset>=n-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));
|
||||
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()}));
|
||||
BIN
dist/other/rohitpaicv.pdf
vendored
Normal file
BIN
dist/other/rohitpaicv.pdf
vendored
Normal file
Binary file not shown.
18
gulpfile.js
18
gulpfile.js
@ -5,10 +5,10 @@ const cssMin = require("gulp-clean-css")
|
||||
const terser = require("gulp-terser");
|
||||
const ftp = require("vinyl-ftp");
|
||||
const env = require("gulp-env");
|
||||
/*env({
|
||||
env({
|
||||
file: ".env",
|
||||
type: ".ini"
|
||||
});*/
|
||||
});
|
||||
|
||||
gulp.task("minifyHTML", () =>
|
||||
{
|
||||
@ -33,13 +33,13 @@ gulp.task("minifyJS", () =>
|
||||
console.error("Error from " + name + " in compress task", err.toString());
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return gulp.src("src/js/*.js")
|
||||
.on("error", createErrorHandler("gulp.src"))
|
||||
.pipe(terser())
|
||||
.on("error", createErrorHandler("terser"))
|
||||
.pipe(gulp.dest("dist/js"))
|
||||
.on("error", createErrorHandler("gulp.dest"));
|
||||
.on("error", createErrorHandler("gulp.src"))
|
||||
.pipe(terser())
|
||||
.on("error", createErrorHandler("terser"))
|
||||
.pipe(gulp.dest("dist/js"))
|
||||
.on("error", createErrorHandler("gulp.dest"));
|
||||
});
|
||||
|
||||
gulp.task("movePHPFiles", () =>
|
||||
@ -85,4 +85,4 @@ gulp.task("browserSync", () =>
|
||||
gulp.watch("dist").on("change", browserSync.reload)
|
||||
});
|
||||
|
||||
gulp.task("default", gulp.series(gulp.parallel("minifyHTML", "minifyCSS", "minifyJS", "movePHPFiles")));
|
||||
gulp.task("default", gulp.series(gulp.parallel("watchFiles", "deploy")));
|
||||
|
||||
@ -40,7 +40,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
||||
}
|
||||
else
|
||||
{
|
||||
$result = array("errorMessage" => "Error, timeline data not found");
|
||||
$result = array(array("errorMessage" => "Error, timeline data not found"));
|
||||
}
|
||||
|
||||
$json = json_encode($result);
|
||||
@ -48,7 +48,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
||||
$response->getBody()->write($json);
|
||||
|
||||
//if it is an error give a 404 code since it can't find the data
|
||||
if(array_key_exists(“errorMessage”, $result))
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
{
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
<?php
|
||||
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 * FROM edu;");
|
||||
$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
|
||||
@ -18,14 +22,14 @@ class TimelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array("errorMessage" => "Error, edu data not found");
|
||||
return array(array("errorMessage" => "Error, edu data not found"));
|
||||
}
|
||||
}
|
||||
|
||||
function getWorkData()
|
||||
{
|
||||
$conn = dbConn();
|
||||
$stmt = $conn->prepare("SELECT * FROM work;");
|
||||
$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 startPeriod DESC;");
|
||||
$stmt->execute();
|
||||
|
||||
// set the resulting array to associative
|
||||
@ -37,7 +41,7 @@ class TimelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array("errorMessage" => "Error, work data not found");
|
||||
return array(array("errorMessage" => "Error, work data not found"));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -211,6 +211,10 @@ div h1 span {
|
||||
|
||||
/***** About Styles *****/
|
||||
|
||||
section#about {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
section#about div {
|
||||
padding: 0.1em 5em;
|
||||
}
|
||||
@ -235,14 +239,13 @@ section#curriculumvitae .cvGrid > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
|
||||
#curriculumvitae .cvGrid h2 {
|
||||
section#curriculumvitae .cvGrid h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#curriculumvitae .timeline {
|
||||
section#curriculumvitae .timeline {
|
||||
position: relative;
|
||||
max-width: 30em;
|
||||
gap: 1em;
|
||||
@ -252,7 +255,11 @@ section#curriculumvitae .cvGrid > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#curriculumvitae .timeline:before {
|
||||
section#curriculumvitae #work {
|
||||
margin: 0 auto 0 8rem;
|
||||
}
|
||||
|
||||
section#curriculumvitae .timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -262,13 +269,13 @@ section#curriculumvitae .cvGrid > div {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#curriculumvitae .timeline:after {
|
||||
section#curriculumvitae .timeline:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#curriculumvitae .timelineItem {
|
||||
section#curriculumvitae .timelineItem {
|
||||
border: 2px solid var(--timelineItemBrdr);
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
@ -279,12 +286,12 @@ section#curriculumvitae .cvGrid > div {
|
||||
background-color: var(--primaryHover);
|
||||
}
|
||||
|
||||
#curriculumvitae .timelineItem:before, .timelineItem:after {
|
||||
section#curriculumvitae .timelineItem:before, .timelineItem:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#curriculumvitae .timelineItem:before{
|
||||
section#curriculumvitae .timelineItem:before{
|
||||
content: '';
|
||||
right: -20px;
|
||||
top: calc(50% - 5px);
|
||||
@ -293,23 +300,24 @@ section#curriculumvitae .cvGrid > div {
|
||||
border-width: 20px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
#curriculumvitae .timelineItem:nth-child(2n) {
|
||||
section#curriculumvitae .timelineItem:nth-child(2n) {
|
||||
margin-left: 21em;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
#curriculumvitae .timelineItem h3 {
|
||||
section#curriculumvitae .timelineItem h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#curriculumvitae .timelineItem span {
|
||||
section#curriculumvitae .timelineItem span {
|
||||
color: hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
/**** Media Queries *****/
|
||||
|
||||
@media screen and (max-width: 90em) {
|
||||
@ -521,6 +529,40 @@ section#curriculumvitae .cvGrid > div {
|
||||
padding: 0.1em 2.5em;
|
||||
}
|
||||
|
||||
/****** CV Styles *******/
|
||||
|
||||
section#curriculumvitae .cvGrid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 55em) {
|
||||
|
||||
/****** CV Styles *******/
|
||||
|
||||
section#curriculumvitae .cvGrid .timeline {
|
||||
margin: 0 1em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section#curriculumvitae .timeline:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
section#curriculumvitae .timelineItem{
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
section#curriculumvitae .timelineItem:nth-child(2n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
section#curriculumvitae .timelineItem:before {
|
||||
right: unset;
|
||||
left: unset;
|
||||
border:none
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 31em) {
|
||||
|
||||
@ -58,52 +58,12 @@
|
||||
<!-- https://codepen.io/keithwyland/pen/wqNqvy -->
|
||||
<div>
|
||||
<h2>Education</h2>
|
||||
<div class="timeline">
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timeline" id="edu">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Work</h2>
|
||||
<div class="timeline">
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timelineItem">
|
||||
<h3 class="timelineHeader">Sep 2016 - July 2018</h3>
|
||||
<span>Grade: D*D*D*</span>
|
||||
<p class="timelineText">Chelmsford College - BTEC Level 3 in IT</p>
|
||||
</div>
|
||||
<div class="timeline" id="work">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -101,16 +101,53 @@ function StartTextAnimation(i)
|
||||
}
|
||||
|
||||
// cv timeline data
|
||||
|
||||
/**
|
||||
* getTimelineData function
|
||||
* Gets the timeline data from backend route and appends the data on to the timeline.
|
||||
*/
|
||||
function getTimelineData()
|
||||
{
|
||||
fetch("/api/timelineData/edu").then(res =>
|
||||
{
|
||||
res.json().then(json =>
|
||||
{
|
||||
json
|
||||
if (res.ok)
|
||||
{
|
||||
json.forEach(item =>
|
||||
{
|
||||
let timelineItem = document.createElement("div")
|
||||
timelineItem.classList.add("timelineItem");
|
||||
timelineItem.innerHTML = `
|
||||
<h3 class="timelineHeader">${item["startPeriod"]} - ${item["endPeriod"]}</h3>
|
||||
<span>Grade: ${item["grade"]}</span>
|
||||
<p class="timelineText">${item["course"]}</p>
|
||||
`;
|
||||
document.getElementById("edu").appendChild(timelineItem);
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
fetch("/api/timelineData/work").then(res =>
|
||||
{
|
||||
res.json().then(json =>
|
||||
{
|
||||
if (res.ok)
|
||||
{
|
||||
json.forEach(item =>
|
||||
{
|
||||
let timelineItem = document.createElement("div")
|
||||
timelineItem.classList.add("timelineItem");
|
||||
timelineItem.innerHTML = `
|
||||
<h3 class="timelineHeader">${item["startPeriod"]} - ${item["endPeriod"]}</h3>
|
||||
<span>${item["companyName"]} - ${item["area"]}</span>
|
||||
<p class="timelineText">${item["title"]}</p>
|
||||
`;
|
||||
document.getElementById("work").appendChild(timelineItem);
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () =>
|
||||
@ -119,5 +156,5 @@ document.addEventListener('DOMContentLoaded', () =>
|
||||
StartTextAnimation(0);
|
||||
|
||||
// get timeline data and add it to the timeline
|
||||
//getTimelineData();
|
||||
getTimelineData();
|
||||
});
|
||||
BIN
src/other/rohitpaicv.pdf
Normal file
BIN
src/other/rohitpaicv.pdf
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user