design-qa.md

Design QA

Comparison target

• Source visual truth:
  • design/reference/source-desktop-top-1440x900.png
  • design/reference/source-mobile-top-390x844.png
• Final homepage implementation:
  • design/qa/implementation-home-desktop-final-1440x900.png
  • design/qa/implementation-home-mobile-final-390x720.png
• Side-by-side evidence:
  • design/qa/comparison-home-desktop-final.png
  • design/qa/comparison-home-mobile-final-390x720.png
• Desktop comparison: source and implementation at 1440 × 900 CSS px, DPR 1.
• Mobile comparison: both sides cropped/captured at 390 × 720 CSS px, DPR 1.
• State: homepage, top of the internal page scroller, default navigation, closed search, visitor mode.

Findings

• No actionable P0, P1, or P2 visual differences remain.
• The fixed visual language matches the reference: Georgia display headings, dark teal copy, cyan/gold accent line, near-white ambient background, translucent glass cards, soft shadows, and the same header rhythm.
• Desktop hero alignment, title scale, slogan width, avatar-card proportions, stats, and social buttons match the reference closely.
• Mobile stacking, 14 px page inset, 179 px three-row header, title wrapping, slogan underline, tags, and profile-card entry match the reference.
• The real Suibosama GitHub avatar replaces the source avatar. The source runtime canvas background was replaced by a generated local raster with the same cyan/cream ambience.
• The requested Login control is the only intentional header addition.
• The exact homepage description is bobololobo bolibo bolibo.
• GoalFlow, the About section, and Shanghai · Tongji University are absent.

Independent page evidence

• Projects:
  • design/qa/implementation-projects-desktop-final-1440x900.png
  • design/qa/implementation-projects-mobile-final-390x720.png
• Articles:
  • design/qa/implementation-articles-desktop-final-1440x900.png
  • design/qa/implementation-articles-mobile-final-390x720.png
• Article detail:
  • design/qa/implementation-article-desktop-final-1440x900.png
• Writer:
  • design/qa/implementation-writer-desktop-final-1440x900.png
  • design/qa/implementation-writer-mobile-final-390x720.png
• Login:
  • design/qa/implementation-login-desktop-final-1440x900.png

Interaction and runtime checks

• Verified 首页、项目、文章 route to three independent hash pages.
• Verified the homepage only contains the hero, project preview, and article preview.
• Verified project and article rails respond to pointer/touch-style horizontal drag; measured scrollLeft changes on desktop and mobile.
• Verified the administrator credential accepts the configured account and rejects the visitor state until login.
• Verified the passphrase is PBKDF2-derived and no plaintext passphrase appears in source files.
• Verified login fields do not retain the passphrase after the dialog closes.
• Verified administrator project add and delete; temporary QA data was removed afterward.
• Verified administrator article add through the writer and delete through the article page; temporary QA data was removed afterward.
• Verified exported content-overrides.json was empty after cleanup.
• Verified Markdown editing, live preview, local draft save, clipboard copy, and published Markdown article rendering.
• Verified GitHub, repository, mail, writing, and publishing destinations.
• Browser console warnings/errors: none on desktop or mobile.
• npm run build: passed.
• npm run test:sites: 4/4 passed.

Security and publishing boundary

• GitHub Pages is static hosting. Administrator edits are stored in the current browser first.
• The admin panel can copy or download content-overrides.json; committing that file to the repository publishes changes for all visitors.
• Only a salted PBKDF2 verifier is shipped. The plaintext administrator passphrase is not committed.

Final result

passed