Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CareerMatch AI | Rodrigo Pantoja</title> | |
| <meta name="description" content="Browser-only multilingual CV/job comparison with transparent lexical matching and skill gap analysis."> | |
| <style> | |
| :root{color-scheme:dark;--bg:#07121e;--panel:#0d1d2e;--panel2:#11253a;--stroke:#29415b;--text:#eff6ff;--muted:#a9c1d9;--a:#7aa7ff;--b:#60e0d6;--good:#55dec3;--danger:#ffb2b2} | |
| *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 85% 2%,#173456 0,transparent 35%),linear-gradient(135deg,#07111d,#091422);color:var(--text);font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh}main{max-width:1160px;margin:auto;padding:54px 22px 90px}h1{font-size:clamp(2.2rem,6vw,4.1rem);letter-spacing:-.04em;line-height:1.06;margin:4px 0 14px}h2{font-size:1.13rem;line-height:1.3;margin:0 0 16px}h3{margin:8px 0;font-size:1rem}.eyebrow{letter-spacing:.16em;font-weight:750;font-size:.73rem;color:#8dd7ff}.lead{max-width:830px;color:#c1d9f1;font-size:1.03rem}.pills{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 28px}.pill{font-size:.78rem;border:1px solid var(--stroke);border-radius:999px;padding:4px 9px;color:#bee5ff}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{background:rgba(12,28,46,.95);border:1px solid var(--stroke);border-radius:18px;padding:20px;min-width:0}.card.wide{grid-column:1/-1}textarea{width:100%;height:240px;resize:vertical;border:1px solid #35506b;background:#061523;border-radius:13px;padding:14px;color:white;font:inherit;line-height:1.45;outline-offset:2px}textarea:focus{outline:2px solid #568fea}button{background:#386dfa;border:1px solid transparent;border-radius:9px;color:white;font:700 14px system-ui;padding:12px 18px;cursor:pointer;transition:transform .12s,filter .12s}button:hover{filter:brightness(1.1)}button:active{transform:translateY(1px)}button.secondary{background:#20364d;border-color:#38506b}button:focus-visible{outline:2px solid #90c2ff;outline-offset:3px}.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:17px 0 6px}.note{color:var(--muted);font-size:.84rem}.file-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:11px}.file-line input{max-width:100%;font-size:.76rem}.file-help{margin-top:4px}.warning{border:1px solid #a06b40;background:#322414;padding:14px;border-radius:12px;color:#ffdcaa}.error{border:1px solid #a94351;background:#3a1e2b;padding:12px;border-radius:10px;color:#ffc5cf;margin-top:10px}.score{font-size:3.7rem;font-weight:800;letter-spacing:-.05em;line-height:1.1;color:#9ec3ff}.score-caption{font-weight:750;margin-bottom:10px}.small{font-size:.83rem;color:var(--muted)}.meter-line{margin:0 0 16px}.meter-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}.track{height:10px;border-radius:999px;background:#1b354d;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#4c78ff,#6ed9ec);border-radius:999px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tag{font-size:.81rem;padding:5px 10px;border:1px solid #385a74;border-radius:999px;background:#152b3c}.tag.match{border-color:#2d9f90;color:#b1fae7}.tag.miss{border-color:#96664d;color:#ffe0b7}.result-req{border-bottom:1px solid #2b4055;padding:11px 0}.result-req:last-child{border:0}.req-head{display:flex;gap:8px;align-items:center;justify-content:space-between}.req-kind{font-size:.73rem;color:#98d6fb}.req-text{color:#dbe9f8;font-size:.89rem}.req-evidence{font-size:.78rem;color:#a5cbe4}ul{padding-left:20px}li{margin:7px 0}.method{border-top:1px solid #2a465f;margin-top:24px;padding-top:18px;color:#acc6db;font-size:.82rem}footer{color:#8ba9c0;margin:26px 0;font-size:.78rem}a{color:#9dc6ff}.status{color:#91dbd0;font-size:.85rem}#results{margin-top:18px}#results[hidden]{display:none}.fullwidth{grid-column:1/-1}@media(max-width:780px){main{padding:30px 14px 60px}.grid{grid-template-columns:1fr}.card.wide{grid-column:auto}textarea{height:190px}} | |
| </style> | |
| </head> | |
| <body><main> | |
| <header> | |
| <div class="eyebrow">RODRIGO PANTOJA · APPLIED AI & NLP</div> | |
| <h1>🎯 CareerMatch AI</h1> | |
| <p class="lead">Understand how your CV aligns with a job description through <strong>transparent multilingual text analysis</strong>, skill-gap evidence and practical suggestions. No account or server required.</p> | |
| <div class="pills"><span class="pill">English · Español · Português</span><span class="pill">Browser-only analysis</span><span class="pill">Explainable lexical scoring</span><span class="pill">Privacy-first</span></div> | |
| </header> | |
| <div class="grid"> | |
| <section class="card"><h2>1. CV / résumé</h2><textarea id="cv" aria-label="CV text" placeholder="Paste your CV, résumé, or a short professional summary here…"></textarea><div class="file-line"><label for="cv-file" class="note">Optional .txt / .md file:</label><input id="cv-file" type="file" accept=".txt,.md,text/plain,text/markdown"></div><p class="note file-help">File text will be added to any text you have pasted.</p></section> | |
| <section class="card"><h2>2. Job description</h2><textarea id="job" aria-label="Job description text" placeholder="Paste a full job description, including required and preferred skills…"></textarea><div class="file-line"><label for="job-file" class="note">Optional .txt / .md file:</label><input id="job-file" type="file" accept=".txt,.md,text/plain,text/markdown"></div><p class="note file-help">For PDFs and DOCX, copy and paste the text into the boxes.</p></section> | |
| </div> | |
| <div class="controls"><button id="analyze">Analyze alignment</button><button id="sample" class="secondary">Load example</button><button id="clear" class="secondary">Clear</button><button id="export" class="secondary" hidden>Download report</button></div> | |
| <div id="status" class="status" role="status" aria-live="polite">Ready. Paste text or load an example.</div><div id="error" class="error" role="alert" hidden></div> | |
| <section id="results" hidden aria-label="Analysis results"> | |
| <div class="grid"> | |
| <article class="card"><h2>Evidence alignment overview</h2><div id="score" class="score"></div><div id="band" class="score-caption"></div><p class="small">This is a document-text alignment indicator, <strong>not</strong> a hiring probability or ATS score.</p><p id="language" class="small"></p></article> | |
| <article class="card"><h2>Component breakdown</h2><div id="bars"></div></article> | |
| <article class="card"><h2>Explicitly matched skills</h2><div id="matched" class="tags"></div><p class="small">Matched because terms from the documented skill taxonomy appear in both texts.</p></article> | |
| <article class="card"><h2>Missing or unmentioned skills</h2><div id="missing" class="tags"></div><p class="small">A missing term is NOT proof a person lacks that skill.</p></article> | |
| <article class="card"><h2>Job requirement evidence</h2><div id="requirements"></div></article> | |
| <article class="card"><h2>Recommendations</h2><ul id="recommendations"></ul><h3>Shared keywords</h3><div id="keywords" class="tags"></div></article> | |
| <article class="card wide"><h2>Methodology & responsible use</h2><p id="method" class="note"></p><div class="warning"><strong>Important limitations:</strong> There is no transformer model or generative AI running in this static edition. Multilingual word variation is handled using a curated alias list; comparisons outside the same language may have low lexical overlap. Requirement evidence is heuristic and may miss paraphrases. Never invent qualifications to improve a score. Do not treat this tool as an automated hiring decision.</div><p class="method">Text is processed in your browser and is not uploaded to an application server. However, your browser extensions, device and environment have their own privacy characteristics. Avoid confidential or sensitive hiring documents in demos.</p></article> | |
| </div> | |
| </section> | |
| <footer>Portfolio demonstration by Rodrigo Pantoja · Original Python/Gradio edition retains a multilingual embedding model and PDF/DOCX parsers. This cost-free Static Space is a separate transparent lexical baseline.</footer> | |
| </main><script src="engine.js"></script><script src="app.js"></script></body></html> | |