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

Base HTML for projects section completed

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2023-01-17 01:56:03 +00:00
parent 69c3462a3d
commit cef7cc5e64
19 changed files with 418 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/css/editor.css
+57 -3
View File
@@ -23,19 +23,27 @@ input[type="submit"] {
font-weight: 400;
}
div.editorContainer {
div.editorContainer, div.projectsGrid {
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
align-items: flex-start;
gap: 2em;
margin-bottom: 0.5em;
}
div.editorContainer > * {
div.editorContainer > *, div.projectsGrid > * {
width: 45%;
}
section#curriculumVitae {
display: block;
}
section#projects, section#settings {
display: none;
}
div.modifyBtnContainer {
display: flex;
flex-direction: row;
@@ -147,3 +155,49 @@ section#curriculumVitae form.timelineItem:not(.editing) input[type=submit] {
section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input {
width: 30%;
}
section#projects #projList .projItem {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
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: 1em;
}
section#projects #projList {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
}
section#projects #projList .projItem img {
max-width: 15rem;
width: 100%;
padding: 0 1em;
}
section#projects .projItem .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;
}
#isMainProject {
width: auto;
}
src/editor/editor.html
+39 -6
View File
@@ -10,9 +10,10 @@
<nav class="sideNav">
<a href="#" class="closeBtn" id="navClose">&times;</a>
<ul>
<li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li>
<li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
<li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
</ul>
</nav>
<main class="editor" style="margin-left: 250px;">
@@ -21,7 +22,7 @@
<h1>Editor</h1>
</div>
<section id="curriculumVitae">
<h2>curriculum vitae</h2>
<div class="cvGrid">
@@ -108,8 +109,40 @@
</div>
</div>
</section>
section#projects>h2{projects}+div.
<section id="projects">
<h2>projects</h2>
<div class="projectsGrid">
<form action="" id="addProj">
<div class="formControl">
<label for="projTitle">Title </label>
<input type="text" name="projTitle" id="projTitle" required>
</div>
<div class="formControl">
<label class="checkContainer" for="isMainProject">Is It The Main Project
<input type="checkbox" id="isMainProject" name="isMainProject" required>
<span class="checkmark"></span>
</label>
</div>
<div class="formControl">
<label for="imgLoc">Image</label>
<input type="file" name="imgLoc" id="imgLoc">
</div>
<div class="formControl">
<label for="projectLink">Project Link</label>
<input type="text" name="projectLink" id="projectLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)">
</div>
<div class="formControl">
<label for="gitLink">Git Link</label>
<input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required>
</div>
<input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut">
</form>
<div id="projList">
</div>
</div>
</section>
</main>
<script src="js/editor.js"></script>
src/editor/js/editor.js
+57
View File
@@ -46,6 +46,22 @@ document.addEventListener('DOMContentLoaded', () =>
document.querySelector("#edu").innerHTML = "No education data found";
})
});
fetch("/api/projectData").then(res =>
{
res.json().then(json =>
{
if (res.ok)
{
json.forEach(item =>
{
addProject(item["information"], item["projectLink"], item["gitLink"]);
})
return;
}
document.querySelector("#projects").innerHTML = "No project data found";
})
})
})
document.querySelector("#navOpen").addEventListener("click", e =>
@@ -134,6 +150,28 @@ document.querySelector("#addWork").addEventListener("submit", e =>
}));
});
document.querySelector("#goToCV").addEventListener("click", () =>
{
document.querySelector("#curriculumVitae").style.display = "block";
document.querySelector("#goToCV").classList.toggle("active");
document.querySelector("#projects").style.display = "none";
document.querySelector("#goToProjects").classList.toggle("active");
});
document.querySelector("#goToProjects").addEventListener("click", () =>
{
document.querySelector("#curriculumVitae").style.display = "none";
document.querySelector("#goToCV").classList.toggle("active");
document.querySelector("#projects").style.display = "block";
document.querySelector("#goToProjects").classList.toggle("active");
});
document.querySelector("#logout").addEventListener("click", () =>
{
document.cookie = "PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
window.location.reload();
});
/**
* Switches the timeline item between edit and view mode
@@ -405,3 +443,22 @@ function deleteWorkItem(id)
});
}
function addProject(information, projectLink, gitLink)
{
document.querySelector("#projList").innerHTML += `
<div class="projItem">
<img src="../imgs/500x400.jpg" alt="">
<div class="flexCol">
<div>
<p>${information}</p>
</div>
<div>
<a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
<a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
</div>
</div>
</div>
`;
}