laurence/twelve-hobbies-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(site): original device art + amazing polish pass

Browse source 
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>
This commit is contained in:
Laurence 2026-07-03 19:17:35 +01:00
parent e1bf5a2d7a
commit 71217ce3e1
8 changed files with 448 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

80
projects/openscribe.html
View file

@ -6,12 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenScribe - open, self-hosted AI voice recorder | 12 Hobbies Studio</title>
<meta name="description" content="OpenScribe is an open-source, self-hosted AI voice recorder. Record on an ESP32-S3, sync over BLE or WiFi, and transcribe and summarise with any AI you choose - open or commercial." />
<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"><span class="mark">12</span> Hobbies Studio</a>
<a class="brand" href="../index.html"><img src="../assets/img/favicon.svg" alt="" /> 12 Hobbies Studio</a>
<nav class="nav">
<a href="../index.html#projects">Projects</a>
<a href="#any-ai">Any AI</a>
@ -22,34 +23,73 @@
<main>
<section class="hero">
<div class="wrap">
<div class="eyebrow">Project - hardware + AI</div>
<h1>OpenScribe</h1>
<p class="lead">An open-source, self-hosted AI voice recorder in the spirit of a Plaud device.
Record on a small ESP32-S3, sync to your phone and your own server, and turn recordings into
transcripts and summaries with <span class="accent">any AI you choose</span>.</p>
<div class="btn-row">
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Get the source</a>
<a class="btn" href="#build">How to build</a>
<div class="wrap hero-grid">
<div>
<div class="eyebrow">Project - hardware + AI</div>
<h1><span class="grad">OpenScribe</span></h1>
<p class="lead">An open-source, self-hosted AI voice recorder in the spirit of a Plaud device.
Record on a small ESP32-S3, sync to your phone and your own server, and turn recordings into
transcripts and summaries with <span class="accent">any AI you choose</span>.</p>
<div class="btn-row">
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Get the source &rarr;</a>
<a class="btn" href="#build">How to build</a>
</div>
</div>
<div class="hero-device">
<div class="frame">
<span class="chip a">open API</span>
<img src="../assets/img/openscribe-wearable.svg" alt="OpenScribe wearable recorder" />
<span class="chip b">self-hosted</span>
</div>
</div>
</div>
</section>
<section id="any-ai">
<div class="wrap">
<div class="wrap reveal">
<h2>Bring your own AI</h2>
<p class="section-sub">This is the difference. A commercial recorder locks you to its cloud.
OpenScribe lets you point transcription and summaries at whatever you want - a local model,
an open-standard endpoint, or a commercial API. Pick one and drop it in your server config:</p>
<div id="provider-picker" class="picker" aria-label="Choose an AI provider"></div>
<pre class="code"><code id="env-out"></code></pre>
<p class="section-sub">Transcription is just as flexible: local <code>faster-whisper</code>, or
any OpenAI-compatible audio endpoint (OpenAI, Groq, or your own whisper server).</p>
<div class="panel">
<div id="provider-picker" class="picker" aria-label="Choose an AI provider"></div>
<pre class="code"><code id="env-out"></code></pre>
</div>
<p class="section-sub" style="margin-top:16px">Transcription is just as flexible: local
<code>faster-whisper</code>, or any OpenAI-compatible audio endpoint (OpenAI, Groq, or your
own whisper server).</p>
</div>
</section>
<section id="device">
<div class="wrap reveal">
<h2>Two ways to build it</h2>
<p class="section-sub">A compact wearable, or a dev board for the best audio. Same firmware, same app.</p>
<div class="product-grid">
<figure class="product">
<div class="shot"><img src="../assets/img/openscribe-wearable.svg" alt="OpenScribe wearable recorder illustration" /></div>
<figcaption>
<span class="tag">compact</span>
<h3>Wearable build</h3>
<p>A XIAO ESP32-S3 with onboard mic and microSD in a printed pebble case. Pocket or lanyard.
The smallest way to carry it.</p>
</figcaption>
</figure>
<figure class="product">
<div class="shot"><img src="../assets/img/openscribe-kit.svg" alt="OpenScribe DIY kit exploded illustration" /></div>
<figcaption>
<span class="tag">best audio</span>
<h3>Dev / kit build</h3>
<p>An ESP32-S3 devkit, an INMP441 I2S microphone, a microSD and a LiPo. Easiest to probe,
and the cleanest sound.</p>
</figcaption>
</figure>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="wrap reveal">
<h2>What it does</h2>
<p class="section-sub">The expected recorder features, without the lock-in.</p>
<div class="features">
@ -64,7 +104,7 @@
</section>
<section id="build">
<div class="wrap">
<div class="wrap reveal">
<h2>Build one</h2>
<p class="section-sub">Off-the-shelf parts, a printed case, and a server you run.</p>
<div class="grid">
@ -74,15 +114,15 @@
<div class="card"><span class="tag">server</span><h3>4. Run the server</h3><p>FastAPI ingest + transcription + summaries. Point it at your chosen AI and storage.</p></div>
</div>
<div class="btn-row">
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Open the repository</a>
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Open the repository &rarr;</a>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="wrap reveal">
<h2>Open all the way down</h2>
<p class="section-sub" style="max-width:680px">
<p class="section-sub">
Firmware, server and app are GPL-3.0. The hardware design is CERN-OHL-S. The case and docs
are CC-BY-SA. Anyone can build it, improve it, and keep the result open. OpenScribe is an
independent project inspired by the Plaud class of device; it is not affiliated with Plaud.