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

Created Projects Section #10

Merged
rodude123 merged 7 commits from projects into master 2021-12-28 21:45:42 +00:00
Conversation 0 Commits 7 Files Changed 28 +8217 -289
28 changed files with 8217 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
design.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 568 KiB

After

Width:  |  Height:  |  Size: 597 KiB

21
dist/api/config.php vendored Normal file
View File

@ -0,0 +1,21 @@
<?php
//////////// Config file /////////////////////
/// Used for storing important information ///
/// such as passwords, usernames etc. ///
//////////////////////////////////////////////
function dbConn(): PDO|string
{
$host = "localhost";
$dbName = "u987021215_cms";
$username = "u987021215_rodude123";
$password = "pFHS5qKhkyaDumgf";
try
{
return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
}
catch (PDOException $e)
{
return "Connection failed: " . $e->getMessage();
}
}

46
dist/api/index.php vendored
View File

@ -3,14 +3,16 @@
/// Creates base routes and runs ///
/// respective functions ///
////////////////////////////////////////////
//require “routes.php”;
require "../vendor/autoload.php";
include "timelineData.php";
include "projectData.php";
use api\projectData;
use api\timelineData;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Factory\AppFactory;
//require “routes.php”;
require "../vendor/autoload.php";
include "timelineData.php";
// Start slim
$app = AppFactory::create();
// create middleware
@ -21,14 +23,15 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
$app->setBasePath("/api");
$timelineData = new TimelineData();
$timelineData = new timelineData();
$projectData = new projectData();
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
{
global $timelineData;
$json = $result = "";
//check if route is available if it is get the data
//check if route is available if it is get the data
//otherwise return an error
if($args["timeline"] == "edu")
{
@ -38,20 +41,39 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
{
$result = $timelineData->getWorkData();
}
else
else
{
$result = array(array("errorMessage" => "Error, timeline data not found"));
}
$json = json_encode($result);
$response->getBody()->write($json);
//if it is an error give a 404 code since it can't find the data
//if it is an error give a 403 code since it can't find the data
if(array_key_exists("errorMessage", $result[0]))
{
$response = $response->withStatus(404);
$response = $response->withStatus(403);
}
//use content type json to indicate json data on frontend.
return $response->withHeader("Content-Type", "application/json");
});
$app->get('/projectData', function (Request $request, Response $response)
{
global $projectData;
$result= $projectData->getProjectData();
$json = json_encode($result);
$response->getBody()->write($json);
if(array_key_exists("errorMessage", $result[0]))
{
$response = $response->withStatus(403);
}
//use content type json to indicate json data on frontend.
return $response->withHeader("Content-Type", "application/json");
});

31
dist/api/projectData.php vendored Normal file
View File

@ -0,0 +1,31 @@
<?php
namespace api;
use PDO;
require_once "./config.php";
/**
* Project Data Class
* Define all functions which either get, update, create or delete timeline data
*/
class projectData
{
function getProjectData()
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, githubLink FROM projects order by date LIMIT 4;");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($result)
{
return $result;
}
else
{
return array(array("errorMessage" => "Error, project data not found"));
}
}
}

52
dist/api/timelineData.php vendored Normal file
View File

@ -0,0 +1,52 @@
<?php
namespace api;
use PDO;
require_once "./config.php";
/**
* TimelineData class
* Define all functions which either get, update, create or delete timeline data
*/
class timelineData
{
function getEduData()
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, grade, course FROM edu ORDER BY startPeriod DESC;");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($result)
{
return $result;
}
else
{
return array(array("errorMessage" => "Error, edu data not found"));
}
}
function getWorkData()
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title FROM work ORDER BY work.startPeriod DESC;");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($result)
{
return $result;
}
else
{
return array(array("errorMessage" => "Error, work data not found"));
}
}
}

1
dist/css/main.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
dist/imgs/1000x800.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
dist/imgs/500x400.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

2
dist/index.html vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/main.js vendored
View File

