vlw.se/public/about.php

<?php

	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/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];
		}
	}

?>
<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&ZeroWidthSpace;'m a full-stack web developer from Sweden.</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 <a href="https://git.vlw.se/config/vlw.se">automatically pulls the total bytes</a> for each language from my public mirrors and sources on <a href="https://git.vlw.se/vlw">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 are <a href="https://codeberg.org/vlw/vlw.se">100% free and open source software</a>. The website is designed and built by me from the ground up using my <a href="https://vegvisir.vlw.se">web</a> and <a href="https://reflect.vlw.se">API</a> frameworks as the foundation. You will find no cookies or trackers here. The only information I have about you is your public IP-address and which resources on this site your browser requests. None of this data is used for any kind of analytics.</p>
	<p><a href="https://srv.vlw.se"><i>See detailed information about all servers/services on this domain</i></a></p>
</section>
<section class="about">
	<h2>Personal</h2>
	<p>Coffee, of course.. and..</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 will spend a disproportionate to real-world-personal-use amount of time reading about that stuff too.</p>
	<p>Another silent passion of mine that comes out every few years is building computers and fiddling with weird networking stuff.</p>
	<p>And then of course I don't mind some occational gaming, and watching movies and TV-series.</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>There is more stuff on my <a href="work">works page</a> and even more stuff on <a href="https://codeberg.org/vlw">my Codeberg profile</a>.</p>
	<p><a href="https://git.vlw.se/vlw"><i>and even EVEN more stuff on my Forgejo</i></a></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> for their increasing number of injustices againts its users, last betrayal being GitHub's for-profit "Copilot" product which was illegaly trained on copylefted software on its platform.</p>
	<p>I signed up and started using GitHub before I became aware of how opressive to to its users and deceptive their business model is. I wasn't aware of the situation.</p>
	<p>While I am a bit skeptical to do this in case history repeats itself; [most of] <a href="https://codeberg.org/vlw">my work is now on Codeberg</a> instead. Unfortunately some things like old pull-requests, issues, and branch archives can not be migrated completely.</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&nbsp;8601</p>
</div>
<script type="module"><?= VV::js("public/assets/js/pages/about") ?></script>