cesnimda
aa19edbc49
"See it in action" section showing the dashboard, pipeline board and per-job workspace. Uses the design-mockup SVGs (small + crisp, ~27KB total) served from public/mockups/, honestly captioned "Interface preview". Verified live: all three render at "/". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
103 lines
10 KiB
XML
103 lines
10 KiB
XML
<svg width="1440" height="900" viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg" font-family="Inter, 'Segoe UI', system-ui, sans-serif">
|
||
<defs>
|
||
<linearGradient id="ac" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#22d3ee"/></linearGradient>
|
||
<filter id="c" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#1e293b" flood-opacity="0.10"/></filter>
|
||
</defs>
|
||
<rect width="1440" height="900" fill="#f4f6fb"/>
|
||
|
||
<!-- top bar -->
|
||
<g transform="translate(48,40)">
|
||
<text x="0" y="16" fill="#94a3b8" font-size="14">Pipeline / Waiting /</text>
|
||
<text x="0" y="52" fill="#0f172a" font-size="30" font-weight="800">Platform Engineer</text>
|
||
<text x="330" y="52" fill="#64748b" font-size="18">· Finn.no</text>
|
||
<rect x="0" y="70" width="112" height="30" rx="15" fill="#fef9c3"/><text x="56" y="90" fill="#854d0e" font-size="13" text-anchor="middle">● Waiting</text>
|
||
<text x="128" y="90" fill="#94a3b8" font-size="14">Oslo · 780–920k NOK · Applied 5 days ago</text>
|
||
</g>
|
||
|
||
<!-- tabs -->
|
||
<g transform="translate(48,148)" font-size="14">
|
||
<text x="0" y="0" fill="#4338ca" font-weight="700">Overview</text><rect x="-4" y="10" width="66" height="3" rx="2" fill="#6366f1"/>
|
||
<text x="90" y="0" fill="#64748b">Correspondence</text>
|
||
<text x="230" y="0" fill="#64748b">Attachments</text>
|
||
<text x="352" y="0" fill="#64748b">Candidate Fit</text>
|
||
<text x="470" y="0" fill="#64748b">Timeline</text>
|
||
</g>
|
||
|
||
<!-- left: summary + description -->
|
||
<g transform="translate(48,180)" filter="url(#c)">
|
||
<rect width="600" height="300" rx="14" fill="#fff"/>
|
||
<text x="24" y="40" fill="#0f172a" font-size="17" font-weight="700">AI summary</text>
|
||
<rect x="480" y="24" width="96" height="26" rx="13" fill="#eef2ff"/><text x="528" y="41" fill="#4338ca" font-size="12" text-anchor="middle">↻ regenerate</text>
|
||
<text x="24" y="72" fill="#475569" font-size="14">Platform team building internal developer tooling on Kubernetes.</text>
|
||
<text x="24" y="96" fill="#475569" font-size="14">Owns CI/CD, observability, and cloud cost. Strong Go + Terraform</text>
|
||
<text x="24" y="120" fill="#475569" font-size="14">focus; hybrid, 2 days in Oslo office.</text>
|
||
<line x1="24" y1="146" x2="576" y2="146" stroke="#eef2f7"/>
|
||
<text x="24" y="178" fill="#0f172a" font-size="15" font-weight="700">Next action</text>
|
||
<rect x="24" y="192" width="552" height="52" rx="10" fill="#fff7ed"/><circle cx="46" cy="218" r="6" fill="#f59e0b"/>
|
||
<text x="66" y="214" fill="#0f172a" font-size="14" font-weight="600">Follow up on application status</text>
|
||
<text x="66" y="234" fill="#94a3b8" font-size="12">Due in 2 days · draft prepared from your last email</text>
|
||
<rect x="452" y="202" width="112" height="32" rx="8" fill="#0f172a"/><text x="508" y="223" fill="#fff" font-size="13" text-anchor="middle">Review draft</text>
|
||
<text x="24" y="278" fill="#64748b" font-size="13">Skills detected: Go · Kubernetes · Terraform · AWS · CI/CD</text>
|
||
</g>
|
||
|
||
<!-- left lower: correspondence -->
|
||
<g transform="translate(48,500)" filter="url(#c)">
|
||
<rect width="600" height="358" rx="14" fill="#fff"/>
|
||
<text x="24" y="40" fill="#0f172a" font-size="17" font-weight="700">Correspondence</text>
|
||
<rect x="410" y="22" width="166" height="28" rx="8" fill="#eef2ff"/><text x="493" y="41" fill="#4338ca" font-size="12" text-anchor="middle">Linked Gmail thread ✓</text>
|
||
<g transform="translate(24,58)">
|
||
<rect width="552" height="82" rx="10" fill="#f8fafc"/><circle cx="26" cy="26" r="14" fill="#6366f1"/><text x="26" y="31" fill="#fff" font-size="12" text-anchor="middle" font-weight="700">R</text>
|
||
<text x="52" y="24" fill="#0f172a" font-size="14" font-weight="600">Recruiter · Finn.no</text><text x="530" y="24" fill="#94a3b8" font-size="12" text-anchor="end">5d ago</text>
|
||
<text x="52" y="46" fill="#64748b" font-size="13">Thanks for applying! We're reviewing and will be in touch</text><text x="52" y="64" fill="#64748b" font-size="13">within two weeks.</text>
|
||
</g>
|
||
<g transform="translate(24,150)">
|
||
<rect width="552" height="70" rx="10" fill="#eef2ff"/><circle cx="26" cy="26" r="14" fill="#0f172a"/><text x="26" y="31" fill="#fff" font-size="12" text-anchor="middle" font-weight="700">You</text>
|
||
<text x="52" y="24" fill="#0f172a" font-size="14" font-weight="600">You · sent reply</text><text x="530" y="24" fill="#94a3b8" font-size="12" text-anchor="end">5d ago</text>
|
||
<text x="52" y="46" fill="#64748b" font-size="13">Thank you — looking forward to hearing about next steps.</text>
|
||
</g>
|
||
<rect x="24" y="234" width="552" height="46" rx="10" fill="#f0fdf4"/><text x="40" y="262" fill="#166534" font-size="13">↻ Thread auto-refreshes — new replies appear here without re-importing</text>
|
||
<line x1="24" y1="298" x2="576" y2="298" stroke="#eef2f7"/>
|
||
<rect x="24" y="312" width="440" height="34" rx="8" fill="#f1f5f9"/><text x="40" y="334" fill="#94a3b8" font-size="13">Draft a grounded follow-up…</text>
|
||
<rect x="476" y="312" width="100" height="34" rx="8" fill="url(#ac)"/><text x="526" y="334" fill="#0b1020" font-size="13" text-anchor="middle" font-weight="700">AI draft</text>
|
||
</g>
|
||
|
||
<!-- right: match + attachments + tailor -->
|
||
<g transform="translate(672,180)" filter="url(#c)">
|
||
<rect width="720" height="300" rx="14" fill="#fff"/>
|
||
<text x="28" y="40" fill="#0f172a" font-size="17" font-weight="700">Candidate fit — keyword coverage</text>
|
||
<circle cx="110" cy="150" r="64" fill="none" stroke="#e2e8f0" stroke-width="16"/>
|
||
<circle cx="110" cy="150" r="64" fill="none" stroke="#22c55e" stroke-width="16" stroke-linecap="round" stroke-dasharray="309 402" transform="rotate(-90 110 150)"/>
|
||
<text x="110" y="146" fill="#0f172a" font-size="34" font-weight="800" text-anchor="middle">77%</text>
|
||
<text x="110" y="172" fill="#64748b" font-size="12" text-anchor="middle">coverage</text>
|
||
<text x="110" y="238" fill="#94a3b8" font-size="12" text-anchor="middle">deterministic · explainable</text>
|
||
<g transform="translate(230,72)" font-size="13">
|
||
<text x="0" y="0" fill="#166534" font-weight="700">Matched</text>
|
||
<g><rect x="0" y="12" width="80" height="26" rx="13" fill="#dcfce7"/><text x="40" y="29" fill="#166534" text-anchor="middle">AWS</text></g>
|
||
<g><rect x="88" y="12" width="84" height="26" rx="13" fill="#dcfce7"/><text x="130" y="29" fill="#166534" text-anchor="middle">CI/CD</text></g>
|
||
<g><rect x="180" y="12" width="110" height="26" rx="13" fill="#dcfce7"/><text x="235" y="29" fill="#166534" text-anchor="middle">Terraform</text></g>
|
||
<g><rect x="300" y="12" width="70" height="26" rx="13" fill="#dcfce7"/><text x="335" y="29" fill="#166534" text-anchor="middle">Go</text></g>
|
||
<text x="0" y="78" fill="#991b1b" font-weight="700">Missing — add if you have it</text>
|
||
<g><rect x="0" y="90" width="118" height="26" rx="13" fill="#fee2e2"/><text x="59" y="107" fill="#991b1b" text-anchor="middle">Kubernetes ✕</text></g>
|
||
<g><rect x="126" y="90" width="96" height="26" rx="13" fill="#fee2e2"/><text x="174" y="107" fill="#991b1b" text-anchor="middle">Grafana ✕</text></g>
|
||
<rect x="0" y="132" width="220" height="42" rx="10" fill="url(#ac)"/><text x="110" y="159" fill="#0b1020" font-size="14" font-weight="700" text-anchor="middle">✨ Tailor my CV for this role</text>
|
||
<rect x="234" y="132" width="150" height="42" rx="10" fill="none" stroke="#cbd5e1"/><text x="309" y="159" fill="#475569" font-size="14" text-anchor="middle">Keep original</text>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- attachments -->
|
||
<g transform="translate(672,500)" filter="url(#c)">
|
||
<rect width="720" height="358" rx="14" fill="#fff"/>
|
||
<text x="28" y="40" fill="#0f172a" font-size="17" font-weight="700">Attachments</text>
|
||
<rect x="560" y="22" width="132" height="30" rx="8" fill="#eef2ff"/><text x="626" y="42" fill="#4338ca" font-size="12" text-anchor="middle">⤒ Drop files</text>
|
||
<g transform="translate(28,60)">
|
||
<g><rect width="330" height="88" rx="12" fill="#f8fafc" stroke="#e2e8f0"/><rect x="16" y="20" width="40" height="48" rx="6" fill="#6366f1"/><text x="36" y="49" fill="#fff" font-size="11" text-anchor="middle">CV</text><text x="70" y="38" fill="#0f172a" font-size="14" font-weight="600">CV_Platform_v3.pdf</text><text x="70" y="60" fill="#94a3b8" font-size="12">Tailored · 214 KB · submitted</text><rect x="70" y="66" width="70" height="16" rx="8" fill="#dcfce7"/></g>
|
||
<g transform="translate(350,0)"><rect width="330" height="88" rx="12" fill="#f8fafc" stroke="#e2e8f0"/><rect x="16" y="20" width="40" height="48" rx="6" fill="#22d3ee"/><text x="36" y="49" fill="#083344" font-size="10" text-anchor="middle">DOC</text><text x="70" y="38" fill="#0f172a" font-size="14" font-weight="600">Cover_Letter.pdf</text><text x="70" y="60" fill="#94a3b8" font-size="12">AI-assisted · 98 KB</text></g>
|
||
<g transform="translate(0,104)"><rect width="330" height="88" rx="12" fill="#f8fafc" stroke="#e2e8f0"/><rect x="16" y="20" width="40" height="48" rx="6" fill="#f59e0b"/><text x="36" y="49" fill="#fff" font-size="10" text-anchor="middle">PNG</text><text x="70" y="38" fill="#0f172a" font-size="14" font-weight="600">Portfolio.png</text><text x="70" y="60" fill="#94a3b8" font-size="12">1.2 MB</text></g>
|
||
<g transform="translate(350,104)"><rect width="330" height="88" rx="12" fill="#fff" stroke="#cbd5e1" stroke-dasharray="5 5"/><text x="165" y="44" fill="#94a3b8" font-size="13" text-anchor="middle">Drag & drop or click</text><text x="165" y="64" fill="#cbd5e1" font-size="12" text-anchor="middle">resume · cover letter · portfolio</text></g>
|
||
</g>
|
||
<line x1="28" y1="268" x2="692" y2="268" stroke="#eef2f7"/>
|
||
<text x="28" y="300" fill="#0f172a" font-size="14" font-weight="700">Checklist</text>
|
||
<g font-size="13" transform="translate(28,320)"><text x="0" y="0" fill="#16a34a">✓ Resume</text><text x="110" y="0" fill="#16a34a">✓ Cover letter</text><text x="250" y="0" fill="#16a34a">✓ Portfolio</text><text x="370" y="0" fill="#cbd5e1">○ References</text></g>
|
||
</g>
|
||
</svg>
|