@ -1 +1 @@
const scrollLimit=150;var dataText=["full stack developer","web designer","student","gamer","drummer"];function typeWriter(t,e,n){e<t.length?(document.querySelector("header div h1").innerHTML=t.substring(0,e+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){typeWriter(t,e+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}function StartTextAnimation(t){void 0===dataText[t]?setTimeout((function(){StartTextAnimation(0)}),1500):t<dataText[t].length&&typeWriter(dataText[t],0,(function(){setTimeout(StartTextAnimation,1500,t+1)}))}function getTimelineData(){fetch("/api/timelineData/edu").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>Grade: ${t.grade}</span>\n\t\t\t\t\t<p class="timelineText">${t.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(e)}))}))})),fetch("/api/timelineData/work").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>${t.companyName} - ${t.area}</span>\n\t\t\t\t\t<p class="timelineText">${t.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(e)}))}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0),getTimelineData()}));
const scrollLimit=150;var dataText=["full stack developer","web designer","student","gamer","drummer"];function typeWriter(t,e,n){e<t.length?(document.querySelector("header div h1").innerHTML=t.substring(0,e+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){typeWriter(t,e+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}function StartTextAnimation(t){void 0===dataText[t]?setTimeout((function(){StartTextAnimation(0)}),1500):t<dataText[t].length&&typeWriter(dataText[t],0,(function(){setTimeout(StartTextAnimation,1500,t+1)}))}function getTimelineData(){fetch("/api/timelineData/edu").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>Grade: ${t.grade}</span>\n\t\t\t\t\t<p class="timelineText">${t.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(e)}))}))})),fetch("/api/timelineData/work").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{let e=document.createElement("div");e.classList.add("timelineItem"),e.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${t.startPeriod} - ${t.endPeriod}</h3>\n\t\t\t\t\t<span>${t.companyName} - ${t.area}</span>\n\t\t\t\t\t<p class="timelineText">${t.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(e)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{t.ok&&e.forEach((t=>{if("1"===t.isMainProject)return document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${t.title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="imgs/1000x800.jpg" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${t.information}</p>\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===t.githubLink?'disabled="disabled"':""}>GitHub</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,null;document.querySelector("#otherProj div").innerHTML+=`\n <div class="oProjItem">\n <img src="imgs/500x400.jpg" alt="">\n <div class="flexCol">\n <div>\n <p>${t.information}</p>\n </div>\n <div>\n <a href="${"N/A"===t.projectLink?"#":t.projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===t.projectLink?'disabled="disabled"':""}>View Project</a>\n <a href="${"N/A"===t.githubLink?"#":t.gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===t.githubLink?'disabled="disabled"':""}Github</a>\n </div>\n </div>\n </div>\n `}))}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{StartTextAnimation(0),getTimelineData(),getProjectData()}));

13
gulpfile.js
View File

@ -67,7 +67,7 @@ gulp.task("ftp", () =>
parallel: 1,
});
return gulp.src("dist/**", {base: "dist", dot: true})
.pipe(conn.newer("/"))
.pipe(conn.newerOrDifferentSize("/"))
.pipe(conn.dest("/"));
});
@ -79,11 +79,14 @@ gulp.task("deploy", () =>
gulp.task("browserSync", () =>
{
browserSync.init({
server: {
baseDir: "dist"
}
// server: {
// baseDir: "dist"
// },
proxy: "https://rohitpai.tech/",
serveStatic: ["./dist"]
});
gulp.watch("dist").on("change", browserSync.reload)
});
gulp.task("default", gulp.series(gulp.parallel("watchFiles", "deploy")));
gulp.task("default", gulp.series(gulp.parallel("watchFiles", "browserSync")));

7876
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -12,7 +12,7 @@
"author": "Rohit Pai",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.26.14",
"browser-sync": "^2.27.5",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-deploy-ftp": "^1.0.1",
@ -20,8 +20,9 @@
"gulp-htmlmin": "^5.0.1",
"gulp-terser": "^2.0.1",
"gulp-uglify": "^3.0.2",
"jest": "^27.2.0",
"normalize.css": "^8.0.1",
"require": "^0.4.4",
"require": "^2.4.20",
"vinyl-ftp": "^0.6.1"
}
}

21
src/api/config.php Normal file
View File

@ -0,0 +1,21 @@
<?php
//////////// Config file /////////////////////
/// Used for storing important information ///
/// such as passwords, usernames etc. ///
//////////////////////////////////////////////
function dbConn(): PDO|string
{
$host = "localhost";
$dbName = "u987021215_cms";
$username = "u987021215_rodude123";
$password = "pFHS5qKhkyaDumgf";
try
{
return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
}
catch (PDOException $e)
{
return "Connection failed: " . $e->getMessage();
}
}

49
src/api/index.php
View File

