templates.Resume/SPEC.md

Interactive Resume — product specification

The contract a project created from this template is built against. The Startup Creator reads it together with the survey answers (.w4c/fields.json) and the module list (.w4c/template.json → pages) and files it as board layers.

1. Purpose

One person's professional story as a fast, accessible, printable website. The site should be enjoyable to browse (a little motion, some interactivity) without ever getting in the way of the content, and it must produce a clean CV when printed or exported to PDF.

Audience: a recruiter, hiring manager or peer who has 90 seconds and (maybe) a phone.

2. Scope

In scope

• The selected modules from the manifest (hero-intro, timeline-experience, skills-matrix, project-showcase, recommendations, resume-download, contact-cta).
• A content model that holds the profile, experience, skills, projects and recommendations.
• Theming from the survey (theme + accent colour), light and dark.
• A printed/PDF CV in the chosen paper format.
• SEO metadata and a Person structured-data block.

Non-goals

• No user accounts, no admin panel, no database, no analytics.
• No multi-user/full CMS: one person's content, edited in the repository or in the project.
• No tracking pixels and no third-party ad scripts.

3. Modules (screens/sections)

The site is a single scrolling page or routed sections — choose one and keep it consistent.

Module	Contents	States
hero-intro	Avatar, name, headline, tagline, location, CTAs (download CV, contact), scroll cue.	intro animation on/off (prefers-reduced-motion).
timeline-experience	Reverse-chronological roles; company, dates, summary, expandable achievements; optional education.	collapsed / expanded; empty (no entries).
skills-matrix	Skills grouped by category in the chosen view (bars / radar / cloud); optional proficiency; interactive filter.	filtered / unfiltered; chart-unavailable fallback.
project-showcase	N case-study cards with thumbnail, summary, tech tags; filter by tag; detail dialog (problem/approach/outcome/links).	filtered/empty; dialog open/closed.
recommendations	Quote cards with author, role, company; optional avatars; carousel or grid.	slide 1..N; autoplay off by default.
resume-download	Print stylesheet + downloadable CV (the chosen formats), verified print layout.	screen vs print.
contact-cta	Validated contact form (name, email, message) with a success state; contact details; optional availability badge and scheduling link.	pristine / invalid / sending / sent / error.

A module that is not selected is not built.

4. Content model

Names are indicative; keep the shapes stable across the modules.

• Profile — fullName, headline, targetRole?, location?, email, phone?, links[], languages[], tagline?, avatar?, theme, accentColor.
• Experience — company, role, start, end (or present), summary, achievements[], kind (role | education).
• Skill — name, category, proficiency (0–100 or a level), featured?.
• Project — title, summary, problem, approach, outcome, tags[], links[], thumbnail?.
• Recommendation — quote, author, role, company, avatar?, link?.

Seed every module with the survey answers (name, headline, links, experience entries, skill categories) so the first render is real content, not lorem ipsum. When the survey provides profileLinks (LinkedIn, GitHub, personal site), the Web Researcher agent reads those URLs first and the extracted profile — current role, experience, skills, projects and public contact links — seeds the content model; a link that cannot be read is reported, never guessed.

5. Behaviour

1. Load — the profile and content render without layout shift; images reserve their space.
2. Navigate — the scroll cue / nav moves between modules; keyboard focus order follows the visual order; the active section is reflected in the nav.
3. Timeline — expanding an item is keyboard-operable (Enter/Space) and announced.
4. Filters — the skills and showcase filters update the visible set and keep the URL state so a filtered view is linkable.
5. Dialog — a case study opens in a dialog that traps focus and closes on Escape.
6. Carousel — navigable with arrow keys and by swipe; pausing on hover/focus if it autoplays.
7. Print — resume-download produces a clean CV; navigation, animations and interactive-only affordances are hidden in print; links stay readable.
8. Contact — the form validates on the client and on the server, shows a success state, and degrades to a plain mailto: fallback without JavaScript.

6. Non-functional requirements

• Performance — target a green Lighthouse performance score on the built site; ship no render-blocking third-party scripts; self-host or subset fonts.
• Accessibility — WCAG AA contrast in both themes; full keyboard operation; visible focus; prefers-reduced-motion disables non-essential motion; images have meaningful alt.
• SEO — per-page <title>/description, canonical URL, Open Graph tags and a Person JSON-LD block; sitemap.xml and robots.txt.
• Responsive — no horizontal scroll from 360 px to desktop; the print layout is unaffected by screen styles.
• Security — render user content as text; validate and rate-limit the contact endpoint; never commit secrets (.env.example lists them).

7. Stack & dev server

The stack is the survey answer (stack). The template's devServer section is a generic Node image with pnpm install/serve on port 9000; adjust the commands to the chosen framework if needed. The site must build to static assets where the framework allows, so it can be hosted cheaply and printed from a local build.

8. Acceptance criteria

Each is checkable — a command, a measurement or a runtime step.

• Build, lint and typecheck pass on a clean clone.
• Every supplied profile link was read (or reported unreadable) and its public data seeded the profile, experience, skills and projects.
• Every selected module renders from real content with its loading/empty states.
• Keyboard-only navigation reaches and operates every interactive module (timeline, filters, dialog, carousel, form).
• With prefers-reduced-motion: reduce, no non-essential animation runs.
• AA contrast passes in both themes; focus is always visible.
• The filtered skills/showcase views are linkable (state in the URL).
• Print preview fits the chosen paper format and keeps links readable; the CV downloads in the chosen formats.
• The contact form validates client- and server-side and has a success state; it works without JavaScript as a fallback.
• The built site has a sitemap.xml, robots.txt and a Person JSON-LD block.
• No horizontal scroll at 360 px wide.