Sue-Ellen Pereira — Studio Site

A small static site for an independent studio. Hand-written HTML / CSS / JS — no build step, no framework, no dependencies you have to remember to update.

Run it locally

Open docs/index.html directly in any browser, or serve the folder:

# From the project root
cd docs
python -m http.server 8000
# then visit http://localhost:8000

Note: the questionnaire's localStorage auto-save and clipboard-fallback features only work over HTTP/HTTPS, not from file://. For local previewing use the command above; for sharing, use the GitHub Pages URL below.

Project shape

sueellen-portfolio/
├── README.md                    ← this file
├── STATE.md                     ← build state + resume protocol
├── research/
│   ├── aesthetic.md             ← palette / typography / layout DNA
│   └── content.md               ← content scaffold + open questions for the client
└── docs/
    ├── index.html               ← practice / home
    ├── about.html
    ├── work.html                ← Sessions page (URL kept short for SEO)
    ├── contact.html             ← Book page
    ├── client-questions.html    ← shareable questionnaire — see workflow below
    ├── assets/                  ← drop client photos here
    ├── css/
    │   ├── tokens.css           ← design tokens (colour, type, space)
    │   ├── base.css             ← reset, typography, links, utilities
    │   ├── layout.css           ← container, header, nav, footer, grid
    │   └── components.css       ← hero, session cards, services, form, etc.
    └── js/
        └── main.js              ← nav toggle, scroll reveal, contact form helper

The questionnaire workflow (client-questions.html)

The site ships with a lot of [CLIENT TO PROVIDE] placeholders because some decisions can only be made by the client. Rather than ping her with a long email, the project includes a shareable HTML questionnaire at docs/client-questions.html:

• It's styled to match the rest of the site (so it doubles as a brand preview).
• 28 numbered questions across 7 grouped parts: about you & the practice, visual direction, sessions & clients, booking & logistics, social proof & reach, domain/email/compliance, after launch.
• Auto-saves to the browser (localStorage) on every keystroke — she can close the tab and resume.
• Sticky progress bar shows how many of 28 questions have an answer.
• Submission is robust — when she hits Send my answers, the JS gathers every filled field, formats them as a clean labelled note, and opens her email pre-filled. If the answers are very long, it copies them to her clipboard first and opens an empty email so nothing gets truncated by mailto length limits.
• The form's action is set to mailto:karanparmar7993@gmail.com (the project owner's address) so answers come straight to you.
• The page has <meta name="robots" content="noindex,nofollow"> and is not linked from the live site nav.

To send it to her:

1. (Already done) Form is wired to karanparmar7993@gmail.com.
2. Either send her a direct link to …/client-questions.html (host the docs/ folder somewhere), or zip the project and let her open the file locally in any browser.
3. When her answers come back, edit the four pages directly — every placeholder is wrapped in <span class="placeholder">[…]</span>, so a project-wide find for the string placeholder walks you through every spot.

What to do before going live

The site ships with placeholder copy and imagery. Anything wrapped in <span class="placeholder">[…]</span> is a clearly-marked spot for the client to replace. Search the project for the string placeholder to find every one.

1. Send the questionnaire. Set the mailto: in docs/client-questions.html and send it to the client. Most placeholders are answered by what comes back.
2. Replace copy. Hero tagline, bios, session details, testimonials, contact details. All marked with [CLIENT TO PROVIDE].
3. Add imagery. Drop photos into docs/assets/ and replace the numbered work-card__media-placeholder divs with <img> tags pointing at them. Suggested ratios: 4 / 5 (vertical) for session cards.
4. Wire up email. In docs/contact.html, replace mailto:hello@example.com in the form's action attribute with the client's preferred email. Same in client-questions.html.
5. Remove the preview banner. Delete the <div class="notice">…</div> block at the top of every page once the placeholder content is gone.
6. Set the year. The footer auto-fills the current year via data-year — no action needed.

Switching the CTA from contact form to a booking link

The default v1 has a contact form as the primary CTA. To swap to an external booking system (Cliniko / Calendly / similar) once she confirms she uses one:

• In each page footer, change the "Book a session" button's href="contact.html" to her booking URL and add target="_blank" rel="noopener".
• In index.html hero, change the primary .btn href the same way.
• (Optional) Keep contact.html as a fallback "or send a note instead" page; remove its top-nav entry if you'd rather only expose the booking flow.

Aesthetic notes

• Palette: Bone #F8F4EE, Ink #1F1B16, Sand #C9A88C, Walnut #7A5A3F, Linen #D9C7B3, Sage #9CA89A. Defined as CSS custom properties in css/tokens.css.
• Type: Fraunces (display, variable) + Inter (body / UI), Caveat reserved for the signature flourish only. All free, served from Google Fonts.
• Motion: subtle scroll reveal + a slow marquee on the home page. Both honour prefers-reduced-motion.

The visual direction was researched against a public template family (notes in research/aesthetic.md) and then deliberately shifted in palette, type weight, and section ordering so the site reads as Sue-Ellen's own brand rather than a templated clone.

Deploy

Currently deployed via GitHub Pages, served from the main branch's /docs folder.

• Live site: https://captkernel.github.io/SueEllen_Website/
• Questionnaire: https://captkernel.github.io/SueEllen_Website/client-questions.html

To redeploy: commit and push to main. Pages picks up changes within a minute or two.

Other static hosts work too — drag docs/ onto Netlify Drop, run vercel deploy docs/, or upload to S3/Cloudflare Pages.

Resume after a crash

If a session is interrupted, open STATE.md first. It tracks build phase, the next step, and any known blockers. Each phase has a checklist; pick up from the first unchecked item.

Licence note

The visual direction is original work informed by public design references. No copy, imagery, or layout was reproduced verbatim from any external source.