<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@Brooke</title>
<style>
@font-face {
font-family: FreePixel;
src: url(/@brooke/font/static/PixelifySans-Regular.ttf)
format("truetype");
}
:root {
--background: #242424e5;
--accent-1: #d182ff;
--accent-2: #eb53d3;
--content-spacing: 5px;
--background-img: url("/@brooke/bg.webp");
--banner: url("/@brooke/fractal.gif");
--titleBars: url("/@brooke/title-bar.webp");
--text-color: white;
--link-color: var(--accent-1);
--border: 1px solid black;
}
body,
html {
margin: 0;
box-sizing: border-box;
font-family: FreePixel;
}
body {
background-image: var(--background-img);
color: var(--text-color);
background-attachment: fixed;
background-size: auto 300px;
}
.topbar {
background-image: var(--banner);
height: 150px;
background-size: cover;
background-position: 60%;
margin-bottom: var(--content-spacing);
border: var(--border);
}
#container {
max-width: 850px;
margin: 0 auto;
}
#container a {
color: var(--link-color);
}
#container {
border-top: none;
}
#flex {
display: flex;
max-width: 850px;
}
.sidebar-title,
.title {
background-image: var(--titleBars);
font-weight: 700;
border: var(--border);
font-size: 20px;
background-size: auto 100%;
background-repeat: repeat-x;
}
main {
width: 100%;
background-color: var(--background);
}
.content {
padding: 25px;
}
@media only screen and (max-width: 640px) {
#flex {
flex-wrap: wrap;
}
}
p {
font-weight: 700;
}
</style>
</head>
<body>
<div id="container">
<div class="topbar"></div>
<div id="flex">
<main>
<div class="sidebar-title"> </div>
<div style="padding: 1rem; padding-top: 0">
<p>Hi! My name is Brooke.</p>
<p>
I help organizations and individuals get on board with the idea of
using FLOSS (Free/Libre/Open Source Software) software. I enjoy
and am proficient in <a href="https://gohugo.io">Hugo</a>, <a href="https://www.debian.org/">Debian flavors of Linux</a>, <a href="https://www.docker.com/">Docker</a>, and CI/CD, primarily <a href="https://code.forgejo.org/forgejo/act">Gitub/ACT</a>.
</p>
<p>I like to talk about:</p>
<ul>
<li>Off-grid living</li>
<li>Rubber Tramping</li>
<li>Open Source projects of all kinds</li>
<li>Intentional communities</li>
</ul>
<p>Find me:</p>
<ul>
<li>
<a target="_blank" href="https://coop.myco.systems/">Blog</a>
</li>
<li>
<a target="_blank" href="https://kolektiva.social/@brooke/"
>Mastodon</a
>
</li>
</ul>
<p>
This website's layout is inspired by
<a target="_blank" href="https://goblin-heart.net/sadgrl/"
>sadgirl.online</a
>.<br />And, here's some tags for things I like:
</p>
<div>
<a target="_blank" href="https://10kb.neocities.org/about">
<img
src="/@brooke/flag10kb.webp"
alt="The words '10kB' split in half by a black cross, on a blue background."
height="32"
width="auto"
title="The 10kB Gallery!"
style="image-rendering: crisp-edges"
/>
</a>
<img
src="/@brooke/trans.webp"
height="32"
width="auto"
alt="A trans flag."
/>
<img
src="/@brooke/piracy.gif"
height="32"
width="auto"
alt="A piracy flag."
/>
<img
src="/@brooke/acab.gif"
height="32"
width="auto"
alt="All Cops Are Bastards."
/>
<a target="_blank" href="https://besties.house/"
><img
src="/@brooke/besties.gif"
height="32"
width="auto"
alt="Besties.house, first unionised group chat."
/></a>
</div>
</div>
</main>
</div>
</div>
</body>
</html>