21

Flood the Gates — Open‑source thinking → full‑circle impact

Flood the Gates Full Circle Media
✦ Open‑source thinking → full‑circle impact · Video · Storytelling · Branding
<main class="grid">
  <!-- LEFT: Content / Posts -->
  <section class="panel" id="posts" aria-labelledby="posts-h2">
    <h2 id="posts-h2">/posts</h2>

    <!-- Journalism Debut -->
    <article class="post" id="post-journalism">
      <h3>journalism‑debut.md</h3>
      <div class="meta">status: draft · last edited: — · tags: journalism, essay</div>
      <div class="hr"></div>
      <div class="lottie-frame" data-lottie="/assets/lotties/hello-world.json" data-loop="true" data-autoplay="false">
        <div class="fallback">Lottie: /assets/lotties/hello-world.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Hello, World_

Debut notes go here. Write in your LPC→today voice. Keep paragraphs short; let visuals do work.

• What changed: from LPC style to now • What stays: interviews, texture, ethics • What opens: process, sources, lessons

[CTA] → When live, link this post to your IG pinned intro. 

    <!-- Resonance Post -->
    <article class="post" id="post-resonance">
      <h3>resonance.md</h3>
      <div class="meta">status: outline · tags: culture, sound</div>
      <div class="hr"></div>
      <div class="lottie-frame" data-lottie="/assets/lotties/wave.json" data-loop="true" data-autoplay="true">
        <div class="fallback">Lottie: /assets/lotties/wave.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Resonance

On shoegaze, post‑rock, and why some scenes hum.

• Local bands to track (MY): [placeholder] • Small rooms, big rooms: venues timeline • DIY economics: tickets, zines, merch, survival

[Note] → Cross‑link to the DIY Music Industry article. 

    <!-- Content for Website (Full Circle) -->
    <article class="post" id="post-site-content">
      <h3>site‑content.md</h3>
      <div class="meta">status: outline · tags: portfolio, site</div>
      <div class="hr"></div>
      <div class="lottie-frame" data-lottie="/assets/lotties/router.json" data-loop="true" data-autoplay="false">
        <div class="fallback">Lottie: /assets/lotties/router.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Site Content

Pages: Home, Work, Notes, About, Contact.

• Case studies (short, visual‑first) • Process (transparent, step‑by‑step) • Services (video, mentoring, branding) • Social (IG placeholder → links back to site posts) 

    <!-- Finding Voice / Brand Through a Blog Post -->
    <article class="post" id="post-voice">
      <h3>finding‑voice.md</h3>
      <div class="meta">status: notes · tags: brand, voice, writing</div>
      <div class="hr"></div>
      <div class="lottie-frame" data-lottie="/assets/lotties/type.json" data-loop="true" data-autoplay="true">
        <div class="fallback">Lottie: /assets/lotties/type.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Finding Voice

Brand voice = what you repeat without thinking.

• Terminal tone ≈ human, precise, sparse • Replace hype with clarity • Rituals: captions, glyphs, micro‑structure 

    <!-- LPC → Today Transition Post -->
    <article class="post" id="post-lpc-today">
      <h3>lpc‑to‑today.md</h3>
      <div class="meta">status: fragment · tags: history, method</div>
      <div class="hr"></div>
      <div class="lottie-frame" data-lottie="/assets/lotties/timeline.json" data-loop="false" data-autoplay="false">
        <div class="fallback">Lottie: /assets/lotties/timeline.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Past → Present

Shift log: interviews, editing, design, systems.

• What I learned then • What I kept now • What I'm publishing openly 

  </section>

  <!-- RIGHT: Index / Visual / DIY Docs -->
  <aside>
    <section class="panel" id="index" aria-labelledby="index-h2">
      <h2 id="index-h2">/index</h2>
      <div class="hline">Quick Links</div>
      <ul>
        <li><a href="#post-journalism">journalism‑debut.md</a></li>
        <li><a href="#post-resonance">resonance.md</a></li>
        <li><a href="#post-site-content">site‑content.md</a></li>
        <li><a href="#post-voice">finding‑voice.md</a></li>
        <li><a href="#post-lpc-today">lpc‑to‑today.md</a></li>
      </ul>
      <div class="hr"></div>
      <div class="hline">Bio (for future IG)</div>
      <div class="term"><code>✦ Open‑source thinking → full‑circle impact

Video · Storytelling · Branding ⭕ Full‑circle projects, start to scale 

    <section class="panel" id="visual" aria-labelledby="visual-h2">
      <h2 id="visual-h2">/visual</h2>
      <p style="margin-top:0; text-align: center;">Drop your Lottie JSON files into <span class="kbd">/assets/lotties/</span> and update each frame's <span class="kbd">data-lottie</span> path.</p>
      <div class="lottie-frame" data-lottie="/assets/lotties/circle-loop.json" data-loop="true" data-autoplay="true">
        <div class="fallback">Lottie: /assets/lotties/circle-loop.json</div>
      </div>
      <div class="term" style="margin-top:10px">
        <code>

Animation Notes

• Use subtle loops (3–5s) • Keep fps modest (24–30) for web • Prefer vector shapes to huge raster images • Test legibility on mobile first 

    <section class="panel" id="diy" aria-labelledby="diy-h2">
      <h2 id="diy-h2">/DIY‑docs</h2>
      <div class="term"><code>

Publish What You Use

[In‑Progress]

[Review]

[Done]