Skip to content

Adding a template driven approach #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tushtiw97 wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Adding a template driven approach #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54a592b
temp commit
tushtiw97 Jun 25, 2021
05f45d3
Merge branch 'dev' of https://github.com/tedbhatia/tedbhatia.github.io
tushtiw97 Jun 25, 2021
530c57b
Using a template driven approach for reusability
tushtiw97 Jun 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css/modified-index-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,11 +321,11 @@ color: black;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow-y: hidden;
}

/* CSS properties for the hidden scrollbar. This is done in order to remove the obviousness of the scrollbar
* indicating the more content is present. Also, helps us reduce the number of visible, yet unnecessary, scrollbars in the document
* indicating that more content is present. Also, helps us reduce the number of visible, yet unnecessary, scrollbars in the document
*/
.hidden-scrollbar::-webkit-scrollbar {
display: none;
Expand Down
82 changes: 82 additions & 0 deletions js/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
const personalDetails = {
firstName: 'Tejas1',
middleName: '',
lastName: 'Bhatia',
oneLineDesc: 'My name is Tejas Bhatia. This is one line description'
};

const reposAndProfessionalAccounts = {
githubProfileUrl: 'https://github.com/tedbhatia',
linkedInProfileUrl: 'https://www.linkedin.com/in/tejas-bhatia/',
twitterProfileUrl: 'https://twitter.com/techted6'
};

const aboutMeDetails = {
bio: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
timeline: [
{
date: '15 Dec, 2019',
title: 'LOREM IPSUM DOLOR SIT AMET',
content: 'Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.'
}, {
date: '22 Oct, 2019',
title: 'LOREM IPSUM DOLOR SIT AMET',
content: 'Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.'
}, {
date: '10 July, 2019',
title: 'LOREM IPSUM DOLOR SIT AMET',
content: 'Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.'
}, {
date: '15 Dec, 2018',
title: 'LOREM IPSUM DOLOR SIT AMET',
content: 'Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.'
}, {
date: '14 July, 2018',
title: 'LOREM IPSUM DOLOR SIT AMET',
content: 'Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.'
}
]
};

const skills = {
technicalSkills: [
{
skillName: 'HTML 5',
levelOfExpertise: 90

}, {
skillName: 'Node.js',
levelOfExpertise: 60
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}, {
skillName: 'Java 7/8/11/14',
levelOfExpertise: 70
}
],
softSkills: [
{
skillName: 'Public Speaking',
levelOfExpertise: 70
}, {
skillName: 'Teamwork',
levelOfExpertise: 80
}, {
skillName: 'Leadership',
levelOfExpertise: 10
}
]
};
108 changes: 107 additions & 1 deletion js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,110 @@ function selectActiveNavLink(linkIdCssSelector) {
node.classList.remove('active');
});
document.querySelector('#' + linkIdCssSelector).classList.add('active');
}
}

// functions for DOM manipulation, e.g. apply the document title, name of the person, projects, etc. /////////////////////////////////////////////////////////////////////////////////////////////////////////

function applyDOMManipulation(elementId, innerHtmlValue) {
document.querySelector('#' + elementId).innerHTML = innerHtmlValue;
}

function configureDocumentTitle() {
const elementId = 'title';
const titleTextSuffix = ' - Portfolio';
const titleText = personalDetails.firstName + ' ' + personalDetails.lastName;
applyDOMManipulation(elementId, titleText + titleTextSuffix);
}

function configureNameInHome() {
const elementId = 'homeSectionDisplayName';
const name = personalDetails.firstName + ' ' + personalDetails.middleName + ' ' + personalDetails.lastName;
applyDOMManipulation(elementId, name);
}

function configureRepoLinks() {
const anchorIds = Object.keys(reposAndProfessionalAccounts);
anchorIds.forEach(anchorId => {
// each key in the reposAndProfessionalAccounts object is actually the same as the id assigned to the anchor tags in the html file. Use keys as ids for query selector, and their corresponding values as the href of anchor tags
document.querySelector('#' + anchorId).href = reposAndProfessionalAccounts[anchorId];
});
}

function setBioText() {
applyDOMManipulation('bioText', aboutMeDetails.bio);
}

function setTimelineItems() {
aboutMeDetails.timeline.forEach((timelineItem, index) => {
const timelineItemDiv = document.createElement('div');
timelineItemDiv.setAttribute('class', 'container-tl ' + (index % 2 === 0 ? 'left' : 'right'));

// create the date div and append to parent
const dateDiv = document.createElement('div');
dateDiv.setAttribute('class', 'date');
dateDiv.innerHTML = timelineItem.date;
timelineItemDiv.appendChild(dateDiv);

// create the icon and append to parent
const icon = document.createElement('i');
icon.setAttribute('class', 'icon fa fa-home');
timelineItemDiv.appendChild(icon);

// create the content div and append to parent
const contentDiv = document.createElement('div');
contentDiv.setAttribute('class', 'content');
const h2 = document.createElement('h2');
h2.innerHTML = timelineItem.title;
contentDiv.appendChild(h2);
const p = document.createElement('p');
p.innerHTML = timelineItem.content;
contentDiv.appendChild(p);
timelineItemDiv.appendChild(contentDiv);

// add the configured timeline item div to the container div
document.querySelector('#timelineContainerDiv').appendChild(timelineItemDiv);
});
}

