August 2026 UI/AI portfolio launch

The launch repositions the site around Tamara Gisele Mack — Creative Technologist (profession: principal and distinguished software engineer, and software architect) and the line:

Designing human-centered interfaces for systems that think, act, and create.

LIKWIDMACK remains the creative signature. The primary audience is hiring teams, with a secondary path for select product and creative-technology engagements.

Public information architecture

Primary navigation (AppPrimaryNav): Work → /work, About → /about, Gallery → /gallery, Writing → /blog, Code → /code.

Work sub-navigation (AppWorkSubNav on /work and /work/[slug], .page-nav chrome beside the Work body): Docs → /docs, AI Lab → /ai-lab, Process → /process.

• / - positioning, six proof-led featured stories, working principles, contact
• /work and /work/[slug] - Media Systems, Innovation Prototyping, Human-Controlled AI Lab, Spatial Experiences, Data Visualization, and Experience Systems
• Evidence examples dialog on /work and each case study — Code / Data / Styles tabs with sanitized snippets from shipped surfaces (AppEvidenceExamplesDialog, catalog in shared/evidence-examples.ts)
• Media rendering: rasters use NuxtImg (IPX); SVGs use UiSvgImg (NuxtImg-shaped props → native <img>, IPX skipped) via isSvgSrc()
• /about - background, resume, and portfolio-PDF downloads
• /gallery - social-style sample feed (filter + group; feed or grid)
• /blog - Writing editorial grid (statused essays + published notes)
• /code - editor/repos shelf plus a real-snippet browser (verbatim utilities from this repo, including MSE append serialization, AI Lab HMAC continuations, WCAG fill contrast, and the DNA helix study). Snippets live on the code Content collection (content/code.json → Content SQLite via /api/content/code) as samples[] with inline comments; source is a line array so regex and template literals stay decoded. Repo href values are # while the GitHub monorepo is private (anonymous 404); restore public URLs once access is verified. Language tags are precomputed in script (codeLanguageLabel) so Pug + script-setup does not drop the helper. The code (and writing) collection must stay on the content API allowlist.
• /docs - technical documentation catalog sourced from repo docs/ markdown (Work sub-nav)
• /ai-lab - deterministic replay by default; optional server-side Responses API mode (Work sub-nav)
• /process - sanitized decision cards (Work sub-nav)
• /media-player, /product, and /styles - supporting demonstrations, outside the primary navigation

Case studies and decision cards are typed Nuxt Content collections in core/web/content.config.ts. The homepage stores featured case-study slugs, not embedded project copies.

Content and privacy rules

Public case studies live under core/web/content/case-studies/. Public decision cards live under core/web/content/decision-cards/ and must pass isPublicDecisionCard().

Only approved and sanitized cards may render. Do not publish:

• task identifiers or full transcripts;
• secrets or personal filesystem paths;
• private financial or business content;
• employer internals without recorded permission;
• repository evidence links until anonymous access is verified.

The private workbook at deliverables/private/August-2026-Portfolio-Launch-Tracker.xlsx records permissions, redactions, evidence, and publication state. .xlsx and .pptx files in that directory are intentionally ignored.

Human-Controlled AI Lab

The browser flow is goal -> plan -> approval or rejection -> result. A result is requested only after approval.

Replay mode is fully functional and requires no credentials. Optional live mode uses the OpenAI Responses API directly from Nitro with:

• gpt-5.6-luna by default;
• strict JSON Schema outputs;
• read-only lookup_ui_pattern and find_related_case_study tools;
• store: false, bounded output, and an eight-second request timeout;
• a short-lived HMAC-signed continuation token with a one-time jti (replay rejected on /complete);
• an HMAC-signed anonymous quota cookie without prompt data (applied on both /plan and /complete);
• server-generated RFC 4122 v4 IDs backed by Node randomBytes, avoiding runtime-specific crypto.randomUUID support;
• API Gateway route throttling;
• automatic replay for disabled mode, missing credentials, quota, timeout, malformed output, or browser network failure.

Cookie quotas are best-effort (cleared cookies reset the budget). Keep the OpenAI project spending cap set before enabling live mode.

Responsive layout contract

• Primary routes use native document scrolling and must not create horizontal page overflow at 320, 768, 1024, or 1440 pixels.
• The shared header becomes a two-row, horizontally scrollable navigation rail at tablet widths while preserving 44-pixel touch targets.
• Work and artifact grids move from three columns to two and then one; the AI Lab and decision journal collapse to a single reading column.
• On-page navigation becomes a compact horizontal rail on phones, and the About timeline uses a consistent left-to-right mobile layout.
• Display headings, media, code samples, dialogs, actions, and long content are constrained to the available viewport width.

Generated media curation

