diff --git a/public/about.php b/public/about.php
index d34acdd..f23e213 100644
--- a/public/about.php
+++ b/public/about.php
@@ -23,19 +23,44 @@
 <hr aria-hidden="true">
 <section class="about">
 	<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 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>
+	<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>
 </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 ?>">
+			<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 ?>">
 				<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>
+	<languages>
+		<language data-lang="PHP">
+			<p>50%</p>
+			<p class="lang">PHP</p>
+			<p>13&nbsp;KB</p>
+			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
+		</language>
+		<language data-lang="PHP">
+			<p>50%</p>
+			<p class="lang">JavasScript</p>
+			<p>13&nbsp;KB</p>
+			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
+		</language>
+	</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="--size:<?= 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>
diff --git a/public/assets/css/pages/about.css b/public/assets/css/pages/about.css
index 87f451f..622fb33 100644
--- a/public/assets/css/pages/about.css
+++ b/public/assets/css/pages/about.css
@@ -3,6 +3,15 @@
 :root {
 	--primer-color-accent: 148, 255, 21;
 	--color-accent: rgb(var(--primer-color-accent));
+
+	--color-go: rgb(0, 173, 216);
+	--color-php: rgb(79, 93, 149);
+	--color-css: rgb(86, 61, 124);
+	--color-html: rgb(227, 76, 38);
+	--color-shell: rgb(137, 224, 81);
+	--color-python: rgb(53, 114, 165);
+	--color-typescript: rgb(49, 120, 198);
+	--color-javascript: rgb(241, 224, 90);
 }
 
 vv-shell {
@@ -68,6 +77,7 @@ section.languages stacked-bar-chart segment {
 	--border-corner-radius: 100px;
 
 	transition: 150ms opacity;
+	width: var(--size, 0%);
 	min-width: 5%;
 	height: 100%;
 	color: white;
@@ -111,23 +121,23 @@ section.languages stacked-bar-chart segment p {
 	padding: 0 3px;
 }
 
-section.languages stacked-bar-chart segment[style="width:0%;"] p span {
+section.languages stacked-bar-chart segment[style="--size:0%;"] p span {
 	display: none;
 }
 
-section.languages stacked-bar-chart segment[style="width:0%;"] p::before {
+section.languages stacked-bar-chart segment[style="--size: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; }
+section.languages stacked-bar-chart a segment[data-lang="Go"] { background-color: var(--color-go); }
+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 */
 
@@ -151,6 +161,12 @@ section.languages stacked-bar-chart segment [data-hover].hovering {
 	display: initial;
 }
 
+/* ### Legend */
+
+section.languages languages {
+	display: none;
+}
+
 /* # Interests */
 
 div.interests {
@@ -191,4 +207,62 @@ div.interests p {
 		-webkit-filter: hue-rotate(360deg);
 		filter: hue-rotate(360deg);
 	}
+}
+
+/* Size queries */
+
+@media (max-width: 700px) {
+	section.languages {
+		gap: var(--padding);
+		display: flex;
+		flex-direction: column;
+	}
+
+	section.languages stacked-bar-chart {
+		height: 10px;
+		pointer-events: none;
+	}
+
+	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);
+	}
 }
\ No newline at end of file