@ -3,14 +3,16 @@
/// Creates base routes and runs ///
/// respective functions ///
////////////////////////////////////////////
//require “routes.php”;
require "../vendor/autoload.php";
include "timelineData.php";
include "projectData.php";
use api\projectData;
use api\timelineData;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Factory\AppFactory;
//require “routes.php”;
require "../vendor/autoload.php";
include "timelineData.php";
// Start slim
$app = AppFactory::create();
// create middleware
@ -21,14 +23,15 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
$app->setBasePath("/api");
$timelineData = new TimelineData();
$timelineData = new timelineData();
$projectData = new projectData();
$app->get("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
{
global $timelineData;
$json = $result = "";
//check if route is available if it is get the data
//check if route is available if it is get the data
//otherwise return an error
if($args["timeline"] == "edu")
{
@ -38,20 +41,40 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
{
$result = $timelineData->getWorkData();
}
else
else
{
$result = array(array("errorMessage" => "Error, timeline data not found"));
}
$json = json_encode($result);
$response->getBody()->write($json);
//if it is an error give a 404 code since it can't find the data
if(array_key_exists("errorMessage", $result[0]))
return $response;
// //if it is an error give a 403 code since it can't find the data
// if(array_key_exists("errorMessage", $result[-1]))
// {
// $response = $response->withStatus(403);
// }
//
// //use content type json to indicate json data on frontend.
// return $response->withHeader("Content-Type", "application/json");
});
$app->get('/projectData', function (Request $request, Response $response)
{
global $projectData;
$result= $projectData->getProjectData();
$json = json_encode($result);
$response->getBody()->write($json);
if(array_key_exists("errorMessage", $result[-1]))
{
$response = $response->withStatus(404);
$response = $response->withStatus(403);
}
//use content type json to indicate json data on frontend.
return $response->withHeader("Content-Type", "application/json");
});

31
src/api/projectData.php Normal file
View File

@ -0,0 +1,31 @@
<?php
namespace api;
use PDO;
require_once "./config.php";
/**
* Project Data Class
* Define all functions which either get, update, create or delete timeline data
*/
class projectData
{
function getProjectData()
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT title, isMainProject, information, imgLocation, projectLink, githubLink FROM projects order by date LIMIT 4;");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($result)
{
return $result;
}
else
{
return array(array("errorMessage" => "Error, project data not found"));
}
}
}

7
src/api/timelineData.php
View File

@ -1,11 +1,14 @@
<?php
namespace api;
use PDO;
require_once "./config.php";
/**
* TimelineData class
* Define all functions which either get, update, create or delete timeline data
*/
class TimelineData
class timelineData
{
function getEduData()
{
@ -46,4 +49,4 @@ class TimelineData
}
}
}

41
src/css/cv.css
View File

@ -1,30 +1,30 @@
/****** CV Styles *******/
section#curriculumvitae{
section#curriculumVitae{
background-color: var(--primaryDefault);
color: #FFFFFF;
padding: 2em 0;
}
section#curriculumvitae .cvGrid {
section#curriculumVitae .cvGrid {
display: flex;
flex-direction: row;
padding: 0 1.5rem;
flex-wrap: wrap;
}
section#curriculumvitae .cvGrid > div {
section#curriculumVitae .cvGrid > div {
width: 45%;
display: flex;
flex-direction: column;
min-height: 100%;
}
section#curriculumvitae .cvGrid h2 {
section#curriculumVitae .cvGrid h2 {
text-align: center;
}
section#curriculumvitae .timeline {
section#curriculumVitae .timeline {
position: relative;
max-width: 30em;
gap: 1em;
@ -33,35 +33,26 @@ section#curriculumvitae .timeline {
height: 100%;
}
/*section#curriculumvitae .timeline#edu {
margin: 0 auto;
}
section#curriculumvitae .timeline#work {
margin-left: auto;
}*/
section#curriculumvitae #work {
section#curriculumVitae #work {
margin: 0 auto 0 8rem;
}
section#curriculumvitae .timeline:before {
section#curriculumVitae .timeline:before {
content: "";
position: absolute;
height: 100%;
border: 4px var(--timelineItemBrdr) solid;
/*border-bottom: 4;*/
right: 194px;
top: 0;
}
section#curriculumvitae .timeline:after {
section#curriculumVitae .timeline:after {
content: "";
display: table;
clear: both;
}
section#curriculumvitae .timelineItem {
section#curriculumVitae .timelineItem {
border: 2px solid var(--timelineItemBrdr);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
@ -72,12 +63,12 @@ section#curriculumvitae .timelineItem {
background-color: var(--primaryHover);
}
section#curriculumvitae .timelineItem:before, .timelineItem:after {
section#curriculumVitae .timelineItem:before, .timelineItem:after {
content: '';
position: absolute;
}
section#curriculumvitae .timelineItem:before{
section#curriculumVitae .timelineItem:before{
content: '';
right: -20px;
top: calc(50% - 5px);
@ -86,20 +77,20 @@ section#curriculumvitae .timelineItem:before{
border-width: 20px;
transform: rotate(45deg);
}
section#curriculumvitae .timelineItem:nth-child(2n) {
section#curriculumVitae .timelineItem:nth-child(2n) {
margin-left: 21em;
}
section#curriculumvitae .timelineItem:nth-child(2n):before {
section#curriculumVitae .timelineItem:nth-child(2n):before {
right: auto;
left: -20px;
border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
}
section#curriculumvitae .timelineItem h3 {
section#curriculumVitae .timelineItem h3 {
font-weight: normal;
}
section#curriculumvitae .timelineItem span {
section#curriculumVitae .timelineItem span {
color: hsl(0, 0%, 90%);
}
}

