mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
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
135 lines
6.6 KiB
PHP
135 lines
6.6 KiB
PHP
<?php
|
|
|
|
use VLW\Database\Models\Coffee\Stats;
|
|
use VLW\Database\Models\About\Language;
|
|
use const VLW\{
|
|
FORGEJO_HREF,
|
|
FORGEJO_SI_BYTE_MULTIPLE,
|
|
DEFAULT_BUTTON_ICON
|
|
};
|
|
|
|
require_once VV::root("src/Consts.php");
|
|
require_once VV::root("src/Database/Models/Coffee/Stats.php");
|
|
require_once VV::root("src/Database/Models/About/Language.php");
|
|
|
|
$languages = new class extends Language {
|
|
private readonly int $total_bytes;
|
|
|
|
public function __construct() {
|
|
$this->total_bytes = array_sum(array_map(fn(Language $language): int => $language->bytes(), parent::all()));
|
|
}
|
|
|
|
public function percent(Language $language, int $mode = PHP_ROUND_HALF_UP): int {
|
|
return round(($language->bytes() / $this->total_bytes) * 100, 0, $mode);
|
|
}
|
|
|
|
public function percent_string(Language $language): string {
|
|
return ($this->percent($language) > 1 ? $this->percent($language) : "<1") . "%";
|
|
}
|
|
|
|
public function bytes_si_string(Language $language): string {
|
|
// Calculate factor for unit
|
|
$factor = floor((strlen($language->bytes()) - 1) / 3);
|
|
// Divide by radix 10
|
|
$format = $language->bytes() / pow(1000, $factor);
|
|
|
|
return round($format) . " " . FORGEJO_SI_BYTE_MULTIPLE[$factor];
|
|
}
|
|
};
|
|
|
|
$coffee = new class extends Stats {
|
|
public function week_average_string(): string {
|
|
$diff = $this->week() - $this->week_average();
|
|
|
|
return match (true) {
|
|
$diff < 0 => "less than",
|
|
$diff === 0 => "the same as",
|
|
$diff > 0 => "more than"
|
|
};
|
|
}
|
|
};
|
|
|
|
?>
|
|
<style><?= VV::css("public/assets/css/pages/about") ?></style>
|
|
<section class="intro">
|
|
<h2 aria-hidden="true">Hi, I'm</h2>
|
|
<h1>Victor Westerlund</h1>
|
|
</section>
|
|
<hr aria-hidden="true">
|
|
<section class="about">
|
|
<p>I​'m a full-stack web developer from Sweden, and welcome to my little personal corner of the Internet!</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 <programming/markup/command/whatever>-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>
|
|
|
|
<?php foreach ($languages::all() as $language): ?>
|
|
<a href="<?= FORGEJO_HREF . $language->id ?>" target="_blank"><chart-segment style="--size:<?= $languages->percent($language) ?>%;" data-lang="<?= $language->id ?>" data-bytes="<?= $language->bytes() ?>">
|
|
<span data-hover><strong><?= $languages->percent_string($language) ?> <?= $language->id ?></strong><br>(<?= $language->bytes() ?> bytes)</span>
|
|
</chart-segment></a>
|
|
<?php endforeach; ?>
|
|
|
|
</stacked-bar-chart>
|
|
<languages-list>
|
|
|
|
<?php foreach ($languages::all() as $language): ?>
|
|
<a href="<?= FORGEJO_HREF . $language->id ?>"><button data-lang="<?= $language->id ?>" class="inline">
|
|
<p><?= $languages->percent_string($language) ?></p>
|
|
<p class="lang"><?= $language->id ?></p>
|
|
<p><?= $languages->bytes_si_string($language) ?></p>
|
|
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
|
</button></a>
|
|
<?php endforeach; ?>
|
|
|
|
</languages-list>
|
|
<stacked-bar-chart>
|
|
|
|
<?php foreach ($languages::all() as $language): ?>
|
|
<a href="<?= FORGEJO_HREF . $language->id ?>" target="_blank"><chart-segment style="--size:<?= $languages->percent($language) ?>%;" data-lang="<?= $language->id ?>" data-bytes="<?= $language->bytes() ?>">
|
|
<span data-hover><strong><?= $languages->percent_string($language) ?> <?= $language->id ?></strong><br>(<?= $language->bytes() ?> bytes)</span>
|
|
</chart-segment></a>
|
|
<?php endforeach; ?>
|
|
|
|
</stacked-bar-chart>
|
|
|
|
</section>
|
|
<section class="about">
|
|
<h2>This website</h2>
|
|
<p>This site and all of its components, including texts and graphics have been created by me and are all <a href="https://codeberg.org/vlw/vlw.se">100% free and open source</a>. Feel free to use anything you see on this website in your own projects as long as it's under the same GNU GPLv3-or-later license. The website is designed by me on top of my own <a href="https://vegvisir.vlw.se">web framework</a> and <a href="https://reflect.vlw.se">API framework</a>.</p>
|
|
<p>You will never find cookies or trackers on this site. The only information I have about you are in the standard NGINX web server logs, which get overwritten automatically after some time.</p>
|
|
</section>
|
|
<section class="about">
|
|
<h2>Personal</h2>
|
|
<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>Another silent passion of mine that comes out every few years is building computers and fiddling with networking stuff.</p>
|
|
</section>
|
|
<hr>
|
|
<section class="about">
|
|
<h3>GitHub</h3>
|
|
<p>I have <a href="https://giveupgithub.com" target="_blank" rel="noopener noreferer">given up GitHub</a> and moved most of my free software to <a href="https://codeberg.org/vlw">Codeberg</a>. You can still find my <a href="https://github.com/VictorWesterlund">GitHub profile here</a> but I don't use it for source control anymore.</p>
|
|
</section>
|
|
<hr>
|
|
<section>
|
|
<p>Let's work on something together or just have a chat? <a href="contact">Write me a line!</a></p>
|
|
</section>
|
|
|
|
<div class="interests" aria-hidden="true">
|
|
<p>SSTV</p>
|
|
<p>music</p>
|
|
<p>aviation</p>
|
|
<p>maritime</p>
|
|
<p>politics</p>
|
|
<p>astronomy</p>
|
|
<p>typography</p>
|
|
<p>networking</p>
|
|
<p>electronics</p>
|
|
<p>simulations</p>
|
|
<p>engineering</p>
|
|
<p>photography</p>
|
|
<p>videography</p>
|
|
<p>ISO 8601</p>
|
|
<p>digital archiving</p>
|
|
</div>
|
|
<script type="module"><?= VV::js("public/assets/js/pages/about") ?></script>
|