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

Merge pull request 'final-touches-and-viewmore' (#31) from final-touches-and-viewmore into master

Browse Source 
Reviewed-on: #31
This commit is contained in:
Rohit Pai 2023-02-24 02:18:57 +00:00
commit b3b0401420
32 changed files with 493 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -77,3 +77,4 @@ vendor/*
node_modules/*
src/api/config.php
dist/api/config.php
dist/api/.htaccess

13
dist/api/index.php vendored
View File

@ -225,10 +225,19 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
return $response->withStatus(400);
}
if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
$update = $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
if ($update === "unset main project")
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong", "data" => $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))));
$response->getBody()->write(json_encode(array("error" => "Can't unset project as main project, try updating another project as the main project")));
return $response->withStatus(400);
}
if (!$update)
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong")));
return $response->withStatus(500);
}
return $response;

21
dist/api/projectData.php vendored
View File

@ -41,12 +41,25 @@ class projectData
* @param string $information - Information about the project
* @param string $projectLink - Link to the project
* @param string $gitLink - Link to the git repository
* @return bool - True if project was updated, false if not and there was an error
* @return bool|string - True if project was updated, false if not and there was an error, or an error string
*/
function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool | string
{
$conn = dbConn();
if ($isMainProject === "false")
{
$stmtMainProject = $conn->prepare("SELECT isMainProject FROM projects WHERE ID = :ID");
$stmtMainProject->bindParam(":ID", $ID);
$stmtMainProject->execute();
$result = $stmtMainProject->fetch(PDO::FETCH_ASSOC);
if ($result["isMainProject"] === "1")
{
return "unset main project";
}
}
if ($isMainProject === "true")
{
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
@ -55,7 +68,7 @@ class projectData
$stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
$stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0;
$isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink);
@ -120,7 +133,7 @@ class projectData
$stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
$stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0;
$isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink);

2
dist/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/editor.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>

2
dist/editor/js/editor.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/index.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/projects.js vendored Normal file
View File

@ -0,0 +1 @@
const scrollLimit=150;function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((n=>{t.ok&&n.forEach((t=>{if("1"===t.isMainProject)return document.querySelector("#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="${""===t.imgLocation?"../imgs/placeholder.png":t.imgLocation}" 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.gitLink?"#":t.gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.gitLink?'disabled="disabled"':""}>Git</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").innerHTML+=`\n <div class="oProjItem">\n <img src="${""===t.imgLocation?"../imgs/placeholder.png":t.imgLocation}" alt="">\n <div class="flexCol">\n <div>\n \t<h3>${t.title}</h3>\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"':""}Git</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")},document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.addEventListener("DOMContentLoaded",(()=>{getProjectData(),document.getElementById("year").innerHTML=(new Date).getFullYear().toString()}));

0
dist/js/startTextAnimation.js vendored Normal file
View File

1
dist/js/text.js vendored Normal file
View File

@ -0,0 +1 @@
let 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)}))}document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));

1
dist/js/typewriter.js vendored Normal file
View File

@ -0,0 +1 @@
let 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)}))}document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0)}));

BIN
dist/other/rohitpaicv.pdf vendored
View File

Binary file not shown.

1
dist/projects.html vendored Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - All Projects</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav><input type="checkbox" id="nav-check"> <a href="/"><h1>rohit pai</h1></a><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow"><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="#allProjects" class="textShadow active"><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></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="#allProjects"><i class="fa-solid fa-chevron-down"></i></a></div></header><main><section id="allProjects"><div class="mainProj" id="mainProj"></div><div class="otherProj" id="otherProj"></div></section></main><footer class="flexRow"><div class="spacer"></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="js/typewriter.js"></script><script src="js/projects.js"></script></body></html>

17
src/api/index.php
View File

@ -81,6 +81,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
return $response->withStatus(500);
}
$response->withStatus(201);
return $response;
}
@ -100,6 +101,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
return $response->withStatus(500);
}
$response->withStatus(201);
return $response;
}
@ -160,6 +162,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
}
$response->getBody()->write(json_encode(array("ID" => $insertedID)));
$response->withStatus(201);
return $response;
}
@ -186,6 +189,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
}
$response->getBody()->write(json_encode(array("ID" => $insertedID)));
$response->withStatus(201);
return $response;
}
@ -225,10 +229,19 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
return $response->withStatus(400);
}
if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
$update = $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]);
if ($update === "unset main project")
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong", "data" => $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))));
$response->getBody()->write(json_encode(array("error" => "Can't unset project as main project, try updating another project as the main project")));
return $response->withStatus(400);
}
if (!$update)
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong")));
return $response->withStatus(500);
}
return $response;

