fix(content): change about-me page texts and fix interest anim origin (#32)

More changes to the about page texts and also made the "interests explosion" effect center on pointer position instead of center of span, which caused some glitchy looking behavior when the text wraps. Also added "digital archiving" to the interests list!

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/32

public/about.php

@@ -42,9 +42,9 @@
 			$diff = $this->week() - $this->week_average();
 
 			return match (true) {
-				$diff < 1   => "less than",
-				$diff === 1 => "the same as",
-				$diff > 1   => "more than"
+				$diff < 0   => "less than",
+				$diff === 0 => "the same as",
+				$diff > 0   => "more than"
 			};
 		}
 	};
@@ -52,14 +52,14 @@
 ?>
 <style><?= VV::css("public/assets/css/pages/about") ?></style>
 <section class="intro">
-	<h2 aria-hidden="true">Hi, I"m</h2>
+	<h2 aria-hidden="true">Hi, I'm</h2>
 	<h1>Victor Westerlund</h1>
 </section>
 <hr aria-hidden="true">
 <section class="about">
 	<p>I&ZeroWidthSpace;'m a full-stack web developer from Sweden, and welcome to my little personal corner of the Internet!</p>
-	<p>I used to list the &lt;programming/markup/command/whatever&gt;-languages here that I use the most and order them by guesstimating how much I use each one. But then I thought it would be better to just show you instead using this chart that automatically pulls the total bytes for each language from my public repos on <a href="https://git.vlw.se/vlw">Forgejo</a>.</p>
-	<p>Some other noteworthy techologies that I work a decent amount with are: Debian, MariaDB, SQLite, DNS, Redis, and probably a few others as well. Check out this page for a comprehensive list of all the tech that I use.</p>
+	<p>My coding happens almost exclusivly in <a href="https://github.com/coder/code-server">code-server</a>, which is a fork of VSCode that runs entirely in the browser. I keep my development environment tucked away in a lightweight Debian VA that I can tote around to whatever host machine I happen to work on. I also keep an ephemeral Debian Live ISO ready which boots into a VM RAM disk where I can mess around without fear or breaking things or try new software.</p>
+	<p>I used to list the &lt;programming/markup/command/whatever&gt;-languages here that I use the most and order them by guesstimating how much I use each one. But then I thought it would be better to just show you instead using this chart that automatically pulls the total bytes for each language from my <a href="https://git.vlw.se/explore/repos">public repos on Forgejo</a>.</p>
 </section>
 <section class="languages">
 	<stacked-bar-chart>
@@ -101,18 +101,10 @@
 </section>
 <section class="about">
 	<h2>Personal</h2>
-	<p>One thing is true.. Coffee, lots of coffee. In fact, I've had <?= $coffee->week() ?> cup<?= $coffee->week() === 1 ? "" : "s" ?> of coffee in the last 7 days! That's <?= $coffee->week_average_string() ?> my average of <?= $coffee->week_average() ?> per week, impressive! Even though you just read that.. I don't consider myself <i>too much</i> of a coffee snob! As long as it's dark roast and warm, I'm probably happy to have it.</p>
+	<p>One thing that most people know about me is that I like coffee.. lots of coffee. In fact, I've had <?= $coffee->week() ?> cup<?= $coffee->week() === 1 ? "" : "s" ?> of coffee in the last 7 days! That's <?= $coffee->week_average_string() ?> my average of <?= $coffee->week_average() ?> per week, impressive! Even though you just read that.. I don't consider myself <i>too much</i> of a coffee snob! As long as it's dark roast and warm, I'm probably happy to have it.</p>
 	<p>At times, I become a true, amateur, armchair detective for a <span class="interests">variety of your typical-nerdy topics that I find interesting</span> and you can bet I spend way more time reading about those things than I will ever have use for in life.</p>
-	<p>My coding happens almost exclusivly in <a href="https://github.com/coder/code-server">code-server</a>, which is a fork of VSCode that runs entirely in the browser. I keep my development environment tucked away in a lightweight Debian VA that I can tote around to whatever host machine I happen to work on. If I can't do that for whatever reason, I have my <a href="https://codeberg.org/vlw/dotfiles">dotfiles</a> ready to get things set up the way I like it.</p>
 	<p>Another silent passion of mine that comes out every few years is building computers and fiddling with networking stuff.</p>
 </section>
-<section class="about">
-	<h2>Projects</h2>
-	<p>Here are some projects I'm working on right now:</p>
-	<p>* <a href="https://vegvisir.vlw.se">Vegvisir</a>: A web navigation framework for PHP.</p>
-	<p>* <a href="https://reflect.vlw.se">Reflect</a>: A REST API framework for PHP developers.</p>
-	<p>Check out this <a href="/work/timeline">timeline</a> for a somewhat complete list of everything I have done.</p>
-</section>
 <hr>
 <section class="about">
 	<h3>GitHub</h3>
@@ -138,5 +130,6 @@
 	<p>photography</p>
 	<p>videography</p>
 	<p>ISO&nbsp;8601</p>
+	<p>digital archiving</p>
 </div>
 <script type="module"><?= VV::js("public/assets/js/pages/about") ?></script>

public/assets/js/pages/about.js

@@ -58,13 +58,9 @@ const implodeInterests = () => {
 	// Bind mouse or touch events depending on pointer type of device
 	const canHover = window.matchMedia("(pointer: fine)").matches;
 
-	interestsElement.addEventListener(canHover ? "mouseenter" : "touchstart", () => {
-		// Get absolute position of the trigger element
-		const size = interestsElement.getBoundingClientRect();
-
-		explodeInterests(size.x, size.y);
-	});
-
+	// Explode interests when mouse hovers or touch hold starts
+	interestsElement.addEventListener(canHover ? "mouseenter" : "touchstart", (event) => explodeInterests(event.x, event.y));
+	// Implode interests when mouse leaves or touch hold ends
 	interestsElement.addEventListener(canHover ? "mouseleave" : "touchend", () => implodeInterests());
 }