Merge pull request #10 from rodude123/projects

Created Projects Section
This commit is contained in:
Rohit Pai 2021-12-28 21:45:42 +00:00 committed by GitHub
commit d0a987f5ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 8217 additions and 289 deletions

Binary file not shown.

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();
}
}

38
dist/api/index.php vendored
View File

@ -3,13 +3,15 @@
/// Creates base routes and runs ///
/// respective functions ///
////////////////////////////////////////////
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";
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;
// Start slim
$app = AppFactory::create();
@ -21,7 +23,8 @@ $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)
{
@ -46,12 +49,31 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
$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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
dist/imgs/placeholder.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

2
dist/index.html vendored

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()}));

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

File diff suppressed because it is too large Load Diff

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();
}
}

View File

@ -3,13 +3,15 @@
/// Creates base routes and runs ///
/// respective functions ///
////////////////////////////////////////////
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";
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;
// Start slim
$app = AppFactory::create();
@ -21,7 +23,8 @@ $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)
{
@ -46,12 +49,32 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
$json = json_encode($result);
$response->getBody()->write($json);
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");
});
//if it is an error give a 404 code since it can't find the data
if(array_key_exists("errorMessage", $result[0]))
$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"));
}
}
}

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()
{

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%);
}

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;
}
}

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;
}

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/imgs/500x400.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/imgs/placeholder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

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 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,6 +129,7 @@
</form>
</div>
</section>
<footer class="flexRow">
<p>&copy; 2021 Rohit Pai all rights reserved</p>
<button class="goBackToTop"></button>

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();
});