21
src/api/projectData.php
View File

@ -41,12 +41,25 @@ class projectData
* @param string $information - Information about the project
* @param string $projectLink - Link to the project
* @param string $gitLink - Link to the git repository
* @return bool - True if project was updated, false if not and there was an error
* @return bool|string - True if project was updated, false if not and there was an error, or an error string
*/
function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool | string
{
$conn = dbConn();
if ($isMainProject === "false")
{
$stmtMainProject = $conn->prepare("SELECT isMainProject FROM projects WHERE ID = :ID");
$stmtMainProject->bindParam(":ID", $ID);
$stmtMainProject->execute();
$result = $stmtMainProject->fetch(PDO::FETCH_ASSOC);
if ($result["isMainProject"] === "1")
{
return "unset main project";
}
}
if ($isMainProject === "true")
{
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
@ -55,7 +68,7 @@ class projectData
$stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
$stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0;
$isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink);
@ -120,7 +133,7 @@ class projectData
$stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
$stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0;
$isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink);

2
src/css/contact.css
View File

@ -64,6 +64,7 @@ div#sayHello #contactForm{
display: flex;
flex-direction: row;
gap: 1em;
width: 100%;
}
div.message {
@ -89,6 +90,7 @@ div.message {
transition: all 0.5s ease-in-out;
opacity: 1;
margin-top: 1em;
margin-bottom: 1em;
}
div.message.error {

26
src/css/main.css
View File

@ -72,7 +72,7 @@
display: inline-block;
position: absolute;
right: 75px;
top: -360px;
top: 0;
}
nav ul {
@ -283,6 +283,12 @@
}
section#allProjects #otherProj .oProjItem {
width: 45%;
}
/****** Contact Styles ******/
section#contact {
flex-direction: column;
justify-content: center;
@ -294,7 +300,6 @@
}
div#findMe .findMeContainer {
flex-direction: column;
justify-content: center;
@ -331,9 +336,24 @@
section#curriculumVitae .timelineItem:before {
right: unset;
left: unset;
border:none
border: none;
}
section#allProjects #mainProj {
width: auto;
}
section#allProjects #otherProj {
flex-direction: column;
align-items: center;
}
section#allProjects #otherProj .oProjItem {
width: auto;
}
/****** Contact Styles ******/
div#findMe .socialIcons {
flex-direction: column;
}

3
src/css/nav.css
View File

@ -18,11 +18,12 @@ nav {
top: 0;
width: 100%;
transition: background-color 0.4s ease-in;
color: #FFFFFF;
z-index: 1;
}
nav.scrolled {
background-color: var(--navBack);
z-index: 1;
}
nav #nav-check {

63
src/css/projects.css
View File

@ -21,7 +21,7 @@ section#projects .mainProj {
padding: 0 2.5em 5em 0;
}
section#projects .mainProj img, section#projects .otherProj .oProjItem img {
section#projects img, section#allProjects img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
@ -56,12 +56,11 @@ section#projects .otherProj > div{
gap: 2em;
}
section#projects .otherProj > div .oProjItem {
section#projects .otherProj > div .oProjItem, section#allProjects #otherProj .oProjItem {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0 auto;
width: 90%;
border: 1px solid var(--grey);
gap: 1em;
@ -72,6 +71,10 @@ section#projects .otherProj > div .oProjItem {
padding: 0.75em 1em;
}
section#projects .otherProj > div .oProjItem {
margin: 0 auto;
}
section#projects .otherProj > div .oProjItem:nth-child(2) {
flex-direction: row-reverse;
}
@ -93,3 +96,57 @@ section#projects .oProjItem .flexCol div:nth-child(2) {
section#projects .flexCol div:nth-child(2) .btn {
padding: 0.25em 0.5em;
}
/*All projects page*/
section#allProjects {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/*padding: 0 2.5rem;*/
gap: 5em;
}
section#allProjects #mainProj {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid var(--grey);
box-shadow: 0 6px 4px 0 var(--mutedBlack);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 1.5em 2em;
margin: 3em 2.5rem 0;
width: 50%;
}
section#allProjects #mainProj img {
width: 100%;
max-width: 30rem;
}
section#allProjects #otherProj {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
gap: 2rem;
border-top: 2px solid var(--grey);
padding: 5em 2.5rem 0;
}
section#allProjects #otherProj .oProjItem {
flex-direction: column;
width: 30%;
height: auto;
}
section#allProjects #otherProj img {
width: 100%;
max-width: 20rem;
}

