function clearHighlighting() {
				Array.from(document.querySelectorAll(".highlighted")).forEach((match) => {
					match.classList.remove('highlighted');
				});
				document.querySelector('#clear-highlighting-link').classList.add('invisible');
			}

			function highlightKeyword(keyword) {
				clearHighlighting();

				Array.from(document.querySelectorAll(`.${keyword}`)).forEach((match) => {
					match.classList.add('highlighted');
				});

				document.querySelector('#clear-highlighting-link').classList.remove('invisible');
			};

			function clearRoles() {
				clearHighlighting();

				let overlay = document.getElementById('overlay')
				overlay.remove();

				Array.from(document.querySelectorAll('.faded')).forEach((match) => {
					match.classList.remove('faded');
				});
			}

			function showRolesFor(skill, skillDescription) {
				/* TODO - clear any existing role highlighting, this looks ugly if you click another link! */

				Array.from(document.querySelectorAll('.default-fade')).forEach((match) => {
					match.classList.add('faded');
				});
				Array.from(document.querySelectorAll(`#experience-section > div:not(.${skill}-job)`)).forEach((match) => {
					match.classList.add('faded');
				});
				Array.from(document.querySelectorAll(`#volunteering-section > div:not(.${skill}-job)`)).forEach((match) => {
					match.classList.add('faded');
				});

				const cvMain = document.querySelector('#cv');
				const skillDetails = document.createElement('div');
				skillDetails.id = 'overlay';

				const closeLink = document.createElement('a');
				closeLink.className = 'skills-overlay-close clickable';
				closeLink.appendChild(document.createTextNode('\u00D7'));
				closeLink.title = 'close';
				closeLink.href = '#';
				closeLink.addEventListener('click', function(e) {
					e.preventDefault();
					clearRoles();
				});
				skillDetails.appendChild(closeLink);

				const skillTitle = document.createElement('h2');
				skillTitle.appendChild(document.createTextNode(skill));
				skillDetails.appendChild(skillTitle);
    			skillDetails.appendChild(document.createTextNode(skillDescription));
			    cvMain.appendChild(skillDetails);

			    highlightKeyword(skill);
			}

			Array.from(document.querySelectorAll('.clickable')).forEach(function(link){
				link.addEventListener('click', function(e){
					e.preventDefault();

					if (link.classList.contains('skill-link')) {
						showRolesFor(e.target.dataset.skill, e.target.dataset.skillDescription);
					}

					if (link.classList.contains('summary-link')) {
						highlightKeyword(e.target.dataset.keyword);
					}
				});
			});