<nav class="pp-nav"> <a class="pp-brand" href="/">Your Name</a> <div class="pp-links"><a href="Projects">Projects</a><a href="Process">Process</a><a href="About">About</a><a href="Contact">Contact</a><span class="pp-dot"></span></div> </nav> <h1 class="pp-title">Projects</h1> <p class="pp-intro">Three things built and shipped so far — a game, a dev tool, and a discovery engine. More on the way.</p> <section class="pp-project"> <div class="pp-preview"><span class="pp-num">01</span><span class="pp-spark">✦</span><span class="pp-soon">Preview coming soon</span></div> <div class="pp-text"> <div class="pp-kicker"><span>✦</span><span>Game</span></div> <h2 class="pp-name">Project One</h2> <p class="pp-tagline">A one-line hook that sells the project.</p> <p class="pp-desc">A longer description in the monospace voice. Say what it is, how it was built, and why someone should care. Three or four sentences works best.</p> <div class="pp-tags"><span class="pp-tag live">LIVE</span><span class="pp-tag">Game</span><span class="pp-tag">Browser</span></div> <a class="pp-link" href="https://example.com">Play now →</a> </div> </section> <section class="pp-project reverse"> <div class="pp-preview"><span class="pp-num">02</span><span class="pp-spark">✦</span><span class="pp-soon">Preview coming soon</span></div> <div class="pp-text"> <div class="pp-kicker"><span>✦</span><span>Dev Tool</span></div> <h2 class="pp-name">Project Two</h2> <p class="pp-tagline">Another punchy one-liner.</p> <p class="pp-desc">Describe the second project here. Keep the tone consistent and the length similar so the rows feel balanced down the page.</p> <div class="pp-tags"><span class="pp-tag live">LIVE</span><span class="pp-tag">Tool</span><span class="pp-tag">Open source</span></div> <a class="pp-link" href="https://example.com">View source →</a> </div> </section> <section class="pp-project"> <div class="pp-preview"><span class="pp-num">03</span><span class="pp-spark">✦</span><span class="pp-soon">Preview coming soon</span></div> <div class="pp-text"> <div class="pp-kicker"><span>✦</span><span>Discovery</span></div> <h2 class="pp-name">Project Three</h2> <p class="pp-tagline">The third hook goes here.</p> <p class="pp-desc">Describe the third project here. Internal links work too, so you can point the button at a full write-up note in your vault.</p> <div class="pp-tags"><span class="pp-tag live">LIVE</span><span class="pp-tag">Web</span></div> <a class="pp-link" href="Project Three">Read more →</a> </div> </section>