8
src/editor/css/editor.css
View File

@ -4,7 +4,7 @@ textarea {
resize: none;
}
section#curriculumVitae, section#projects, section#settings {
section#curriculumVitae, section#projects {
margin: 0 2em;
}
@ -41,11 +41,11 @@ div.editorContainer > *, div.projectsGrid > * {
}
section#projects {
display: block;
display: none;
}
section#curriculumVitae, section#settings {
display: none;
section#curriculumVitae {
display: block;
}
div.modifyBtnContainer {

4
src/editor/editor.html
View File

@ -11,8 +11,8 @@
<nav class="sideNav">
<a href="#" class="closeBtn" id="navClose">&times;</a>
<ul>
<li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
</ul>
</nav>

6
src/editor/js/editor.js
View File

@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () =>
{
for (let i = 0; i < json.length; i++)
{
let endPeriod = json[i].endPeriod === null ? "Present" : json[i].endPeriod;
let endPeriod = json[i].endPeriod === "0000-00-00" ? "Present" : json[i].endPeriod;
addWorkData(json[i].ID, json[i].startPeriod, endPeriod, json[i].companyName, json[i].area, json[i].title);
}
return;
@ -154,7 +154,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
{
if (res.ok)
{
let endPeriod = data.get("dateTo") === null ? "Present" : data.get("dateTo ");
let endPeriod = data.get("dateTo") === "" ? "Present" : data.get("dateTo ");
addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
document.querySelector("#addWork").reset();
return;
@ -384,7 +384,7 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
-
<input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod === 'Present' ? '' : endPeriod}">
</div>
<h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? '' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
<h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? 'Present' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
<div class="companyAreaContainer formControl">
<input type="text" name="companyName${id}" id="companyName${id}" value="${companyName}" disabled>
-

28
src/imgs/gitea.svg Normal file
View File

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#609926;}
.st1{fill:#FFFFFF;}
</style>
<g id="Guides">
</g>
<g id="Icon">
<circle class="st0" cx="512" cy="512" r="512"/>
<g>
<path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6
c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6
H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9
C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3
c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
<path class="st1" d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6
c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1
c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9
c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9
c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3
c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3
c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

61
src/index.html
View File

@ -10,7 +10,6 @@
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav>
<input type="checkbox" id="nav-check">
<a href="/">
@ -33,7 +32,7 @@
<li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
</ul>
</nav>
<header>
<div>
<h1>full stack developer</h1>
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
@ -45,13 +44,10 @@
<section id="about">
<h1>about</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus
molestias
officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
<p>Hi, I'm Rohit, a computer science student at The University of Nottingham with experience in multiple
programming languages such as Java, C#, Python, HTML, CSS, JS, PHP. Bringing forth a motivated
attitude and a variety of powerful skills. Very good at bringing a team together to get a project
finished. Below are some of my projects that I have worked on. </p>
<a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
</div>
</section>
@ -83,7 +79,7 @@
<div>
</div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
<a href="projects.html" class="btn btnPrimary boxShadowIn boxShadowOut">View All</a>
</div>
</section>
@ -93,31 +89,53 @@
<div class="findMeContainer">
<div class="flexRow socialIcons">
<div>
<a href="https://linkedin.com/in/username">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
<a href="https://linkedin.com/in/rohitpai98">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/>
</svg>
</a>
<a href="https://github.com/rodude123">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/>
</svg>
</a>
<a href="https://instagram.com/username/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
<a href="https://instagram.com/rodude123/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/>
</svg>
</a>
</div>
<div>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/>
</svg>
</a>
<a href="mailto:rohit@rohitpai.co.uk">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/>
</svg>
</a>
<a href="tel:07123456789">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
<a href="https://gitea.rohitpai.co.uk/rodude123">
<svg xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px" viewBox="0 0 1024 1024"
style="enable-background:new -1 0 1024 1024;" xml:space="preserve">
<style type="text/css">.st1 {fill: #FFFFFF;}</style>
<g id="Guides"></g>
<g id="Icon"><circle class="st0" cx="512" cy="512" r="512"/>
<g><path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6 c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6 H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9 C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3 c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
<path class="st1"
d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6 c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1 c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9 c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9 c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3 c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3 c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
</g>
</g>
</svg>
</a>
</div>
</div>
<img src="./imgs/profile.jpg"
alt="My professional picture taken in brighton near north street at night wearing a bage jacket and checkered shirt"
class="profile"></div>
class="profile">
</div>
</div>
<div id="sayHello">
<h1>say hello</h1>
@ -161,6 +179,7 @@
</div>
</footer>
</main>
<script src="js/main.js"></script>
<script src="js/index.js"></script>
<script src="js/typewriter.js"></script>
</body>
</html>

93
src/js/main.js → src/js/index.js
View File

@ -1,9 +1,6 @@
// scrolling effect
const scrollLimit = 150;
// array with texts to type in typewriter
var dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
window.onscroll = () =>
{
// check if scrolled past limit if so add scrolled class to change background of nav
@ -43,63 +40,6 @@ window.onscroll = () =>
});
};
// typewriter effect
/**
* typeWriter function
* type one character at a time in the typewriter
* keeps calling itself until the text is finished
* @param {string} text text to type
* @param {number} i current index at which the next character should be typed
* @param {function} fnCallback function to call back in this case the StartTextAnimation function
*/
function typeWriter(text, i, fnCallback)
{
// check if text isn't finished yet
if (i < (text.length))
{
// add next character to h1
document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";
// wait for a while and call this function again for next character
setTimeout(function ()
{
typeWriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == "function")
{
// call callback after timeout
setTimeout(fnCallback, 700);
}
}
/**
* StartTextAnimation function
* start a typewriter animation for a text in the dataText array
* @param {number} i current index at which text should be typed next
*/
function StartTextAnimation(i)
{
if (typeof dataText[i] === "undefined")
{
setTimeout(function ()
{
StartTextAnimation(0);
}, 1500);
}
else if (i < dataText[i].length)
{
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function ()
{
// after callback (and whole text has been animated), start next text
setTimeout(StartTextAnimation, 1500, i + 1);
});
}
}
// cv timeline data
/**
* getTimelineData function
@ -139,7 +79,7 @@ function getTimelineData()
{
let timelineItem = document.createElement("div")
timelineItem.classList.add("timelineItem");
let endPeriod = item["endPeriod"] === null ? "Present" : new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions);
let endPeriod = item["endPeriod"] === "0000-00-00" ? "Present" : new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions);
timelineItem.innerHTML = `
<h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${endPeriod}</h3>
<span>${item["companyName"]} - ${item["area"]}</span>
@ -164,42 +104,42 @@ function getProjectData()
{
if (res.ok)
{
json.forEach(item =>
{
if (item["isMainProject"] === "1")
for (let i = 0; i < 4; i++){
const item = json[i];
if (json[i]["isMainProject"] === "1")
{
document.getElementById("mainProj").innerHTML = `
<h1>${item["title"]}</h1>
<h1>${json[i]["title"]}</h1>
<div>
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
<img src="${(json[i]["imgLocation"] === "") ? "../imgs/placeholder.png" : json[i]["imgLocation"]}" 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["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
<a href="${(json[i]["projectLink"] === "N/A") ? "#" : json[i]["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(json[i]["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
<a href="${(json[i]["gitLink"] === "N/A") ? "#" : json[i]["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(json[i]["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
</div>
</div>
</div>
`;
return null;
continue;
}
document.querySelector("#otherProj div").innerHTML += `
<div class="oProjItem">
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
<img src="${(json[i]["imgLocation"] === "") ? "../imgs/placeholder.png" : json[i]["imgLocation"]}" alt="">
<div class="flexCol">
<div>
<h3>${item["title"]}</h3>
<p>${item["information"]}</p>
<h3>${json[i]["title"]}</h3>
<p>${json[i]["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\"" : ""}Git</a>
<a href="${(json[i]["projectLink"] === "N/A") ? "#" : json[i]["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(json[i]["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
<a href="${(json[i]["githubLink"] === "N/A") ? "#" : json[i]["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(json[i]["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
</div>
</div>
</div>
`;
})
}
}
})
})
@ -207,9 +147,6 @@ function getProjectData()
document.addEventListener('DOMContentLoaded', () =>
{
// start the text animation
StartTextAnimation(0);
// get timeline data and add it to the timeline
getTimelineData();

83
src/js/projects.js Normal file
View File

@ -0,0 +1,83 @@
// nav bar scroll effect
const scrollLimit = 150;
window.onscroll = () =>
{
// check if scrolled past limit if so add scrolled class to change background of nav
if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
{
document.querySelector("nav").classList.add("scrolled");
}
else
{
document.querySelector("nav").classList.remove("scrolled");
}
};
document.querySelector("#goBackToTop").addEventListener("click", () =>
{
window.scrollTo(0, 0);
});
/**
* 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.querySelector("#mainProj").innerHTML = `
<h1>${item["title"]}</h1>
<div>
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" 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["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
</div>
</div>
</div>
`;
return null;
}
document.querySelector("#otherProj").innerHTML += `
<div class="oProjItem">
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
<div class="flexCol">
<div>
<h3>${item["title"]}</h3>
<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\"" : ""}Git</a>
</div>
</div>
</div>
`;
})
}
})
})
}
document.addEventListener('DOMContentLoaded', () =>
{
// get projectData
getProjectData();
// update the year in the footer
document.getElementById("year").innerHTML = new Date().getFullYear().toString();
});

66
src/js/typewriter.js Normal file
View File

@ -0,0 +1,66 @@
// array with texts to type in typewriter
let dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
// typewriter effect
/**
* typewriter function
* type one character at a time in the typewriter
* keeps calling itself until the text is finished
* @param {string} text text to type
* @param {number} i current index at which the next character should be typed
* @param {function} fnCallback function to call back in this case the StartTextAnimation function
*/
function typewriter(text, i, fnCallback)
{
// check if text isn't finished yet
if (i < (text.length))
{
// add next character to h1
document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";
// wait for a while and call this function again for next character
setTimeout(function ()
{
typewriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == "function")
{
// call callback after timeout
setTimeout(fnCallback, 700);
}
}
/**
* StartTextAnimation function
* start a typewriter animation for a text in the dataText array
* @param {number} i current index at which text should be typed next
*/
function StartTextAnimation(i)
{
if (typeof dataText[i] === "undefined")
{
setTimeout(function ()
{
StartTextAnimation(0);
}, 1500);
}
else if (i < dataText[i].length)
{
// text exists! start typewriter animation
typewriter(dataText[i], 0, function ()
{
// after callback (and whole text has been animated), start next text
setTimeout(StartTextAnimation, 1500, i + 1);
});
}
}
document.addEventListener('DOMContentLoaded', () =>
{
// start the text animation
StartTextAnimation(0);
});

BIN
src/other/rohitpaicv.pdf
View File

Binary file not shown.

66
src/projects.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rohit Pai - All Projects</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<input type="checkbox" id="nav-check">
<a href="/">
<h1>rohit pai</h1>
</a>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<ul>
<li><a href="/#about" class="textShadow"><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="#allProjects" class="textShadow active"><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>
</ul>
</nav>
<header>
<div>
<h1>full stack developer</h1>
<a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
<a href="#allProjects"><i class="fa-solid fa-chevron-down"></i></a>
</div>
</header>
<main>
<section id="allProjects">
<div class="mainProj" id="mainProj">
</div>
<div class="otherProj" id="otherProj">
</div>
</section>
</main>
<footer class="flexRow">
<div class="spacer"></div>
<p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p>
<div class="button">
<button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button>
</div>
</footer>
<script src="js/typewriter.js"></script>
<script src="js/projects.js"></script>
</body>
</html>