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

Linked backend with frontend and styled curriculum vitae for mobile

Browse Source
This commit is contained in:
Rohit Pai
2021-08-31 18:50:08 +01:00
parent 539e6cc23d
commit b88c35ca5b
12 changed files with 158 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.php
+2 -2
View File
@@ -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);
}
src/api/timelineData.php
+8 -4
View File
@@ -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"));
}
}
src/css/main.css
+54 -12
View File
@@ -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) {
src/index.html
+2 -42
View File
@@ -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>
src/js/main.js
+40 -3
View File
@@ -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();
});
src/other/rohitpaicv.pdf
BIN
View File
Binary file not shown.