JoshS/links.joshs.pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

upload stuffs

Browse source
This commit is contained in:
DIVISIONSolar 2023-08-27 03:31:29 -04:00
parent aeb7c39352
commit ee6e9ae17e
No known key found for this signature in database
GPG key ID: CA10B18BED096A06
4 changed files with 142 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html Normal file
View file

@ -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>

2
links.md Normal file
View file

@ -0,0 +1,2 @@
- Portfolio | https://joshsevero.dev
- Linkedin | https://joshsevero.dev/linkedin

53
md_convert.js Normal file
View file

@ -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;

73
style.css Normal file
View file

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