move scripts to standalone file; add favicon
This commit is contained in:
parent
a6f7597fb3
commit
ece6ff813b
4 changed files with 41 additions and 27 deletions
46
index.html
46
index.html
|
@ -3,7 +3,19 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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"
|
||||
|
@ -14,7 +26,11 @@
|
|||
<div class="container">
|
||||
<div class="card">
|
||||
<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>
|
||||
<h2>About Me</h2>
|
||||
<p>
|
||||
|
@ -54,30 +70,6 @@
|
|||
</span>
|
||||
</footer>
|
||||
<div class="tooltip"></div>
|
||||
<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>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
22
script.js
Normal file
22
script.js
Normal 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
BIN
static/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
Loading…
Reference in a new issue