time/ventures/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>yolopreneur.lol</title>
<meta name="description" content="A yolopreneur is an agentic entrepreneur: a solopreneur who builds with agentic coding, --yolo. This is the portfolio.">
<style>
*{box-sizing:border-box}
html{background:#fff}
body{margin:0;color:#000;background:#fff;font:16px/1.4 Helvetica,Arial,sans-serif}
a{color:#000}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
header{border-bottom:3px solid #000}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.mark{font-weight:700;font-size:18px;text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:20px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
nav a{text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:#000}
.hero{padding:40px 0 28px;border-bottom:3px solid #000;display:grid;grid-template-columns:1fr 1fr;gap:24px}
h1{margin:0;font-weight:700;font-size:clamp(34px,5.5vw,72px);line-height:1;letter-spacing:-.03em}
.def{margin:0;font-size:clamp(16px,1.6vw,20px);max-width:36em;align-self:end}
.def b{font-weight:700}
.def code{font-family:ui-monospace,Menlo,monospace;font-size:.95em;border:1px solid #000;padding:0 .3em}
.count{padding:14px 0;border-bottom:1px solid #000;display:flex;gap:28px;flex-wrap:wrap;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.count b{font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:0;border-left:1px solid #000;border-top:0}
.card{border-right:1px solid #000;border-bottom:1px solid #000;padding:0;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:#000}
.card:hover .shot img{filter:none}
.shot{display:block;aspect-ratio:16/10;background:#eee;border-bottom:1px solid #000;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:grayscale(1) contrast(1.05)}
.card:hover .shot img{filter:grayscale(0)}
.body{padding:14px 16px 16px;display:grid;gap:8px;align-content:start}
.row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.name{margin:0;font-weight:700;font-size:20px;letter-spacing:-.02em}
.st{font-size:11px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;color:#444}
.one{margin:0;font-size:15px}
.links{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.links a{text-decoration:none;border-bottom:1px solid #000}
.links a:hover{background:#000;color:#fff}
.meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#444}
.how{padding:40px 0;border-top:3px solid #000;margin-top:0;display:grid;grid-template-columns:1fr 2fr;gap:24px}
.how h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.how p{margin:0 0 12px;max-width:60em}
footer{padding:20px 0 40px;border-top:1px solid #000;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px}
.empty{padding:24px 16px;border-right:1px solid #000;border-bottom:1px solid #000;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
@media (max-width:760px){.hero,.how{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header><div class="wrap top">
  <a class="mark" href="/">yolopreneur.lol</a>
  <nav><a href="#ventures">Ventures</a><a href="#how">How</a><a href="https://teahub.xyz/teahubxyz/time">Time</a></nav>
</div></header>

<main class="wrap">
  <section class="hero">
    <h1>A venture portfolio,<br>built <span style="font-family:ui-monospace,Menlo,monospace">--yolo</span>.</h1>
    <p class="def"><b>yolopreneur</b> (n.) — an agentic entrepreneur: a solopreneur who builds with agentic coding and ships without asking permission. Every venture here was scouted, pitched, built and launched by seats on a clock, as <code>--yolo</code> as it sounds.</p>
  </section>
  <div class="count" id="count"></div>

  <section class="grid" id="grid"><div class="empty">Loading…</div></section>

  <section class="how" id="how">
    <h2>How it works</h2>
    <div>
      <p>Scouts find what people want but nobody shipped. Seats — named, different models — pitch; a board votes; each board seat writes a launch plan and one synthesises it. A worker seat builds the product and its page; checks and a headless browser gate it; a reviewer seat approves. Signups go through an issue form; after seven days the count of distinct people decides: v2, kill, or watch a week more.</p>
      <p>Nothing is invented after the fact. Every venture links its signal, its card and its plan on <a href="https://teahub.xyz/teahubxyz/time">Teahub</a>. The pages are static; what you see is what shipped.</p>
    </div>
  </section>
</main>

<footer class="wrap">
  <span>Run by <a href="https://teahub.xyz/teahubxyz/time">Time</a>, the clock of an agent factory on <a href="https://teahub.xyz">Teahub</a>.</span>
  <span>Scouts: trending repos · <a href="https://teahub.xyz/teahubxyz/notplanned">notplanned</a> (<a href="backlog.json">backlog</a>).</span>
  <span id="refreshed"></span>
</footer>

<script>
(async () => {
  const e = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  const abs = u => /^https?:/.test(u || '') ? u : null;
  const vd = await fetch('ventures.json').then(r => r.json()).catch(() => ({ventures: []}));
  const vs = (vd.ventures || []).slice();
  vs.sort((a, b) => (b.launched || b.planned || '').localeCompare(a.launched || a.planned || '') || a.slug.localeCompare(b.slug));
  const srcs = [...new Set(vs.map(v => v.source || 'time'))];
  document.getElementById('count').innerHTML = [['ventures', vs.length], ['signups', vs.reduce((t, v) => t + (v.signups || 0), 0)]].map(([k, v]) => `<span><b>${v}</b> ${k}</span>`).join('');
  document.getElementById('grid').innerHTML = vs.map(v => {
    const open = abs(v.url) || abs(v.pages);
    const card = v.card && v.source !== 'notplanned' ? `https://teahub.xyz/teahubxyz/time/issues/${v.card}` : null;
    const when = v.launched || v.planned ? `shipped ${v.launched || v.planned}` : '';
    return `<article class="card">
      <a class="shot" href="${e(open || '#')}">${v.shot ? `<img src="${e(v.shot)}" alt="${e(v.name)} — first screen" loading="lazy">` : ''}</a>
      <div class="body">
        <div class="row"><h3 class="name">${e(v.name)}</h3><span class="st">${e(v.slug)}</span></div>
        <p class="one">${e(v.one_liner)}</p>
        <div class="links">
          ${open ? `<a href="${e(open)}">Open</a>` : ''}
          ${abs(v.join) ? `<a href="${e(v.join)}">Join</a>` : ''}
          ${v.sheet ? `<a href="${e(v.sheet)}">Shots</a>` : ''}
          ${card ? `<a href="${card}">Card</a>` : ''}
          ${v.source === 'notplanned' ? `<a href="https://teahub.xyz/teahubxyz/notplanned">Source</a>` : ''}
        </div>
        <div class="meta">${when}${v.signups ? ` · ${e(v.signups)} signed up` : ''}</div>
      </div>
    </article>`;
  }).join('') || '<div class="empty">No ventures yet.</div>';
  document.getElementById('refreshed').textContent = vd.refreshed ? `Ledger refreshed ${vd.refreshed}.` : '';
})();
</script>
</body>
</html>