site/index.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hired — the Applicant’s Tracking System</title>
<meta name="description" content="We are building the ATS for Applicants. Every company you apply to runs on an ATS; theirs keeps a record on you. This one keeps the record on them. Free to self-host.">
<link rel="alternate" type="application/rss+xml" title="Hired resources" href="https://hired.tools/feed.xml">
<link rel="canonical" href="https://hired.tools/">
<meta name="theme-color" content="#f9f9fa">
<meta property="og:title" content="Hired — the Applicant’s Tracking System">
<meta property="og:description" content="We are building the ATS for Applicants. Theirs keeps a record on you; this one keeps the record on them — what you've done, what you sent where, and who still owes you an answer.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://hired.tools/">
<meta property="og:site_name" content="Hired">
<meta property="og:image" content="https://hired.tools/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Hired — the Applicant’s Tracking System.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://hired.tools/og.png">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='15' fill='%23F4F5F6'/%3E%3Crect x='16' y='17' width='13' height='7' rx='1.5' fill='%23191A1E'/%3E%3Crect x='16' y='28.5' width='22.5' height='7' rx='1.5' fill='%23191A1E'/%3E%3Crect x='16' y='40' width='32' height='7' rx='1.5' fill='%23191A1E'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Hired","url":"https://hired.tools/","applicationCategory":"BusinessApplication","operatingSystem":"Web, Docker","description":"An applicant tracking system, for applicants. A record of your career, a resume builder and job-search CRM you self-host or have hosted.","offers":[{"@type":"Offer","price":"0","priceCurrency":"USD","name":"Self-host"},{"@type":"Offer","price":"12","priceCurrency":"USD","name":"Hosted, monthly","availability":"https://schema.org/PreOrder"},{"@type":"Offer","price":"120","priceCurrency":"USD","name":"Hosted, yearly","availability":"https://schema.org/PreOrder"}],"publisher":{"@type":"Organization","name":"Shifu Labs","url":"https://shifulab.com"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What does it cost?","acceptedAnswer":{"@type":"Answer","text":"$12 a month, or $120 a year — two months off for paying up front. Cancel whenever you like: stop paying and your workspace is suspended, not deleted. It is also free forever if you run it on your own machine, which is the same software rather than a cut-down one, and it is why nobody can take this away from you — including me."}},{"@type":"Question","name":"Will it invent things to put on my resume?","acceptedAnswer":{"@type":"Answer","text":"No, and that's the rule the whole thing is built on. Every connected assistant is told, in writing, never to invent an employer, a date, a title or a number. If a posting wants something you haven't got, it says so and asks you rather than filling the gap. There's a section above showing exactly what that refusal looks like."}},{"@type":"Question","name":"Do I have to talk to an AI to use it?","acceptedAnswer":{"@type":"Answer","text":"No. Everything has a screen: Me, the resume editor, the board, the contacts. Talking to it is faster for the boring parts — logging what happened, moving a card, tailoring a resume — and the two are the same data, so you can do a thing by hand and ask about it a minute later."}},{"@type":"Question","name":"Will the PDF get through an ATS?","acceptedAnswer":{"@type":"Answer","text":"The document is real text in a real page, not an image, and the default template is a faithful port of the Harvard OCS format — everything one size, no colour, no columns. The PDF is rendered from that same page, so what you see is what gets parsed."}},{"@type":"Question","name":"Who can see my stuff?","acceptedAnswer":{"@type":"Answer","text":"You. Every workspace is private, including from whoever runs the instance — admins manage accounts, never content, and that's enforced in the code rather than by policy. The one exception is a resume you deliberately publish as a link, and you choose when that happens and can unpublish it."}}]}</script>
<link rel="stylesheet" href="styles.css">
<style>
/* An <svg> with no width/height attribute has no intrinsic size and
falls back to 300x150. Inline so it holds even if styles.css is
slow, blocked or missing — the page degrades to small icons rather
than a screenful of giant ones. */
svg:not([width]) { width: 1em; height: 1em; }
</style>
<script>
/* Somebody already signed in at app.hired.tools does not need the pitch.
Signing in leaves a flag on hired.tools — the domain both hosts sit under —
which says that a session exists and nothing else; the session itself never
leaves the app, and this cannot read it. Blocking and first in the head, so
nobody watches the landing page paint on its way past.
Three ways to stay here anyway: arrive from the app, arrive on a deep link
(#pricing, or anything with a query), or have been sent once already in
this tab. That last one is the escape hatch — ask for hired.tools a second
time and you get it — and it is needed because a navigation started this
early replaces the history entry rather than adding one, so Back leads
wherever you were before, not to a landing page you never saw. A replace is
what a browser would do here whatever we called it; saying so is honest,
and it leaves nothing in history that would bounce forward again. */
(function () {
var APP = "https://app.hired.tools/";
try {
if (!/(?:^|;\s*)hired_signed_in=1(?:;|$)/.test(document.cookie)) return;
if (location.hash || location.search) return;
if (document.referrer.slice(0, APP.length) === APP) return;
if (sessionStorage.getItem("hired:sent")) return;
sessionStorage.setItem("hired:sent", "1");
location.replace(APP);
} catch (e) {
/* Cookies or storage refused. Staying is the right failure. */
}
})();
</script>
<script>
/* Opts the page into being animated. Without this — scripting off, or the
stylesheet arriving before motion.js — nothing is hidden and the page is
simply finished. */
document.documentElement.className += " js";
</script>
</head>
<body>
<!-- ==========================================================================
Icons. Lucide geometry, drawn once, referenced everywhere — the same set
the app itself uses, so the mocks below are wearing the product's icons
rather than approximations of them.
========================================================================== -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<defs>
<g id="i-dash" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></g>
<g id="i-me" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></g>
<g id="i-me" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></g>
<g id="i-file" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/></g>
<g id="i-building" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4M10 10h4M10 14h4M10 18h4"/></g>
<g id="i-kanban" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5v11"/><path d="M12 5v6"/><path d="M18 5v14"/></g>
<g id="i-target" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></g>
<g id="i-trend" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></g>
<g id="i-flame" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/></g>
<g id="i-pin" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></g>
<g id="i-money" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></g>
<g id="i-clock" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></g>
<g id="i-chat" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></g>
<g id="i-search" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></g>
<g id="i-right" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></g>
<g id="i-check" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></g>
<g id="i-no" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></g>
<g id="i-link" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><path d="M8 12h8"/></g>
<g id="i-out" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></g>
<g id="i-term" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><path d="M12 19h8"/></g>
<g id="i-zap" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14Z"/></g>
<g id="i-lock" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>
<g id="i-down" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><path d="M12 15V3"/></g>
<g id="i-layers" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m6.08 10.37-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59"/></g>
<g id="i-sparkle" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0Z"/></g>
<g id="i-gh"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.42 7.42 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></g>
<!-- Shifu Labs: the studio mark, and the studio's social set. Taken from
shifulab.com so the two sites are wearing the same identity. -->
<g id="i-shifu"><path fill="currentColor" d="M61 2L35 2L35 94L61 94ZM94.34 36.26L81.34 13.74L1.66 59.74L14.66 82.26ZM81.34 82.26L94.34 59.74L14.66 13.74L1.66 36.26Z"/></g>
<g id="i-in" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></g>
<g id="i-ig" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><path d="M17.5 6.5h.01"/></g>
<g id="i-x"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z"/></g>
</defs>
</svg>
<div class="progress" role="presentation"></div>
<header class="nav">
<!-- A floating capsule rather than an edge-to-edge bar. Full width put the
links 600px from the brand and left 42% of the row empty; a contained
pill has no void to leave. Three grid tracks (1fr auto 1fr) put the links
on the true centre of the pill no matter how wide the two ends grow. -->
<div class="nav-rail">
<div class="nav-inner">
<a class="brand" href="/" aria-label="Hired, home">
<!-- The flat mark is what ships. motion.js builds the extruded one
beside it and hides this; with scripting off this is the mark. -->
<span class="mark3d" data-mark3d="24">
<svg width="24" height="24" viewBox="0 0 64 64" aria-hidden="true">
<rect width="64" height="64" rx="15" fill="var(--brand-tile, #191A1E)"/>
<rect x="16" y="17" width="13" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
<rect x="16" y="28.5" width="22.5" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
<rect x="16" y="40" width="32" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
</svg>
</span>
Hired
</a>
<nav class="nav-links" aria-label="Main">
<a class="link" href="#features">Features</a>
<a class="link" href="#pricing">Pricing</a>
<a class="link" href="https://docs.hired.tools">Docs</a>
<a class="link" href="/resources/">Resources</a>
</nav>
<div class="nav-acts">
<a class="gh" href="https://github.com/shifulaboratories/Hired" rel="noopener" aria-label="Hired on GitHub" title="Hired on GitHub">
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><use href="#i-gh"/></svg>
</a>
<a class="link nav-login" href="https://app.hired.tools/login">Log in</a>
<a class="btn btn-primary btn-sm" data-magnet href="/coming-soon/">Get started</a>
</div>
<!-- The small-screen menu is a <details>, so it opens, closes and takes
focus with no JavaScript at all. The links used to simply vanish below
720px, which left the nav with nowhere to go but the CTA. -->
<details class="nav-menu">
<summary aria-label="Menu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</summary>
<div class="nav-sheet">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="https://docs.hired.tools">Docs</a>
<a href="/resources/">Resources</a>
<a href="https://github.com/shifulaboratories/Hired" rel="noopener">GitHub</a>
<hr class="fold">
<a href="https://app.hired.tools/login">Log in</a>
<a class="btn btn-primary btn-sm" data-magnet href="/coming-soon/">Get started</a>
</div>
</details>
</div>
</div>
</header>
<main>
<!-- ==========================================================================
HERO — the conversation, and the document that came out of it.
The two panels are the argument: you say a sentence on the left, and the
thing on the right is what exists afterwards. Every tool named in the
transcript is real and callable; the resume is the app's Harvard template,
rendered by the same rules as the product.
========================================================================== -->
<section class="hero">
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-glow" aria-hidden="true"></div>
<div class="wrap">
<div class="hero-lead">
<h1 class="h-display hero-copy" data-words>
<span class="accent">Applicant’s</span> Tracking System
</h1>
<p class="lede" data-reveal style="--i:1">
Every company you apply to runs software that keeps a record on you. This is the one
that keeps the record on them — what you’ve actually done, what you sent
where, and who still owes you an answer.
</p>
<!-- The primary action on the page. Posts to the instance; see motion.js. -->
<form class="joinform mid" id="join" data-join data-reveal style="--i:2; margin-top:26px" novalidate>
<div class="joinform-row">
<label class="sr-only" for="join-hero">Your email address</label>
<input id="join-hero" type="email" name="email" autocomplete="email"
placeholder="you@example.com" required>
<input class="hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
<button class="btn btn-primary" data-magnet="4" type="submit">
Request access
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
</button>
</div>
<p class="joinform-said" role="status" aria-live="polite"></p>
</form>
<p class="hero-who" data-reveal style="--i:3">
For anyone with a job search and no system for it — and for the ones who keep
one and are tired of doing it by hand.
</p>
<p class="hero-note" data-reveal style="--i:4">
<span class="works">
Works inside
<span class="c"><img class="mark" src="media/clients/claude.png" alt="" width="16" height="16" decoding="async">Claude</span>
<span class="c"><img class="mark" src="media/clients/chatgpt.png" alt="" width="16" height="16" decoding="async">ChatGPT</span>
<span class="c"><img class="mark" src="media/clients/cursor.png" alt="" width="16" height="16" decoding="async">Cursor</span>
</span>
</p>
</div>
<div class="stage">
<!-- Left: what you say. -->
<div class="panel" data-reveal="left" style="--i:5">
<div class="panel-head">
<span class="eyebrow">Claude · connected to Hired</span>
<span class="dotline" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<div class="tape" data-tape>
<div class="turn you" data-step="1" data-pause="420">
<div class="who">You</div>
<div class="said" data-type>Closed the Meridian rollout this week — three regions, two days early, churn flat. File it.</div>
</div>
<div class="turn" data-step="2" data-pause="620">
<div class="who">Hired</div>
<div>
<div class="said" data-type>Filed to VP Operations at Meridian. That's the strongest delivery metric on this role, so I drafted a highlight from it too.</div>
<div class="calls">
<span class="call" style="--i:0"><i></i>append_role_background</span>
<span class="call" style="--i:1"><i></i>create_highlights</span>
</div>
</div>
</div>
<div class="turn you" data-step="3" data-pause="420">
<div class="who">You</div>
<div class="said" data-type>Tailor it to this posting and give me a link I can paste into the form.</div>
</div>
<div class="turn" data-step="4">
<div class="who">Hired</div>
<div>
<div class="said" data-type>Done — one page, built on eleven highlights across three roles. Two requirements had no evidence on file, so they are not on it.</div>
<div class="calls">
<span class="call" style="--i:0"><i></i>search_me</span>
<span class="call" style="--i:1"><i></i>duplicate_resume</span>
<span class="call" style="--i:2"><i></i>preview_resume_text</span>
<span class="call" style="--i:3"><i></i>publish_resume</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right: what exists afterwards. -->
<figure class="frame shot" data-shot="hero-resume" data-alt="A resume open in Hired" data-reveal="right" style="--i:6">
<div class="frame-bar">
<span class="frame-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="frame-url"><span>hired.tools/r/ops-director-k7m2qx</span></span>
</div>
<div style="padding:20px; background:var(--canvas)">
<div class="sheet sheet-crop">
<div class="paper">
<div class="center">
<div class="rp-name">Dana Whitfield</div>
<div class="rule" style="margin-top:0.28em"></div>
<div class="contacts">
<span>Chicago, IL<span style="margin-left:.42em">•</span></span>
<span>dana@example.com<span style="margin-left:.42em">•</span></span>
<span>(312) 555-0148</span>
</div>
</div>
<section>
<div class="rp-sec">Experience</div>
<div class="rule"></div>
<article style="margin-top:0.35em">
<div class="entry"><b>Meridian Logistics</b><span>Chicago, IL</span></div>
<div class="entry"><b>VP, Operations</b><span>2023 – Present</span></div>
<ul>
<li>Delivered a three-region platform rollout two days ahead of schedule with churn flat through the transition.</li>
<li>Rebuilt the carrier scorecard, cutting late deliveries 31% across 40 lanes.</li>
<li>Grew the ops org from 14 to 38 without raising cost per shipment.</li>
</ul>
</article>
<article style="margin-top:0.45em">
<div class="entry"><b>Northbeam Freight</b><span>Chicago, IL</span></div>
<div class="entry"><b>Director of Operations</b><span>2019 – 2023</span></div>
<ul>
<li>Consolidated four regional dispatch desks into one, saving $2.1M a year.</li>
<li>Took on-time pickup from 82% to 96% over six quarters.</li>
</ul>
</article>
</section>
<section>
<div class="rp-sec">Education</div>
<div class="rule"></div>
<div class="entry" style="margin-top:0.35em"><b>University of Illinois</b><span>Urbana, IL</span></div>
<div class="entry"><span>B.S. in Industrial Engineering</span><span>2015 – 2019</span></div>
</section>
</div>
</div>
</div>
</figure>
</div>
</div>
</section>
<div class="wrap"><hr class="fold" style="margin-top:24px"></div>
<!-- ==========================================================================
THE PROBLEM, AND THE SHAPE OF THE ANSWER
========================================================================== -->
<section class="band">
<div class="wrap">
<div class="why">
<div class="section-head" data-reveal>
<p class="eyebrow">Why it exists</p>
<h2 class="h-section">They keep a file on you. You keep it all <span class="accent">in your head</span>.</h2>
<p class="lede">
The moment you apply you are inside software that has been keeping score since the
first thing you ever sent in: what you applied for, when, which version of your
resume went with it, and what the recruiter wrote about you afterwards. You never
see any of it. On your side there is a resume rebuilt from memory every time, a
spreadsheet you stopped updating in March, and three years of work you can no
longer describe in any detail. People lose jobs to that gap far more often than
they lose them to a better candidate.
</p>
</div>
<!-- The two files, as objects. Theirs sits further back and is thicker and
fuller; yours is in front, thin and half empty. They are on one
preserve-3d stage at different depths, so tilting the stage moves them
past each other — the parallax is what makes them read as two things in
a space rather than two rectangles on a page.
Decoration, and marked as such: everything it says is said in the
paragraph beside it. -->
<div class="files" data-tilt="9" data-reveal="scale" style="--i:1" aria-hidden="true">
<div class="files-stage">
<div class="file file-theirs">
<p class="file-cap">
<svg width="12" height="12" viewBox="0 0 24 24"><use href="#i-lock"/></svg>
Their file on you
</p>
<div class="file-rows">
<span style="--w:100%; --i:0"></span>
<span style="--w:84%; --i:1"></span>
<span style="--w:95%; --i:2"></span>
<span style="--w:72%; --i:3"></span>
<span style="--w:100%; --i:4"></span>
<span style="--w:88%; --i:5"></span>
<span style="--w:96%; --i:6"></span>
<span style="--w:64%; --i:7"></span>
<span style="--w:92%; --i:8"></span>
<span style="--w:78%; --i:9"></span>
</div>
<p class="file-foot">6 years<span class="roomy"> · 41 applications</span></p>
</div>
<div class="file file-yours">
<p class="file-cap">Your file on them</p>
<div class="file-rows">
<span style="--w:76%; --i:0"></span>
<span class="none" style="--w:100%; --i:1"></span>
<span style="--w:48%; --i:2"></span>
<span class="none" style="--w:100%; --i:3"></span>
</div>
<p class="file-foot">whatever you can still remember</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="wrap"><hr class="fold"></div>
<!-- ==========================================================================
WHAT'S IN IT
Four cards, one per area, each listing things you can actually point at in
the product. This is the section a first-time reader scans before deciding
whether the rest of the page is worth their time, so every line is a
capability rather than a claim.
========================================================================== -->
<section class="band" id="features">
<div class="wrap">
<div class="section-head" data-reveal>
<p class="eyebrow">What's in it</p>
<h2 class="h-section">Everything theirs does, pointed the other way.</h2>
<p class="lede">
Their candidate database becomes a record of what you've actually done. Their resume
screening becomes your resume building. Their hiring pipeline becomes your pipeline.
The notes a recruiter keeps on you become the notes you keep on them. Four parts, one
record, and each one makes the next better.
</p>
</div>
<div class="bento" style="margin-top:36px">
<!-- One big card and three small ones, rather than four equal squares.
Me is the one the other three are built out of, so it gets the room
and says so; and a full-width card has no neighbour to be stretched
by, which is what keeps the row from opening a hole under the
shorter of a pair.
Each card carries a drawing of the thing it describes, built out of
the same tokens the product uses and animated off the card's own
reveal — no second observer, no second class to keep in step. They
are diagrams rather than screenshots: the tour below has the real
screens, and a shrunken screenshot up here would be unreadable at
both jobs. -->
<div class="cell b-hero" data-spot data-lean data-reveal style="--tone:var(--stage-applied); --i:1">
<div class="cell-body">
<div class="cell-dot" aria-hidden="true"></div>
<h3>Me</h3>
<p>Everything you've done, in your own words, at any length. This is the part that makes the rest work.</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Every role, project, number and screw-up — no character limit to manage</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Dump a paragraph after a good week and never think about it again</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Searchable by what a posting is actually asking for</span></li>
</ul>
</div>
<!-- Raw material going in, one polished bullet coming back out. -->
<div class="viz viz-record" data-live aria-hidden="true">
<div class="vz-head">Meridian Logistics · background</div>
<div class="vz-note">
<i style="--w:94%; --i:0"></i><i style="--w:78%; --i:1"></i><i style="--w:52%; --i:2"></i>
</div>
<div class="vz-note">
<i style="--w:88%; --i:3"></i><i style="--w:66%; --i:4"></i>
<!-- The line that arrives while you watch. -->
<i class="vz-fresh" style="--w:82%; --i:5"></i>
</div>
<div class="vz-pull">
<span class="vz-dot"></span>
<span class="vz-pull-lines"><i style="--w:100%"></i><i style="--w:72%"></i></span>
<span class="vz-tag">highlight</span>
</div>
</div>
</div>
<div class="cell b-third" data-spot data-lean data-reveal style="--tone:var(--stage-screen); --i:2">
<div class="cell-body">
<div class="cell-dot" aria-hidden="true"></div>
<h3>Resumes</h3>
<p>Built out of Me for one specific job, in the format that gets read rather than the one that looks clever.</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Tailored to a posting in a single ask, from evidence you already wrote</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>The Harvard format: one column, real text, no graphics for a parser to choke on</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>A PDF, or a link you can paste straight into an application form</span></li>
</ul>
</div>
<!-- The document assembling itself, one column, no graphics. -->
<div class="viz viz-page" data-live aria-hidden="true">
<div class="vz-paper">
<i class="vz-nm" style="--i:0"></i>
<i class="vz-rule" style="--i:1"></i>
<!-- `--alt` is what each line becomes when the document is rebuilt
for a different posting: same evidence, different selection. -->
<i class="vz-body" style="--w:96%; --alt:0.72; --i:2"></i>
<i class="vz-body" style="--w:88%; --alt:1; --i:3"></i>
<i class="vz-gap" style="--w:34%; --alt:1.9; --i:4"></i>
<i class="vz-body" style="--w:92%; --alt:0.8; --i:5"></i>
<i class="vz-body" style="--w:74%; --alt:1.25; --i:6"></i>
</div>
<span class="vz-badge" style="--i:9">1 page</span>
</div>
</div>
<div class="cell b-third" data-spot data-lean data-reveal style="--tone:var(--stage-final); --i:3">
<div class="cell-body">
<div class="cell-dot" aria-hidden="true"></div>
<h3>Pipeline</h3>
<p>Where every application actually stands, so nothing dies quietly in an inbox.</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Ten stages, wishlist through offer — drag a card, or just say it moved</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Follow-ups that surface before a conversation goes cold</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Which resume you sent where, and what happened afterwards</span></li>
</ul>
</div>
<!-- One card lands a column further along. It is drawn where it ends up
and animated from where it was, so there is no JS and nothing to
re-measure when the card wraps. -->
<div class="viz viz-board" data-live aria-hidden="true">
<div class="vz-col" style="--tone:var(--stage-applied)"><b></b><i></i></div>
<div class="vz-col" style="--tone:var(--stage-screen)"><b></b><i></i></div>
<div class="vz-col" style="--tone:var(--stage-interview)"><b></b><i></i></div>
<div class="vz-col" style="--tone:var(--stage-offer)"><b></b><i></i></div>
<!-- The one that is moving. It sits in a row of its own under the
four columns and steps one column at a time, so nothing has to be
measured and nothing reflows. -->
<span class="vz-trip"></span>
</div>
</div>
<div class="cell b-third" data-spot data-lean data-reveal style="--tone:var(--stage-offer); --i:4">
<div class="cell-body">
<div class="cell-dot" aria-hidden="true"></div>
<h3>People and prep</h3>
<p>The companies and humans behind the applications, and what to say to them next.</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Every company, contact and conversation, attached to the job it belongs to</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Interview prep read back off your own record before you walk in</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Who you already know somewhere, before you apply cold</span></li>
</ul>
</div>
<!-- Three people on one thread, and the one who is due. -->
<!-- Each row carries both of its states; the one that is due walks
down the list, which is what a follow-up list actually does. -->
<div class="viz viz-people" data-live aria-hidden="true">
<span class="vz-thread"></span>
<div class="vz-who" style="--i:0"><span class="vz-face">RK</span><span class="vz-bars"><i style="--w:56%"></i><i style="--w:78%"></i></span><span class="vz-when"><b>2w</b><em>due</em></span></div>
<div class="vz-who" style="--i:1"><span class="vz-face">JM</span><span class="vz-bars"><i style="--w:64%"></i><i style="--w:44%"></i></span><span class="vz-when"><b>6d</b><em>due</em></span></div>
<div class="vz-who" style="--i:2"><span class="vz-face">AO</span><span class="vz-bars"><i style="--w:48%"></i><i style="--w:70%"></i></span><span class="vz-when"><b>3d</b><em>due</em></span></div>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
THE APP, WHOLE
One establishing shot before the tour breaks it into parts. The frame is a
video slot: drop media/demo.mp4 in and it plays here instead. Until then
this is the dashboard, rebuilt.
========================================================================== -->
<section class="band-tight" id="app">
<div class="wrap">
<div class="section-head" data-reveal style="margin-bottom:28px">
<p class="eyebrow">The app</p>
<h2 class="h-section">And when you do open it, everything is already there.</h2>
<p class="lede">
Nothing you say lands in a chat log. It lands in a record, on a screen you can open,
correct and print.
</p>
</div>
<figure class="frame shot" data-shot="demo" data-media="video" data-alt="Hired's dashboard" style="--i:1" data-reveal="scale">
<div class="frame-bar">
<span class="frame-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="frame-url"><span>app.hired.tools</span></span>
</div>
<div class="fit-host">
<div class="frame-body" data-fit="1440">
<div class="rail" aria-hidden="true">
<div class="rail-brand">
<svg width="20" height="20" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="var(--brand-tile, #191A1E)"/><rect x="16" y="17" width="13" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/><rect x="16" y="28.5" width="22.5" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/><rect x="16" y="40" width="32" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/></svg>
Hired
</div>
<div class="rail-tagline">Your career, on the record</div>
<div class="rail-search"><svg width="13" height="13" viewBox="0 0 24 24"><use href="#i-search"/></svg>Search…<span class="k">⌘K</span></div>
<div class="rail-item on"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-dash"/></svg>Dashboard</div>
<div class="rail-item"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-me"/></svg>Me</div>
<div class="rail-item"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-file"/></svg>Resumes</div>
<div class="rail-item"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-building"/></svg>CRM</div>
<div class="rail-item"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-kanban"/></svg>Pipeline</div>
</div>
<div class="pane">
<div class="pane-head">
<div>
<p class="eyebrow">Good afternoon</p>
<div class="pane-title">Let’s go, Dana.</div>
</div>
<span style="margin-left:auto; display:flex; gap:8px">
<span class="btn btn-ghost btn-sm" style="pointer-events:none"><svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-me"/></svg>Me</span>
<span class="btn btn-primary btn-sm" style="pointer-events:none"><svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sparkle"/></svg>New resume</span>
</span>
</div>
<div class="stat-grid">
<div class="app-card stat">
<div class="stat-label"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-target"/></svg>In flight</div>
<div class="stat-value">9</div>
<div class="stat-hint">41 tracked all-time</div>
</div>
<div class="app-card stat">
<div class="stat-label"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-trend"/></svg>Response rate</div>
<div class="stat-value">32%</div>
<div class="stat-hint">4 in interviews</div>
</div>
<div class="app-card stat">
<div class="stat-label"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-flame"/></svg>Applied this week</div>
<div class="stat-value">3</div>
<div class="stat-hint">Keep the streak</div>
</div>
<div class="app-card stat">
<div class="stat-label"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-me"/></svg>Me</div>
<div class="stat-value">214</div>
<div class="stat-hint">7 roles · 3 resumes</div>
</div>
</div>
<div class="app-card" style="margin-top:12px; padding:16px 18px">
<p class="eyebrow" style="margin-bottom:7px">What’s working</p>
<div style="font-size:17px; font-weight:600; letter-spacing:-0.02em">You are getting responses but not past the screen.</div>
<p style="font-size:13px; color:var(--muted); margin-top:5px; max-width:72ch">4 of 13 screens became an interview. The resume is working — this is a phone-screen problem, which is usually how you tell the story rather than what is in it.</p>
</div>
<div style="display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin-top:12px">
<div class="app-card" style="padding:15px 17px">
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px">
<svg width="15" height="15" viewBox="0 0 24 24" style="color:var(--muted)" aria-hidden="true"><use href="#i-clock"/></svg>
<span style="font-size:14px; font-weight:600">Needs you now</span>
<span style="margin-left:auto; font-size:12px; color:var(--muted)">Pipeline →</span>
</div>
<div style="display:flex; flex-direction:column">
<div style="display:flex; align-items:center; gap:10px; padding:9px 0; box-shadow:inset 0 -1px 0 var(--rim)">
<span style="width:6px; height:6px; border-radius:50%; background:var(--destructive); flex-shrink:0"></span>
<span style="min-width:0"><span style="display:block; font-size:13px; font-weight:500">Flexport</span><span style="display:block; font-size:12px; color:var(--faint)">Sr. Dir., Network Ops</span></span>
<span class="stage-chip" style="--tone:var(--stage-applied); padding:2px 7px; border-radius:var(--r-chip); font-size:11.5px; font-weight:500">Applied</span>
<span class="meta" style="margin-left:auto; font-size:12px; color:var(--destructive); font-weight:500">3d overdue</span>
</div>
<div style="display:flex; align-items:center; gap:10px; padding:9px 0; box-shadow:inset 0 -1px 0 var(--rim)">
<span style="width:6px; height:6px; border-radius:50%; background:var(--warning); flex-shrink:0"></span>
<span style="min-width:0"><span style="display:block; font-size:13px; font-weight:500">Project44</span><span style="display:block; font-size:12px; color:var(--faint)">VP, Ops Excellence</span></span>
<span class="stage-chip" style="--tone:var(--stage-interview); padding:2px 7px; border-radius:var(--r-chip); font-size:11.5px; font-weight:500">Interviewing</span>
<span class="meta" style="margin-left:auto; font-size:12px; color:var(--muted)">Today</span>
</div>
<div style="display:flex; align-items:center; gap:10px; padding:9px 0">
<span style="width:6px; height:6px; border-radius:50%; background:var(--warning); flex-shrink:0"></span>
<span style="min-width:0"><span style="display:block; font-size:13px; font-weight:500">Ramp</span><span style="display:block; font-size:12px; color:var(--faint)">Head of Ops</span></span>
<span class="stage-chip" style="--tone:var(--stage-screen); padding:2px 7px; border-radius:var(--r-chip); font-size:11.5px; font-weight:500">Screening</span>
<span class="meta" style="margin-left:auto; font-size:12px; color:var(--muted)">Tomorrow</span>
</div>
</div>
</div>
<div class="app-card" style="padding:15px 17px">
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px">
<svg width="15" height="15" viewBox="0 0 24 24" style="color:var(--muted)" aria-hidden="true"><use href="#i-check"/></svg>
<span style="font-size:14px; font-weight:600">Tasks</span>
</div>
<div style="display:flex; flex-direction:column; gap:9px; font-size:13px">
<div style="display:flex; gap:9px; align-items:flex-start"><span style="width:13px; height:13px; border-radius:4px; box-shadow:var(--shadow-hairline); flex-shrink:0; margin-top:2px"></span><span>Send thank-you note<span style="display:block; font-size:11.5px; color:var(--faint)">Project44 · Today</span></span></div>
<div style="display:flex; gap:9px; align-items:flex-start"><span style="width:13px; height:13px; border-radius:4px; box-shadow:var(--shadow-hairline); flex-shrink:0; margin-top:2px"></span><span>Prep the system-design round<span style="display:block; font-size:11.5px; color:var(--faint)">Project44 · in 2d</span></span></div>
<div style="display:flex; gap:9px; align-items:flex-start"><span style="width:13px; height:13px; border-radius:4px; box-shadow:var(--shadow-hairline); flex-shrink:0; margin-top:2px"></span><span>Chase the Ryder recruiter<span style="display:block; font-size:11.5px; color:var(--faint)">Ryder · in 4d</span></span></div>
</div>
<div style="margin-top:12px; padding:7px 10px; border-radius:var(--r-control); background:var(--inset); box-shadow:var(--shadow-hairline); font-size:12px; color:var(--faint)">Add a task…</div>
</div>
</div>
</div>
</div>
</div>
</figure>
</div>
</section>
<div class="wrap"><hr class="fold"></div>
<!-- ==========================================================================
NOTHING INVENTED
The trust property, given its own section, because it is not a feature —
it is the reason the output is usable at all.
========================================================================== -->
<section class="band" id="honest">
<div class="wrap">
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:40px; align-items:start">
<div class="section-head sticky-head" data-reveal>
<p class="eyebrow">The rule the whole thing is built on</p>
<h2 class="h-section">Nothing on a resume is invented.</h2>
<p class="lede">
Every client that connects is handed the same instruction before it can call
anything: never invent experience, employers, dates or metrics. Every bullet has to
trace back to something you wrote down — and when a posting asks for evidence you
don't have, it says so instead of writing it anyway.
</p>
</div>
<div data-reveal="right">
<div class="panel" style="padding:18px 20px">
<div class="panel-head">
<span class="eyebrow">The part no demo shows you</span>
<span class="dotline" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<div class="tape" data-tape>
<div class="turn you" data-step="1" data-pause="380">
<div class="who">You</div>
<div class="said" data-type>Add something about the team I managed at Northbeam.</div>
</div>
<div class="turn" data-step="2">
<div class="who">Hired</div>
<div>
<div class="said" data-type>Nothing on file says you managed anyone there. There is "ran the weekly dispatch stand-up for four desks" — I can write that. "Managed a team" is not in here, and I am not putting it on a document you will be asked about.</div>
<div class="calls">
<span class="call empty" style="--i:0"><i></i>search_me → 0 hits</span>
</div>
</div>
</div>
</div>
</div>
<div class="app-card" style="padding:20px; margin-top:14px">
<p class="eyebrow" style="margin-bottom:12px">Checked against the posting</p>
<p style="font-size:13.5px; color:var(--muted)">
Eight requirements pulled out of the job description. Six had evidence in the
file. Two did not, and are not on the document.
</p>
<div class="refusal">
<div class="req yes">
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>
<div><div class="t">Multi-region rollouts</div><div class="s">Meridian · 3 highlights</div></div>
</div>
<div class="req yes">
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>
<div><div class="t">Org growth past 30</div><div class="s">Meridian · 1 highlight</div></div>
</div>
<div class="req yes">
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>
<div><div class="t">Carrier network cost</div><div class="s">Northbeam · 2 highlights</div></div>
</div>
<div class="req no">
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-no"/></svg>
<div><div class="t">P&L ownership</div><div class="s">No evidence on file — left off</div></div>
</div>
<div class="req no">
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-no"/></svg>
<div><div class="t">SOC 2 audit experience</div><div class="s">No evidence on file — left off</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="wrap"><hr class="fold"></div>
<!-- ==========================================================================
THE CATALOGUE
Every member-facing tool, by name, with the description an assistant
actually reads. Generated from src/lib/mcp/tools.ts — if a tool is on this
page it exists, and if one is missing here it was added after this page.
========================================================================== -->
<section class="band" id="tools">
<div class="wrap">
<div class="section-head" data-reveal>
<p class="eyebrow">How you use it</p>
<h2 class="h-section">There is nothing to learn. You just say it.</h2>
<p class="lede">
The front end is the assistant you already have open. You say what happened, or what
you need, and it reads and writes the record for you — the same record the app shows.
You open the app to check its work, correct it and print it.
</p>
</div>
<!-- The claim of this section is that the interface is a sentence, so the
section shows one being said. Real tool names, in the order they would
actually be called; the working state between the question and the
answer is the part a static screenshot of a chat never manages to
show. -->
<div class="talk" style="margin-top:34px">
<div class="panel chat" data-reveal>
<div class="panel-head">
<img class="mark" src="media/clients/claude.png" alt="" width="18" height="18" decoding="async">
<span class="eyebrow">Claude · connected to Hired</span>
<span class="dotline" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<div class="tape" data-tape>
<div class="turn you" data-step="1" data-pause="260">
<div class="who">You</div>
<div class="said" data-type>Meridian moved me to a final round on Thursday. Who do I already know there, and what should I read first?</div>
</div>
<div class="turn" data-step="2" data-think="1600">
<div class="who">Hired</div>
<div>
<!-- The working state and the answer share one box, and the
working state is laid over the top of it. The reply's height
is measured and held before it is emptied (see motion.js), so
one reserved space serves both and the panel is the same
height from the first frame to the last.
It ships hidden: a page with no scripting gets the answer and
no spinner that never stops. -->
<div class="answer">
<div class="think" data-thinking hidden>
<p class="think-say">
<span class="think-dots" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i></span>
<span>Reading your record</span>
</p>
<!-- The shape of the answer before there is an answer. It sits
in the space the finished line has already reserved, so the
panel is the same height throughout. -->
<span class="think-skel" aria-hidden="true"><i style="--w:97%; --i:0"></i><i style="--w:92%; --i:1"></i><i style="--w:99%; --i:2"></i><i style="--w:64%; --i:3"></i></span>
</div>
<div class="said" data-type>Moved to Final, Thursday 2pm. You know two people there: Priya Raman, who you ran the dispatch consolidation with at Northbeam, and a second-degree intro through Dana. Prep sheet is on the application — built from your own evidence, and it flags the one requirement nothing on file covers.</div>
</div>
<div class="calls">
<span class="call" style="--i:0"><i></i>move_application_stage</span>
<span class="call" style="--i:1"><i></i>list_contacts</span>
<span class="call" style="--i:2"><i></i>research_company</span>
<span class="call" style="--i:3"><i></i>prep_for_interview</span>
</div>
</div>
</div>
</div>
<!-- Not a real input. It is the bottom of the window, and it is what
tells you at a glance which kind of thing you are looking at. -->
<div class="chat-bar" aria-hidden="true">
<span class="chat-field">Ask it anything about your search…</span>
<span class="chat-send"><svg width="14" height="14" viewBox="0 0 24 24"><use href="#i-right"/></svg></span>
</div>
</div>
<div class="says">
<article class="say" style="--tone:var(--stage-applied)" data-reveal>
<p class="q">Here's everything I did at Vertex last quarter.</p>
<p class="then">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
Filed against that job, and the parts strong enough to go on a resume are pulled out
as reusable bullets.
</p>
<p class="via">mine_role_background</p>
</article>
<article class="say" style="--tone:var(--stage-screen)" data-reveal>
<p class="q">Tailor my resume to this posting and give me a link.</p>
<p class="then">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
A one-page document built only from evidence you actually have, and a URL you can
paste into the form.
</p>
<p class="via">tailor_resume</p>
</article>
<article class="say" style="--tone:var(--stage-interview)" data-reveal>
<p class="q">What do I need to chase this week?</p>
<p class="then">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
What has gone quiet, who to nudge, which step of your search is losing people, and
what to do about it.
</p>
<p class="via">pipeline_review</p>
</article>
</div>
</div>
<p class="tools-more" data-reveal style="--i:2">
Every one of those sentences is the assistant calling a named tool against your own
workspace, and there are over a hundred of them. The screens and the assistant read and
write the same record, so there is nothing the app can do that a conversation
can’t —
<a href="https://docs.hired.tools/tools/overview" rel="noopener">the full list is in the manual</a>.
</p>
</div>
</section>
<div class="wrap"><hr class="fold"></div>
<!-- ==========================================================================
TWO DOORS
========================================================================== -->
<!-- ==========================================================================
PRICING
Two routes, not a ladder. The free one is self-hosting, and its card says
out loud that it needs somewhere to run — the audience for this page is
not assumed to know what Docker is, and a "free" card that quietly means
"if you can deploy it" would be a lie by layout.
PLACEHOLDER NUMBER. One price, here and in the FAQ answer below ("What
does it cost?") — change both together. There is no checkout yet: the CTA
goes to the form, and the Stripe Payment Link (Admin -> Billing holds the
same URL) replaces it when hosting opens.
========================================================================== -->
<section class="band" id="pricing">
<div class="wrap">
<div class="section-head" data-reveal>
<p class="eyebrow">Pricing</p>
<h2 class="h-section">Two ways to have it. One of them is free.</h2>
<p class="lede">
Same software either way — not a free version and a real version. The difference is
who runs the server. Hosting isn't open yet; I'm letting people in a few at a time so
I can fix what breaks.
</p>
</div>
<!-- Ships hidden and is shown by motion.js, because with no scripting it
would be two buttons that do nothing. Without it the page is the
monthly price, which is the one anybody comparing starts from. -->
<div class="plan-switch" data-plans hidden role="group" aria-label="Billing period">
<button type="button" class="on" data-period="monthly" aria-pressed="true">Monthly</button>
<button type="button" data-period="annual" aria-pressed="false">Annual <span class="off">2 months free</span></button>
</div>
<div class="tiers pair" style="margin-top:24px">
<div class="tier" data-reveal style="--i:1">
<div class="tier-head"><h3>Free</h3></div>
<p class="price"><b>$0</b> <span>forever</span></p>
<p class="terms">self-hosted · available today</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>The whole product. There is no smaller version of it.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>One command with Docker, or five clicks on Railway.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Your database, your machine, your backups.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Invite friends into it and each of them gets a private workspace.</span></li>
<li class="caveat"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-no"/></svg><span>You need somewhere to run it, and about ten minutes.</span></li>
</ul>
<div class="fill"></div>
<a class="btn btn-ghost" href="https://docs.hired.tools/self-hosting/overview" rel="noopener">
Run it yourself
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-out"/></svg>
</a>
</div>
<div class="tier lit" data-reveal style="--i:2">
<div class="tier-head"><h3>Hosted</h3><span class="soon">Coming soon</span></div>
<p class="price">
<b><span data-when="monthly">$12</span><span data-when="annual" hidden>$10</span></b>
<span>/ month</span>
</p>
<p class="terms">
<span data-when="monthly">cancel any time · invite-only for now</span>
<span data-when="annual" hidden>$120 billed once a year · cancel any time</span>
</p>
<ul>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>The same whole product, with nothing to set up.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Backed up, kept current, and on the latest build every boot.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Your workspace is private. Admins manage accounts, never content.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Stop paying and it's suspended, not deleted.</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg><span>Leave whenever you like — the free build is the same build.</span></li>
</ul>
<div class="fill"></div>
<a class="btn btn-primary" href="#join">
Request access
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
</a>
</div>
</div>
<p class="spec meta" data-reveal style="--i:3">
Prices in USD · $12 a month, or $120 a year — two months off for paying up front ·
no free trial of the hosted plan, because the free column is not a trial ·
the hosted instance runs the same code as the repository, on the same day
</p>
</div>
</section>
<div class="wrap"><hr class="fold"></div>
<!-- ==========================================================================
FAQ
========================================================================== -->
<section class="band-tight">
<div class="wrap wrap-narrow" style="padding-inline:0">
<div class="wrap">
<div class="section-head" data-reveal style="margin-bottom:26px">
<p class="eyebrow">Before you ask</p>
<h2 class="h-section">The questions that come up.</h2>
</div>
<div class="qa" data-reveal style="--i:1">
<details class="q">
<summary>What does it cost?<span class="plus" aria-hidden="true"></span></summary>
<div class="a">
<p>$12 a month, or $120 a year — two months off for paying up front. Cancel whenever you like: stop paying and your workspace is suspended, not deleted. It is also free forever if you run it on your own machine, which is the same software rather than a cut-down one, and it is why nobody can take this away from you — including me.</p>
</div>
</details>
<details class="q">
<summary>Will it invent things to put on my resume?<span class="plus" aria-hidden="true"></span></summary>
<div class="a">
<p>No, and that's the rule the whole thing is built on. Every connected assistant is told, in writing, never to invent an employer, a date, a title or a number. If a posting wants something you haven't got, it says so and asks you rather than filling the gap. There's a section above showing exactly what that refusal looks like.</p>
</div>
</details>
<details class="q">
<summary>Do I have to talk to an AI to use it?<span class="plus" aria-hidden="true"></span></summary>
<div class="a">
<p>No. Everything has a screen: Me, the resume editor, the board, the contacts. Talking to it is faster for the boring parts — logging what happened, moving a card, tailoring a resume — and the two are the same data, so you can do a thing by hand and ask about it a minute later.</p>
</div>
</details>
<details class="q">
<summary>Will the PDF get through an ATS?<span class="plus" aria-hidden="true"></span></summary>
<div class="a">
<p>The document is real text in a real page, not an image, and the default template is a faithful port of the Harvard OCS format — everything one size, no colour, no columns. The PDF is rendered from that same page, so what you see is what gets parsed.</p>
</div>
</details>
<details class="q">
<summary>Who can see my stuff?<span class="plus" aria-hidden="true"></span></summary>
<div class="a">
<p>You. Every workspace is private, including from whoever runs the instance — admins manage accounts, never content, and that's enforced in the code rather than by policy. The one exception is a resume you deliberately publish as a link, and you choose when that happens and can unpublish it.</p>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
CLOSE
========================================================================== -->
<section class="band">
<div class="wrap" style="text-align:center">
<div class="motif" style="max-width:180px; margin:0 auto 28px" role="presentation" data-reveal="rule">
<i style="background:var(--stage-wishlist)"></i>
<i style="background:var(--stage-applied)"></i>
<i style="background:var(--stage-screen)"></i>
<i style="background:var(--stage-interview)"></i>
<i style="background:var(--stage-final)"></i>
<i style="background:var(--stage-offer)"></i>
</div>
<h2 class="h-section" data-reveal style="max-width:22ch; margin-inline:auto">Start with one job you can still remember.</h2>
<p class="lede" data-reveal style="--i:1; margin:16px auto 0; text-align:center">
Write down what you actually did there. Everything after that — the resumes, the
tracking, the follow-ups — is the system's problem, and for once the system is yours.
</p>
<form class="joinform mid" data-join data-reveal style="--i:2; margin-top:26px" novalidate>
<div class="joinform-row">
<label class="sr-only" for="join-close">Your email address</label>
<input id="join-close" type="email" name="email" autocomplete="email"
placeholder="you@example.com" required>
<input class="hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
<button class="btn btn-primary" data-magnet="4" type="submit">
Request access
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-right"/></svg>
</button>
</div>
<p class="joinform-said" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<!-- ==========================================================================
FOOTER
Hired is one of several Shifu Labs tools and the footer is where that gets
said. The mark, the signal orange and the social set come from
shifulab.com, so the studio reads the same wherever you meet it.
========================================================================== -->
<footer>
<div class="wrap">
<hr class="fold" style="margin-bottom:36px">
<div class="foot">
<div class="foot-brand">
<a class="brand" href="/" style="font-size:15px">
<svg width="22" height="22" viewBox="0 0 64 64" aria-hidden="true">
<rect width="64" height="64" rx="15" fill="var(--brand-tile, #191A1E)"/>
<rect x="16" y="17" width="13" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
<rect x="16" y="28.5" width="22.5" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
<rect x="16" y="40" width="32" height="7" rx="1.5" fill="var(--brand-cut, #F9F9FA)"/>
</svg>
Hired
</a>
<p class="foot-line">Your career, on the record. A record of everything you have done, a resume builder and a pipeline, all of it reachable from the assistant you already talk to.</p>
<a class="shifu-tag" href="https://shifulab.com" rel="noopener">
<svg width="15" height="15" viewBox="0 0 96 96" aria-hidden="true"><use href="#i-shifu"/></svg>
<span>A <b>Shifu Labs</b> tool</span>
</a>
<div class="socials">
<a href="https://www.linkedin.com/company/shifulab/" rel="me noopener" title="Shifu Labs on LinkedIn" aria-label="Shifu Labs on LinkedIn">
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-in"/></svg>
</a>
<a href="https://instagram.com/shifu" rel="me noopener" title="Shifu Labs on Instagram" aria-label="Shifu Labs on Instagram">
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-ig"/></svg>
</a>
<a href="https://x.com/shifulab" rel="me noopener" title="Shifu Labs on X" aria-label="Shifu Labs on X">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-x"/></svg>
</a>
</div>
</div>
<nav class="foot-cols" aria-label="Footer">
<div>
<p class="foot-h">Product</p>
<ul>
<li><a href="#features">What's in it</a></li>
<li><a href="#honest">What it refuses</a></li>
<li><a href="#tools">How it works</a></li>
<li><a href="https://docs.hired.tools/self-hosting/overview" rel="noopener">Self-host</a></li>
<li><a href="https://docs.hired.tools">Docs</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</div>
<div>
<p class="foot-h">Source</p>
<ul>
<li><a href="https://github.com/shifulaboratories/Hired" rel="noopener">GitHub <span class="stars" id="stars" hidden></span></a></li>
<li><a href="https://github.com/shifulaboratories/Hired/blob/main/README.md" rel="noopener">README</a></li>
<li><a href="https://github.com/shifulaboratories/Hired/blob/main/LICENSE" rel="noopener">AGPL-3.0</a></li>
<li><a href="https://app.hired.tools">Sign in</a></li>
</ul>
</div>
</nav>
</div>
<div class="foot-base">
<span>© 2026 Shifu Labs</span>
<span class="fill"></span>
<span>Built by hand. Shipped from the studio.</span>
</div>
</div>
<svg class="foot-mark" width="120" height="120" viewBox="0 0 96 96" aria-hidden="true" role="presentation"><use href="#i-shifu"/></svg>
</footer>
<script src="join.js" defer></script>
<script src="motion.js" defer></script>
</body>
</html>