// helper function to be reused so that code duplication can be reduced for the configureTechnicalAndSoftSkills method
function createSkillDivElement(skillSet, parentContainerId) {
skillSet.forEach(skill => {
const skillDiv = document.createElement('div');
skillDiv.setAttribute('class', 'progressBar');

// create h4 with skill name and append to parent div
const h4 = document.createElement('h4');
h4.innerHTML = skill.skillName;
skillDiv.appendChild(h4);

// create progressBar container and value, and append to parent div
const progressBarContainer = document.createElement('div');
progressBarContainer.setAttribute('class', 'progressBarContainer');
const progressBarValue = document.createElement('div');
progressBarValue.setAttribute('class', 'progressBarValue value-' + skill.levelOfExpertise);
progressBarContainer.appendChild(progressBarValue);
skillDiv.appendChild(progressBarContainer);

// append the skillDiv div element to the parent container having the specified id parentContainerId
document.querySelector('#' + parentContainerId).appendChild(skillDiv);
});
}

function configureTechnicalAndSoftSkills() {
const technicalSkills = skills.technicalSkills;
const softSkills = skills.softSkills;

createSkillDivElement(technicalSkills, 'one-panel');
createSkillDivElement(softSkills, 'two-panel');
}

// start calling the DOM manipulation functions from here ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

setTimeout(() => {
configureDocumentTitle();
configureNameInHome();
configureRepoLinks();
setBioText();
setTimelineItems();
configureTechnicalAndSoftSkills();
}, 100);
107 changes: 15 additions & 92 deletions modified-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tejas Bhatia - Portfolio</title>
<title id="title">Tejas Bhatia - Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/modified-index-styles.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="js/config.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="computeNavbarHeight()" onresize="computeNavbarHeight()">
Expand Down Expand Up @@ -88,14 +89,14 @@
z-index: 1;
}
</style>
<h1>Tejas Bhatia</h1>
<h1 id="homeSectionDisplayName">Tejas Bhatia</h1>
<h2>One line description about yourself; your goal</h2>
<br><br>
<a href="#about" class="transparent_btn">More About Me </a>
<br><br>
<a href="https://github.com/tedbhatia" class="fa font-info fa-github"></a>
<a href="https://www.linkedin.com/in/tejas-bhatia/" class="fa font-info fa-linkedin"></a>
<a href="https://twitter.com/techted6" class="fa font-info fa-twitter"></a>
<a class="fa font-info fa-github" id="githubProfileUrl"></a>
<a class="fa font-info fa-linkedin" id="linkedInProfileUrl"></a>
<a class="fa font-info fa-twitter" id="twitterProfileUrl"></a>
</div>
<!-- Commenting out the animated boxes in the home section. Can be reintroduced with minor CSS tweaks -->
<ul class="bg-bubbles">
Expand Down Expand Up @@ -153,10 +154,7 @@ <h1>About</h1>
<div class="col-12 col-sm-12 col-md-4">
<div class="scroll leftpane hidden-scrollbar">
<h1>Bio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="bioText"></p>
</div>
</div>
<div class="col-12 col-sm-12 col-md-8 padding-sm-xs-screens">
Expand Down Expand Up @@ -242,11 +240,11 @@ <h1>Bio</h2>
}

.container-tl.left .date {
right: -75px;
right: -125px;
}

.container-tl.right .date {
left: -75px;
left: -125px;
}

.container-tl .icon {
Expand Down Expand Up @@ -344,59 +342,19 @@ <h1>Bio</h2>
}
}
</style>
<div class="timeline">
<div class="container-tl left">
<div class="date">15 Dec</div>
<i class="icon fa fa-home"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container-tl right">
<div class="date">22 Oct</div>
<i class="icon fa fa-gift"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container-tl left">
<div class="date">10 Jul</div>
<i class="icon fa fa-user"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container-tl right">
<div class="date">22 Oct</div>
<i class="icon fa fa-gift"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="timeline" id="timelineContainerDiv">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- container for the projects section -->
<div class="container-fluid full-screen-height projects-container hidden-scrollbar" id="projects">
<div class="container-fluid full-screen-height projects-container" id="projects">
<div style="display: flex; justify-content: center; padding-top: 16px; padding-bottom: 16px;">
<h1>Projects & Certifications</h1>
</div>
<div class="container-fluid">
<div class="container-fluid hidden-scrollbar" style="height: calc(100% - 100px); overflow-x: hidden; overflow-y: auto;">
<div class="row">
<div class="col-12 col-sm-12 col-md-6">
<div class="card bg-secondary mb-3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); cursor: context-menu;">
Expand Down Expand Up @@ -529,10 +487,11 @@ <h4>Validity</h4>
background:#fffffff6;
box-shadow: 0 2rem 2rem #00000080;
min-height:60vh;
height:60vh;
width:100%;
max-width:120vh;
border-radius:3px;
overflow:hidden;
overflow:auto;
padding:20px;
}
.panel{
Expand Down Expand Up @@ -628,46 +587,10 @@ <h4>Validity</h4>
<label class="tab" id="one-tab" for="one"><h3>Technical Skills</h3></label>
<label class="tab" id="two-tab" for="two"><h3>Soft Skills</h3></label>
</div>
<div class="panels" style="margin-bottom: 16px;">
<div class="panels hidden-scrollbar" style="margin-bottom: 16px;">
<div class="panel" id="one-panel">
<div class="progressBar">
<h4>HTML5</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-90"></div>
</div>
</div>
<div class="progressBar">
<h4>HTML5</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-50"></div>
</div>
</div>
<div class="progressBar">
<h4>HTML5</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-70"></div>
</div>
</div>
</div>
<div class="panel" id="two-panel">
<div class="progressBar">
<h4>Speaking</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-90"></div>
</div>
</div>
<div class="progressBar">
<h4>Speaking</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-80"></div>
</div>
</div>
<div class="progressBar">
<h4>Speaking</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-70"></div>
</div>
</div>
</div>
</div>
</div>
Expand Down