Cinematic noir portfolio

Arrange projects, a bio and photography into a complete cinematic monochrome portfolio with previewable page code. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

Create a complete cinematic monochrome portfolio webpage, not just a style recommendation. Use this in a tool capable of generating HTML/CSS.

INPUT
Identity/positioning: [name or studio, creative field, audience]
Projects: [2–6 real project titles, descriptions, years and usable image paths; mark missing items]
Copy/contact: [bio, creative statement, email/links; or none]
Assets/constraints: [authorized photos/fonts and existing brand rules; or none]
Page language: [Chinese/English]

MISSING INFORMATION
Ask at most three questions only for blocking gaps. Without assets, use neutral placeholders visibly labeled “image to replace”. Do not fetch random photography or invent clients/awards. Default to system fonts; verify rights before selecting optional fonts. Do not assume the source's ZTNature is licensed for this project.

METHOD
1. Derive positioning and a narrative from actual projects. Build navigation, photographic hero and headline, selected works, creative statement, then contact footer. Keep the positioning and work entry visible in the first viewport. Let mobile height follow content; do not force the source's 857px minimum.
2. Base the page on #09090B, #FAFAFA and #E5E5E5, with #EF4444 only as a small accent. Alternate black/white sections, use square imagery and restrained rules. Pair oversized headings with light secondary type, bounded with clamp. Chinese headings must fit narrow screens. Weak decorative grain must not obscure text.
3. Use two project columns on desktop and one on phones. Preserve photo subjects/aspect ratios. Give navigation explicitly readable text/background combinations rather than relying on blend modes. Keep project titles, descriptions and entry points visible without hover.
4. Optional subtle hero scaling and section reveals must leave the page usable without animation. Respect prefers-reduced-motion; keyboard/touch use cannot require hover. No scroll hijacking. Use minimal HTML/CSS and necessary JavaScript without installing frameworks, unknown trackers or fabricated backends. Label missing destinations rather than adding misleading dead buttons.
5. Check content, headings, images, focus and horizontal overflow at 390px and 1440px. Evaluate actual text/background combinations. Run a preview when possible; otherwise explicitly report “not run” with executable checking steps, never a passing result.

DELIVER IN ORDER
A. 3–5 lines covering positioning, page structure, assumptions and missing assets.
B. One complete code block saveable as index.html with inline CSS and easy-to-replace asset paths. Only local page behaviors; no claims of real sending, storage or analytics.
C. Asset replacement table and checks: item / actual result or unverified reason. Explain phone layout and reduced motion.

Preserve supplied names, facts, copy and photo subjects. The cover is not tested output evidence; code/proposals do not establish a deployed website.
Site adaptation of Jason Zhou / Superdesign, Cinematic Noir (prompt text CC0-1.0). Adds complete-page delivery, asset and responsive boundaries; no upstream preview or font files reused: https://github.com/superdesigndev/superdesign-prompts/blob/6c60906945208df5aa2187f19f8ddfe9b2948aa0/prompts/cinematic-noir-style/README.md .

random copyrighted photos, invented credentials, unlicensed fonts, overflowing mobile headings, hover-only entries, scroll hijacking, grain obscuring text, fabricated APIs or test results