# Portfolio — Angel Mankel

Personal site at a reserved domain (TBD — see `config.md` once created). This is a hiring-funnel artifact, not a blog or playground.

## Who this is for

The reader is a hiring manager or recruiter at one of these companies:

- **Bullseye:** Vercel, Anthropic, Cursor, Cognition, Replit, Sourcegraph, Continue, Linear, Figma
- **Adjacent:** Stripe, Ramp, Notion, Retool, any AI-native product company shipping React-heavy surfaces

They land here from a CV, LinkedIn DM, or referral. They will spend **60-120 seconds** before deciding to reply or move on. Optimize ruthlessly for that window.

## Who Angel is (positioning)

**Headline:** Frontend engineer with deep AI-tooling fluency — ships production React and builds custom Claude Code workflows.

**The wedge:** Most React devs treat Claude Code as a toy. Most AI tinkerers can't ship a real component library. Angel does both.

**Background arc:** Healthcare IT → Salesforce admin → Software Engineer at Village Medical (current). Leads React + TypeScript redesigns of patient-facing apps and the internal component library. In parallel, heavy day-to-day Claude Code user — custom slash commands, MCP integrations, agent workflows.

**Target roles:** Frontend / Product / AI-Native engineer, remote US, mid-level (1-3 yr SWE, broader IT background). Comp target $90-130K USD, floor $100K.

Full profile lives in `~/Projects/career-ops/config/profile.yml` and `~/Projects/career-ops/cv.md`. Read those before writing any copy.

## Design direction

**Aesthetic reference:** Vercel.com, Linear.app, Anthropic.com, Rauno.me, Paco.me, Brittany Chiang's v4.

**Principles:**
- Minimalist, content-first. Typography does the heavy lifting.
- Dark only. No light theme, no theme toggle. See `palette.html` for the full spec.
- Generous whitespace. Wide line-height. Long-form readable.
- **One** signature interaction detail (subtle cursor effect, scroll-driven element, command palette) — not a museum of effects.
- No hero video, no parallax stacks, no animated SVG mascots, no "Hi I'm Angel 👋" with a waving emoji.
- Monospace accents for technical content (kbd, inline code, metadata) — sparingly.

**What we are NOT building:**
- A WebGL/Three.js showcase. Reads as "junior trying hard" to senior frontend HMs. Angel's graphics range gets one line in About, not a hero.
- A flashy gradient/blob landing page.
- A blog-first site. (Writing is welcome but not the entry point.)
- A "projects" grid of unfinished side projects. Quality over quantity — 3-4 deep case studies beats 12 thumbnails.

## Information architecture

Five routes max. Keep it skimmable.

```
/                  → Landing. Name + one-line positioning + 3 case study cards + contact.
/projects          → Case study index (same 3-4 cards, expandable).
/projects/[slug]   → Individual case study (postmortem format).
/about             → Background arc, current role, what Angel is looking for.
/uses              → Optional. Tools, editor setup, Claude Code workflow. High signal for AI-native hiring.
```

Skip `/blog`, `/work` (use `/projects`), `/contact` (inline on `/`), and `/resume` (a chrono strip + Download CV link on `/about` covers it without duplicating content).

### What `/about` must include

Beyond the narrative paragraphs:

- **Chronological strip** — 3-4 rows, plain text, format: `year-range · company · role`. No bullets, no descriptions. Source from `~/Projects/career-ops/cv.md`.
- **Download CV (PDF)** — single plain-text link pointing at the PDF generated by career-ops (`generate-pdf.mjs` output). Don't style it as a button or hero CTA — one line, in flow.

## Case study format (CRITICAL)

Each case study reads like an engineering postmortem, not a marketing page. Structure:

1. **One-line summary** — what shipped, who it served, the measurable outcome.
2. **Context** — the constraint or problem. 2-3 sentences.
3. **Decisions** — 3-5 specific technical/design calls and why. Name the alternatives rejected.
4. **Outcome** — measurable result. Numbers when possible. Honest when not.
5. **What I'd do differently** — one paragraph. Signals seniority.

**Do not** include: tech stack badges, "challenges faced" sections, generic "I learned a lot" closers.

### The 3-4 case studies to write

Source material in `~/Projects/career-ops/cv.md` and `~/Projects/career-ops/modes/_profile.md` under "proof_points":

