192 lines
7.2 KiB
HTML
192 lines
7.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Portfolio Palette — Angel Mankel</title>
|
||
<style>
|
||
html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, sans-serif; background: #fff; color: #000; }
|
||
body { padding: 40px 20px 120px; }
|
||
.wrap { max-width: 1100px; margin: 0 auto; }
|
||
h1 { font-size: 22px; margin: 0 0 32px; }
|
||
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin: 48px 0 12px; color: #555; }
|
||
|
||
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
|
||
.swatch { border: 1px solid #000; overflow: hidden; font-family: ui-monospace, monospace; font-size: 11px; }
|
||
.swatch .chip { height: 100px; border-bottom: 1px solid #000; }
|
||
.swatch .meta { padding: 8px 10px; line-height: 1.4; }
|
||
.swatch .role { display: block; font-weight: 600; margin-bottom: 2px; }
|
||
.swatch .hex { display: block; color: #555; }
|
||
|
||
.stage { background: #0a0a0a; padding: 20px; margin-top: 16px; }
|
||
.stage + .stage { margin-top: 16px; }
|
||
.preview { background: #1c1c1c; color: #ededed; border: 1px solid #2e2e2e; padding: 28px; font-family: ui-sans-serif, system-ui, sans-serif; }
|
||
.preview + .preview { margin-top: 16px; }
|
||
.preview h3 { font-size: 22px; margin: 0 0 6px; font-weight: 600; }
|
||
.preview p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; }
|
||
.preview a { color: #d4a24a; text-decoration: underline; text-underline-offset: 3px; }
|
||
.preview .muted { color: #6b6b6b; }
|
||
.preview .nav { display: flex; justify-content: space-between; align-items: center; font-family: ui-monospace, monospace; font-size: 12px; }
|
||
.preview .nav .links { display: flex; gap: 18px; color: #6b6b6b; }
|
||
.preview .nav .links a { color: inherit; text-decoration: none; }
|
||
.preview hr { border: 0; border-top: 1px solid #2e2e2e; margin: 20px 0; }
|
||
.preview .chrono { font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.8; color: #ededed; }
|
||
.preview .chrono .y { color: #6b6b6b; margin-right: 14px; }
|
||
.preview .code { background: #0f0f0f; border: 1px solid #2e2e2e; padding: 14px 16px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; }
|
||
.preview .code .k { color: #d4a24a; }
|
||
.preview .code .c { color: #6b6b6b; }
|
||
.preview .case-meta { font-family: ui-monospace, monospace; font-size: 12px; color: #6b6b6b; margin-bottom: 18px; }
|
||
.preview .case-meta span + span::before { content: " · "; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
|
||
<h1>Palette — Angel Mankel portfolio</h1>
|
||
|
||
<!-- ============================================================ -->
|
||
<h2>Neutrals</h2>
|
||
|
||
<div class="row">
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #0a0a0a;"></div>
|
||
<div class="meta">
|
||
<span class="role">bg</span>
|
||
<span class="hex">#0a0a0a</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #1c1c1c;"></div>
|
||
<div class="meta">
|
||
<span class="role">bg-elevated</span>
|
||
<span class="hex">#1c1c1c</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #2e2e2e;"></div>
|
||
<div class="meta">
|
||
<span class="role">border</span>
|
||
<span class="hex">#2e2e2e</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #6b6b6b;"></div>
|
||
<div class="meta">
|
||
<span class="role">text-muted</span>
|
||
<span class="hex">#6b6b6b</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #ededed;"></div>
|
||
<div class="meta">
|
||
<span class="role">text</span>
|
||
<span class="hex">#ededed</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<h2>Accent</h2>
|
||
|
||
<div class="row">
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #d4a24a;"></div>
|
||
<div class="meta">
|
||
<span class="role">accent</span>
|
||
<span class="hex">#d4a24a</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<h2>Hover states</h2>
|
||
|
||
<div class="row">
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #262626;"></div>
|
||
<div class="meta">
|
||
<span class="role">bg-elevated · hover</span>
|
||
<span class="hex">#262626</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #3d3d3d;"></div>
|
||
<div class="meta">
|
||
<span class="role">border · hover</span>
|
||
<span class="hex">#3d3d3d</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #9a9a9a;"></div>
|
||
<div class="meta">
|
||
<span class="role">text-muted · hover</span>
|
||
<span class="hex">#9a9a9a</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #ffffff;"></div>
|
||
<div class="meta">
|
||
<span class="role">text · hover</span>
|
||
<span class="hex">#ffffff</span>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="chip" style="background: #e6b966;"></div>
|
||
<div class="meta">
|
||
<span class="role">accent · hover</span>
|
||
<span class="hex">#e6b966</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<h2>Previews</h2>
|
||
|
||
<div class="stage"><div class="preview">
|
||
<div class="nav">
|
||
<div><strong>Angel Mankel</strong></div>
|
||
<div class="links"><a href="#">projects</a><a href="#">about</a><a href="#">uses</a><a href="#">email</a></div>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="stage"><div class="preview">
|
||
<h3>Frontend engineer with deep AI-tooling fluency.</h3>
|
||
<p>I ship production React at Village Medical and build custom Claude Code workflows that make the day-to-day faster.</p>
|
||
<p><a href="#">See selected projects →</a></p>
|
||
</div></div>
|
||
|
||
<div class="stage"><div class="preview">
|
||
<h3>Village Medical — patient scheduling redesign</h3>
|
||
<div class="case-meta">
|
||
<span>Software Engineer</span><span>2024</span><span>React · TypeScript</span>
|
||
</div>
|
||
<p>Rebuilt the patient appointment scheduling app from a legacy Salesforce flow into a self-contained React surface used across clinics.</p>
|
||
<p><a href="#">Read the case study →</a></p>
|
||
</div></div>
|
||
|
||
<div class="stage"><div class="preview">
|
||
<div class="muted" style="font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px;">timeline</div>
|
||
<div class="chrono">
|
||
<div><span class="y">2024 – now</span>Village Medical · Software Engineer</div>
|
||
<div><span class="y">2022 – 2024</span>Village Medical · Salesforce Admin</div>
|
||
<div><span class="y">2019 – 2022</span>Gila River · Help Desk / IT</div>
|
||
</div>
|
||
<hr>
|
||
<p><a href="#">Download CV (PDF)</a></p>
|
||
</div></div>
|
||
|
||
<div class="stage"><div class="preview">
|
||
<div class="code">
|
||
<span class="c">// custom Claude Code slash command</span>
|
||
<span class="k">export default</span> {
|
||
name: <span class="k">'review'</span>,
|
||
run: <span class="k">async</span> (ctx) => {
|
||
<span class="k">await</span> ctx.runDiffReview()
|
||
}
|
||
}
|
||
</div>
|
||
</div></div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|