<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>Liz Personal Compact — Preview</title>
    <meta name="description" content="Compact personal-site design system preview combining editorial warmth, precise typography, and lightweight systems feel." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./landing.css" />
  </head>
  <body>
    <header class="site-header">
      <div class="container header-inner">
        <a class="brand" href="#top" aria-label="Liz Personal Compact home">
          <span class="brand-mark">L</span>
          <span>Liz Personal Compact</span>
        </a>
        <nav class="nav-links" aria-label="Primary">
          <a href="#method">Method</a>
          <a href="#signals">Signals</a>
          <a href="#preview">Preview</a>
          <a href="#rules">Rules</a>
        </nav>
        <a class="button button-small" href="#preview">Open preview</a>
      </div>
    </header>

    <main id="top">
      <section class="hero">
        <div class="container hero-grid">
          <div class="hero-copy">
            <p class="eyebrow">Compact personal site template · high signal, low weight</p>
            <h1>Warm editorial structure for a personal site that still feels like a system.</h1>
            <p class="subhead">
              This template borrows the best bits from Vercel’s typographic discipline, Haoqi’s systems language, and Maxime’s capability clustering — then cuts the heavy WebGL tax.
            </p>
            <div class="cta-row">
              <a class="button button-primary" href="#preview">Inspect preview</a>
              <a class="button button-secondary" href="#rules">See rules</a>
            </div>
            <p class="note">Goal: visual upgrade with minimal payload. Not a motion playground.</p>
          </div>

          <aside class="hero-artwork" aria-label="Preview illustration">
            <div class="panel">
              <div class="panel-top">
                <span>THEME</span>
                <span>SOUND</span>
                <span>GMT+8</span>
              </div>
              <div class="panel-center">
                <div class="orbit orbit-a"></div>
                <div class="orbit orbit-b"></div>
                <div class="orbit orbit-c"></div>
                <div class="orbital-node node-a"></div>
                <div class="orbital-node node-b"></div>
                <div class="orbital-node node-c"></div>
                <div class="panel-label">writing / projects / experiments</div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section class="thesis">
        <div class="container thesis-grid">
          <p class="kicker">Take</p>
          <h2>Do not copy the heavy parts. Copy the legible parts: typography, clustering, microcopy, and a few precise visual moves.</h2>
        </div>
      </section>

      <section id="method" class="section method-section">
        <div class="container method-grid">
          <div class="section-intro sticky-intro">
            <p class="eyebrow">Method</p>
            <h2>Homepage first. Project cards second. Everything else stays quiet.</h2>
            <p>
              The layout is designed for a small site with a strong thesis: identity, a short positioning line, project clusters, writing proof, and a minimal status strip.
            </p>
          </div>
          <div class="step-list">
            <article>
              <span>01</span>
              <h3>One thesis</h3>
              <p>Use one sharp sentence to explain what the site is for.</p>
            </article>
            <article>
              <span>02</span>
              <h3>Capability clusters</h3>
              <p>Group work by what it proves, not by raw chronology.</p>
            </article>
            <article>
              <span>03</span>
              <h3>Visible proof</h3>
              <p>Writing, projects, and links need to do the credibility work.</p>
            </article>
            <article>
              <span>04</span>
              <h3>Micro-motion only</h3>
              <p>Hover, fade, and tiny state changes. No fat WebGL tax.</p>
            </article>
          </div>
        </div>
      </section>

      <section id="signals" class="section signal-section">
        <div class="container">
          <div class="section-intro narrow">
            <p class="eyebrow">Signals</p>
            <h2>Three visual languages, one compact template.</h2>
          </div>
          <div class="signal-grid">
            <article>
              <h3>Vercel discipline</h3>
              <p>Warm paper, serif hierarchy, careful spacing, and one accent used sparingly.</p>
            </article>
            <article>
              <h3>Haoqi systems language</h3>
              <p>Theme / sound / status microcopy, panel-like layout, small utility strip, strong world-building.</p>
            </article>
            <article>
              <h3>Maxime capability clustering</h3>
              <p>Group work by shader / motion / craft themes so the site reads like accumulated skill.</p>
            </article>
            <article>
              <h3>Lightweight motion</h3>
              <p>Progressive detail without first-load drama.</p>
            </article>
            <article>
              <h3>Paper texture</h3>
              <p>Soft gradients, borders, and quiet depth instead of glass and chrome.</p>
            </article>
            <article>
              <h3>Useful restraint</h3>
              <p>Enough personality to stand out, not enough to bloat the bundle.</p>
            </article>
          </div>
        </div>
      </section>

      <section id="preview" class="section preview-section">
        <div class="container preview-grid">
          <div>
            <p class="eyebrow">Preview</p>
            <h2>What the homepage could feel like.</h2>
            <p>
              The preview uses a centered hero, a thesis strip, a grouped capability grid, and a report-like writing block. It should read as a personal site, not a startup landing page.
            </p>
            <a class="text-link" href="#rules">Jump to rules</a>
          </div>
          <div class="paper-report">
            <div class="paper-meta">preview / home / writing / projects / system</div>
            <pre>Liz
Personal compact template

Design language:
- warm paper background
- serif headline / sans UI
- one accent color
- grouped projects
- small status strip

Content structure:
1. Thesis
2. Projects
3. Writing proof
4. About strip
5. Contact / links

Motion budget:
- hover
- fade
- tiny transition
- no full-page 3D</pre>
          </div>
        </div>
      </section>

      <section id="rules" class="section rules-section">
        <div class="container rules-grid">
          <div class="rule-card">
            <p class="eyebrow">Do</p>
            <ul>
              <li>Use serif headlines, sans UI, monospace only for technical snippets.</li>
              <li>Keep the homepage centered on one thesis.</li>
              <li>Group projects by capability and outcome.</li>
              <li>Use a small system strip if it supports identity.</li>
              <li>Keep load time low and motion small.</li>
            </ul>
          </div>
          <div class="rule-card selected">
            <p class="eyebrow">Don’t</p>
            <ul>
              <li>Do not add WebGL before the site has bones.</li>
              <li>Do not copy SaaS purple-gradient junk.</li>
              <li>Do not create a control-panel fetish.</li>
              <li>Do not flatten everything into a blog list.</li>
              <li>Do not trade speed for fake wow.</li>
            </ul>
          </div>
          <div class="rule-card">
            <p class="eyebrow">Target</p>
            <ul>
              <li>Small payload.</li>
              <li>High visual payoff.</li>
              <li>Personal, but structured.</li>
              <li>Editorial, but not fragile.</li>
              <li>Systemic, but not bloated.</li>
            </ul>
          </div>
        </div>
      </section>
    </main>

    <script src="./landing.js"></script>
  </body>
</html>
