portfolio/docs/CLAUDE.md

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/