+
+
+
+
+
+
+
+
+ ${name}
+${position}
+${date}
+${date}
+"${quote}"
+ `; + + recommendationFragment.appendChild(recommendation); + + const dot = document.createElement("span"); + dot.classList.add("dot"); + if (index === 0) dot.classList.add("active"); + dot.dataset.index = index; + dotsFragment.appendChild(dot); + }); + + recommendationContent.appendChild(recommendationFragment); + dotsContainer.appendChild(dotsFragment); + + const recommendationsElements = document.querySelectorAll(".recommendation"); + const dots = document.querySelectorAll(".dot"); + let currentIndex = 0; + let isTransitioning = false; + + function showRecommendation(index, direction) { + if (isTransitioning) return; + isTransitioning = true; + + const current = recommendationsElements[currentIndex]; + const next = recommendationsElements[index]; + + if (direction === 'left') { + current.classList.add('recommendation-exit-left'); + next.classList.add('recommendation-enter-right'); + } else if (direction === 'right') { + current.classList.add('recommendation-exit-right'); + next.classList.add('recommendation-enter-left'); + } + + setTimeout(() => { + current.classList.remove('active', 'recommendation-exit-left', 'recommendation-exit-right'); + next.classList.add('active'); + next.classList.remove('recommendation-enter-left', 'recommendation-enter-right'); + currentIndex = index; + isTransitioning = false; + }, 500); // Match the CSS transition duration + + dots.forEach((dot, i) => { + dot.classList.toggle("active", i === index); + }); + } + + function debounce(func, wait) { + let timeout; + return function(...args) { + const context = this; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), wait); + }; + } + + const debouncedShowRecommendation = debounce((index, direction) => showRecommendation(index, direction), 500); + + dotsContainer.addEventListener("click", (event) => { + if (event.target.classList.contains('dot')) { + const index = parseInt(event.target.dataset.index, 10); + if (index > currentIndex) { + debouncedShowRecommendation(index, 'left'); + } else if (index < currentIndex) { + debouncedShowRecommendation(index, 'right'); + } + } + }); + + // Swipe detection + let startX; + let isSwiping = false; + + recommendationContent.addEventListener('touchstart', (event) => { + startX = event.touches[0].clientX; + isSwiping = true; + }); + + recommendationContent.addEventListener('touchmove', (event) => { + if (!isSwiping) return; + const moveX = event.touches[0].clientX; + const diffX = startX - moveX; + + if (Math.abs(diffX) > 50) { + let newIndex; + if (diffX > 0) { + // Swiped left + newIndex = (currentIndex + 1) % recommendations.length; + } else { + // Swiped right + newIndex = (currentIndex - 1 + recommendations.length) % recommendations.length; + } + showRecommendation(newIndex); + isSwiping = false; + } + }); + + recommendationContent.addEventListener('touchend', () => { + isSwiping = false; + }); + + // Adjust height to ensure dots are always visible + function adjustHeight() { + const activeRecommendation = document.querySelector('.recommendation.active'); + if (activeRecommendation) { + const activeHeight = activeRecommendation.getBoundingClientRect().height; + recommendationContent.style.minHeight = `${activeHeight + 60}px`; // Add space for dots + } + } + + window.addEventListener('resize', adjustHeight); + adjustHeight(); // Initial call to set height + + } catch (error) { + console.error('Failed to load recommendations:', error); + } +}); diff --git a/JS/resize-thumbnails.js b/JS/resize-thumbnails.js new file mode 100644 index 0000000..751dfa2 --- /dev/null +++ b/JS/resize-thumbnails.js @@ -0,0 +1,52 @@ +document.addEventListener('DOMContentLoaded', () => { + const thumbnailContainer = document.getElementById('thumbnail-container'); + const plusButton = document.getElementById('plus-button'); + const minusButton = document.getElementById('minus-button'); + + // Retrieve the saved minWidth from localStorage or set default value + let minWidth = parseInt(localStorage.getItem('thumbnailMinWidth')) || 250; + + // Apply the initial size from localStorage + updateThumbnailSize(); + + plusButton.addEventListener('click', () => { + if (minWidth < 500) { + minWidth += 50; + updateThumbnailSize(); + localStorage.setItem('thumbnailMinWidth', minWidth); + } + }); + + minusButton.addEventListener('click', () => { + if (minWidth > 100) { + minWidth -= 50; + updateThumbnailSize(); + localStorage.setItem('thumbnailMinWidth', minWidth); + } + }); + + // Add event listener for the 'r', '+', and '-' keys + document.addEventListener('keydown', (event) => { + if (event.key === 'r') { + minWidth = 250; + updateThumbnailSize(); + localStorage.setItem('thumbnailMinWidth', minWidth); + } else if (event.key === '+' || event.key === '=') { // 'Equal' key for shift+'+' key on some keyboards + if (minWidth < 500) { + minWidth += 50; + updateThumbnailSize(); + localStorage.setItem('thumbnailMinWidth', minWidth); + } + } else if (event.key === '-') { + if (minWidth > 100) { + minWidth -= 50; + updateThumbnailSize(); + localStorage.setItem('thumbnailMinWidth', minWidth); + } + } + }); + + function updateThumbnailSize() { + thumbnailContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${minWidth}px, 1fr))`; + } +}); diff --git a/JS/skills.js b/JS/skills.js new file mode 100644 index 0000000..da71e38 --- /dev/null +++ b/JS/skills.js @@ -0,0 +1,34 @@ +function addSkillsAndSoftware() { + const softwareContainer = document.querySelector('.skills-panel .software-tag-container:first-of-type'); + const skillsContainer = document.querySelector('.skills-panel .software-tag-container:last-of-type'); + + const fetchAndPopulate = async (url, container) => { + try { + const response = await fetch(url); + const text = await response.text(); + const itemsArray = text.split('\n').map(item => item.trim()).filter(item => item); + + // Create a document fragment to batch DOM manipulations + const fragment = document.createDocumentFragment(); + + // Populate the tags + itemsArray.forEach(item => { + const span = document.createElement("span"); + span.className = "software-tag"; + span.textContent = item; + fragment.appendChild(span); + }); + + // Append the fragment to the container + container.appendChild(fragment); + } catch (error) { + console.error(`Failed to load ${url}:`, error); + } + }; + + // Fetch and populate software and skills data + fetchAndPopulate('../Config/software.txt', softwareContainer); + fetchAndPopulate('../Config/skills.txt', skillsContainer); +} + +document.addEventListener("DOMContentLoaded", addSkillsAndSoftware); diff --git a/JS/summary.js b/JS/summary.js new file mode 100644 index 0000000..39721a3 --- /dev/null +++ b/JS/summary.js @@ -0,0 +1,19 @@ +document.addEventListener('DOMContentLoaded', async () => { + const summaryElement = document.querySelector('.summary-panel p'); + + if (!summaryElement) { + console.error('Summary element not found'); + return; + } + + try { + const response = await fetch('../Config/summary.txt'); + if (!response.ok) { + throw new Error(`Network response was not ok: ${response.statusText}`); + } + const text = await response.text(); + summaryElement.textContent = text; + } catch (error) { + console.error('Failed to load summary:', error); + } +}); diff --git a/JS/userinformation.js b/JS/userinformation.js new file mode 100644 index 0000000..dd22068 --- /dev/null +++ b/JS/userinformation.js @@ -0,0 +1,133 @@ +function addUserInformation() { + // Determine the base path dynamically + let basePath = ''; + if (window.location.pathname.includes('/Projects/')) { + basePath = '../../Config/userinformation.txt'; + } else if (window.location.pathname.includes('/HTML/')) { + basePath = '../Config/userinformation.txt'; + } else { + basePath = 'Config/userinformation.txt'; // Default case if in root or unexpected location + } + + fetch(basePath) + .then(response => response.text()) + .then(data => { + const lines = data.split('\n').map(line => line.trim()); + const [profilePicUrl, profileName, profileRole, location, ...socials] = lines; + + // Get the container where the user info should be added + const container = document.querySelector('.top-container'); // Select the specific container + + // Create a document fragment for better performance + const fragment = document.createDocumentFragment(); + + // Create the user info panel + const userInfoPanel = document.createElement("div"); + userInfoPanel.className = "user-info-panel"; + + // Create and append the image + const img = document.createElement("img"); + img.src = profilePicUrl; // Your Profile Pic URL from txt + img.alt = "Profile Picture"; + img.className = "profile-pic"; + userInfoPanel.appendChild(img); + + // Create and append the user name as a link + const userNameLink = document.createElement("a"); + userNameLink.href = "../../index.html"; + userNameLink.className = "user-name-link"; + + const userName = document.createElement("h1"); + userName.className = "user-name"; + userName.textContent = profileName; // Your Profile Name from txt + userNameLink.appendChild(userName); + userInfoPanel.appendChild(userNameLink); + + // Create and append the user role + const userRole = document.createElement("h2"); + userRole.textContent = profileRole; // Your Current Title & Studio from txt + userInfoPanel.appendChild(userRole); + + // Create and append the location + const userLocationContainer = document.createElement("div"); + userLocationContainer.className = "user-location-container"; + + const locationIcon = document.createElement("span"); + locationIcon.className = "material-symbols-outlined"; + locationIcon.textContent = "near_me"; + userLocationContainer.appendChild(locationIcon); + + const userLocation = document.createElement("h2"); + userLocation.textContent = location; // Your Location from txt + userLocationContainer.appendChild(userLocation); + + userInfoPanel.appendChild(userLocationContainer); + + // Create and append the social icons + const socialIcons = document.createElement("div"); + socialIcons.className = "social-icons"; + userInfoPanel.appendChild(socialIcons); + + // Define the mapping of keywords to icon classes + const socialIconMap = { + 'x.com': "fa-brands fa-x-twitter", + 'facebook.com': "fa-brands fa-square-facebook", + 'discord.com': "fa-brands fa-discord", + 'discord.gg': "fa-brands fa-discord", + 'dsc.gg': "fa-brands fa-discord", + 'instagram.com': "fa-brands fa-instagram", + 'youtube.com': "fa-brands fa-youtube", + 'linkedin.com': "fab fa-linkedin", + 'artstation.com': "fa-brands fa-artstation", + 'github.com': "fab fa-github", + 'wordpress.com': "fab fa-wordpress", + 'vimeo.com': "fab fa-vimeo", + 'behance.net': "fab fa-behance", + 'playstation.com': "fab fa-playstation", + 'xbox.com': "fab fa-xbox", + 'vk.com': "fab fa-vk", + 'steamcommunity.com': "fab fa-steam", + 'tumblr.com': "fab fa-tumblr", + 'threads.net': "fab fa-threads", + 'patreon.com': "fab fa-patreon", + 'twitch.tv': "fab fa-twitch", + 'mixer.com': "fab fa-mixer", + 'mastodon.social': "fab fa-mastodon", + 'mailchimp.com': "fab fa-mailchimp", + 'email': "fas fa-envelope" + }; + + // Adding social links based on the detected type + socials.forEach(social => { + let iconClass; + let url = social; + + // Detect the type of social link + const socialType = Object.keys(socialIconMap).find(key => social.includes(key)) || 'email'; + iconClass = socialIconMap[socialType]; + if (socialType === 'email') { + url = `mailto:${social}`; + } + + if (iconClass) { + const a = document.createElement("a"); + a.href = url; + a.target = "_blank"; + const icon = document.createElement("i"); + icon.className = iconClass; + a.appendChild(icon); + socialIcons.appendChild(a); + } + }); + + // Append the user info panel to the fragment + fragment.appendChild(userInfoPanel); + + // Append the fragment to the container + container.appendChild(fragment); + }) + .catch(error => console.error('Error loading user information:', error)); +} + +// Call the function when the document is fully loaded +document.addEventListener("DOMContentLoaded", addUserInformation); diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f92dae5 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Pilgrim + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Projects/BigMegaGunExample/bigmegagun.html b/Projects/BigMegaGunExample/bigmegagun.html new file mode 100644 index 0000000..d18a840 --- /dev/null +++ b/Projects/BigMegaGunExample/bigmegagun.html @@ -0,0 +1,47 @@ + + + + + +