143 lines
8.8 KiB
Markdown
143 lines
8.8 KiB
Markdown
# 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/`
|