From 78ddc498633a08cdee851c64d2cba8874a7c0348 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Thu, 21 Nov 2024 10:07:25 +0100 Subject: [PATCH] wip: 2024-11-21T08:42:36+0100 (1732174956) --- public/about.php | 29 +++++++++- public/assets/css/pages/about.css | 94 +++++++++++++++++++++++++++---- 2 files changed, 111 insertions(+), 12 deletions(-) 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 @@

I​'m a full-stack web developer from Sweden.

-

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 Forgejo and distributes them proportionally. The chart is updated automatically every day.

+

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 little chart which sums the number of bytes for each language for my public mirrors and sources on Forgejo contain and distributes them proportionally. The chart is updated automatically every day.

$bytes): ?> - + %
( bytes)

+ + +

50%

+

PHP

+

13 KB

+ + + +

50%

+

JavasScript

+

13 KB

+ + + + + + $bytes): ?> + + %
( bytes) +

+ + + + +

This website

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