diff --git a/index.html b/index.html new file mode 100644 index 0000000..38f272c --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + + + ~raf @ frzn.dev + + + + +
+
+
+ NotAShelf +
+

About Me

+

+ I'm raf, most commonly known as NotAShelf on the world wide web. I am + a part-time FOSS contributor and part-time political scientist. +

+

+ You are visiting my personal page hosted on frzn.dev, which I will + definitely update soon with more details. + Totally, I promise. Trust me. +

+
+
+ + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..3c44d15 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +const currentYear = new Date().getFullYear(); +const footerText = + currentYear === 2024 + ? "© 2024 NotAShelf" + : `© 2024-${currentYear} NotAShelf`; +document.getElementById("footer-text").textContent = footerText; + +const tooltip = document.querySelector(".tooltip"); +const hoverItems = document.querySelectorAll(".hover-item"); + +hoverItems.forEach((item) => { + item.addEventListener("mouseenter", (e) => { + tooltip.innerText = e.target.dataset.content; + tooltip.style.display = "block"; + tooltip.style.left = e.pageX + "px"; + tooltip.style.top = e.pageY - tooltip.offsetHeight - 35 + "px"; + }); + + item.addEventListener("mouseleave", () => { + tooltip.style.display = "none"; + }); +}); diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..3bf5144 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/pfp-angel.png b/static/pfp-angel.png new file mode 100644 index 0000000..9daaef4 Binary files /dev/null and b/static/pfp-angel.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..99b4fae --- /dev/null +++ b/styles.css @@ -0,0 +1,117 @@ +body { + background-color: #0a0a0a; + color: #f8fafc; + font-family: + system-ui, + -apple-system, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Open Sans", + sans-serif; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.card { + background-color: #18181b; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + padding: 20px; + width: 80%; + max-width: 500px; + position: relative; + overflow: hidden; + transition: + transform 0.3s, + box-shadow 0.3s; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +.profile-picture { + width: 198px; + height: 198px; + border-radius: 50%; + object-fit: cover; + object-position: center; + transition: transform 0.3s; +} + +.profile-picture:hover { + transform: scale(1.1); +} + +.card h2 { + color: #f8fafc; + text-align: center; + margin-top: 20px; + margin-bottom: 20px; +} + +.card p { + line-height: 1.6; + font-size: 16px; + padding: 5px 15px; +} + +.divider { + width: 50%; + height: 2px; + background-color: #f8fafc; + margin: 10px auto; +} + +.bullshit { + font-style: italic; + letter-spacing: 0.6px; +} + +footer { + padding: 10px; + text-align: center; + position: sticky; + bottom: 0; + width: 100%; +} + +.footer-text { + font-size: 14px; + color: #e5e5e5; +} + +.tooltip { + position: absolute; + background-color: #18181b; + color: #d4d4d8; + padding: 8px 10px; + border-radius: 5px; + display: none; + z-index: 1000; + transform: translateX(-50%); + max-width: 200px; + word-wrap: break-word; + white-space: normal; +} + +.hover-item { + position: relative; + cursor: pointer; + margin: 0 5px; +}