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

changed how a few code snippets work and added in all projects section to view all the current projects includig <div class="grid__item"></div>

Browse Source 
<div class="grid__item"></div>
                                                                                                                   <div class="grid__item"></div>
                                                                                                                   <div class="grid__item"></div>the one as the main

Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai 2023-02-23 18:53:28 +00:00
parent a85073b051
commit 048dc0b58b
27 changed files with 461 additions and 149 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/* node_modules/*
src/api/config.php src/api/config.php
dist/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); 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 // 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->withStatus(500);
} }
return $response; 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 $information - Information about the project
* @param string $projectLink - Link to the project * @param string $projectLink - Link to the project
* @param string $gitLink - Link to the git repository * @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(); $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") if ($isMainProject === "true")
{ {
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;"); $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 = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
$stmt->bindParam(":title", $title); $stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0; $isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj); $stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information); $stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink); $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 = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
$stmt->bindParam(":title", $title); $stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0; $isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj); $stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information); $stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink); $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/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); return $response->withStatus(500);
} }
$response->withStatus(201);
return $response; return $response;
} }
@ -100,6 +101,7 @@ $app->patch("/timelineData/{timeline}/{id}", function (Request $request, Respons
return $response->withStatus(500); return $response->withStatus(500);
} }
$response->withStatus(201);
return $response; return $response;
} }
@ -160,6 +162,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
} }
$response->getBody()->write(json_encode(array("ID" => $insertedID))); $response->getBody()->write(json_encode(array("ID" => $insertedID)));
$response->withStatus(201);
return $response; return $response;
} }
@ -186,6 +189,7 @@ $app->post("/timelineData/{timeline}", function (Request $request, Response $res
} }
$response->getBody()->write(json_encode(array("ID" => $insertedID))); $response->getBody()->write(json_encode(array("ID" => $insertedID)));
$response->withStatus(201);
return $response; return $response;
} }
@ -225,10 +229,19 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
return $response->withStatus(400); 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 // 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->withStatus(500);
} }
return $response; return $response;

21
src/api/projectData.php
View File

@ -41,12 +41,25 @@ class projectData
* @param string $information - Information about the project * @param string $information - Information about the project
* @param string $projectLink - Link to the project * @param string $projectLink - Link to the project
* @param string $gitLink - Link to the git repository * @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(); $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") if ($isMainProject === "true")
{ {
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;"); $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 = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
$stmt->bindParam(":title", $title); $stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0; $isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj); $stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information); $stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink); $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 = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
$stmt->bindParam(":title", $title); $stmt->bindParam(":title", $title);
$isMainProj = ($isMainProject) ? 1 : 0; $isMainProj = ($isMainProject === "true") ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj); $stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information); $stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink); $stmt->bindParam(":projectLink", $projectLink);

2
src/css/contact.css
View File

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

3
src/css/nav.css
View File

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

62
src/css/projects.css
View File

@ -21,7 +21,7 @@ section#projects .mainProj {
padding: 0 2.5em 5em 0; 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; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
@ -56,12 +56,11 @@ section#projects .otherProj > div{
gap: 2em; gap: 2em;
} }
section#projects .otherProj > div .oProjItem { section#projects .otherProj > div .oProjItem, section#allProjects #otherProj .oProjItem {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
margin: 0 auto;
width: 90%; width: 90%;
border: 1px solid var(--grey); border: 1px solid var(--grey);
gap: 1em; gap: 1em;
@ -72,6 +71,10 @@ section#projects .otherProj > div .oProjItem {
padding: 0.75em 1em; padding: 0.75em 1em;
} }
section#projects .otherProj > div .oProjItem {
margin: 0 auto;
}
section#projects .otherProj > div .oProjItem:nth-child(2) { section#projects .otherProj > div .oProjItem:nth-child(2) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -93,3 +96,56 @@ section#projects .oProjItem .flexCol div:nth-child(2) {
section#projects .flexCol div:nth-child(2) .btn { section#projects .flexCol div:nth-child(2) .btn {
padding: 0.25em 0.5em; 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-top: 3em;
width: 50%;
}
section#allProjects #otherProj .oProjItem {
flex-direction: column;
/*width: 30%;*/
}
section#allProjects #mainProj img {
width: 100%;
max-width: 30rem;
}
section#allProjects #otherProj {
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: flex-start;*/
/*align-items: center;*/
/*flex-wrap: wrap;*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
gap: 2rem;
}
section#allProjects #otherProj img {
width: 100%;
max-width: 20rem;
}

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

@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () =>
{ {
for (let i = 0; i < json.length; i++) 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); addWorkData(json[i].ID, json[i].startPeriod, endPeriod, json[i].companyName, json[i].area, json[i].title);
} }
return; return;
@ -154,7 +154,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
{ {
if (res.ok) 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); addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
document.querySelector("#addWork").reset(); document.querySelector("#addWork").reset();
return; 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}"> <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod === 'Present' ? '' : endPeriod}">
</div> </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"> <div class="companyAreaContainer formControl">
<input type="text" name="companyName${id}" id="companyName${id}" value="${companyName}" disabled> <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> <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<header>
<nav> <nav>
<input type="checkbox" id="nav-check"> <input type="checkbox" id="nav-check">
<a href="/"> <a href="/">
@ -33,7 +32,7 @@
<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>
</ul> </ul>
</nav> </nav>
<header>
<div> <div>
<h1>full stack developer</h1> <h1>full stack developer</h1>
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
@ -45,13 +44,10 @@
<section id="about"> <section id="about">
<h1>about</h1> <h1>about</h1>
<div> <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus <p>Hi, I'm Rohit, a computer science student at The University of Nottingham with experience in multiple
molestias programming languages such as Java, C#, Python, HTML, CSS, JS, PHP. Bringing forth a motivated
officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima attitude and a variety of powerful skills. Very good at bringing a team together to get a project
nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex finished. Below are some of my projects that I have worked on. </p>
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>
<a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a> <a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
</div> </div>
</section> </section>
@ -83,7 +79,7 @@
<div> <div>
</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> </div>
</section> </section>
@ -93,31 +89,53 @@
<div class="findMeContainer"> <div class="findMeContainer">
<div class="flexRow socialIcons"> <div class="flexRow socialIcons">
<div> <div>
<a href="https://linkedin.com/in/username"> <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> <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>
<a href="https://github.com/rodude123"> <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>
<a href="https://instagram.com/username/"> <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> <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> </a>
</div> </div>
<div> <div>
<a href="#"> <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>
<a href="mailto:rohit@rohitpai.co.uk"> <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>
<a href="tel:07123456789"> <a href="https://gitea.rohitpai.co.uk/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-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> <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> </a>
</div> </div>
</div> </div>
<img src="./imgs/profile.jpg" <img src="./imgs/profile.jpg"
alt="My professional picture taken in brighton near north street at night wearing a bage jacket and checkered shirt" 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>
<div id="sayHello"> <div id="sayHello">
<h1>say hello</h1> <h1>say hello</h1>
@ -161,6 +179,7 @@
</div> </div>
</footer> </footer>
</main> </main>
<script src="js/main.js"></script> <script src="js/index.js"></script>
<script src="js/typewriter.js"></script>
</body> </body>
</html> </html>

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

@ -1,9 +1,6 @@
// scrolling effect // scrolling effect
const scrollLimit = 150; const scrollLimit = 150;
// array with texts to type in typewriter
var dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
window.onscroll = () => window.onscroll = () =>
{ {
// check if scrolled past limit if so add scrolled class to change background of nav // 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 // cv timeline data
/** /**
* getTimelineData function * getTimelineData function
@ -139,7 +79,7 @@ function getTimelineData()
{ {
let timelineItem = document.createElement("div") let timelineItem = document.createElement("div")
timelineItem.classList.add("timelineItem"); 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 = ` timelineItem.innerHTML = `
<h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${endPeriod}</h3> <h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${endPeriod}</h3>
<span>${item["companyName"]} - ${item["area"]}</span> <span>${item["companyName"]} - ${item["area"]}</span>
@ -164,42 +104,42 @@ function getProjectData()
{ {
if (res.ok) if (res.ok)
{ {
json.forEach(item => for (let i = 0; i < 4; i++){
{ const item = json[i];
if (item["isMainProject"] === "1") if (json[i]["isMainProject"] === "1")
{ {
document.getElementById("mainProj").innerHTML = ` document.getElementById("mainProj").innerHTML = `
<h1>${item["title"]}</h1> <h1>${json[i]["title"]}</h1>
<div> <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"> <div class="flexRow">
<p>${item["information"]}</p> <p>${item["information"]}</p>
<div class="flexCol"> <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="${(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="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</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> </div>
</div> </div>
`; `;
return null; continue;
} }
document.querySelector("#otherProj div").innerHTML += ` document.querySelector("#otherProj div").innerHTML += `
<div class="oProjItem"> <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 class="flexCol">
<div> <div>
<h3>${item["title"]}</h3> <h3>${json[i]["title"]}</h3>
<p>${item["information"]}</p> <p>${json[i]["information"]}</p>
</div> </div>
<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="${(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="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</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> </div>
</div> </div>
`; `;
}) }
} }
}) })
}) })
@ -207,9 +147,6 @@ function getProjectData()
document.addEventListener('DOMContentLoaded', () => document.addEventListener('DOMContentLoaded', () =>
{ {
// start the text animation
StartTextAnimation(0);
// get timeline data and add it to the timeline // get timeline data and add it to the timeline
getTimelineData(); 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>