summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDante Catalfamo2025-01-08 19:02:07 -0500
committerDante Catalfamo2025-01-08 19:02:07 -0500
commit66292c0e95236a024f61439465d8992ebfb49b1f (patch)
treeff0645114eb45ac1a2d3b1e4b64fe5b9f95d0a60
parent428b349e7ededbfa8ed49d4ed16f30e5f510f519 (diff)
downloadhomepage-66292c0e95236a024f61439465d8992ebfb49b1f.tar.gz
homepage-66292c0e95236a024f61439465d8992ebfb49b1f.tar.bz2
homepage-66292c0e95236a024f61439465d8992ebfb49b1f.zip
Add trail
-rw-r--r--public/index.html2
-rw-r--r--public/style.css21
-rw-r--r--public/trail.js56
3 files changed, 79 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html
index fe530fb..0d71224 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
</style>
</head>
<body>
+ <div id="chars"></div>
<div class="bigguy">
<pre class="lambda"></pre>
<div class="linkbox">
@@ -22,5 +23,6 @@
</div>
<script src="lambda.js"></script>
<script src="braille.js"></script>
+ <script src="trail.js"></script>
</body>
</html>
diff --git a/public/style.css b/public/style.css
index fd93835..c87c349 100644
--- a/public/style.css
+++ b/public/style.css
@@ -45,3 +45,24 @@ body {
display: block;
}
}
+/* Char trail */
+#chars {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.chr {
+ position: absolute;
+ user-select: none;
+ font-family: monospace, monospace;
+ color: #00000000;
+ animation-name: fade;
+ animation-duration: 2s;
+}
+
+@keyframes fade {
+ from { color: limegreen; }
+ to { color: #00000000 }
+}
diff --git a/public/trail.js b/public/trail.js
new file mode 100644
index 0000000..6cafc7d
--- /dev/null
+++ b/public/trail.js
@@ -0,0 +1,56 @@
+let mouseText = `char *
+auth_mkvalue(char *value)
+{
+ char *big, *p;
+
+ big = malloc(strlen(value) * 4 + 1);
+ if (big == NULL)
+ return (NULL);
+
+ for (p = big; *value; ++value) {
+ switch (*value) {
+ case '\r':
+ *p++ = '\\';
+`;
+
+const textUrl = "https://raw.githubusercontent.com/openbsd/src/refs/heads/master/lib/libc/gen/authenticate.c";
+
+fetch(textUrl).then(body => {
+ body.text().then(text => {
+ mouseText = text.substring(text.indexOf("#include")).replaceAll(/\s+/g, " ");
+ });
+});
+
+const grid = document.getElementById("chars");
+const minDistance = 4;
+const disappearTime = 2000;
+let curChar = 0;
+let lastX = 0;
+let lastY = 0;
+
+window.addEventListener("mousemove", (event) => {
+ const x = event.pageX;
+ const y = event.pageY;
+ const diffX = Math.abs(lastX-x);
+ const diffY = Math.abs(lastY-y);
+ const distance = Math.sqrt(diffX*2+diffY*2);
+ if (distance < minDistance) {
+ return;
+ }
+ lastY = y;
+ lastX = x;
+ placeText(x+"px",y+"px", "e");
+});
+
+function placeText(x, y) {
+ const char = mouseText[curChar++ % mouseText.length];
+ const el = document.createElement("div");
+ el.className = "chr";
+ el.style.left = x;
+ el.style.top = y;
+ el.innerText = char;
+ window.setTimeout(() => {
+ el.remove();
+ }, 2000);
+ grid.appendChild(el);
+}