1
0
forked from jason/scj
Files
Jason Stedwell 7593fb46cf initial build
2026-06-30 22:23:36 -05:00

7.3 KiB
Raw Permalink Blame History

Storm Cloud Jumpers — Website Build Plan

Domain: jumpers.stormcloudhills.com Type: Static, responsive storefront-style showcase + care hub. All sales & inquiries run through the website directly (email) — NOT MorphMarket. Contact: stormcloudjumpers@gmail.com Facebook: https://www.facebook.com/61591317309985/ Build location: scj/


1. What this site is (and isn't)

A branded showcase + inquiry hub that IS her sales channel. No cart/payment processor and no accounts — buyers reserve/inquire via the site (form + email to stormcloudjumpers@gmail.com), and Mom arranges payment + shipping directly. She is not setting up a MorphMarket shop (she only reuses MorphMarket-branded shipping boxes, which carry the live-arrival program). So: no MorphMarket links anywhere. Every "Available" spider gets a "Reserve / Inquire" button that opens a pre-filled inquiry (form anchor or mailto: with the spider's name in the subject).

2. Brand & design direction

Reuse the locked look from the existing assets:

  • Palette: near-black storm background (#0a0a0a), red #e02828 accent, brushed-silver text on headings.
  • Type: Oswald (display/headlines) + Inter (body) — already in the placeholder.
  • Mascot: Nimbus (the crest logo) featured in the hero and as the site logo/favicon.
  • Vibe: bold "esports crest" energy softened with clean, readable content — professional, not gimmicky. Keep subtle motion (reveal-on-scroll, light parallax) from the placeholder; trim anything that hurts readability or mobile.

3. Structure — single page + one print page

index.html (anchor nav: Available · Mamas · Care · Shipping · About · Contact)

  1. Hero — Nimbus mascot on storm background, tagline "Small size. Big personality.", CTAs → View Available + Care Guide.
  2. Available Now — the real for-sale inventory as cards, each with photo, species, instar/age, sex status, "healthy body shape", temperament, price, and a Reserve / Inquire button:
    • Otiosus slings — Northern Canopy (Fern's line), i56, unsexed, $25 ea. Note: Northern otiosus differ from FL; typically $35+.
    • Regius males — current boys Gully, Noble, Hexx & Magick, adults, $25 ea. (⚠️ Nashville has passed away — remove. Ivan's status TBD — see §7. New boys need photos.)
    • Regius femalesIris (subadult, young enough to work with) & Mango (subadult, handles well), $50 ea.
    • Free Starter Kit — comes free with every spider purchase (misting bottle, paintbrush, molting/instar notes). Present as a value-add banner/badge, NOT a purchasable product.
  3. Meet the Mamas — showcase gallery (NOT for sale) of her wild-caught breeding females: Fern (otiosus), Cleo (audax), and the regius girls (Colette, Demure, Devine, Delight, Dove, Inca, Latte, Lush). Builds trust + shows lineage.
  4. Care Guide — accurate husbandry (see §4). Includes a QR code linking to the printable care sheet.
  5. Shipping & Live Arrival — FedEx-only rules (see §4).
  6. About — small hands-on keeper; wild-caught mamas that breed once → captive-raised babies; Storm Cloud Hills.
  7. Contact — inquiry form (routes to Gmail) + stormcloudjumpers@gmail.com + Facebook link/share button.
  8. Footer — logo, nav, Facebook, © year.

care-sheet.html — print-friendly, single-column version of the care guide. This is the QR code target so buyers can print/save it. (Mom is also typing up her own; this gives her a branded template.)

4. Content accuracy — corrections from Mom's note (MUST honor)

  • "Captive raised" everywhere — never "captive bred." Mamas are wild-caught (WC), breed once, produce babies through their short lives.
  • Babies = "slings" (hobby term).
  • No health-check claims → "healthy body shape" (abdomen shape).
  • Live arrival guaranteed only on overnight hub-to-hub (MorphMarket covers it). 2-day to-your-door = lower rate, not covered, offered spring/fall.
  • FedEx only (only legal option) — no UPS, no USPS. Ships MonWed.
  • otiosus temperament = Active ("a little crazy"); enjoy a playground / enrichment ("dragon lair") setup.
  • Housing: slings (i36) fine in 3×3 cubes; floor with soft sphagnum / reptile-safe moss in case of falls.
  • Feeding: hydei fruit flies for slings; PBL (peanut beetle larvae) as a newer great option; crickets/BSFL for larger.
  • Molting: critical at i5 & i7 — raise humidity; don't feed until a few days after they leave the hammock.
  • Remove all fabricated stats/reviews and the placeholder phone/email.
  • Future species (not yet available): mustached jumper unlikely; hoped-for Paraphidippus fartilis (≈ same price).

5. Assets pipeline

  • Create scj/assets/brand/ (Nimbus logo variants, hero cards), spiders/available/, spiders/mamas/, care/ (QR + diagrams).
  • Resize/optimize the large iPhone JPEGs (many are 24 MB) to web sizes with sips (max ~1600px, ~80% quality) so the site loads fast on mobile.
  • Map photos → individuals using each folder's names.txt ordering (e.g., "first 6 = Iris"). Filenames aren't in order, so I'll view them during build to assign the best shot per spider and per gallery.
  • Generate a QR code PNG pointing to the care sheet URL.
  • Pull the 3 otiosus sling photos out of the "Available spoods" PDF for the slings card.

6. Tech

  • Plain HTML + CSS + vanilla JS, no build step — trivial to host on the subdomain and easy to hand off.
  • Adapt the existing SCJ.src/styles.css as the base (it already nails the palette/type), fixing content and extending for the new sections.
  • Fully responsive (mobile-first), accessible (alt text, semantic landmarks, keyboard nav), SEO basics (title/description/OG tags using a Nimbus social card), favicon from the logo.
  • Lighthouse pass for performance/a11y before done.

7. Open items to confirm with Mom

  1. Male roster + photos. Nashville passed; current boys are Gully, Noble, Hexx & Magick but we have no photos for them yet — only Nashville (deceased) and Ivan. Need: is Ivan still available? Send photos for the new boys. Until then I'll show the males as one "Regius Males — $25" group using available/placeholder imagery and a "more boys coming" note.
  2. Inquiry form delivery RESOLVED: ship with a mailto: form now, but build the form so it can POST to a Google Apps Script web app bound to her own Gmail (GmailApp.sendEmail) — sends from her account, no external service. Ship form-handler.gs (ready to deploy) + progressive-enhancement JS that POSTs to the endpoint when configured, else falls back to mailto:.

Resolved: No MorphMarket · Starter kit free w/ purchase · Species = Paraphidippus fartilis · Facebook = facebook.com/61591317309985 · Contact = stormcloudjumpers@gmail.com

8. Build order

  1. Scaffold scj/ (index.html, care-sheet.html, styles.css, script.js, assets/).
  2. Assets pipeline: sort/resize photos, extract sling pics, generate QR + favicon/OG.
  3. Build hero + nav + Available section (core).
  4. Mamas gallery, Care guide, Shipping, About, Contact.
  5. care-sheet.html print page.
  6. Responsive/a11y/perf polish + final review against Mom's note.