1. **Village Medical patient scheduling redesign** — React + TS rebuild of a patient-facing scheduling app. Lead with scope and UX decisions, not framework name-drops.
2. **Village Medical internal component library** — design-system ownership. This is the bullseye proof point for product/design-engineer roles. Show the API of one component, the migration story, governance model.
3. **Claude Code custom tooling** — slash commands, MCP integrations, agent workflows used day-to-day. This is the AI-native wedge. Show one concrete workflow with before/after time-on-task.
4. **(Optional) Gila River internal Electron apps** — older but quantified (100-150% productivity gains, 70% AD-script speedup). Frame as "how I got into engineering." Skip if it dilutes the frontend narrative; keep if it adds blue-collar engineering credibility.

## Tech stack recommendation

**Default:** Next.js 15 (App Router) + TypeScript + Tailwind v4 + MDX for case studies.

Why: it's the stack the bullseye companies ship. Using it is itself a signal.

**Deployment:** Self-hosted by Angel. Traefik is already configured and pointing at the domain. Do not propose Vercel, Netlify, Cloudflare Pages, or any managed host — the infra is in-house and stays that way. Build target should produce a standard Node server or static export that drops into the existing Traefik setup; ask Angel for specifics (container? bare Node? static `out/`?) before wiring CI.

**Alternatives considered:**
- Astro — better for static-heavy content sites, but Next.js signals stack alignment with target employers. Use Astro only if Angel wants to demonstrate range.
- Plain HTML/CSS — would actually be impressive ("I don't need a framework for this") but reads as contrarian unless the design carries it. Skip.

**Other choices:**
- `next/font` for self-hosted typography. Suggested pairing: Inter (UI) + JetBrains Mono / Geist Mono (code). Or splurge on a paid display face for the name only.
- `next-mdx-remote` or built-in MDX for case studies.
- `shiki` for code blocks (matches Vercel/Anthropic aesthetic better than Prism).
- View Transitions API for `/projects` → `/projects/[slug]` navigation. One signature detail.
- No CMS. Content lives in MDX files in-repo. Version-controlled, no DB.

## Tone and copy

Read `~/Projects/career-ops/modes/_profile.md` under "Writing Style" if it exists; otherwise extract style from `~/Projects/career-ops/writing-samples/` before drafting any user-facing copy.

Defaults if no samples found:
- First person, active voice. "I led", "I shipped", not "responsible for".
- Short sentences. Mix in a longer one for rhythm.
- Specific over abstract. "Cut p95 from 2.1s to 380ms" beats "improved performance."
- Zero corporate clichés: no "passionate", "results-oriented", "proven track record", "leveraged", "synergies", "cutting-edge."
- No emoji in copy. (Emoji on the page = wrong audience signal for these companies.)

## What "done" looks like for v1

- [ ] Site reachable at the domain through Angel's Traefik (deployment infra is his — agent does not touch it)
- [ ] `/` renders Name + positioning line + 3 case study cards + email contact
- [ ] 3 case studies fully written (not lorem ipsum)
- [ ] `/about` written, including chrono strip and Download CV link
- [ ] CV PDF generated via career-ops and served at a stable path (e.g. `/cv.pdf`)
- [ ] Open Graph image + favicon
- [ ] Lighthouse: 100/100/100/100 (this is table stakes for the audience)
- [ ] Site is responsive but designed desktop-first (hiring managers are on laptops)
- [ ] No analytics that block (Plausible or none — definitely not GA)

## What NOT to do

- Do not scaffold a Next.js project until Angel says go on the design direction.
- Do not write case study copy without first reading `~/Projects/career-ops/cv.md` and `~/Projects/career-ops/modes/_profile.md`.
- Do not invent metrics or experience. Pull only from CV + article-digest.md (if present).
- Do not add a "currently learning" or "tech stack" badge wall.
- Do not commit Angel's phone number, address, or any PII beyond name + email + LinkedIn + GitHub.
- Do not generate AI art for the OG image. A clean typographic OG card is the right move.

## Cross-references

- CV (source of truth): `~/Projects/career-ops/cv.md`
- Profile & narrative: `~/Projects/career-ops/config/profile.yml`, `~/Projects/career-ops/modes/_profile.md`
- Proof point details (if exists): `~/Projects/career-ops/article-digest.md`
- Writing samples (if exists): `~/Projects/career-ops/writing-samples/`