296 lines
11 KiB
HTML
296 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Portfolio Wireframe — Angel Mankel</title>
|
||
<style>
|
||
html, body { margin: 0; padding: 0; background: #fff; color: #000; font-family: ui-sans-serif, system-ui, sans-serif; }
|
||
body { padding: 40px 20px 120px; }
|
||
.page-meta { max-width: 1100px; margin: 0 auto 24px; font-size: 13px; color: #555; }
|
||
.page-meta h1 { font-size: 18px; margin: 0 0 4px; color: #000; }
|
||
.frame { max-width: 1100px; margin: 0 auto 80px; border: 2px solid #000; }
|
||
.frame-label { font-family: ui-monospace, monospace; font-size: 12px; background: #000; color: #fff; padding: 6px 10px; }
|
||
.frame-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
|
||
.box { border: 1px dashed #333; padding: 14px; font-size: 13px; line-height: 1.4; }
|
||
.box .tag { font-family: ui-monospace, monospace; font-size: 11px; color: #555; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
.row { display: flex; gap: 12px; }
|
||
.row > .box { flex: 1; }
|
||
.row.three > .box { flex: 1 1 0; }
|
||
.nav { display: flex; justify-content: space-between; align-items: center; }
|
||
.nav .links { display: flex; gap: 18px; font-family: ui-monospace, monospace; font-size: 12px; }
|
||
.tall { min-height: 140px; }
|
||
.taller { min-height: 220px; }
|
||
.small { font-size: 12px; color: #555; }
|
||
hr.divider { border: 0; border-top: 1px solid #ccc; margin: 60px 0; }
|
||
.legend { max-width: 1100px; margin: 0 auto 40px; font-size: 12px; color: #555; padding: 12px; border: 1px dashed #999; }
|
||
.legend code { background: #eee; padding: 1px 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="legend">
|
||
<strong>Wireframe legend.</strong> Solid black border = page viewport. Dashed border = a content region with a label.
|
||
No colors, no images, no real type. Purpose: agree on layout structure and flow before touching CSS.
|
||
Routes shown: <code>/</code>, <code>/projects</code>, <code>/projects/[slug]</code>, <code>/about</code>, <code>/uses</code>.
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<div class="page-meta">
|
||
<h1>Route: /</h1>
|
||
<div>Landing. Goal: in 60-120s, communicate who Angel is, what he ships, how to contact.</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="frame-label">VIEWPORT — /</div>
|
||
<div class="frame-body">
|
||
|
||
<div class="box nav">
|
||
<div><span class="tag">brand</span>Angel Mankel</div>
|
||
<div class="links">
|
||
<span>projects</span><span>about</span><span>uses</span><span>email</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box taller">
|
||
<span class="tag">hero — text only, no image</span>
|
||
Large name or wordmark. One-line positioning underneath: "Frontend engineer with deep AI-tooling fluency — ships production React and builds custom Claude Code workflows."
|
||
Below that, a secondary line linking to most recent case study or "Currently at Village Medical." No CTA buttons.
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">section heading</span>
|
||
"Selected projects" — small caps or monospace label. Single line.
|
||
</div>
|
||
|
||
<div class="row three">
|
||
<div class="box tall">
|
||
<span class="tag">case study card 1</span>
|
||
Title · one-line summary · year · outcome metric.
|
||
Whole card is clickable → /projects/[slug].
|
||
</div>
|
||
<div class="box tall">
|
||
<span class="tag">case study card 2</span>
|
||
Same shape as card 1. Three cards total, sometimes four.
|
||
</div>
|
||
<div class="box tall">
|
||
<span class="tag">case study card 3</span>
|
||
Same shape.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">contact strip</span>
|
||
Email · LinkedIn · GitHub. Plain text links, no icons-only treatment. Maybe a one-line "Open to remote-US roles."
|
||
</div>
|
||
|
||
<div class="box small nav">
|
||
<div><span class="tag">footer</span>© 2026 Angel Mankel</div>
|
||
<div>Self-hosted · Traefik · Next.js</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<div class="page-meta">
|
||
<h1>Route: /projects</h1>
|
||
<div>Case study index. Same cards as the landing, but full list. Optional filter (year or tag).</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="frame-label">VIEWPORT — /projects</div>
|
||
<div class="frame-body">
|
||
|
||
<div class="box nav">
|
||
<div><span class="tag">brand</span>Angel Mankel</div>
|
||
<div class="links"><span>projects</span><span>about</span><span>uses</span><span>email</span></div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">page heading</span>
|
||
"Projects" — single word. Optional one-line intro: "Selected projects, written as postmortems."
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">case study row 1</span>
|
||
Title · year · one-line summary · key metric. Full-width row, not a card grid (denser, more readable).
|
||
</div>
|
||
<div class="box">
|
||
<span class="tag">case study row 2</span>
|
||
Same shape.
|
||
</div>
|
||
<div class="box">
|
||
<span class="tag">case study row 3</span>
|
||
Same shape.
|
||
</div>
|
||
<div class="box">
|
||
<span class="tag">case study row 4 (optional)</span>
|
||
Same shape. Skip if it dilutes.
|
||
</div>
|
||
|
||
<div class="box small nav">
|
||
<div><span class="tag">footer</span>© 2026 Angel Mankel</div>
|
||
<div>Self-hosted · Traefik · Next.js</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<div class="page-meta">
|
||
<h1>Route: /projects/[slug]</h1>
|
||
<div>Individual case study. Postmortem format: context · decisions · outcome · what I'd do differently.</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="frame-label">VIEWPORT — /projects/[slug]</div>
|
||
<div class="frame-body">
|
||
|
||
<div class="box nav">
|
||
<div><span class="tag">brand</span>Angel Mankel</div>
|
||
<div class="links"><span>projects</span><span>about</span><span>uses</span><span>email</span></div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">case study header</span>
|
||
Project name (large). Below: role · year · stack · one-line outcome. No hero image.
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="box" style="flex: 0 0 200px;">
|
||
<span class="tag">sidebar (desktop only)</span>
|
||
Sticky table of contents: Context · Decisions · Outcome · Retrospective. Collapses above the body on mobile.
|
||
</div>
|
||
<div class="box taller" style="flex: 1;">
|
||
<span class="tag">long-form body (MDX)</span>
|
||
Section: <em>Context</em> — the constraint, 2-3 sentences.<br>
|
||
Section: <em>Decisions</em> — 3-5 specific calls with rejected alternatives.<br>
|
||
Section: <em>Outcome</em> — measurable result, honest when not.<br>
|
||
Section: <em>What I'd do differently</em> — one paragraph.<br>
|
||
Inline: code blocks (shiki), occasional pull-quote, optional simple diagram. No carousels.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">next/prev case study</span>
|
||
Two links: ← previous case study · next case study →. Keeps the reader in the work funnel.
|
||
</div>
|
||
|
||
<div class="box small nav">
|
||
<div><span class="tag">footer</span>© 2026 Angel Mankel</div>
|
||
<div>Self-hosted · Traefik · Next.js</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<div class="page-meta">
|
||
<h1>Route: /about</h1>
|
||
<div>Background arc. Who Angel is, what he's looking for. Long-form, first person.</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="frame-label">VIEWPORT — /about</div>
|
||
<div class="frame-body">
|
||
|
||
<div class="box nav">
|
||
<div><span class="tag">brand</span>Angel Mankel</div>
|
||
<div class="links"><span>projects</span><span>about</span><span>uses</span><span>email</span></div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">page heading</span>
|
||
"About" — single word.
|
||
</div>
|
||
|
||
<div class="box tall">
|
||
<span class="tag">narrative paragraph 1 — arc</span>
|
||
Healthcare IT → Salesforce admin → SWE at Village Medical. 3-5 sentences, first person, active voice.
|
||
</div>
|
||
|
||
<div class="box tall">
|
||
<span class="tag">narrative paragraph 2 — current work + AI wedge</span>
|
||
What Angel does day-to-day. React + TS leadership. Heavy Claude Code use. The "frontend engineer who actually uses AI to ship" framing.
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">narrative paragraph 3 — what I'm looking for</span>
|
||
One paragraph. Remote US, mid-level, AI-native or product-engineering. Names of companies he'd love to work with (optional but bold).
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">chronological strip</span>
|
||
Three or four rows, plain text. Each row: year-range · company · role. No bullets, no descriptions — the case studies and narrative carry the detail. Example:<br>
|
||
2024–present · Village Medical · Software Engineer<br>
|
||
2022–2024 · Village Medical · Salesforce Admin<br>
|
||
2019–2022 · Gila River · Help Desk / IT
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">download CV</span>
|
||
Single line: "Download CV (PDF)" link. Points at the PDF generated by career-ops. No fancy treatment.
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">contact strip</span>
|
||
Email · LinkedIn · GitHub. Same as landing.
|
||
</div>
|
||
|
||
<div class="box small nav">
|
||
<div><span class="tag">footer</span>© 2026 Angel Mankel</div>
|
||
<div>Self-hosted · Traefik · Next.js</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<div class="page-meta">
|
||
<h1>Route: /uses (optional)</h1>
|
||
<div>Tools, editor setup, Claude Code workflow. High-signal page for AI-native hiring managers.</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="frame-label">VIEWPORT — /uses</div>
|
||
<div class="frame-body">
|
||
|
||
<div class="box nav">
|
||
<div><span class="tag">brand</span>Angel Mankel</div>
|
||
<div class="links"><span>projects</span><span>about</span><span>uses</span><span>email</span></div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<span class="tag">page heading</span>
|
||
"Uses" — single word. One-line intro: "What I reach for daily."
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="box tall">
|
||
<span class="tag">section: hardware</span>
|
||
Plain list. Machine, monitors, keyboard. One line each.
|
||
</div>
|
||
<div class="box tall">
|
||
<span class="tag">section: editor & shell</span>
|
||
VS Code config highlights, terminal, font, theme.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="box tall">
|
||
<span class="tag">section: AI workflow</span>
|
||
Claude Code setup. Custom slash commands. MCP servers. One paragraph per workflow with the time saved.
|
||
This is the signal-dense section — give it the most space.
|
||
</div>
|
||
<div class="box tall">
|
||
<span class="tag">section: self-hosting</span>
|
||
Traefik, the box, whatever else runs on it. One-liners. This is where "self-hosted" lives without becoming the lede.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box small nav">
|
||
<div><span class="tag">footer</span>© 2026 Angel Mankel</div>
|
||
<div>Self-hosted · Traefik · Next.js</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|