vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 21:13:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip: 2024-11-23T06:05:10+0100 (1732338310)

Browse source
This commit is contained in:
Victor Westerlund 2024-11-23 08:45:41 +01:00
parent 78ddc49863
commit 7fd8e666ea
3 changed files with 181 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
public/about.php
View file

@ -1,6 +1,7 @@
<?php <?php
use Vegvisir\Path; use Vegvisir\Path;
use Reflect\Response;
use VLW\Client\API; use VLW\Client\API;
use VLW\API\Endpoints; use VLW\API\Endpoints;
@ -8,55 +9,98 @@
require_once VV::root("src/client/API.php"); require_once VV::root("src/client/API.php");
require_once VV::root("api/src/Endpoints.php"); require_once VV::root("api/src/Endpoints.php");
$api = new API(); const BYTE_UNITS = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const FORGEJO_HREF = "https://git.vlw.se/explore/repos?q=&sort=recentupdate&language=";
// Fetch languages from endpoint $langs = new class extends API {
$languages = $api->call(Endpoints::ABOUT_LANGUAGES->value)->get()->json(); public readonly int $total_bytes;
$languages_bytes_total = array_sum($languages);
private readonly Response $resp;
private readonly array $languages;
public function __construct() {
parent::__construct();
// Fetch languages from endpoint
$this->resp = $this->call(Endpoints::ABOUT_LANGUAGES->value)->get();
// We got a response from endpoint
if ($this->resp->ok) {
$this->languages = $this->resp->json();
$this->total_bytes = array_sum($this->languages);
}
}
// Return all languages as (string) language => (int) language_bytes
public function all(): array {
return $this->languages;
}
// Return percent of total for all languages
public function get_percent(string $lang, int $mode = PHP_ROUND_HALF_UP): int {
return round(($this->languages[$lang] / $this->total_bytes) * 100, 0, $mode);
}
// Return language bytes as percent of whole
public function get_percent_str(string $lang): string {
$percent = $this->get_percent($lang, PHP_ROUND_HALF_DOWN);
return ($percent > 1 ? $percent : "<1") . "%";
}
// Return languages bytes as a multiple-byte decimal unit
public function get_bytes_str(string $lang): string {
$bytes = $this->languages[$lang];
// Calculate factor for unit
$factor = floor((strlen($bytes) - 1) / 3);
// Divide by radix 10
$format = $bytes / pow(1000, $factor);
return round($format) . " " . BYTE_UNITS[$factor];
}
};
?> ?>
<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.</p> <p>I&ZeroWidthSpace;'m a full-stack web developer from Sweden.</p>
<p>Instead of telling you what &lt;programming/markup/command/query/whatever&gt;-languages I use the most and over-guesstimating how much I use them, I thought I'd just show you instead with little chart which sums the number of bytes for each language for my public mirrors and sources on <a href="https://git.vlw.se/vlw">Forgejo</a> contain and distributes them proportionally. <a href="https://git.vlw.se/config/vlw.se">The chart is updated automatically every day</a>.</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>
<section class="languages"> <section class="languages">
<stacked-bar-chart> <stacked-bar-chart>
<?php foreach($languages as $language => $bytes): ?> <?php foreach ($langs->all() as $lang => $bytes): ?>
<a href="https://git.vlw.se/explore/repos?q=&sort=recentupdate&language=<?= $language ?>" target="_blank"><segment style="--size:<?= floor(($bytes / $languages_bytes_total) * 100) ?>%;" data-lang="<?= $language ?>" data-bytes="<?= $bytes ?>"> <a href="<?= FORGEJO_HREF . $lang ?>" target="_blank"><chart-segment style="--size:<?= $langs->get_percent($lang) ?>%;" data-lang="<?= $lang ?>" data-bytes="<?= $bytes ?>">
<span data-hover><strong><?= ceil(($bytes / $languages_bytes_total) * 100) ?>% <?= $language ?></strong><br>(<?= $bytes ?> bytes)</span> <span data-hover><strong><?= $langs->get_percent_str($lang) ?> <?= $lang ?></strong><br>(<?= $bytes ?> bytes)</span>
<p><span><?= $language ?></span></p> <!--<p><span><?= $lang ?></span></p>-->
</segment></a> </chart-segment></a>
<?php endforeach; ?> <?php endforeach; ?>
</stacked-bar-chart> </stacked-bar-chart>
<languages> <languages-list>
<language data-lang="PHP">
<p>50%</p> <?php foreach ($langs->all() as $lang => $bytes): ?>
<p class="lang">PHP</p> <a href="<?= FORGEJO_HREF . $lang ?>"><language-item data-lang="<?= $lang ?>">
<p>13&nbsp;KB</p> <p><?= $langs->get_percent_str($lang) ?></p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?> <p class="lang"><?= $lang ?></p>
</language> <p><?= $langs->get_bytes_str($lang) ?></p>
<language data-lang="PHP"> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
<p>50%</p> </language-item></a>
<p class="lang">JavasScript</p> <?php endforeach; ?>
<p>13&nbsp;KB</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?> </languages-list>
</language>
</languages>
<stacked-bar-chart> <stacked-bar-chart>
<?php foreach($languages as $language => $bytes): ?> <?php foreach ($langs->all() as $lang => $bytes): ?>
<a href="https://git.vlw.se/explore/repos?q=&sort=recentupdate&language=<?= $language ?>" target="_blank"><segment style="--size:<?= floor(($bytes / $languages_bytes_total) * 100) ?>%;" data-lang="<?= $language ?>" data-bytes="<?= $bytes ?>"> <a href="<?= FORGEJO_HREF . $lang ?>" target="_blank"><chart-segment style="--size:<?= $langs->get_percent($lang) ?>%;" data-lang="<?= $lang ?>" data-bytes="<?= $bytes ?>">
<span data-hover><strong><?= ceil(($bytes / $languages_bytes_total) * 100) ?>% <?= $language ?></strong><br>(<?= $bytes ?> bytes)</span> <span data-hover><strong><?= $langs->get_percent_str($lang) ?> <?= $lang ?></strong><br>(<?= $bytes ?> bytes)</span>
<p><span><?= $language ?></span></p> <!--<p><span><?= $lang ?></span></p>-->
</segment></a> </chart-segment></a>
<?php endforeach; ?> <?php endforeach; ?>
</stacked-bar-chart> </stacked-bar-chart>

