WorkspacePixel Porch — personal homepage
Find your next idea/Create
STUDIO PICK · TEMPLATE

Pixel Porch — personal homepage

A cheerful 1990s-style personal site with pixel typography, checkerboard trim, collectible stamps and a working mood selector.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
Neocities: https://neocities.org/
Independent-web personality, small-site discovery and expressive personal spaces.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <small>YOU FOUND A LITTLE PLACE ON THE WEB.</small>
    <h1>PIXEL<br />PORCH ★</h1>
    <p>code, plants & other small obsessions</p>
  </header>
  <div class="porch">
    <aside>
      <h2>MY CORNERS</h2>
      <a href="#journal">✦ tiny journal</a><a href="#shelf">✦ things I like</a
      ><a href="#mood">✦ current mood</a>
      <div class="badge">HANDMADE<br />WITH HTML</div>
      <div class="badge pink">BEST VIEWED<br />WITH CURIOSITY</div>
    </aside>
    <section>
      <h2 id="journal">HELLO, INTERNET FRIEND.</h2>
      <p>
        I'm Pip. I build little websites, draw questionable pixels and give all my houseplants
        names.
      </p>
      <div class="window">
        <div>notes.txt <span>×</span></div>
        <p>05 OCT · Learned that making something small is still making something.</p>
        <p>02 OCT · The fern has a new leaf. Big day around here.</p>
      </div>
      <div id="shelf"><span>☁</span><span>✿</span><span>♬</span><span>⌘</span></div>
      <div id="mood">
        <span>MOOD: <b id="mood-name">curious</b></span
        ><button id="change">CHANGE MOOD ↻</button>
      </div>
    </section>
  </div>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?