80
src/css/main.css
View File

@ -2,10 +2,11 @@
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "templateStyles.css";
@import "nav.css";
@import "about.css";
@import "cv.css";
@import "templateStyles.css";
@import "projects.css";
/****** Root Style ******/
:root {
@ -18,7 +19,9 @@
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
--errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1);
--grey: hsla(0, 0%, 39%, 1);
--mutedGrey: hsla(0, 0%, 67%, 0.58);
--notAvailableDefault: hsla(0, 0%, 39%, 1);
--notAvailableHover: hsla(0, 0%,32%, 1);
--mutedGrey: hsla(0, 0%, 78%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25);
--navBack: hsla(0, 0%, 30%, 1);
@ -28,7 +31,9 @@
--headingFS: 1.5rem;
}
*{
box-sizing: border-box;
}
/**** Media Queries *****/
@ -246,6 +251,63 @@
section#curriculumvitae .cvGrid {
padding: 0;
}
/**** Projects Styles ***/
section#projects {
flex-direction: column;
justify-content: center;
align-items: center;
}
section#projects .mainProj {
border-right: 0;
padding: 0;
width: 100%;
margin: 0 5em;
}
section#projects .mainProj img {
padding: 0 1em;
}
section#projects .mainProj .flexRow {
flex-direction: column;
margin: 0 2.5em;
}
section#projects .mainProj .flexCol {
flex-direction: row;
justify-content: center;
align-items: center;
}
section#projects .otherProj {
width: 100%;
}
section#projects .otherProj .btn{
width: 10em;
text-align: center;
}
section#projects .otherProj > div .oProjItem, section#projects .otherProj > div .oProjItem:nth-child(2) {
flex-direction: column;
}
section#projects .oProjItem .flexCol div:nth-child(2) {
justify-content: center;
margin-left: 0;
margin-bottom: 1em;
}
section#projects .otherProj > a {
margin-left: 3em;
margin-right: 3em;
text-align: center;
}
}
@media screen and (max-width: 55em) {
@ -296,4 +358,16 @@
padding: 0.1em 1em;
}
/**** Projects Styles ***/
section#projects .mainProj .flexCol {
flex-direction: column;
}
section#projects .oProjItem .flexCol div:nth-child(2) {
flex-direction: column;
justify-content: center;
align-items: center;
}
}

2
src/css/nav.css
View File

@ -86,7 +86,7 @@ header div button {
}
i.fa-chevron-down {
color: var(--mutedGrey);
color: hsla(0, 0%, 67%, 0.58);
font-size: 3.75em;
margin: 1.5rem 0;
}

95
src/css/projects.css Normal file
View File

