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;
+}