NotAShelf/tilde-raf
1
0
Fork 0
Code Pull requests Wiki Activity

move scripts to standalone file; add favicon

Browse source
This commit is contained in:
raf 2024-09-27 21:07:36 +03:00
commit ece6ff813b
Signed by: NotAShelf
GPG key ID: AF26552424E53993
4 changed files with 41 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

46
index.html
View file

@ -3,7 +3,19 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>~raf | frzn.dev</title> <link
rel="icon"
href="static/favicon.ico"
type="image/x-icon"
sizes="32x32"
/>
<link
rel="icon"
href="static/favicon.ico"
type="image/x-icon"
sizes="16x16"
/>
<title>~raf @ frzn.dev</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<link <link
rel="stylesheet" rel="stylesheet"
@ -14,7 +26,11 @@
<div class="container"> <div class="container">
<div class="card"> <div class="card">
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<img src="pfp-angel.png" alt="NotAShelf" class="profile-picture" /> <img
src="static/pfp-angel.png"
alt="NotAShelf"
class="profile-picture"
/>
</div> </div>
<h2>About Me</h2> <h2>About Me</h2>
<p> <p>
@ -54,30 +70,6 @@
</span> </span>
</footer> </footer>
<div class="tooltip"></div> <div class="tooltip"></div>
<script> <script src="script.js"></script>
const currentYear = new Date().getFullYear();
const footerText =
currentYear === 2024
? "© 2024 NotAShelf"
: `© 2024-${currentYear} NotAShelf`;
document.getElementById("footer-text").textContent = footerText;
</script>
<script>
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 - 10 + "px";
});
item.addEventListener("mouseleave", () => {
tooltip.style.display = "none";
});
});
</script>
</body> </body>
</html> </html>

22
script.js Normal file
View file

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

BIN
static/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

0
pfp-angel.png → static/pfp-angel.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 120 KiB

Before After
Before After