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
This commit is contained in:
Victor Westerlund 2025-03-29 07:34:14 +00:00
parent f4279c0343
commit c5c7aaa919
2 changed files with 11 additions and 22 deletions

View file

@ -42,9 +42,9 @@
$diff = $this->week() - $this->week_average(); $diff = $this->week() - $this->week_average();
return match (true) { return match (true) {
$diff < 1 => "less than", $diff < 0 => "less than",
$diff === 1 => "the same as", $diff === 0 => "the same as",
$diff > 1 => "more than" $diff > 0 => "more than"
}; };
} }
}; };
@ -52,14 +52,14 @@
?> ?>
<style><?= VV::css("public/assets/css/pages/about") ?></style> <style><?= VV::css("public/assets/css/pages/about") ?></style>
<section class="intro"> <section class="intro">
<h2 aria-hidden="true">Hi, I"m</h2> <h2 aria-hidden="true">Hi, I'm</h2>
<h1>Victor Westerlund</h1> <h1>Victor Westerlund</h1>
</section> </section>
<hr aria-hidden="true"> <hr aria-hidden="true">
<section class="about"> <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&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>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>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>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>
<section class="languages"> <section class="languages">
<stacked-bar-chart> <stacked-bar-chart>
@ -101,18 +101,10 @@
</section> </section>
<section class="about"> <section class="about">
<h2>Personal</h2> <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>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> <p>Another silent passion of mine that comes out every few years is building computers and fiddling with networking stuff.</p>
</section> </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> <hr>
<section class="about"> <section class="about">
<h3>GitHub</h3> <h3>GitHub</h3>
@ -138,5 +130,6 @@
<p>photography</p> <p>photography</p>
<p>videography</p> <p>videography</p>
<p>ISO&nbsp;8601</p> <p>ISO&nbsp;8601</p>
<p>digital archiving</p>
</div> </div>
<script type="module"><?= VV::js("public/assets/js/pages/about") ?></script> <script type="module"><?= VV::js("public/assets/js/pages/about") ?></script>

View file

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