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