This commit is contained in:
laura 2025-11-01 23:46:32 -03:00
parent 30f2b4714d
commit 0c9f7a7822
Signed by: w
GPG key ID: BCD2117C99E69817
21 changed files with 1868 additions and 1839 deletions

View file

@ -3,11 +3,6 @@
src: url("/fonts/jersey15.ttf") format("truetype");
}
@font-face {
font-family: "Share Tech";
src: url("/fonts/str.ttf") format("truetype");
}
:root {
--theme-bg: #16191c;
--theme-bg-secondary: #252a2e;
@ -27,10 +22,11 @@
html {
line-height: 1.5;
font-family: "Jersey 15", sans-serif, "Share Tech", monospace;
font-family: "Jersey 15", sans-serif, monospace;
font-size: 22px;
-webkit-font-smoothing: none;
font-smooth: never;
scroll-behavior: smooth;
}
body {
@ -62,6 +58,18 @@ body {
box-sizing: border-box;
background-color: var(--theme-bg-secondary);
gap: 1rem;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section,
@ -74,27 +82,22 @@ body {
color: var(--theme-fg-alt);
}
.alt-font {
font-size: 16px;
font-family: "Share Tech", monospace;
font-weight: 700;
letter-spacing: 0.05em;
}
/* .alt-font { */
/* font-size: 16px; */
/* font-family: "Gamja Flower", monospace; */
/* font-weight: 700; */
/* letter-spacing: 0.05em; */
/* } */
.section p {
margin: 0;
}
p {
-webkit-hyphens: auto;
hyphens: auto;
}
.intro > .logo {
height: 1em;
margin-right: 0.5ch;
vertical-align: -4px;
}
.centered {
display: flex;
flex-direction: column;
@ -122,14 +125,14 @@ p {
font-size: 1.25rem;
}
.title-3 {
.title-2 {
color: var(--theme-fg-alt);
padding-bottom: 0.16rem;
border-bottom: none;
font-size: 0.9rem;
}
.title.title-3::after {
.title.title-2::after {
background-image: linear-gradient(
90deg,
rgba(var(--theme-border-rgb), 0) 0,
@ -184,6 +187,15 @@ p {
display: flex;
align-items: center;
gap: 0.35rem;
transition: filter 0.2s ease;
}
.box:hover {
filter: brightness(120%);
}
.box svg {
flex-shrink: 0;
}
a,
@ -340,49 +352,9 @@ nav .module {
html {
font-size: 18px;
}
}
@media (max-width: 480px) {
html {
font-size: 16px;
}
body {
padding: 8px;
}
}
@media (max-width: 768px) {
.section {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.section {
padding: 1rem;
}
}
@media (max-width: 480px) {
.box {
padding: 0.4rem 0.8rem;
font-size: 0.9em;
}
.box svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.title {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
#extra {
justify-content: center;
gap: 1rem;
@ -395,13 +367,37 @@ nav .module {
}
@media (max-width: 480px) {
html {
font-size: 16px;
}
body {
padding: 8px;
}
.section {
padding: 1rem;
}
.box {
padding: 0.4rem 0.8rem;
font-size: 0.9em;
}
.box svg {
width: 20px;
height: 20px;
}
.title {
font-size: 1.1rem;
}
#extra svg {
width: 6rem;
height: 6rem;
}
}
@media (max-width: 480px) {
.alt-font {
font-size: 14px;
}
@ -425,9 +421,7 @@ nav .module {
}
.name-wrapper {
transition:
transform 0.3s ease-in-out,
opacity 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(0);
opacity: 1;
}
@ -469,7 +463,7 @@ nav .module {
}
.inline-code {
font-family: "Share Tech Mono", "Share Tech", monospace;
font-family: monospace, "Jersey 15", sans-serif;
font-size: 0.75em;
background-color: var(--theme-border);
padding: 1px;
@ -490,6 +484,9 @@ nav .module {
);
line-height: 1.6;
vertical-align: middle;
cursor: pointer;
outline: none;
border: none;
}
.inline-code > span {

View file

@ -10,8 +10,10 @@ export default function Footer() {
return (
<footer class="section">
<p class="alt alt-font">
Made with <HeartFilledIcon id="f-heart" /> · Source code available at{" "}
<Link href="https://git.acpi.at/mux/web">git.acpi.at</Link> under the{" "}
Made with <HeartFilledIcon id="f-heart" /> · Source code available at
{" "}
<Link href="https://git.acpi.at/mux/web">git.acpi.at</Link> under the
{" "}
<Link href="https://spdx.org/licenses/AGPL-3.0-or-later.html">
GNU Affero General Public License v3.0
</Link>

View file

@ -5,9 +5,15 @@
export default function Header() {
return (
<nav id="header">
<nav id="header" aria-label="Main navigation">
<div id="left">
<a id="logo" href="/" class="module">
<a
id="logo"
href="/"
class="module"
data-current="true"
aria-current="page"
>
<img
src="/bnuy.webp"
width="380"

View file

@ -440,3 +440,19 @@ export function HeartFilledIcon({ size = 24, ...props }: IconProps) {
</svg>
);
}
export function GitHubSponsorsIcon({ size = 24, ...props }: IconProps) {
return (
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
{...props}
>
<title>GitHub Sponsors</title>
<path d="M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75zm-.919 15.275a30.766 30.766 0 0 1-4.703 3.316l-.004-.002-.004.002a30.955 30.955 0 0 1-4.703-3.316c-2.677-2.307-5.047-5.298-5.047-8.523 0-2.754 2.121-4.5 4.125-4.5 2.06 0 3.914 1.479 4.544 3.684.143.495.596.797 1.086.796.49.001.943-.302 1.085-.796.63-2.205 2.484-3.684 4.544-3.684 2.004 0 4.125 1.746 4.125 4.5 0 3.225-2.37 6.216-5.048 8.523z" />
</svg>
);
}

View file

@ -25,8 +25,8 @@ export function Centered(
{ children, class: className, ...props }: LayoutProps,
) {
return (
<div class={`centered ${className || ""}`} {...props}>
<main class={`centered ${className || ""}`} {...props}>
{children}
</div>
</main>
);
}

View file

@ -7,13 +7,21 @@
"start": "deno serve -A _fresh/server.js",
"update": "deno run -A -r jsr:@fresh/update ."
},
"fmt": {
"useTabs": true
},
"lint": {
"rules": {
"tags": [
"fresh",
"recommended"
],
"exclude": ["no-explicit-any", "no-window", "no-window-prefix"]
"exclude": [
"no-explicit-any",
"no-window",
"no-window-prefix",
"no-unused-vars"
]
}
},
"exclude": [

View file

@ -17,14 +17,13 @@ export default function Code({ children, ...props }: CodeProps) {
}
};
return (
<code
<button
class="inline-code"
onClick={handleClick}
style={{ cursor: "pointer" }}
title={"Click to copy"}
title="Click to copy"
{...props}
>
<span>{children}</span>
</code>
</button>
);
}

View file

@ -13,7 +13,11 @@ export default function Meow() {
'<a href="https://acpi.at"><img src="https://acpi.at/88x31.gif" title="muxiepuff" alt="acpi.at" /></a>',
)}
>
<img src="/88x31.gif" title="muxiepuff (Click to copy to clipboard!)" alt="acpi.at" />
<img
src="/88x31.gif"
title="muxiepuff (Click to copy to clipboard!)"
alt="acpi.at"
/>
</button>
);
}

View file

@ -7,8 +7,7 @@ import { useEffect, useState } from "preact/hooks";
export default function Name() {
const names = ["muxiepuff", "lívia", "aury"];
const ipas = ["/ˈmuˌksipʌf/", "/li.vjɐ/", "/ˈaʊ̯ˌɾi/"]
;
const ipas = ["/ˈmuˌksipʌf/", "/li.vjɐ/", "/ˈaʊ̯ˌɾi/"];
const [currentIndex, setCurrentIndex] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);

View file

@ -85,7 +85,9 @@ for (let i = 0; i < NUM_COLOR_VARIATIONS; i++) {
const brightness = 1 - (i / NUM_COLOR_VARIATIONS) * 0.5;
RAIN_COLORS.push(
`rgb(${Math.floor(RAIN_COLOR.r * brightness)},${
Math.floor(RAIN_COLOR.g * brightness)
Math.floor(
RAIN_COLOR.g * brightness,
)
},${Math.floor(RAIN_COLOR.b * brightness)})`,
);
}
@ -95,12 +97,16 @@ for (let i = 0; i < NUM_COLOR_VARIATIONS; i++) {
(i / NUM_COLOR_VARIATIONS) * STAR_BRIGHTNESS_RANGE;
STAR_COLORS.push(
`rgb(${Math.floor(RAIN_COLOR.r * brightness)},${
Math.floor(RAIN_COLOR.g * brightness)
Math.floor(
RAIN_COLOR.g * brightness,
)
},${Math.floor(RAIN_COLOR.b * brightness)})`,
);
ALPHA_STAR_COLORS.push(
`rgba(${Math.floor(RAIN_COLOR.r * brightness)},${
Math.floor(RAIN_COLOR.g * brightness)
Math.floor(
RAIN_COLOR.g * brightness,
)
},${Math.floor(RAIN_COLOR.b * brightness)},`,
);
}
@ -151,7 +157,7 @@ function createStar(): Star {
const brightness = Math.random() * STAR_BRIGHTNESS_RANGE +
STAR_BRIGHTNESS_MIN;
const colorIndex = Math.floor(
(brightness - STAR_BRIGHTNESS_MIN) / STAR_BRIGHTNESS_RANGE *
((brightness - STAR_BRIGHTNESS_MIN) / STAR_BRIGHTNESS_RANGE) *
(NUM_COLOR_VARIATIONS - 1),
);
@ -265,13 +271,10 @@ function drawSplash(ctx: CanvasRenderingContext2D, splash: Splash) {
ctx.globalAlpha = 1;
}
function drawStar(
ctx: CanvasRenderingContext2D,
star: Star,
time: number,
) {
function drawStar(ctx: CanvasRenderingContext2D, star: Star, time: number) {
const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) *
STAR_TWINKLE_AMPLITUDE + STAR_TWINKLE_BASE;
STAR_TWINKLE_AMPLITUDE +
STAR_TWINKLE_BASE;
const alpha = star.brightness * twinkle;
const x = Math.floor(star.x);
@ -282,7 +285,7 @@ function drawStar(
ctx.fillRect(x, y, star.size, star.size);
if (star.size === STAR_SIZE_LARGE && alpha > STAR_GLOW_THRESHOLD) {
ctx.fillStyle = color + (alpha * STAR_GLOW_ALPHA);
ctx.fillStyle = color + alpha * STAR_GLOW_ALPHA;
ctx.fillRect(x - 4, y + 2, 4, 4);
ctx.fillRect(x + 8, y + 2, 4, 4);
ctx.fillRect(x + 2, y - 4, 4, 4);
@ -294,8 +297,9 @@ export default function Rain() {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const prefersReducedMotion =
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const prefersReducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)",
).matches;
if (prefersReducedMotion) return;
const canvas = canvasRef.current;
@ -360,6 +364,8 @@ export default function Rain() {
return (
<canvas
ref={canvasRef}
aria-hidden="true"
role="presentation"
style={{
position: "fixed",
top: 0,

View file

@ -18,25 +18,26 @@ import Name from "../islands/Name.tsx";
import Code from "../islands/Code.tsx";
import {
AttachmentIcon,
BitcoinCashIcon,
BitcoinIcon,
BlueskyIcon,
CodebergIcon,
CommentIcon,
DiscordIcon,
EthereumIcon,
ForgejoIcon,
GitHubIcon,
LabelIcon,
LastfmIcon,
MailIcon,
SignalIcon,
TwitterIcon,
CommentIcon,
GitHubSponsorsIcon,
HeartIcon,
KofiIcon,
BitcoinIcon,
BitcoinCashIcon,
LabelIcon,
LastfmIcon,
LitecoinIcon,
MailIcon,
MoneroIcon,
NanoIcon,
LitecoinIcon,
EthereumIcon,
SignalIcon,
TwitterIcon,
} from "../components/Icon.tsx";
export default define.page(() => {
@ -50,17 +51,19 @@ export default define.page(() => {
<HeartIcon class="icon" />
About me
</Title>
<p class="alt">
<small>
<i>
uhhhhh g'day, name's laura and i go by she/her pronouns and i'm
a veeeery sweet <s>autist</s>{" "}
girl passionate about free software!! ty for your time ^^
</i>
</small>
</p>
<p class="intro">
<span>
{" "}
muxiepuff{" "}
<span class="alt alt-font">(/ˈmuˌksipʌf/, she/her)</span>
{" · "}
</span>
I'm just your average advocate for open access to information and
knowledge and aspiring electrical engineer with complementary
interests in systems programming and linguistics. Neurodivergent
student passionate about libre software.
Advocate for open access to information and knowledge and aspiring
electrical engineer with complementary interests in systems
programming and linguistics.
</p>
<p class="intro">
On the side, I maintain a modest FreeBSD server where I self-host
@ -77,7 +80,7 @@ export default define.page(() => {
Links
</Title>
<div>
<Title level={3}>Social platforms</Title>
<Title level={2}>Social platforms</Title>
<ul class="labeled-icons">
<li>
<Box as="a" href="https://bsky.app/profile/acpi.at">
@ -92,11 +95,11 @@ export default define.page(() => {
</ul>
</div>
<div>
<Title level={3}>Software and code</Title>
<Title level={2}>Software and code</Title>
<ul class="labeled-icons">
<li>
<Box as="a" href="https://git.acpi.at/mux">
<ForgejoIcon /> mux
<Box as="a" href="https://git.acpi.at/w">
<ForgejoIcon /> w
</Box>
</li>
<li>
@ -105,46 +108,37 @@ export default define.page(() => {
</Box>
</li>
<li>
<Box as="a" href="https://github.com/xwra">
<GitHubIcon /> xwra
<Box as="a" href="https://github.com/misties">
<GitHubIcon /> misties
</Box>
</li>
</ul>
</div>
<div>
<Title level={3}>Congenial folks</Title>
<Title level={2}>Congenial folks</Title>
<ul class="labeled-icons b88x31">
<li>
<Meow />
</li>
<li>
<a href="https://worf.win">
<img
src="https://worf.win/images/worfwin.gif"
title="worf"
alt="worf"
/>
<img src="https://worf.win/images/worfwin.gif" alt="worf" />
</a>
</li>
<li>
<a href="https://codeberg.org/paige">
<img src="/88x31/paige.gif" title="paige" alt="paige" />
<img src="/88x31/paige.gif" alt="paige" />
</a>
</li>
<li>
<a href="https://mugman.tech">
<img
src="https://mugman.tech/88x31/me.gif"
title="mugman"
alt="mugman"
/>
<img src="https://mugman.tech/88x31/me.gif" alt="mugman" />
</a>
</li>
<li>
<a href="https://f.dog">
<img
src="https://x86.pet/~strawberry/june_88x31.png"
title="june"
alt="june"
/>
</a>
@ -157,41 +151,28 @@ export default define.page(() => {
>
<img
src="https://rushii.dev/88x31/rushii.webp"
title="rushii's site"
alt="rushii's site"
/>
</a>
</li>
<li>
<a href="https://www.juwuba.xyz">
<img
src="https://www.juwuba.xyz/88x31.gif"
title="Júlia"
alt="Júlia"
/>
<img src="https://www.juwuba.xyz/88x31.gif" alt="Júlia" />
</a>
</li>
<li>
<a href="https://katelyn.moe/">
<img
src="https://katelyn.moe/8831.png"
title="katelyn"
alt="katelyn"
/>
<img src="https://katelyn.moe/8831.png" alt="katelyn" />
</a>
</li>
<li>
<a href="https://meow-d.github.io">
<img src="/88x31/meow_d.webp" title="meow_d" alt="meow_d" />
<img src="/88x31/meow_d.webp" alt="meow_d" />
</a>
</li>
<li>
<a href="https://caitlyn.moe">
<img
src="https://caitlyn.moe/88x31.png"
title="caitlyn"
alt="caitlyn"
/>
<img src="https://caitlyn.moe/88x31.png" alt="caitlyn" />
</a>
</li>
</ul>
@ -210,24 +191,24 @@ export default define.page(() => {
<p class="intro">
Psst! When discussing sensitive matters over email or other insecure
communication channels, I'd really appreciate it if you could
encrypt your message with my <Link href="/pgp-key.asc">PGP key</Link>{" "}
(fingerprint:{" "}
encrypt your message with my{" "}
<Link href="/pgp-key.asc">PGP key</Link> (fingerprint:{" "}
<Code>AC14 9A39 5013 C572 CA74 8799 BCD2 117C 99E6 9817</Code>).
</p>
<div>
<Title level={3}>Communication</Title>
<Title level={2}>Communication</Title>
<ul class="labeled-icons">
<li>
<Box as="a" href="https://discord.com/users/797566974024351745">
<DiscordIcon /> @muxiepuff
<DiscordIcon /> @wwwife
</Box>
</li>
<li>
<Box
as="a"
href="https://signal.me/#eu/gdveRFng4iFhFkB4m5Esr2ciQ5FWZTeSFrCGa2osQ7ZrSu2d48RCdqgDc2nEzWQq"
href="https://signal.me/#eu/yT8nprAP8x3r7RwHXKKMEiSirvd1OJ7azkDBbtE7_ICqtKH-z_NM7Kqv13e9hiv-"
>
<SignalIcon /> @mux.01
<SignalIcon /> @laura.120
</Box>
</li>
</ul>
@ -240,42 +221,53 @@ export default define.page(() => {
patches and stay afloat while things are tight.
</p>
<div>
<Title level={3}>Donations</Title>
<Title level={2}>Donations</Title>
<ul class="labeled-icons full">
<li>
<Box as="a" href="https://ko-fi.com/west">
<Box as="a" href="https://ko-fi.com/west" title="Ko-fi">
<KofiIcon /> west
</Box>
</li>
<li>
<Box as="span">
<Box
as="a"
href="https://github.com/sponsors/xwra"
title="GitHub Sponsors"
>
<GitHubSponsorsIcon /> xwra
</Box>
</li>
<li>
<Box as="span" title="Monero (XMR)">
<MoneroIcon />{" "}
456tmp4CU158sV95Pjh75QfMcANNsRCFTdpmc86G31eKg9urvcYunnuBVyUmazAbuihUXwRDVojkhFTbzg6X2GuAJ7t3MCT
</Box>
</li>
<li>
<Box as="span">
<Box as="span" title="Litecoin (LTC)">
<LitecoinIcon /> ltc1ql30jtr2r0pkr0wshspf465rdupvlpmwacql7wp
</Box>
</li>
<li>
<Box as="span">
<NanoIcon />{" "}nano_1qbbwrzxnutw53kuykdo6zcwteawf3befpbf95zrz66b33yxpz5ans6wrw4w
<Box as="span" title="Nano (XNO)">
<NanoIcon />{" "}
nano_1qbbwrzxnutw53kuykdo6zcwteawf3befpbf95zrz66b33yxpz5ans6wrw4w
</Box>
</li>
<li>
<Box as="span">
<BitcoinIcon />{" "} bc1qj3l6cpxz604vlfz5zqlnhzr7g0aq7xlslnmzcm
<Box as="span" title="Bitcoin (BTC)">
<BitcoinIcon /> bc1qj3l6cpxz604vlfz5zqlnhzr7g0aq7xlslnmzcm
</Box>
</li>
<li>
<Box as="span">
<BitcoinCashIcon />{" "}bitcoincash:qrs8y70dwzvz2kvxnv30c9k4pxa0vatzvudle5aaa3
<Box as="span" title="Bitcoin Cash (BCH)">
<BitcoinCashIcon />{" "}
bitcoincash:qrs8y70dwzvz2kvxnv30c9k4pxa0vatzvudle5aaa3
</Box>
</li>
<li>
<Box as="span">
<EthereumIcon />{" "}0x9bb671035Dde19C674769592AbC20E63f36b5Aa9
<Box as="span" title="Ethereum (ETH)">
<EthereumIcon /> 0x9bb671035Dde19C674769592AbC20E63f36b5Aa9
</Box>
</li>
</ul>