- {children}
-
- );
+ const handleClick = () => {
+ if (typeof children === "string") {
+ navigator.clipboard.writeText(children);
+ }
+ };
+ return (
+
+ );
}
diff --git a/islands/Meow.tsx b/islands/Meow.tsx
index 101786e..e34ef8b 100644
--- a/islands/Meow.tsx
+++ b/islands/Meow.tsx
@@ -4,16 +4,20 @@
*/
export default function Meow() {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/islands/Name.tsx b/islands/Name.tsx
index 9e9ee88..3682f26 100644
--- a/islands/Name.tsx
+++ b/islands/Name.tsx
@@ -6,32 +6,31 @@
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 [currentIndex, setCurrentIndex] = useState(0);
- const [isAnimating, setIsAnimating] = useState(false);
+ const names = ["muxiepuff", "lívia", "aury"];
+ const ipas = ["/ˈmuˌksipʌf/", "/li.vjɐ/", "/ˈaʊ̯ˌɾi/"];
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isAnimating, setIsAnimating] = useState(false);
- useEffect(() => {
- const interval = setInterval(() => {
- setIsAnimating(true);
- setTimeout(() => {
- setCurrentIndex((prev) => (prev + 1) % names.length);
- setIsAnimating(false);
- }, 200);
- }, 2000);
- return () => clearInterval(interval);
- }, []);
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setIsAnimating(true);
+ setTimeout(() => {
+ setCurrentIndex((prev) => (prev + 1) % names.length);
+ setIsAnimating(false);
+ }, 200);
+ }, 2000);
+ return () => clearInterval(interval);
+ }, []);
- return (
-
-
-
- {names[currentIndex]}
-
- {" "}
- ({ipas[currentIndex]}, she/her)
-
-
- );
+ return (
+
+
+
+ {names[currentIndex]}
+
+ {" "}
+ ({ipas[currentIndex]}, she/her)
+
+
+ );
}
diff --git a/islands/Rain.tsx b/islands/Rain.tsx
index e7a26de..4bc8f86 100644
--- a/islands/Rain.tsx
+++ b/islands/Rain.tsx
@@ -6,41 +6,41 @@
import { useEffect, useRef } from "preact/hooks";
interface Particle {
- offsetX: number;
- offsetY: number;
- velocityX: number;
- velocityY: number;
+ offsetX: number;
+ offsetY: number;
+ velocityX: number;
+ velocityY: number;
}
interface Raindrop {
- x: number;
- y: number;
- length: number;
- speed: number;
- opacity: number;
- floorHeight: number;
+ x: number;
+ y: number;
+ length: number;
+ speed: number;
+ opacity: number;
+ floorHeight: number;
}
interface Splash {
- x: number;
- y: number;
- age: number;
- maxAge: number;
- particles: Particle[];
+ x: number;
+ y: number;
+ age: number;
+ maxAge: number;
+ particles: Particle[];
}
interface Star {
- x: number;
- y: number;
- size: number;
- brightness: number;
- twinkleSpeed: number;
- twinkleOffset: number;
- age: number;
- maxAge: number;
- canVanish: boolean;
- color: { r: number; g: number; b: number };
- colorIndex: number;
+ x: number;
+ y: number;
+ size: number;
+ brightness: number;
+ twinkleSpeed: number;
+ twinkleOffset: number;
+ age: number;
+ maxAge: number;
+ canVanish: boolean;
+ color: { r: number; g: number; b: number };
+ colorIndex: number;
}
const PIXEL_SIZE = 4;
@@ -82,293 +82,299 @@ const ALPHA_STAR_COLORS: string[] = [];
const NUM_COLOR_VARIATIONS = 20;
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.b * brightness)})`,
- );
+ 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.b * brightness)})`,
+ );
}
for (let i = 0; i < NUM_COLOR_VARIATIONS; i++) {
- const brightness = STAR_BRIGHTNESS_MIN +
- (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.b * brightness)})`,
- );
- ALPHA_STAR_COLORS.push(
- `rgba(${Math.floor(RAIN_COLOR.r * brightness)},${
- Math.floor(RAIN_COLOR.g * brightness)
- },${Math.floor(RAIN_COLOR.b * brightness)},`,
- );
+ const brightness = STAR_BRIGHTNESS_MIN +
+ (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.b * brightness)})`,
+ );
+ ALPHA_STAR_COLORS.push(
+ `rgba(${Math.floor(RAIN_COLOR.r * brightness)},${
+ Math.floor(
+ RAIN_COLOR.g * brightness,
+ )
+ },${Math.floor(RAIN_COLOR.b * brightness)},`,
+ );
}
const SPLASH_PARTICLE_COLOR = `rgb(${RAIN_COLOR.r * 0.9},${
- RAIN_COLOR.g * 0.95
+ RAIN_COLOR.g * 0.95
},${RAIN_COLOR.b * 1.1})`;
const SPLASH_RIPPLE_COLOR = `rgb(${RAIN_COLOR.r * 0.7},${RAIN_COLOR.g * 0.8},${
- RAIN_COLOR.b * 0.95
+ RAIN_COLOR.b * 0.95
})`;
function createParticle(): Particle {
- return {
- offsetX: (Math.random() - 0.5) * PARTICLE_OFFSET_RANGE,
- offsetY: -(Math.random() * PARTICLE_Y_RANGE + PARTICLE_Y_MIN),
- velocityX: (Math.random() - 0.5) * PARTICLE_VX_RANGE,
- velocityY: -(Math.random() * PARTICLE_VY_RANGE + PARTICLE_VY_MIN),
- };
+ return {
+ offsetX: (Math.random() - 0.5) * PARTICLE_OFFSET_RANGE,
+ offsetY: -(Math.random() * PARTICLE_Y_RANGE + PARTICLE_Y_MIN),
+ velocityX: (Math.random() - 0.5) * PARTICLE_VX_RANGE,
+ velocityY: -(Math.random() * PARTICLE_VY_RANGE + PARTICLE_VY_MIN),
+ };
}
function createSplash(x: number, y: number): Splash {
- return {
- x,
- y,
- age: 0,
- maxAge: 12,
- particles: Array.from(
- { length: Math.floor(Math.random() * 3) + 3 },
- createParticle,
- ),
- };
+ return {
+ x,
+ y,
+ age: 0,
+ maxAge: 12,
+ particles: Array.from(
+ { length: Math.floor(Math.random() * 3) + 3 },
+ createParticle,
+ ),
+ };
}
function createRaindrop(gridWidth: number, gridHeight: number): Raindrop {
- const bias = Math.random() * Math.random();
- return {
- x: Math.floor(Math.random() * gridWidth),
- y: Math.floor(Math.random() * gridHeight) - gridHeight,
- length: Math.floor(Math.random() * 4) + 2,
- speed: RAIN_SPEED * (Math.random() * 2 + 1),
- opacity: Math.random() * 0.3 + 0.6,
- floorHeight: window.innerHeight *
- (FLOOR_HEIGHT_MIN + bias * FLOOR_HEIGHT_RANGE),
- };
+ const bias = Math.random() * Math.random();
+ return {
+ x: Math.floor(Math.random() * gridWidth),
+ y: Math.floor(Math.random() * gridHeight) - gridHeight,
+ length: Math.floor(Math.random() * 4) + 2,
+ speed: RAIN_SPEED * (Math.random() * 2 + 1),
+ opacity: Math.random() * 0.3 + 0.6,
+ floorHeight: window.innerHeight *
+ (FLOOR_HEIGHT_MIN + bias * FLOOR_HEIGHT_RANGE),
+ };
}
function createStar(): Star {
- const brightness = Math.random() * STAR_BRIGHTNESS_RANGE +
- STAR_BRIGHTNESS_MIN;
- const colorIndex = Math.floor(
- (brightness - STAR_BRIGHTNESS_MIN) / STAR_BRIGHTNESS_RANGE *
- (NUM_COLOR_VARIATIONS - 1),
- );
+ const brightness = Math.random() * STAR_BRIGHTNESS_RANGE +
+ STAR_BRIGHTNESS_MIN;
+ const colorIndex = Math.floor(
+ ((brightness - STAR_BRIGHTNESS_MIN) / STAR_BRIGHTNESS_RANGE) *
+ (NUM_COLOR_VARIATIONS - 1),
+ );
- return {
- x: Math.random() * window.innerWidth,
- y: Math.random() * window.innerHeight,
- size: Math.random() > STAR_LARGE_THRESHOLD
- ? STAR_SIZE_LARGE
- : STAR_SIZE_SMALL,
- twinkleSpeed: Math.random() * STAR_TWINKLE_RANGE + STAR_TWINKLE_MIN,
- twinkleOffset: Math.random() * Math.PI * 2,
- brightness,
- age: 0,
- maxAge: STAR_AGE_MIN + Math.random() * STAR_AGE_RANGE,
- canVanish: false,
- colorIndex,
- };
+ return {
+ x: Math.random() * window.innerWidth,
+ y: Math.random() * window.innerHeight,
+ size: Math.random() > STAR_LARGE_THRESHOLD
+ ? STAR_SIZE_LARGE
+ : STAR_SIZE_SMALL,
+ twinkleSpeed: Math.random() * STAR_TWINKLE_RANGE + STAR_TWINKLE_MIN,
+ twinkleOffset: Math.random() * Math.PI * 2,
+ brightness,
+ age: 0,
+ maxAge: STAR_AGE_MIN + Math.random() * STAR_AGE_RANGE,
+ canVanish: false,
+ colorIndex,
+ };
}
function updateParticle(p: Particle) {
- p.offsetX += p.velocityX;
- p.offsetY += p.velocityY;
- p.velocityY += PARTICLE_GRAVITY;
+ p.offsetX += p.velocityX;
+ p.offsetY += p.velocityY;
+ p.velocityY += PARTICLE_GRAVITY;
}
function updateSplash(splash: Splash) {
- splash.age++;
- splash.particles.forEach(updateParticle);
+ splash.age++;
+ splash.particles.forEach(updateParticle);
}
function updateRaindrop(
- drop: Raindrop,
- splashes: Splash[],
- gridWidth: number,
- gridHeight: number,
+ drop: Raindrop,
+ splashes: Splash[],
+ gridWidth: number,
+ gridHeight: number,
) {
- drop.y += drop.speed;
- const dropY = drop.y * PIXEL_SIZE;
+ drop.y += drop.speed;
+ const dropY = drop.y * PIXEL_SIZE;
- if (dropY >= drop.floorHeight && Math.random() < SPLASH_CHANCE) {
- splashes.push(createSplash(drop.x, Math.floor(dropY / PIXEL_SIZE)));
- Object.assign(drop, createRaindrop(gridWidth, gridHeight));
- } else if (dropY > window.innerHeight) {
- Object.assign(drop, createRaindrop(gridWidth, gridHeight));
- }
+ if (dropY >= drop.floorHeight && Math.random() < SPLASH_CHANCE) {
+ splashes.push(createSplash(drop.x, Math.floor(dropY / PIXEL_SIZE)));
+ Object.assign(drop, createRaindrop(gridWidth, gridHeight));
+ } else if (dropY > window.innerHeight) {
+ Object.assign(drop, createRaindrop(gridWidth, gridHeight));
+ }
}
function updateStar(star: Star): void {
- star.age++;
- const phase = (star.age * star.twinkleSpeed + star.twinkleOffset) %
- (2 * Math.PI);
+ star.age++;
+ const phase = (star.age * star.twinkleSpeed + star.twinkleOffset) %
+ (2 * Math.PI);
- if (!star.canVanish && phase < star.twinkleSpeed) {
- star.canVanish = true;
- }
+ if (!star.canVanish && phase < star.twinkleSpeed) {
+ star.canVanish = true;
+ }
- if (star.canVanish && star.age > star.maxAge) {
- Object.assign(star, createStar());
- } else if (star.x > window.innerWidth || star.y > window.innerHeight) {
- Object.assign(star, createStar());
- }
+ if (star.canVanish && star.age > star.maxAge) {
+ Object.assign(star, createStar());
+ } else if (star.x > window.innerWidth || star.y > window.innerHeight) {
+ Object.assign(star, createStar());
+ }
}
const isSplashDead = (splash: Splash): boolean => splash.age >= splash.maxAge;
const drawRaindrop = (ctx: CanvasRenderingContext2D, drop: Raindrop): void => {
- ctx.globalAlpha = drop.opacity;
- const xPos = drop.x * PIXEL_SIZE;
+ ctx.globalAlpha = drop.opacity;
+ const xPos = drop.x * PIXEL_SIZE;
- for (let i = 0; i < drop.length; i++) {
- const colorIndex = Math.floor(
- (i / drop.length) * NUM_COLOR_VARIATIONS * 0.5,
- );
- ctx.fillStyle = RAIN_COLORS[colorIndex];
- ctx.fillRect(xPos, (drop.y - i) * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
- }
- ctx.globalAlpha = 1;
+ for (let i = 0; i < drop.length; i++) {
+ const colorIndex = Math.floor(
+ (i / drop.length) * NUM_COLOR_VARIATIONS * 0.5,
+ );
+ ctx.fillStyle = RAIN_COLORS[colorIndex];
+ ctx.fillRect(xPos, (drop.y - i) * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
+ }
+ ctx.globalAlpha = 1;
};
function drawSplash(ctx: CanvasRenderingContext2D, splash: Splash) {
- if (splash.age >= splash.maxAge) return;
+ if (splash.age >= splash.maxAge) return;
- const progress = splash.age / splash.maxAge;
- ctx.globalAlpha = 1 - progress;
+ const progress = splash.age / splash.maxAge;
+ ctx.globalAlpha = 1 - progress;
- ctx.fillStyle = SPLASH_PARTICLE_COLOR;
- splash.particles.forEach((p) => {
- const px = Math.floor(splash.x + p.offsetX) * PIXEL_SIZE;
- const py = Math.floor(splash.y + p.offsetY) * PIXEL_SIZE;
- ctx.fillRect(px, py, PIXEL_SIZE, PIXEL_SIZE);
- });
+ ctx.fillStyle = SPLASH_PARTICLE_COLOR;
+ splash.particles.forEach((p) => {
+ const px = Math.floor(splash.x + p.offsetX) * PIXEL_SIZE;
+ const py = Math.floor(splash.y + p.offsetY) * PIXEL_SIZE;
+ ctx.fillRect(px, py, PIXEL_SIZE, PIXEL_SIZE);
+ });
- if (splash.age < 6) {
- const rippleSize = Math.floor(splash.age / 2) + 1;
- const splashY = splash.y * PIXEL_SIZE;
- ctx.fillStyle = SPLASH_RIPPLE_COLOR;
- ctx.fillRect(
- (splash.x - rippleSize) * PIXEL_SIZE,
- splashY,
- PIXEL_SIZE,
- PIXEL_SIZE,
- );
- ctx.fillRect(
- (splash.x + rippleSize) * PIXEL_SIZE,
- splashY,
- PIXEL_SIZE,
- PIXEL_SIZE,
- );
- }
+ if (splash.age < 6) {
+ const rippleSize = Math.floor(splash.age / 2) + 1;
+ const splashY = splash.y * PIXEL_SIZE;
+ ctx.fillStyle = SPLASH_RIPPLE_COLOR;
+ ctx.fillRect(
+ (splash.x - rippleSize) * PIXEL_SIZE,
+ splashY,
+ PIXEL_SIZE,
+ PIXEL_SIZE,
+ );
+ ctx.fillRect(
+ (splash.x + rippleSize) * PIXEL_SIZE,
+ splashY,
+ PIXEL_SIZE,
+ PIXEL_SIZE,
+ );
+ }
- ctx.globalAlpha = 1;
+ ctx.globalAlpha = 1;
}
-function drawStar(
- ctx: CanvasRenderingContext2D,
- star: Star,
- time: number,
-) {
- const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) *
- STAR_TWINKLE_AMPLITUDE + STAR_TWINKLE_BASE;
- const alpha = star.brightness * twinkle;
+function drawStar(ctx: CanvasRenderingContext2D, star: Star, time: number) {
+ const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) *
+ STAR_TWINKLE_AMPLITUDE +
+ STAR_TWINKLE_BASE;
+ const alpha = star.brightness * twinkle;
- const x = Math.floor(star.x);
- const y = Math.floor(star.y);
- const color = ALPHA_STAR_COLORS[star.colorIndex];
+ const x = Math.floor(star.x);
+ const y = Math.floor(star.y);
+ const color = ALPHA_STAR_COLORS[star.colorIndex];
- ctx.fillStyle = color + alpha;
- ctx.fillRect(x, y, star.size, star.size);
+ ctx.fillStyle = color + alpha;
+ 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.fillRect(x - 4, y + 2, 4, 4);
- ctx.fillRect(x + 8, y + 2, 4, 4);
- ctx.fillRect(x + 2, y - 4, 4, 4);
- ctx.fillRect(x + 2, y + 8, 4, 4);
- }
+ if (star.size === STAR_SIZE_LARGE && alpha > STAR_GLOW_THRESHOLD) {
+ 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);
+ ctx.fillRect(x + 2, y + 8, 4, 4);
+ }
}
export default function Rain() {
- const canvasRef = useRef- - {" "} - muxiepuff{" "} - (/ˈmuˌksipʌf/, she/her) - {" · "} - - 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. -
-- On the side, I maintain a modest FreeBSD server where I self-host - this website and various services. This is nothing particularly - impressive, just a growing curiosity about systems administration. - Service status and uptime available{" "} - here. -
- -
- Social platforms
-
-
-
- Software and code
-
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
- Feel free to reach out through any of the platforms listed above.
- For email correspondence, you can reach me at{" "}
- base64 -d <<< bXV4QGFjcGkuYXQK.
-
- 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 PGP key{" "}
- (fingerprint:{" "}
- AC14 9A39 5013 C572 CA74 8799 BCD2 117C 99E6 9817).
-
- Communication
-
-
- -
- If you enjoy throwing money at people on the internet, please - consider me! It keeps the server alive, fuels my tinkering with - esoteric technology, and helps me navigate some rough financial - patches and stay afloat while things are tight. -
-
- Donations
-
-
- -
-
-
-
-
- -
-
-
-
+
+
+ uhhhhh g'day, name's laura and i go by she/her pronouns and i'm
+ a veeeery sweet autist{" "}
+ girl passionate about free software!! ty for your time ^^
+
+
+
+ Advocate for open access to information and knowledge and aspiring + electrical engineer with complementary interests in systems + programming and linguistics. +
++ On the side, I maintain a modest FreeBSD server where I self-host + this website and various services. This is nothing particularly + impressive, just a growing curiosity about systems administration. + Service status and uptime available{" "} + here. +
+ +
+ Social platforms
+
+
+
+ Software and code
+
+
+
+
+ Feel free to reach out through any of the platforms listed above.
+ For email correspondence, you can reach me at{" "}
+ base64 -d <<< bXV4QGFjcGkuYXQK.
+
+ 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{" "}
+ PGP key (fingerprint:{" "}
+ AC14 9A39 5013 C572 CA74 8799 BCD2 117C 99E6 9817).
+
+ Communication
+
+
+ +
+ If you enjoy throwing money at people on the internet, please + consider me! It keeps the server alive, fuels my tinkering with + esoteric technology, and helps me navigate some rough financial + patches and stay afloat while things are tight. +
+
+ Donations
+
+
+ -
+
-
+
+
+ -
+
+
+