# 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:

```bash
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](./web/features/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:

```bash
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.