Studio home (a mock)
A one-person studio's home page from the studio-site pieces: a site nav, a now note, postcards for the work, a client's quote beside the redacted conversation it came from with a voice note in it, and a contact block. All copy is placeholder and says so. Reads in full without JavaScript, in any register.
quiet warm playful
Open the live demo
npx susegad add studio-home
Stands on: Badge, Chat thread, Core, Core: components, Now note, Postcard, Quote, Reach, Site nav, Tokens, Voice note
The prompt
the prompt
The home page of a one-person software studio: who it is, what it's doing now, the work, what a client said, how to get in touch.
The prompt
Build a static home page for a small studio from the library's pieces, in the page's register. A site nav with the home page marked current. An introduction beside a now note, with the availability as a badge and the date it was last updated. A grid of postcards for the work, each one link, with where and when and Live, Shipped or Experiment as a badge beside them. What a client said as a quote, with its link going to the voice note it came from, beside the conversation it came from as a chat thread, redacted at build time, with the voice note as a message. A reach block to say hello, with email and WhatsApp links built at build time. Mark every piece of copy that isn't real as placeholder. It must read in full without JavaScript, pass axe in every register and theme, never play a sound before a press, and never scroll sideways on a phone.
Words to code
| When you say | Piece |
|---|---|
| a site nav with the home page marked current | sg-site-nav, aria-current="page" |
| a now note … a badge … the date | sg-now-note, sg-badge |
| postcards … one link … as a badge | sg-postcard, sg-badge on .sg-postcard-where |
| a quote, with its link going to the voice note | sg-quote, a.sg-quote-source href="#prompt-voice" |
| a chat thread, redacted at build time, with the voice note as a message | renderThread(), sg-chat-thread, sg-voice-note |
| email and WhatsApp links built at build time | waLink(), mailtoLink(), sg-reach |
A one-person studio's home page built from the seven studio-site pieces: site-nav, now-note (with badge), postcard (with its status as a badge), quote, chat-thread with a voice-note inside, and reach. Every name, number and word on it is placeholder copy, and the banner at the top says so.
Open it with ?register=quiet, warm or playful (the banner links do this), and &theme=dark.
How it was made
index.html is static, as an Astro page would write it. The thread was built with renderThread() (a phone number and a name went in and did not come out), the contact links with waLink() and mailtoLink(). Nothing on the page needs JavaScript to be read; with it off, it is the quiet page.
Checks
recipe.check.mjs: axe in all three registers, light and dark, and without JavaScript; every piece gets its skin; no page errors; no play() before a press; no redacted text in the page; no sideways scroll at 390 px.