Dominique Deschatre
89f0eb5cb3
Extract 2002-line monolith into landing/ subfolder:
- 8 section components (FolioHeader, HeroSection, ForgettingSection, AnatomySection, DialectSection, MechanicsSection, InstallSection, CatalogFooter)
- useLandingEffects.js composable for all vanilla-JS effects
- landing.css for all styles
- Landing.vue reduced to 28-line orchestrator
Also restores upstream hero lede text ("permanent. Designed for total recall.").
72 lines
3.3 KiB
Vue
72 lines
3.3 KiB
Vue
<template>
|
|
<section v-pre id="anatomy" class="anatomy">
|
|
<div class="section-mark"><span class="roman">ii</span> <span>anatomy of a palace</span></div>
|
|
|
|
<div class="anatomy-head">
|
|
<div>
|
|
<span class="eyebrow">the method of loci, updated</span>
|
|
<h2 class="display">
|
|
Wings. Rooms. <em>Drawers.</em>
|
|
</h2>
|
|
</div>
|
|
<p class="lede">
|
|
An ancient memory technique, reworked for a machine. Broad categories
|
|
nest time-based groupings; time-based groupings hold verbatim drawers.
|
|
A symbolic index lets the model scan thousands of drawers in a single
|
|
pass and open only the ones it needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="anatomy-diagram">
|
|
<article class="stratum">
|
|
<span class="n">W — wing</span>
|
|
<h3>The <em>Wing</em></h3>
|
|
<p class="sub">people · projects · topics</p>
|
|
<p>A broad region of the palace, keyed to a real entity — a person by name, a project by codename, a domain of your life. Entity-first, always.</p>
|
|
<div class="diagram">
|
|
<svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
|
|
<rect x="5" y="20" width="190" height="50" opacity="0.4"/>
|
|
<rect x="15" y="28" width="50" height="34" />
|
|
<rect x="75" y="28" width="50" height="34" />
|
|
<rect x="135" y="28" width="50" height="34" />
|
|
<line x1="5" y1="12" x2="195" y2="12" stroke-dasharray="2 3" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="stratum">
|
|
<span class="n">R — room</span>
|
|
<h3>The <em>Room</em></h3>
|
|
<p class="sub">days · sessions · threads</p>
|
|
<p>Inside a wing sit rooms — discrete units of time. One room per day, or one per session. Walk the corridor and the palace unfolds chronologically, room by room.</p>
|
|
<div class="diagram">
|
|
<svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
|
|
<rect x="10" y="20" width="36" height="44" />
|
|
<rect x="56" y="20" width="36" height="44" />
|
|
<rect x="102" y="20" width="36" height="44" />
|
|
<rect x="148" y="20" width="36" height="44" />
|
|
<line x1="10" y1="70" x2="184" y2="70" stroke-dasharray="1 3" opacity="0.6"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="stratum">
|
|
<span class="n">D — drawer</span>
|
|
<h3>The <em>Drawer</em></h3>
|
|
<p class="sub">verbatim · permanent · exact</p>
|
|
<p>Each room holds drawers. A drawer is a single chunk of verbatim content — the exact words, untouched. The palace's promise is kept here.</p>
|
|
<div class="diagram">
|
|
<svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
|
|
<rect x="40" y="14" width="120" height="16" />
|
|
<rect x="40" y="34" width="120" height="16" />
|
|
<rect x="40" y="54" width="120" height="16" />
|
|
<circle cx="150" cy="22" r="1.5" fill="currentColor"/>
|
|
<circle cx="150" cy="42" r="1.5" fill="currentColor"/>
|
|
<circle cx="150" cy="62" r="1.5" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|