laurence/twelve-hobbies-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
twelve-hobbies-studio/index.html
Laurence 71217ce3e1 feat(site): original device art + amazing polish pass 
Adds original OpenScribe illustrations and elevates the whole site from a plain
scaffold to a polished, animated product site.

What changed:
- assets/img/: original SVG artwork (CC-BY-SA, no third-party photos):
  - openscribe-wearable.svg - the wearable recorder with a breathing status LED (SMIL
    animation that plays even when embedded via <img>).
  - openscribe-kit.svg - the dev/kit build: ESP32-S3 board + I2S mic + microSD + LiPo,
    with amber trace connectors.
  - favicon.svg - the "12" studio mark; wired as the site icon and header logo.
- index.html: two-column hero with the floating device, a trust strip, a featured
  showcase (device image + sync diagram), project cards with device thumbnails, and a
  new "why open beats a locked box" comparison table (our own words, no competitor art).
- projects/openscribe.html: device hero, the AI picker in a proper panel, and a new
  "two ways to build it" section with product figures (wearable + kit) and descriptions.
- assets/styles.css: full theme refresh - atmospheric background, gradient headings,
  hero float, hover lift + shadows, product/figure styles, comparison table, and
  scroll-reveal transitions (honours prefers-reduced-motion).
- assets/app.js: IntersectionObserver scroll reveals alongside the provider picker.
- README: documents the artwork and that it is original/publishable.

Why:
- The user asked for product images with descriptions, then to "make it amazing" - this
  delivers IP-safe original device imagery and a genuinely polished, animated site.

Notes:
- Still zero dependencies and no build step. Validated: app.js passes node --check, all
  SVGs are valid XML, HTML section tags balanced, every local link/asset resolves.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 19:17:35 +01:00

162 lines
7 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<!-- SPDX-License-Identifier: MIT -->
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>12 Hobbies Studio - open, self-hosted maker projects</title>
<meta name="description" content="12 Hobbies Studio builds open-source, self-hosted maker projects. Flagship: OpenScribe, an AI voice recorder you can connect to any AI." />
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<header class="site-header">
<div class="wrap">
<a class="brand" href="index.html"><img src="assets/img/favicon.svg" alt="" /> 12 Hobbies Studio</a>
<nav class="nav">
<a href="#projects">Projects</a>
<a href="#compare">Why open</a>
<a href="projects/openscribe.html">OpenScribe</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="wrap hero-grid">
<div>
<div class="eyebrow">A maker studio</div>
<h1>Twelve hobbies, one habit:<br /><span class="grad">build it open, run it yourself.</span></h1>
<p class="lead">12 Hobbies Studio makes small, open-source, self-hostable projects across
hardware and software. No lock-in, no subscriptions you cannot leave, no data you do not own.</p>
<div class="btn-row">
<a class="btn primary" href="projects/openscribe.html">Meet OpenScribe &rarr;</a>
<a class="btn" href="#projects">Browse projects</a>
</div>
</div>
<div class="hero-device">
<div class="frame">
<span class="chip a">recording</span>
<img src="assets/img/openscribe-wearable.svg" alt="OpenScribe wearable recorder" />
<span class="chip b">your AI</span>
</div>
</div>
</div>
</section>
<div class="trust">
<div class="wrap">
<span><b>Open source</b> firmware, server, app</span>
<span class="dot">&bull;</span>
<span><b>Self-hosted</b> - no mandatory cloud</span>
<span class="dot">&bull;</span>
<span><b>Bring your own AI</b> - open or commercial</span>
<span class="dot">&bull;</span>
<span><b>Open hardware</b> you can build</span>
</div>
</div>
<section>
<div class="wrap reveal">
<div class="featured">
<div>
<div class="kicker">Flagship project</div>
<h2>OpenScribe</h2>
<p class="section-sub">An open-source, self-hosted AI voice recorder in the spirit of a
Plaud device - but you bring the AI. Record on a small ESP32-S3, sync over BLE or WiFi,
transcribe and summarise with <strong>any AI you choose</strong>: open-standard, local,
or a commercial API.</p>
<ul>
<li>Open hardware, open firmware, open API - build it and own it.</li>
<li>Connect to OpenAI, Anthropic, Groq, a local model, or your own server.</li>
<li>Self-hosted transcription and summaries. No mandatory cloud.</li>
</ul>
<div class="btn-row">
<a class="btn primary" href="projects/openscribe.html">Explore OpenScribe</a>
<a class="btn" href="https://git.discworld.casa/laurence/openscribe">Source</a>
</div>
</div>
<div class="showcase">
<div class="device-shot"><img src="assets/img/openscribe-wearable.svg" alt="OpenScribe device" /></div>
<div class="diagram">mic -&gt; ESP32-S3 (record to SD)
| BLE / WiFi sync
v self-hosted server
transcribe -&gt; summarise
| (any AI provider)
v phone app + open API</div>
</div>
</div>
</div>
</section>
<section id="projects">
<div class="wrap reveal">
<h2>Projects</h2>
<p class="section-sub">One shipped, more in the workshop. Everything here is open source.</p>
<div class="grid">
<a class="card" href="projects/openscribe.html">
<div class="thumb"><img src="assets/img/openscribe-wearable.svg" alt="OpenScribe device" /></div>
<span class="tag">hardware + AI</span>
<h3>OpenScribe</h3>
<p>Self-hosted AI voice recorder. Bring your own AI, open or commercial.</p>
</a>
<div class="card soon">
<span class="tag">in the workshop</span>
<h3>More soon</h3>
<p>New hobbies, new builds. This grid grows as projects ship.</p>
</div>
<div class="card soon">
<span class="tag">idea</span>
<h3>Your idea?</h3>
<p>Open a discussion on the forge. The studio likes a good excuse to build.</p>
</div>
</div>
</div>
</section>
<section id="compare">
<div class="wrap reveal">
<h2>Why open beats a locked box</h2>
<p class="section-sub">A typical AI recorder ties you to one vendor's cloud and one subscription.
The studio's approach, using OpenScribe as the example:</p>
<div class="compare-wrap">
<table class="compare">
<thead>
<tr><th>&nbsp;</th><th>Typical AI recorder</th><th>OpenScribe</th></tr>
</thead>
<tbody>
<tr><th>Where your audio lives</th><td class="theirs">Vendor cloud</td><td class="ours">Your storage / NAS</td></tr>
<tr><th>Which AI transcribes it</th><td class="theirs">Vendor's, fixed</td><td class="ours">Any - local or commercial</td></tr>
<tr><th>Cost model</th><td class="theirs">Monthly minutes</td><td class="ours">Your provider, or free if local</td></tr>
<tr><th>The device</th><td class="theirs">Sealed</td><td class="ours">Open hardware you build</td></tr>
<tr><th>The software</th><td class="theirs">Closed</td><td class="ours">Open source, forkable</td></tr>
<tr><th>Export &amp; API</th><td class="theirs">Limited</td><td class="ours">Completely open API</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="about">
<div class="wrap reveal">
<h2>About the studio</h2>
<p class="section-sub">
12 Hobbies Studio is a home for maker projects that are worth doing properly and worth
sharing. The through-line: build in the open, keep the data with the person who made it,
and let anyone reproduce the whole thing from the repo alone. Firmware, servers and apps
are copyleft; hardware is open-hardware licensed; docs are share-alike.
</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<div>&copy; 12 Hobbies Studio. Built open. <span class="pill">self-hosted</span></div>
<div><a href="https://git.discworld.casa/laurence/openscribe">OpenScribe source</a></div>
</div>
</footer>
<script src="assets/app.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink