wip: 2024-11-20T09:08:18+0100 (1732090098)

public/about.php

@@ -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&ZeroWidthSpace;'m a full-stack web developer from Sweden.</p>
-	<p>The &lt;programming/markup/command/query/whatever&gt;-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 &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 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>

public/assets/css/pages/about.css

@@ -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 {

public/assets/css/pages/contact.css

@@ -71,7 +71,7 @@ section.social social:hover {
 	fill: var(--color-accent);
 }
 
-section.social social.hovering p {
+section.social social p.hovering {
 	display: initial;
 }
 

public/assets/js/modules/Hoverpop.mjs

@@ -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")));
+	}
+}

public/assets/js/pages/about.js

@@ -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"));
+}

public/assets/js/pages/contact.js

@@ -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) => {
+	new Hoverpop(document.querySelectorAll("social"));
-		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"));
-		});
-	});
 }

public/contact.php

@@ -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>