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..a4d5eec --- /dev/null +++ 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 0878165..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

- - - + + +