From 54a592b7d5786c95dafb611e2d9fe011f3098fe0 Mon Sep 17 00:00:00 2001 From: tushtiw97 Date: Fri, 25 Jun 2021 15:51:09 +0530 Subject: [PATCH 1/2] temp commit --- css/modified-index-styles.css | 4 ++-- js/config.js | 0 modified-index.html | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 js/config.js diff --git a/css/modified-index-styles.css b/css/modified-index-styles.css index 6937789..1f1e45a 100644 --- a/css/modified-index-styles.css +++ b/css/modified-index-styles.css @@ -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; diff --git a/js/config.js b/js/config.js new file mode 100644 index 0000000..e69de29 diff --git a/modified-index.html b/modified-index.html index 0878165..df5629c 100644 --- a/modified-index.html +++ b/modified-index.html @@ -392,11 +392,11 @@

Lorem ipsum dolor sit amet

-
+

Projects & Certifications

-
+
From 530c57b444947689b9117e244a0640986539a365 Mon Sep 17 00:00:00 2001 From: tushtiw97 Date: Sat, 26 Jun 2021 16:22:38 +0530 Subject: [PATCH 2/2] Using a template driven approach for reusability --- js/config.js | 82 +++++++++++++++++++++++++++++++++ js/index.js | 108 +++++++++++++++++++++++++++++++++++++++++++- modified-index.html | 103 ++++++------------------------------------ 3 files changed, 202 insertions(+), 91 deletions(-) diff --git a/js/config.js b/js/config.js index e69de29..a4d5eec 100644 --- a/js/config.js +++ b/js/config.js @@ -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 + } + ] +}; \ No newline at end of file diff --git a/js/index.js b/js/index.js index edec4df..b4e231b 100644 --- a/js/index.js +++ b/js/index.js @@ -19,4 +19,110 @@ function selectActiveNavLink(linkIdCssSelector) { node.classList.remove('active'); }); document.querySelector('#' + linkIdCssSelector).classList.add('active'); -} \ No newline at end of file +} + +// 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); \ No newline at end of file diff --git a/modified-index.html b/modified-index.html index df5629c..b4ea091 100644 --- a/modified-index.html +++ b/modified-index.html @@ -1,7 +1,7 @@ - Tejas Bhatia - Portfolio + Tejas Bhatia - Portfolio @@ -9,6 +9,7 @@ + @@ -88,14 +89,14 @@ z-index: 1; } -

Tejas Bhatia

+

Tejas Bhatia

One line description about yourself; your goal



More About Me

- - - + + +
    @@ -153,10 +154,7 @@

    About

    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.

    +

    @@ -242,11 +240,11 @@

    Bio

    } .container-tl.left .date { - right: -75px; + right: -125px; } .container-tl.right .date { - left: -75px; + left: -125px; } .container-tl .icon { @@ -344,47 +342,7 @@

    Bio

    } } -
    -
    -
    15 Dec
    - -
    -

    Lorem ipsum dolor sit amet

    -

    - Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. -

    -
    -
    -
    -
    22 Oct
    - -
    -

    Lorem ipsum dolor sit amet

    -

    - Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. -

    -
    -
    -
    -
    10 Jul
    - -
    -

    Lorem ipsum dolor sit amet

    -

    - Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. -

    -
    -
    -
    -
    22 Oct
    - -
    -

    Lorem ipsum dolor sit amet

    -

    - Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. -

    -
    -
    +
    @@ -529,10 +487,11 @@

    Validity

    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{ @@ -628,46 +587,10 @@

    Validity

-
+
-
-

HTML5

-
-
-
-
-
-

HTML5

-
-
-
-
-
-

HTML5

-
-
-
-
-
-

Speaking

-
-
-
-
-
-

Speaking

-
-
-
-
-
-

Speaking

-
-
-
-