Laurence
71217ce3e1
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>
46 lines
1.9 KiB
Markdown
46 lines
1.9 KiB
Markdown
# 12 Hobbies Studio - website
|
|
|
|
A small, dependency-free static site for **12 Hobbies Studio**, a maker studio that builds
|
|
open-source, self-hostable projects. The flagship project featured here is
|
|
[OpenScribe](https://git.discworld.casa/laurence/openscribe), an open AI voice recorder you
|
|
can connect to any AI.
|
|
|
|
> Note on branding: this is an initial site with sensible defaults (name, tagline, colours,
|
|
> copy). All of it is easy to change - edit `assets/styles.css` for the look and the HTML for
|
|
> the words. Nothing here is locked in.
|
|
|
|
## What's here
|
|
|
|
```
|
|
index.html Studio home: hero + device, featured project, projects, comparison
|
|
projects/openscribe.html OpenScribe page: hero, "bring your own AI" picker, build variants
|
|
assets/styles.css All styling (no framework, no build): theme, animations, reveals
|
|
assets/app.js Provider picker + scroll-reveal (IntersectionObserver)
|
|
assets/img/ Original SVG artwork (CC-BY-SA): device illustrations + favicon
|
|
openscribe-wearable.svg the wearable recorder (animated status LED)
|
|
openscribe-kit.svg the dev/kit build (board + mic + microSD + LiPo)
|
|
favicon.svg the "12" studio mark
|
|
```
|
|
|
|
All device imagery is original artwork (no third-party product photos), so it is safe to
|
|
publish and reuse under CC-BY-SA.
|
|
|
|
## Preview locally
|
|
|
|
It is plain HTML/CSS/JS - open `index.html` in a browser, or serve the folder:
|
|
|
|
```bash
|
|
python -m http.server 8080 # then visit http://localhost:8080
|
|
```
|
|
|
|
## Deploy
|
|
|
|
Any static host works (it is just files). For Forgejo Pages, publish this repo per your
|
|
instance's Pages setup; for a plain web server, copy the files to the web root. There is no
|
|
build step and no server-side code.
|
|
|
|
## Licence
|
|
|
|
Site code (HTML/CSS/JS) is MIT (see `LICENSE`). Prose content is the studio's own.
|
|
OpenScribe is an independent project inspired by the Plaud class of device and is not
|
|
affiliated with Plaud.
|