@ -0,0 +1,95 @@
/*** Projects Styles ****/
section#projects {
display: flex;
flex-direction: row;
padding: 0 2.5rem;
border-bottom: 2px solid var(--mutedGrey);
}
section#projects .mainProj, section#projects .otherProj {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
}
section#projects .mainProj {
border-right: 2px solid var(--mutedGrey);
padding: 0 2.5em 5em 0;
}
section#projects .mainProj img, section#projects .otherProj .oProjItem img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: block;
margin: 1em auto;
}
section#projects .mainProj img {
width: 100%;
max-width: 40rem;
}
section#projects .mainProj .flexRow {
display: flex;
flex-direction: row;
gap: 4em;
}
section#projects .mainProj .flexCol {
display: flex;
flex-direction: column;
gap: 2.5em;
}
section#projects .otherProj > a{
margin: 5rem 0;
}
section#projects .otherProj > div{
display: flex;
flex-direction: column;
gap: 2em;
}
section#projects .otherProj > div .oProjItem {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0 auto;
width: 90%;
border: 1px solid var(--grey);
gap: 1em;
box-shadow: 0 6px 4px 0 var(--mutedBlack);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0 1em;
}
section#projects .otherProj > div .oProjItem:nth-child(2) {
flex-direction: row-reverse;
}
section#projects .otherProj .oProjItem img {
max-width: 15rem;
width: 100%;
padding: 0 1em;
}
section#projects .oProjItem .flexCol div:nth-child(2) {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 3em;
margin-left: 2em;
}
section#projects .flexCol div:nth-child(2) .btn {
padding: 0.25em 0.5em;
}

12
src/css/templateStyles.css
View File

@ -40,6 +40,7 @@ a.btn, form input[type="submit"] {
border-radius: 0.625em;
border: 0.3215em solid var(--primaryDefault);
color: #FFFFFF;
text-align: center;
}
a.btn:hover {
@ -56,6 +57,17 @@ a.btnOutline {
color: var(--primaryDefault);
}
a.btnPrimary[disabled] {
pointer-events: none;
background: var(--notAvailableDefault);
border: 0.3215em solid var(--notAvailableDefault);
}
a.btnPrimary[disabled]:hover {
background: var(--notAvailableHover);
border: 0.3215em solid var(--notAvailableHover);
}
a.btnPrimary:hover, form input[type="submit"]:hover {
background: var(--primaryHover);
}

BIN
src/imgs/1000x800.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/imgs/500x400.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/imgs/placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

64
src/index.html
View File

@ -28,7 +28,7 @@
<ul>
<li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
<li><a href="#curriculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
<li><a href="#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
<li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
<li><a href="#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>
@ -57,7 +57,7 @@
</div>
</section>
<section id="curriculumvitae">
<section id="curriculumVitae">
<h1>curriculum vitae</h1>
<div class="cvGrid">
<!-- https://codepen.io/keithwyland/pen/wqNqvy -->
@ -75,62 +75,19 @@
</section>
<section id="projects">
<div class="mainProj">
<h1>project title to be generated</h1>
<div><img src="" alt="">
<div class="flexRow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque
iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
repudiandae.</p>
<div class="flexCol">
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
</div>
</div>
</div>
<div class="mainProj" id="mainProj">
</div>
<div class="otherProj">
<div class="otherProj" id="otherProj">
<h1>other projects</h1>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
<div>
</div>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
</div>
</section>
<section id="contact">
<div id="findme">
<h1>find me</h1>
@ -172,10 +129,11 @@
</form>
</div>
</section>
<footer class="flexRow">
<p>&copy; 2021 Rohit Pai all rights reserved</p>
<button class="goBackToTop"></button>
</footer>
</main>
</body>
</html>
</html>

55
src/js/main.js
View File

@ -150,6 +150,58 @@ function getTimelineData()
})
}
/**
* getProjectData function
* Gets the project data from the backend route and appends the data on to the timeline.
*/
function getProjectData()
{
fetch("/api/projectData").then(res =>
{
res.json().then(json =>
{
if (res.ok)
{
json.forEach(item =>
{
if (item["isMainProject"] === "1")
{
document.getElementById("mainProj").innerHTML = `
<h1>${item["title"]}</h1>
<div>
<img src="imgs/1000x800.jpg" alt="">
<div class="flexRow">
<p>${item["information"]}</p>
<div class="flexCol">
<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
<a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
</div>
</div>
</div>
`;
return null;
}
document.querySelector("#otherProj div").innerHTML += `
<div class="oProjItem">
<img src="imgs/500x400.jpg" alt="">
<div class="flexCol">
<div>
<p>${item["information"]}</p>
</div>
<div>
<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
<a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
</div>
</div>
</div>
`;
})
}
})
})
}
document.addEventListener('DOMContentLoaded', () =>
{
// start the text animation
@ -157,4 +209,7 @@ document.addEventListener('DOMContentLoaded', () =>
// get timeline data and add it to the timeline
getTimelineData();
// get projectData
getProjectData();
});