From ee6e9ae17eba454a764cfdd45049ed529f7f0028 Mon Sep 17 00:00:00 2001 From: DIVISIONSolar Date: Sun, 27 Aug 2023 03:31:29 -0400 Subject: [PATCH] upload stuffs --- index.html | 14 ++++++++++ links.md | 2 ++ md_convert.js | 53 +++++++++++++++++++++++++++++++++++++ style.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+) create mode 100644 index.html create mode 100644 links.md create mode 100644 md_convert.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9fd7479 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + + + Josh's Links + + + + + \ No newline at end of file diff --git a/links.md b/links.md new file mode 100644 index 0000000..a36a8d7 --- /dev/null +++ b/links.md @@ -0,0 +1,2 @@ +- Portfolio | https://joshsevero.dev +- Linkedin | https://joshsevero.dev/linkedin \ No newline at end of file diff --git a/md_convert.js b/md_convert.js new file mode 100644 index 0000000..97aca95 --- /dev/null +++ b/md_convert.js @@ -0,0 +1,53 @@ +// Inside the renderMarkdownLinks function +async function renderMarkdownLinks() { + const response = await fetch('links.md'); + const markdownText = await response.text(); + const linksContainer = document.getElementById('links-container'); + + const lines = markdownText.split('\n'); + for (const line of lines) { + const trimmedLine = line.trim(); + if (trimmedLine.startsWith('-')) { + const parts = trimmedLine.substring(1).trim().split('|'); + const displayName = parts[0].trim(); + const linkText = parts[1].trim(); + const linkBox = document.createElement('div'); + linkBox.classList.add('link-box'); + + const linkElement = document.createElement('a'); + linkElement.textContent = displayName; + linkElement.href = linkText; + + // Add mouseover event listener to show link information + linkElement.addEventListener('mouseover', () => { + showTooltip(linkBox, displayName, linkText); + }); + + // Add mouseout event listener to hide link information + linkElement.addEventListener('mouseout', hideTooltip); + + linkBox.appendChild(linkElement); + linksContainer.appendChild(linkBox); + } + } +} + +// Function to show tooltip +function showTooltip(linkBox, displayName, linkText) { + const tooltip = document.createElement('div'); + tooltip.classList.add('tooltip'); + tooltip.textContent = `${displayName}: ${linkText}`; + linkBox.appendChild(tooltip); +} + +// Function to hide tooltip +function hideTooltip(event) { + const linkBox = event.target.parentElement; + const tooltip = linkBox.querySelector('.tooltip'); + if (tooltip) { + tooltip.remove(); + } +} + +// Call the function when the page loads +window.onload = renderMarkdownLinks; diff --git a/style.css b/style.css new file mode 100644 index 0000000..2279b29 --- /dev/null +++ b/style.css @@ -0,0 +1,73 @@ +@import url('https://fonts.bunny.net/css?family=abril-fatface:400|rubik:600,800i,900i'); + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #18181b; +} + +#links-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.link-box { + background-color: #F43F5E; + color: white; + padding: 10px 20px; + margin: 10px; + border-radius: 10px; + text-align: center; + width: 200px; + font-size: 16px; + font-family: 'Abril-Fatface', sans-serif; + position: relative; +} + +.link-box img { + max-width: 16px; + margin-right: 10px; +} + +a { + color: white; + text-decoration: none; +} + +.tooltip { + position: absolute; + top: 100%; + left: 0; + background-color: #333; + color: white; + padding: 5px; + border-radius: 5px; + z-index: 1; + font-size: 12px; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: #333; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + opacity: 0; + transition: opacity 0.3s; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +}