about.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About — melonfleet</title>
<meta name="description" content="The story behind melonfleet: a hobby project building a federated suite of self-hosted IT and help-desk tools, hand-in-hand with AI.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#1B5E20">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Open+Sans:wght@400;600&family=Ubuntu+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site"><div class="wrap nav">
  <a class="brand" href="/" aria-label="melonfleet home">
    <img src="/assets/melonfleet-wordmark.svg" alt="melonfleet" width="376" height="100">
  </a>
  <button type="button" class="nav-toggle" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
    <span class="nav-toggle-bars" aria-hidden="true"><span></span></span>
  </button>
  <nav id="site-nav" class="nav-links">
    <a href="/#what">What it does</a>
    <a href="/#requirements">Requirements</a>
    <a href="/about">About</a>
    <a href="/brand">Brand</a>
    <a href="https://github.com/melonfleet" target="_blank" rel="noopener">GitHub</a>
  </nav>
</div></header>

<main id="main" class="wrap wrap-narrow page-body">
  <header class="page-intro">
    <h1>About melonfleet</h1>
    <p class="lead">melonfleet is a hobby workshop for self-hostable IT tools. The first one out of the door is <strong>Flotilla</strong>, a native macOS app for Apple&rsquo;s container runtime.</p>
  </header>

  <h2>The short version</h2>
  <p>By day, the person behind melonfleet keeps fleets running — Macs, printers, the usual IT grind. By night, those same problems get re-approached for fun: what would a small-business / school stack look like if you built it from scratch, kept it <strong>self-hosted</strong>, and owed nothing to the enterprise vendor catalogue?</p>

  <h2>Small tools, done properly</h2>
  <p>Enterprise IT stacks are usually one expensive platform or a pile of unrelated tools that never talk. The interesting middle path is a set of focused tools that each stand on their own and can be joined up later — built at a scale and price that fits a small shop rather than a Fortune 500 RFP.</p>
  <p>Flotilla is the first of those to be finished and released. More are being worked on, and they get announced when they work, not when they are planned.</p>

  <h2>Built with AI, on purpose</h2>
  <p>Every melonfleet tool is designed and written <em>hand-in-hand with an AI assistant</em>. That’s half the point — an ongoing experiment in how far one curious person and a capable pair-programmer can get. Architecture, code, branding, even this page: worked out in conversation.</p>

  <h2>The ethos</h2>
  <p>Self-hosted first. Independent. No lock-in, free defaults, and software you run on hardware you actually own. Nothing here phones home to a cloud you didn’t choose. It’s built the way a home cook tends a garden — for the pleasure of it, and because the shop-bought version wasn’t quite right.</p>

  <h2>Nothing serious</h2>
  <p>melonfleet isn’t a company and nothing here is for sale. It’s a playground. If a tool turns out useful to you too — wonderful, that’s a bonus. For now, it’s for the joy of making things.</p>

  <p class="page-links"><a href="/#what">What Flotilla does →</a></p>
</main>

<footer class="site"><div class="wrap">
  <div class="footer-brand">
    <img src="/assets/melonfleet-wordmark.svg" alt="" width="376" height="100" aria-hidden="true">
    <span>© 2026 melonfleet · a hobby, made for fun · no cookies, no analytics</span>
  </div>
  <nav class="footer-links" aria-label="Footer">
    <a href="/about">About</a>
    <a href="/brand">Brand</a>
    <a href="https://github.com/melonfleet" target="_blank" rel="noopener">GitHub</a>
    <a href="https://github.com/apple/container" target="_blank" rel="noopener">apple/container</a>
    <a href="mailto:hello@melonfleet.dev">hello@melonfleet.dev</a>
  </nav>
</div></footer>
<script>
(function () {
  var btn = document.querySelector('.nav-toggle');
  var nav = document.getElementById('site-nav');
  if (!btn || !nav) return;
  var mq = window.matchMedia('(max-width: 720px)');

  function setOpen(open) {
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
    nav.classList.toggle('is-open', open);
  }

  btn.addEventListener('click', function () {
    setOpen(btn.getAttribute('aria-expanded') !== 'true');
  });

  nav.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' && mq.matches) setOpen(false);
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
      setOpen(false);
      btn.focus();
    }
  });

  function onViewportChange() {
    if (!mq.matches) setOpen(false);
  }
  if (mq.addEventListener) mq.addEventListener('change', onViewportChange);
  else if (mq.addListener) mq.addListener(onViewportChange);
})();
</script>
</body>
</html>