DEVELOPER HANDOFF / VERSION 1.1 View the demo ↗
fieldwork.

BUILT TO BE HANDED OVER

A clear finish.
An easier next step.

Fieldwork · Agency website support sample
Prepared by Cory Smallegan · October 15, 2026

Open component library ↗Test the brief form ↗

01 / Scope + status

A self-initiated portfolio concept for a fictional digital studio. Includes a responsive landing page, two illustrative brand directions, a reusable component library, and this guide. No real client engagement or business results are implied.

AI-assisted implementation and documentation, with browser interaction checks. Full validation details and limitations are recorded in the source package.

02 / Run + deploy

  1. Open a terminal in the project folder.
  2. Run node scripts/serve.mjs.
  3. Open http://127.0.0.1:4173.
  4. For any static host, publish the contents of dist/. No install or build command.

Serve over HTTP; opening HTML as a file can block JavaScript modules. Set the correct MIME types and HTTPS on your host.

03 / Where to edit

  • dist/index.html — landing page and copy.
  • dist/components.html — live component examples.
  • dist/concepts.html — visual direction notes.
  • dist/assets/styles.css — tokens and responsive styles.
  • dist/assets/components.js — navigation, dialog, FAQ.
  • dist/assets/brief.js — brief validation and formatting.
  • dist/assets/app.js — page setup and form behavior.

04 / Reuse + adapt

Start with the component library. Copy the matching HTML and include the shared CSS and module entrypoint. Keep IDs unique; connect dialog and navigation triggers to the matching IDs.

Change palette and spacing through CSS variables. Navigation and service cards switch at 900px; the main content stacks at 620px. Keep decorative icons hidden from assistive technology.

05 / Interaction contract

  • Menu: toggle, choose a link, or press Escape.
  • Popup: native modal focus containment; Escape, close button, and backdrop dismissal.
  • FAQ: native keyboard-operable disclosure, independent answers.
  • Brief: required sample name, listed project type, and 20–1,200-character outline. Generates a text preview and download in the browser.

No form submission, data storage, email, tracking, account, payment, or booking integration.

06 / Checks + next steps

Run node --test for brief logic and static link checks. See docs/verification.md for the actual browser coverage and known limits.

Before client use: replace the fictional copy, confirm brand permissions, scope real integrations, add server validation and spam protection where needed, then test delivery. Perform a final real-device and assistive-technology review after integration.

Portfolio use: describe this as an independent agency support sample. Original AI-generated architectural imagery and custom CSS layouts are included. Images represent fictional visual studies, not client projects; no stock purchases or external font services are required. The source package includes setup instructions, reusable markup, and an Upwork-ready description.