Loading…
Loading…
Portfolio Developer Kit
Write a theme in plain HTML and CSS using your verified One-Career data. Share it in the gallery, embed a verified card on your own site, and prove you own your domain and GitHub.
🎨
Design
Plain HTML + CSS with simple {{tags}}. Live preview in the studio.
🛡️
Safe
Sandboxed, no scripts, so visitors are always safe.
✅
Verified
Data is signed by One-Career, so anyone can check it.
🏆
Show off
Approved gallery themes become a verified project on your profile.
A tiny, Mustache-style language. Everything you print is escaped automatically.
{{name}}A value. Always HTML-escaped, so data can never inject code.
{{profile_url}}Any field from the table below.
{{#skills}} … {{/skills}}Repeat for every item in a list. Inside, use the item's fields: {{name}}, {{level}}.
{{#tags}}{{.}}{{/tags}}{{.}} is the current item when the list holds plain text.
{{#headline}} … {{/headline}}Show a block only when the value exists.
{{^projects}} … {{/projects}}Show a block only when the list is empty (e.g. “coming soon”).
{{issued_at|date}}Helpers: |date |month |year |level |upper |lower |initials |count |percent |join
<main class="page">
<header class="hero">
<div class="avatar">{{name|initials}}</div>
<h1>{{name}}</h1>
{{#headline}}<p class="headline">{{headline}}</p>{{/headline}}
{{#city}}<p class="place">{{city}}{{#country}}, {{country}}{{/country}}</p>{{/city}}
{{#bio}}<p class="bio">{{bio}}</p>{{/bio}}
</header>
<section class="card">
<h2>Skills</h2>
<ul class="chips">
{{#skills}}<li class="chip">{{#proven}}<span class="tick">✓</span>{{/proven}}{{name}} <small>{{level|level}}</small></li>{{/skills}}
</ul>
</section>
{{#projects}}
<article class="card project">
<h3>{{title}}</h3>
{{#tagline}}<p class="muted">{{tagline}}</p>{{/tagline}}
{{#description}}<p>{{description}}</p>{{/description}}
<p class="tags">{{#skills}}<span>{{.}}</span>{{/skills}}</p>:root{--ink:#14213d;--muted:#637089;--brand:#6d4cff;--paper:#f4f6fb}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.page{max-width:760px;margin:0 auto;padding:32px 16px}
.hero{text-align:center;padding:32px 16px}
.avatar{width:88px;height:88px;margin:0 auto;border-radius:28px;display:grid;place-items:center;font-weight:800;font-size:30px;color:#fff;background:linear-gradient(135deg,#0e9a80,#2c86f5,#6d4cff)}
h1{font-size:40px;margin:16px 0 4px}.headline{font-size:18px;margin:0}.place,.muted{color:var(--muted)}
.card{display:block;background:#fff;border:1px solid #e2e7f0;border-radius:18px;padding:20px;margin:16px 0;color:inherit;text-decoration:none}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #e2e7f0;border-radius:999px;padding:4px 12px}
.chip small{color:var(--muted)}.tick{color:#0e9a80;margin-right:4px}
.tags span{display:inline-block;background:#eeeaff;color:var(--brand);border-radius:999px;padding:2px 10px;margin:2px;font-size:13px}
a{color:var(--brand)}.cert small{color:var(--muted)}Only what you made public. Documents, pay, IDs and contacts are never included.
| Field | Type | What it holds |
|---|---|---|
| name | text | Full name |
| username | text | One-Career username |
| headline | text | empty | One-line headline |
| bio | text | empty | About you |
| city / country | text | empty | Location (country is a 2-letter code) |
| skills[] | list | name, level (1–4, use |level), proven (true when proven in a skill check), top |
| projects[] | list | title, tagline, description, role, start_date, end_date, ongoing, url, repo_url, skills[], highlights[], color, featured |
| certificates[] | list | serial, title, level, score, issued_at, expires_at, valid, verify_url — only current, unrevoked certificates |
| awards[] | list | title, issuer, awarded_on |
| proofs[] | list | kind (domain | github), target, method, verified_at — ownership you proved |
| progress | object | xp, best_streak |
| profile_url | url | Your public One-Career page |
| issued_at | date | When this data snapshot was signed |
🔒 No scripts
Themes are HTML + CSS only. <script>, event handlers (onclick=…), javascript: links, iframes, forms and @import are removed or refused.
🔒 Sandboxed
Your theme renders inside a sandboxed iframe with a strict Content-Security-Policy: no JavaScript, no access to the visitor's cookies, images and fonts over https only.
🔒 Real data only
Templates read the signed data from your account. You can style it, but you can't invent certificates or skills.
🔒 Verification can't be faked
We add a “✓ Verified by One-Career” footer and a verified top bar outside the frame. Themes can't hide or imitate them.
Build your own site with your verified data. Every response is signed; anyone can check the signature with us.
curl https://one-career.com/api/portfolio/<username>
{
"data": { "name": "…", "skills": [ … ], "certificates": [ … ], "issued_at": "…" },
"proof": { "alg": "HS256", "signature": "9f2c…" }
}const r = await fetch("https://one-career.com/api/portfolio/ananya");
const { data, proof } = await r.json();
const v = await fetch("https://one-career.com/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ data, signature: proof.signature }),
}).then((r) => r.json());
v.valid // true only if the data is exactly what One-Career signed
v.current // false if the person has since made their portfolio private<div data-one-career="<username>"></div>
<script src="https://one-career.com/embed.js" async></script>[](https://one-career.com/p/<username>)Add your domain or GitHub in the studio to get a personal token, put it in one of these places, then press “Check now”. Proven accounts show a ✓ on your portfolio, your verified card and in the signed data.
🌐 Your domain (any one)
yourname.dev TXT "one-career-verify=oc-1a2b3c…"https://yourname.dev/.well-known/one-career.txt
→ contains: oc-1a2b3c…<meta name="one-career-verify" content="oc-1a2b3c…">🐙 GitHub (any one)
Create a public gist whose description or
file contains: oc-1a2b3c…github.com/<you>/<you>/blob/main/one-career.txt
→ contains: oc-1a2b3c…You can remove the token after you're verified; we keep the record of when it was proven.
Submit your theme from the studio. After a quick review it appears in the public gallery with your @username, others can use it, and it's added to your profile as a verified project, which is real proof of your front-end skills.