mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
wip: 2024-11-20T09:08:18+0100 (1732090098)
This commit is contained in:
parent
2d64a9421b
commit
0e46eb8426
7 changed files with 184 additions and 28 deletions
|
|
@ -1,3 +1,20 @@
|
|||
<?php
|
||||
|
||||
use Vegvisir\Path;
|
||||
|
||||
use VLW\Client\API;
|
||||
use VLW\API\Endpoints;
|
||||
|
||||
require_once VV::root("src/client/API.php");
|
||||
require_once VV::root("api/src/Endpoints.php");
|
||||
|
||||
$api = new API();
|
||||
|
||||
// Fetch languages from endpoint
|
||||
$languages = $api->call(Endpoints::ABOUT_LANGUAGES->value)->get()->json();
|
||||
$languages_bytes_total = array_sum($languages);
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/pages/about") ?></style>
|
||||
<section class="intro">
|
||||
<h2 aria-hidden="true">Hi, I'm</h2>
|
||||
|
|
@ -6,7 +23,19 @@
|
|||
<hr aria-hidden="true">
|
||||
<section class="about">
|
||||
<p>I​'m a full-stack web developer from Sweden.</p>
|
||||
<p>The <programming/markup/command/query/whatever>-languages I currently use the most are (in a mostly accurate decending order): PHP, JavaScript, CSS, MySQL, TypeScript, Python, SQLite, Bash, and HTML.</p>
|
||||
<p>Instead of telling you what <programming/markup/command/query/whatever>-languages I use the most and over-guesstimating how much I use them, I thought I'd just show you instead with this stacking bar chart which reads the number of bytes for each language for my public mirrors and sources on <a href="https://git.vlw.se/vlw">Forgejo</a> and distributes them proportionally. <a href="https://git.vlw.se/config/vlw.se">The chart is updated automatically every day</a>.</p>
|
||||
</section>
|
||||
<section class="languages">
|
||||
<stacked-bar-chart>
|
||||
|
||||
<?php foreach($languages as $language => $bytes): ?>
|
||||
<a href="https://git.vlw.se/explore/repos?q=&sort=recentupdate&language=<?= $language ?>" target="_blank"><segment style="width:<?= floor(($bytes / $languages_bytes_total) * 100) ?>%;" data-lang="<?= $language ?>" data-bytes="<?= $bytes ?>">
|
||||
<span data-hover><strong><?= ceil(($bytes / $languages_bytes_total) * 100) ?>% <?= $language ?></strong><br>(<?= $bytes ?> bytes)</span>
|
||||
<p><span><?= $language ?></span></p>
|
||||
</segment></a>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</stacked-bar-chart>
|
||||
</section>
|
||||
<section class="about">
|
||||
<h2>This website</h2>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,112 @@ section.about p i:not(:hover) {
|
|||
opacity: .3;
|
||||
}
|
||||
|
||||
/* ## Languages */
|
||||
|
||||
section.languages {
|
||||
margin: calc(var(--padding) / 1.5) 0;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart {
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-radius: 100px;
|
||||
height: calc(var(--padding) * 1.5);
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart:hover segment {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment {
|
||||
--border-corner-radius: 100px;
|
||||
|
||||
transition: 150ms opacity;
|
||||
min-width: 5%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart a:first-child 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);
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart a:last-child segment {
|
||||
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 a:nth-child(odd) segment {
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment p {
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment[style="width:0%;"] p span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment[style="width:0%;"] p::before {
|
||||
content: "<1%";
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart a segment[data-lang="Go"] { background-color: #00add8; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="PHP"] { background-color: #4f5d95; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="CSS"] { background-color: #563d7c; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="HTML"] { background-color: #e34c26; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="Python"] { background-color: #3572a5; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="TypeScript"] { background-color: #3178c6; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="Shell"] { background-color: #89e051; color: black; }
|
||||
section.languages stacked-bar-chart a segment[data-lang="JavaScript"] { background-color: #f1e05a; color: black; }
|
||||
|
||||
/* ### Hoverpop */
|
||||
|
||||
section.languages stacked-bar-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;
|
||||
-webkit-backdrop-filter: brightness(.2) blur(20px);
|
||||
backdrop-filter: brightness(.2) blur(20px);
|
||||
}
|
||||
|
||||
section.languages stacked-bar-chart segment [data-hover].hovering {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
/* # Interests */
|
||||
|
||||
div.interests {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ section.social social:hover {
|
|||
fill: var(--color-accent);
|
||||
}
|
||||
|
||||
section.social social.hovering p {
|
||||
section.social social p.hovering {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
|
|
|
|||
32
public/assets/js/modules/Hoverpop.mjs
Normal file
32
public/assets/js/modules/Hoverpop.mjs
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
|
||||
|
||||
export const TARGET_SELECTOR = "[data-hover]";
|
||||
|
||||
export class Hoverpop {
|
||||
/**
|
||||
* Bind hover targets on provided Elevent-compatible element(s)
|
||||
* @param {HTMLElement|HTMLElements|string} elements
|
||||
*/
|
||||
constructor(elements) {
|
||||
// Bind hover targets on element(s)
|
||||
new Elevent("mouseenter", elements, (event) => {
|
||||
const element = event.target.querySelector(TARGET_SELECTOR);
|
||||
|
||||
// Bail out if target element contains no hover target element
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.classList.add("hovering");
|
||||
event.target.addEventListener("mousemove", (event) => {
|
||||
const x = event.layerX - (element.clientWidth / 2);
|
||||
const y = event.layerY + element.clientHeight;
|
||||
|
||||
element.style.setProperty("transform", `translate(${x}px, ${y}px)`);
|
||||
});
|
||||
});
|
||||
|
||||
// Bind hover leave targets on element(s)
|
||||
new Elevent("mouseleave", elements, () => elements.forEach(element => element.querySelector(TARGET_SELECTOR)?.classList.remove("hovering")));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { Hoverpop } from "/assets/js/modules/Hoverpop.mjs";
|
||||
|
||||
const randomIntFromInterval = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
|
@ -65,3 +67,8 @@ const implodeInterests = () => {
|
|||
|
||||
interestsElement.addEventListener(canHover ? "mouseleave" : "touchend", () => implodeInterests());
|
||||
}
|
||||
|
||||
// Languages stacking bar chart hoverpop
|
||||
{
|
||||
new Hoverpop(document.querySelectorAll("stacked-bar-chart segment"));
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { Hoverpop } from "/assets/js/modules/Hoverpop.mjs";
|
||||
|
||||
class ContactForm {
|
||||
static STORAGE_KEY = "contact_form_message";
|
||||
|
||||
|
|
@ -60,27 +62,7 @@ class ContactForm {
|
|||
form ? (new ContactForm(form)) : ContactForm.removeSavedMessage();
|
||||
}
|
||||
|
||||
// Social links hover
|
||||
// Social links hoverpop
|
||||
{
|
||||
const socialElementHover = (target) => {
|
||||
const element = target.querySelector("p");
|
||||
|
||||
target.classList.add("hovering");
|
||||
target.addEventListener("mousemove", (event) => {
|
||||
const x = event.layerX - (element.clientWidth / 2);
|
||||
const y = event.layerY + element.clientHeight;
|
||||
|
||||
element.style.setProperty("transform", `translate(${x}px, ${y}px)`);
|
||||
});
|
||||
};
|
||||
|
||||
const elements = [...document.querySelectorAll("social")];
|
||||
|
||||
elements.forEach(element => {
|
||||
element.addEventListener("mouseenter", () => socialElementHover(element));
|
||||
|
||||
element.addEventListener("mouseleave", () => {
|
||||
elements.forEach(element => element.classList.remove("hovering"));
|
||||
});
|
||||
});
|
||||
new Hoverpop(document.querySelectorAll("social"));
|
||||
}
|
||||
|
|
@ -63,15 +63,15 @@
|
|||
<section class="social">
|
||||
<a href="mailto:victor@vlw.se"><social>
|
||||
<?= VV::embed("public/assets/media/icons/email.svg") ?>
|
||||
<p>e-mail</p>
|
||||
<p data-hover>e-mail</p>
|
||||
</social></a>
|
||||
<a href="matrix:@vlw:vlw.se"><social>
|
||||
<?= VV::embed("public/assets/media/icons/matrix.svg") ?>
|
||||
<p>matrix</p>
|
||||
<p data-hover>matrix</p>
|
||||
</social></a>
|
||||
<a href="https://web.libera.chat/#vlw.se"><social>
|
||||
<?= VV::embed("public/assets/media/icons/libera.svg") ?>
|
||||
<p>libera.chat</p>
|
||||
<p data-hover>libera.chat</p>
|
||||
</social></a>
|
||||
</section>
|
||||
<?= VV::embed("public/assets/media/line.svg") ?>
|
||||
|
|
@ -133,4 +133,4 @@
|
|||
</form>
|
||||
</section>
|
||||
|
||||
<script><?= VV::js("public/assets/js/pages/contact") ?></script>
|
||||
<script type="module"><?= VV::js("public/assets/js/pages/contact") ?></script>
|
||||
Loading…
Add table
Reference in a new issue