scaffold: 12 Hobbies Studio site + OpenScribe project page
Initial static site (no framework, no build) for the 12 Hobbies Studio maker studio, featuring OpenScribe as the flagship project. What changed: - index.html: studio home - hero, featured OpenScribe block with sync diagram, projects grid, about. British spelling, dark warm theme. - projects/openscribe.html: OpenScribe product page. Leads with the "bring your own AI" differentiator, an interactive provider picker, the feature set, a four-step build guide, and licensing. - assets/styles.css: all styling (palette, cards, featured layout, picker, code blocks). - assets/app.js: dependency-free provider picker that swaps a sample server .env snippet across Ollama / OpenAI / Anthropic / Groq / LM Studio - on message with OpenScribe's any-AI design. - README, LICENSE (MIT for site code), .gitignore. Why: - The user asked to develop a site on 12 Hobbies Studio; this is the first cut, showcasing OpenScribe and the connect-to-any-AI capability. Branding uses sensible defaults and is trivially editable (noted in README). Notes: - Pure static files; deploy to any static host or Forgejo Pages. Validated: app.js passes node --check; HTML section tags balanced. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
commit
e1bf5a2d7a
7 changed files with 497 additions and 0 deletions
115
index.html
Normal file
115
index.html
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<!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="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>
|
||||
<nav class="nav">
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="projects/openscribe.html">OpenScribe</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="wrap">
|
||||
<div class="eyebrow">A maker studio</div>
|
||||
<h1>Twelve hobbies, one habit:<br /><span class="accent">build it open, run it yourself.</span></h1>
|
||||
<p class="lead">12 Hobbies Studio makes small, open-source, self-hostable projects across
|
||||
hardware, software and everything in between. 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</a>
|
||||
<a class="btn" href="#projects">Browse projects</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<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="diagram">mic
|
||||
-> ESP32-S3 (record to SD)
|
||||
| BLE / WiFi sync
|
||||
v
|
||||
self-hosted server
|
||||
transcribe -> summarise
|
||||
| (any AI provider)
|
||||
v
|
||||
phone app + open API</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects">
|
||||
<div class="wrap">
|
||||
<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">
|
||||
<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="about">
|
||||
<div class="wrap">
|
||||
<h2>About the studio</h2>
|
||||
<p class="section-sub" style="max-width:680px">
|
||||
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>© 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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue