<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#111212">
<meta name="description" content="Eddie The Poet — original film stories and projects in development.">
<meta property="og:type" content="website">
<meta property="og:title" content="Eddie The Poet — Film & Story Development">
<meta property="og:description" content="An idea. A story. A concept. An entire world.">
<meta property="og:url" content="https://poeteddie.com/">
<meta property="og:image" content="https://poeteddie.com/assets/ship-hero.webp">
<title>Eddie The Poet — Film & Story Development</title>
<link rel="icon" type="image/png" href="assets/reel-static.png">
<link rel="alternate icon" type="image/gif" href="assets/reel-animated.gif">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
</head>
<body>
<a class="skip" href="#content">Skip to content</a>
<header class="header" id="top">
  <a class="brand" href="#top" aria-label="Eddie The Poet home">Eddie The Poet<span class="brand-sub">FILM &amp; STORY DEVELOPMENT</span></a>
  <button class="menu-button" type="button" aria-expanded="false" aria-controls="main-nav" aria-label="Toggle navigation"><span></span><span></span><span></span></button>
  <nav id="main-nav" class="navigation" aria-label="Site navigation">
    <a href="#projects">Projects</a><a href="#about">About</a><a href="#vision">Vision</a>
  </nav>
</header>
<main id="content">
 <section class="hero" aria-label="Eddie The Poet introduction">
  <img class="hero-image" src="assets/ship-hero.webp" alt="Crew members securing a ship's mast in rough seas" fetchpriority="high">
  <div class="hero-shade"></div>
  <div class="hero-inner">
   <p class="overline">EDDIE THE POET</p>
   <h1>Where cinema lives<br><em>beyond the screen.</em></h1>
   <p class="hero-line">An idea. A story. A concept. An entire world.</p>
   <a class="hero-cta" href="#projects">View Projects <span aria-hidden="true">↗</span></a>
  </div>
 </section>
 <section class="intro" aria-label="Welcome">
  <p class="overline">ORIGINAL STORIES</p>
  <h2>Stories worth <em>telling.</em></h2>
  <p>From the first spark of an idea to the world of a feature film, Eddie The Poet explores original stories, music, and creative development.</p>
 </section>
 <section id="projects" class="projects" aria-labelledby="projects-title">
  <div class="section-title"><div><p class="overline">SELECTED WORK</p><h2 id="projects-title">Projects</h2></div><p class="section-side">Original projects in development</p></div>
  <div class="project-grid">
   <button class="poster-card" data-image="assets/shades-floral.webp" data-title="Shades of Salvation" data-label="Project artwork" aria-label="View Shades of Salvation poster">
     <span class="poster-window"><img src="assets/shades-floral.webp" loading="lazy" alt="Shades of Salvation poster featuring flowers against the sky"></span><span class="poster-copy"><strong>Shades of Salvation</strong><small>In development</small></span>
   </button>
   <button class="poster-card" data-image="assets/life-matters.webp" data-title="Who’s Life Matters?" data-label="Project artwork" aria-label="View Who’s Life Matters poster">
     <span class="poster-window"><img src="assets/life-matters.webp" loading="lazy" alt="Who’s Life Matters project poster"></span><span class="poster-copy"><strong>Who’s Life Matters?</strong><small>In development</small></span>
   </button>
   <button class="poster-card" data-image="assets/kidnapper.webp" data-title="A Kidnapper" data-label="Project artwork" aria-label="View A Kidnapper poster">
     <span class="poster-window"><img src="assets/kidnapper.webp" loading="lazy" alt="A Kidnapper project poster"></span><span class="poster-copy"><strong>A Kidnapper</strong><small>In development</small></span>
   </button>
  </div>
  <div class="alt-row" aria-label="Alternate project art">
   <button class="alt" data-image="assets/shades-night.webp" data-title="Shades of Salvation" data-label="Alternate poster">Shades of Salvation <span>Alternate poster ↗</span></button>
   <button class="alt" data-image="assets/life-matters-alt.webp" data-title="Who’s Life Matters?" data-label="Alternate poster">Who’s Life Matters? <span>Alternate poster ↗</span></button>
  </div>
 </section>
 <section class="statement" aria-label="Our approach"><p>An idea.<br>A story.<br><em>A concept.</em></p><span>An entire world.</span></section>
 <section class="about" id="about" aria-labelledby="about-title">
  <div class="section-lead"><p class="overline">ABOUT</p><h2 id="about-title">Eddie<br><em>The Poet.</em></h2></div>
  <div class="prose"><p>Eddie The Poet develops original storytelling projects for the screen, bringing together film ideas, characters, and music.</p><p>Inspired by the history of motion pictures and the possibilities of contemporary filmmaking, the focus is on the stories themselves.</p><p class="signature">Dream Maker <span>·</span> Film Maker <span>·</span> Song Maker</p></div>
 </section>
 <section class="vision" id="vision" aria-labelledby="vision-title"><p class="overline">OUR VISION</p><div class="vision-grid"><h2 id="vision-title">One story.<br>One idea.<br><em>One world at a time.</em></h2><div><p>From Edison’s earliest moving pictures to the possibilities of modern cinema, every film begins with an idea.</p><p>Every scene is a possibility. Every story is waiting for its first frame.</p><p class="vision-ending">Where imagination becomes cinema.</p></div></div></section>
</main>
<footer class="site-footer">
  <span class="copyright">© 2026 Eddie The Poet</span>
  <div class="footer-links">
    <details class="footer-contact">
      <summary>Professional enquiries <span aria-hidden="true">↗</span></summary>
      <div class="footer-contact-reveal">
        <span>For project and business correspondence</span>
        <a href="mailto:contact@poeteddie.com">contact@poeteddie.com</a>
      </div>
    </details>
    <a class="back-top" href="#top">Back to top ↑</a>
  </div>
</footer>
<dialog class="viewer" aria-label="Project poster viewer"><button class="viewer-close" type="button" aria-label="Close poster">×</button><div class="viewer-content"><img alt="" class="viewer-image"><div class="viewer-meta"><strong class="viewer-title"></strong><span class="viewer-label"></span></div></div></dialog>
</body>
</html>