• The Innovation Prototyping story includes three human-directed Midjourney studies selected from the private VIMG archive: crystalline volume, cosmic network, and algorithmic helix.
• Public derivatives are resized WebP files with source metadata removed; original VIMG files remain untouched and outside the application.
• Each published study includes purpose-led alt text and an on-page caption that identifies the human-directed generative workflow.
• Personal photographs, identity documents, and unrelated VIMG experiments are excluded from the repository and public content.
• Two short AVC MP4 motion studies extend the same visual system: a crystalline binary helix and a recursive tesseract chamber.
• Video is user-controlled, muted, inline-capable, and configured with preload="none"; static posters load before a visitor chooses playback.
• Public clips use sanitized filenames and contain no identifying metadata strings found during the release review.

Environment contract:

SITE_URL=http://localhost:4200
OPENAI_MODEL=gpt-5.6-luna
AI_LAB_LIVE_ENABLED=0
OPENAI_API_KEY=                    # secret; never commit
AI_LAB_SIGNING_SECRET=             # secret; never commit

The API key created for local development is stored only in the ignored worktree .env. Keep AI_LAB_LIVE_ENABLED=0 until the OpenAI project spending cap is set. Production uses GitHub Environment secrets and maps them to NoEcho SAM parameters.

Raw AI input is never accepted by the analytics adapter. Events are limited to work views, lab start/approval/completion, downloads, theme changes, resume downloads, and contact clicks.

Personalization and visual system

The launch stylesheet is core/web/assets/css/portfolio-launch.scss; theme defaults remain in the packaged theme. Personalize lives in the site footer (not primary nav) and extends the existing theme system with:

• light, system, and dark modes;
• ember and crimson warm accent families (legacy coral/cobalt/teal/violet/amber ids fall back to ember);
• system, playful, and reduced motion;
• local persistence using tgmc-theme-mode, tgmc-accent, and tgmc-motion;
• reset behavior and contrast-derived foreground/focus colors;
• --portfolio-teal as a sparse signal (aligned with --success); brand roles stay --primary-color / --secondary-color / --accent-color. Teal controls: About Digital CV résumé download (.about-cv__resume), Gallery view/like stats, and Code language tags (.code-page__lang).

Pre-ember coral/ivory sources are archived at archive/v2/ (copy-back restore only; do not overwrite archive/v1). Do not describe the live brand as coral/ivory.

Shipped restyle surfaces:

• Home — fluid split hero (data-fit="screen") with confined ambient video inside .home-hero__visual (not full-bleed); focus tags + view-all on featured work.
• About — fixed sidebar Digital CV (data-fit="prose") with portrait, sticky AppPageNav from $breakpoint-tablet up; teal résumé control (.about-cv__resume).
• Gallery — social feed/grid; defaults to grid (YouTube / Shorts / Reels / Still platform tags; teal engagement stats; kind badge + category). Helpers bind in <script setup> (gridTiles) — see gallery-and-docs.md.
• Writing — primary label for /blog; editorial shelf (content/writing.json essays + /api/posts notes), not a flat “Notes” list.
• Code — editor chrome + explorer/repos with teal language tags (.code-page__lang) and a snippet browser of real repo utilities.
• Work — case-study grid + evidence dialog; Related AppWorkSubNav for Docs / AI Lab / Process.

Title / Person JSON-LD: Principal UI/UX Software Engineer & Creative Technologist, Founder of HyperActivity.

Manhattan 2150 assets are in core/web/public/i/portfolio/. They are AI-assisted, creator-selected source assets prepared for optional Photoshop/Firefly cleanup. The August scope is one polished landscape proof scene and a six-shot storyboard; the full film and NVIDIA/local RTX workflow remain post-launch.

Deliverables

• Private tracker: deliverables/private/August-2026-Portfolio-Launch-Tracker.xlsx
• Private editable deck: deliverables/private/Tamara-Mack-UI-AI-Portfolio-2026.pptx
• Public PDF: core/web/public/d/Tamara-Mack-UI-AI-Portfolio-2026.pdf

The tracker includes Dashboard, Roadmap, Content Inventory, AI Journal, and Launch QA sheets. The deck contains eight slides with editable objects and speaker-note sources. The public PDF is an eight-page 16:9 export.

Verification

From the repository root:

npm run lint
npm test
npm run build
npx nx run web:e2e

Acceptance also requires manual light/dark checks at theme breakpoints 480, 768, 1080, and 1440 px (hero stacks below standard; nav wraps), keyboard coverage of the AI Lab, reduced-motion review, working resume/PDF downloads, and Lighthouse scores of at least 90 for Performance, Accessibility, Best Practices, and SEO on Home, Work, and AI Lab.

Before production deployment:

1. Set an exact HTTPS SITE_URL and matching CORS_ALLOW_ORIGIN GitHub Environment variable.
2. Record employer publication permissions in Content Inventory.
3. If live AI is enabled, add OPENAI_API_KEY and AI_LAB_SIGNING_SECRET secrets and confirm the project spending cap.
4. Deploy through the existing SAM workflow, sync CDN assets, and smoke-test Home, Work, AI Lab, downloads, and contact on the custom domain.

The production workflow fails closed when SITE_URL is not HTTPS, CORS is empty/wildcard, or live mode is requested without both secrets.