upload stuffs

2023-08-27 03:31:29 -04:00 · 2023-08-27 03:31:29 -04:00 · ee6e9ae17e
commit ee6e9ae17e
parent aeb7c39352
4 changed files with 142 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/marked@2.0.0/marked.min.js"></script>
+    <script src="/md_convert.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+    <title>Josh's Links</title>
+</head>
+<body>
+    <div id="links-container"></div>
+</body>
+</html>
--- a/links.md
+++ b/links.md
@ -0,0 +1,2 @@
+- Portfolio | https://joshsevero.dev
+- Linkedin | https://joshsevero.dev/linkedin
--- a/md_convert.js
+++ 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;
--- a/style.css
+++ 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;
+}