199
public/assets/css/pages/about.css
View file

@ -65,20 +65,24 @@ section.languages stacked-bar-chart {
width: 100%; width: 100%;
display: flex; display: flex;
border-radius: 100px; border-radius: 100px;
height: calc(var(--padding) * 1.5); height: var(--padding);
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
section.languages stacked-bar-chart:hover segment { section.languages stacked-bar-chart:last-of-type {
flex-direction: row-reverse;
}
section.languages stacked-bar-chart:hover chart-segment {
opacity: .5; opacity: .5;
} }
section.languages stacked-bar-chart segment { section.languages stacked-bar-chart chart-segment {
--border-corner-radius: 100px; --border-corner-radius: 100px;
transition: 150ms opacity; transition: 150ms opacity;
width: var(--size, 0%); width: var(--size, 0%);
min-width: 5%; min-width: 3%;
height: 100%; height: 100%;
color: white; color: white;
position: relative; position: relative;
@ -89,29 +93,43 @@ section.languages stacked-bar-chart segment {
border-radius: 2px; border-radius: 2px;
} }
section.languages stacked-bar-chart segment:hover { section.languages stacked-bar-chart a:nth-child(odd) chart-segment {
opacity: 1; background-color: rgba(255, 255, 255, .3);
} }
section.languages stacked-bar-chart a:first-child segment { /* ### Round corners */
section.languages stacked-bar-chart a:first-child chart-segment {
border-top-right-radius: var(--padding); border-top-right-radius: var(--padding);
border-bottom-right-radius: var(--padding); border-bottom-right-radius: var(--padding);
border-top-left-radius: var(--border-corner-radius); border-top-left-radius: var(--border-corner-radius);
border-bottom-left-radius: var(--border-corner-radius); border-bottom-left-radius: var(--border-corner-radius);
} }
section.languages stacked-bar-chart a:last-child segment { section.languages stacked-bar-chart a:last-child chart-segment {
border-top-left-radius: var(--padding); border-top-left-radius: var(--padding);
border-bottom-left-radius: var(--padding); border-bottom-left-radius: var(--padding);
border-top-right-radius: var(--border-corner-radius); border-top-right-radius: var(--border-corner-radius);
border-bottom-right-radius: var(--border-corner-radius); border-bottom-right-radius: var(--border-corner-radius);
} }
section.languages stacked-bar-chart a:nth-child(odd) segment { section.languages stacked-bar-chart:last-of-type a:first-child chart-segment {
background-color: rgba(255, 255, 255, .3); border-top-left-radius: var(--padding);
border-bottom-left-radius: var(--padding);
border-top-right-radius: var(--border-corner-radius);
border-bottom-right-radius: var(--border-corner-radius);
} }
section.languages stacked-bar-chart segment p { section.languages stacked-bar-chart:last-of-type a:last-child chart-segment {
border-top-right-radius: var(--padding);
border-bottom-right-radius: var(--padding);
border-top-left-radius: var(--border-corner-radius);
border-bottom-left-radius: var(--border-corner-radius);
}
/* ### Texts */
section.languages stacked-bar-chart chart-segment p {
text-align: center; text-align: center;
color: inherit; color: inherit;
overflow: hidden; overflow: hidden;
@ -121,50 +139,60 @@ section.languages stacked-bar-chart segment p {
padding: 0 3px; padding: 0 3px;
} }
section.languages stacked-bar-chart segment[style="--size:0%;"] p span { section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p span {
display: none; display: none;
} }
section.languages stacked-bar-chart segment[style="--size:0%;"] p::before { section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p::before {
content: "<1%"; content: "<1%";
opacity: .5; opacity: .5;
} }
section.languages stacked-bar-chart a segment[data-lang="Go"] { background-color: var(--color-go); } section.languages stacked-bar-chart chart-segment [data-hover] {
section.languages stacked-bar-chart a segment[data-lang="PHP"] { background-color: var(--color-php); }
section.languages stacked-bar-chart a segment[data-lang="CSS"] { background-color: var(--color-css); }
section.languages stacked-bar-chart a segment[data-lang="HTML"] { background-color: var(--color-html); }
section.languages stacked-bar-chart a segment[data-lang="Python"] { background-color: var(--color-python); }
section.languages stacked-bar-chart a segment[data-lang="TypeScript"] { background-color: var(--color-typescript); }
section.languages stacked-bar-chart a segment[data-lang="Shell"] { background-color: var(--color-shell); color: black; }
section.languages stacked-bar-chart a segment[data-lang="JavaScript"] { background-color: var(--color-javascript); color: black; }
/* ### Hoverpop */
section.languages stacked-bar-chart segment [data-hover] {
display: none; display: none;
position: absolute;
top: 0;
left: 0;
text-align: center;
transform: translate(0, 0);
background-color: inherit;
padding: 5px 10px;
white-space: nowrap;
pointer-events: none;
border-radius: 6px;
-webkit-backdrop-filter: brightness(.2) blur(20px);
backdrop-filter: brightness(.2) blur(20px);
} }
section.languages stacked-bar-chart segment [data-hover].hovering { /* ### Colors */
display: initial;
} section.languages stacked-bar-chart a chart-segment[data-lang="Go"] { background-color: var(--color-go); }
section.languages stacked-bar-chart a chart-segment[data-lang="PHP"] { background-color: var(--color-php); }
section.languages stacked-bar-chart a chart-segment[data-lang="CSS"] { background-color: var(--color-css); }
section.languages stacked-bar-chart a chart-segment[data-lang="HTML"] { background-color: var(--color-html); }
section.languages stacked-bar-chart a chart-segment[data-lang="Python"] { background-color: var(--color-python); }
section.languages stacked-bar-chart a chart-segment[data-lang="TypeScript"] { background-color: var(--color-typescript); }
section.languages stacked-bar-chart a chart-segment[data-lang="Shell"] { background-color: var(--color-shell); color: black; }
section.languages stacked-bar-chart a chart-segment[data-lang="JavaScript"] { background-color: var(--color-javascript); color: black; }
/* ### Legend */ /* ### Legend */
section.languages languages { section.languages languages-list {
display: none; gap: calc(var(--padding) / 2);
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: var(--padding) 0;
}
section.languages languages-list language-item {
gap: 10px;
display: flex;
border-radius: 8px;
align-items: center;
fill: var(--color-php);
padding: calc(var(--padding) / 1.5);
border: solid 1px rgba(255, 255, 255, .1);
background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%);
}
section.languages languages-list language-item p.lang {
font-size: 1.3em;
font-weight: 900;
color: var(--color-php);
}
section.languages languages-list language-item svg {
width: 2em;
margin-left: auto;
transform: rotate(-90deg);
} }
/* # Interests */ /* # Interests */
@ -209,60 +237,45 @@ div.interests p {
} }
} }
/* Feature queries */
@media (hover: hover) {
section.languages stacked-bar-chart chart-segment:hover {
opacity: 1;
}
section.languages stacked-bar-chart chart-segment [data-hover] {
display: none;
position: absolute;
top: 0;
left: 0;
text-align: center;
transform: translate(0, 0);
background-color: inherit;
padding: 5px 10px;
white-space: nowrap;
pointer-events: none;
border-radius: 6px;
z-index: 2000;
-webkit-backdrop-filter: brightness(.2) blur(20px);
backdrop-filter: brightness(.2) blur(20px);
}
section.languages stacked-bar-chart chart-segment [data-hover].hovering {
display: initial;
}
}
/* Size queries */ /* Size queries */
@media (max-width: 700px) { @media (max-width: 900px) {
section.languages { section.languages languages-list {
gap: var(--padding); grid-template-columns: repeat(2, 1fr);
display: flex;
flex-direction: column;
} }
}
section.languages stacked-bar-chart { @media (max-width: 650px) {
height: 10px; section.languages languages-list {
pointer-events: none; grid-template-columns: 1fr;
}
section.languages stacked-bar-chart:last-of-type {
flex-direction: row-reverse;
}
section.languages stacked-bar-chart segment {
min-width: 1%;
}
section.languages stacked-bar-chart segment p {
display: none;
}
/* ### Languages */
section.languages languages {
gap: calc(var(--padding) / 2);
display: flex;
flex-direction: column;
}
section.languages languages language {
gap: 10px;
display: flex;
border-radius: 8px;
align-items: center;
fill: var(--color-php);
padding: calc(var(--padding) / 1.5);
border: solid 1px rgba(255, 255, 255, .1);
background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%);
}
section.languages languages language p.lang {
font-size: 1.3em;
font-weight: 900;
color: var(--color-php);
}
section.languages languages language svg {
width: 2em;
margin-left: auto;
transform: rotate(-90deg);
} }
} }

4
public/assets/js/pages/about.js
View file

@ -69,6 +69,4 @@ const implodeInterests = () => {
} }
// Languages stacking bar chart hoverpop // Languages stacking bar chart hoverpop
{ new Hoverpop(document.querySelectorAll("stacked-bar-chart chart-segment"));
new Hoverpop(document.querySelectorAll("stacked-bar-chart segment"));
}