index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Evan O'Dacre | Email Marketing & Marketing Operations</title>
  <meta name="description" content="Email campaigns, responsive email development, and marketing automation by Evan O'Dacre. Explore client work and production tools, and get in touch about email marketing roles.">
  <link rel="stylesheet" href="portfolio.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header class="hero">
    <div class="container">
      <p class="name">Evan O'Dacre</p>
      <p class="eyebrow">Email marketing & marketing operations</p>
      <h1>Email campaigns.<br>The systems behind them.</h1>
      <p class="intro">I plan, write, design, and build responsive emails — and develop tools that make marketing workflows easier to manage.</p>
      <p class="role-note">Interested in email marketing roles with room to contribute to automation and marketing operations.</p>
      <div class="actions">
        <a class="button primary" href="#work">Explore selected work <span aria-hidden="true">↓</span></a>
        <a class="text-link" href="mailto:evanodacre@gmail.com">Email me about a role <span aria-hidden="true">↗</span></a>
      </div>
      <p class="tools">Klaviyo · Mailchimp · Figma · MJML / HTML · Laravel</p>
    </div>
  </header>
  <main id="main" class="container" tabindex="-1">
    <section id="work" aria-labelledby="selected-work">
      <p class="eyebrow">Selected work</p>
      <h2 id="selected-work">See what I build.</h2>
      <p class="section-intro">Client email work and the tools behind production. Each project explains my contribution and what was delivered.</p>
      <div class="work-list">
        <article class="card">
          <p class="eyebrow">Email production · Development project</p>
          <h3>Modular Email Library</h3>
          <p>A reusable workspace for composing, validating, and exporting branded responsive emails.</p>
          <p class="deliverable"><strong>Built:</strong> Structured email builds and Klaviyo-ready HTML exports.</p>
          <a class="text-link" href="modular-email-library.html">Explore the email production tool <span aria-hidden="true">→</span></a>
        </article>
        <article class="card campaign-card">
          <div>
            <p class="eyebrow">Strategy, copy & design · Client work</p>
            <h3>Fiihii: Cyber Monday campaign</h3>
            <p>A five-email promotional sequence for a smoothie and wellness brand, from the first teaser to the final extension.</p>
            <p class="deliverable"><strong>Delivered:</strong> Campaign strategy, copy, Figma designs, five responsive MJML/HTML templates, and implementation notes.</p>
            <a class="text-link" href="fiihii.html">See the five-email campaign <span aria-hidden="true">→</span></a>
          </div>
          <a class="preview" href="fiihii.html" aria-label="View Fiihii campaign designs">
            <img src="images/fiihii/launch%20email.png" width="600" height="420" loading="lazy" decoding="async" alt="Preview of the Fiihii Cyber Monday launch email design">
          </a>
        </article>
        <article class="card">
          <p class="eyebrow">Web development & email · Client work</p>
          <h3>Sanecotec</h3>
          <p>Database-driven Laravel website pages, plus email communication for a workshop promotion and follow-up.</p>
          <p class="deliverable"><strong>Delivered:</strong> Website filtering functionality and two responsive emails used by the business.</p>
          <a class="text-link" href="sanecotec.html">Read about the website and workshop emails <span aria-hidden="true">→</span></a>
        </article>
      </div>
      <a class="gallery-link" href="email-designs.html"><span class="gallery-heading"><strong>Want to see more email designs?</strong><span class="gallery-arrow" aria-hidden="true">→</span></span><span>Browse campaigns, welcome flows, and promotional email screenshots.</span></a>
      <div class="supporting-work">
        <article>
          <p class="eyebrow">Marketing operations · Development project</p>
          <h3>Agency</h3>
          <p>A platform connecting prospect research, qualification, outreach, website demos, and delivery in one workflow.</p>
          <a class="text-link" href="agency.html">Explore the Agency workflow <span aria-hidden="true">→</span></a>
        </article>
        <article>
          <p class="eyebrow">Website production & human QA</p>
          <h3>Church Websites</h3>
          <p>Lightweight websites produced through the Agency workflow, then manually reviewed for clarity, usability, and design.</p>
          <a class="text-link" href="church-websites.html">See the website projects <span aria-hidden="true">→</span></a>
        </article>
      </div>
    </section>
    <section class="additional-work" aria-labelledby="digital-missions">
      <p class="eyebrow">Supporting work · Email program preparation</p>
      <h2 id="digital-missions">Digital Missions Display</h2>
      <p>Prepared an email program for a 5,000+ subscriber Mailchimp audience, including planning, development, and platform preparation. The program did not launch.</p>
      <a class="text-link" href="MissionaryConnectAppEmailStrategyResearch.html">Read about the preparation <span aria-hidden="true">→</span></a>
    </section>
    <section aria-labelledby="capabilities">
      <p class="eyebrow">What I contribute</p>
      <h2 id="capabilities">From the inbox to the workflow.</h2>
      <div class="three-columns">
        <article><h3>Email marketing</h3><p>Campaigns, lifecycle flows, copy, design, and responsive development. I turn ideas into branded emails and review the output before handoff.</p><p class="tools">Klaviyo · Mailchimp · Figma · MJML · HTML/CSS</p></article>
        <article><h3>Marketing automation</h3><p>Lead research, enrichment, qualification, and repeatable workflows. I connect data sources and APIs and automate repetitive steps.</p><p class="tools">APIs · AI-assisted research · Workflow automation</p></article>
        <article><h3>Development</h3><p>Internal tools and marketing systems that turn a useful workflow into something that can be run, reviewed, and improved.</p><p class="tools">Laravel · PHP · JavaScript · Databases</p></article>
      </div>
    </section>
    <section class="about-section" aria-labelledby="about">
      <div><p class="eyebrow">About me</p><h2 id="about">A developer's eye.<br>A marketer's curiosity.</h2></div>
      <div><p>I started in web development and moved into email marketing because I like how it brings design, copy, and technology together. My development background lets me build the tools around a campaign as well as the email itself.</p></div>
    </section>
    <section aria-labelledby="approach">
      <p class="eyebrow">How I work</p>
      <h2 id="approach">Understand. Build. Review.</h2>
      <ol class="three-columns steps">
        <li><h3>Understand & research</h3><p>Start with the audience, marketing problem, and existing workflow before choosing a tool.</p></li>
        <li><h3>Design & build</h3><p>Turn the brief into a campaign or system, automating repetitive work where it helps.</p></li>
        <li><h3>Test & improve</h3><p>Check the details and refine the output. AI-assisted work gets the same hands-on review as anything else I build.</p></li>
      </ol>
    </section>
    <section id="contact" class="contact" aria-labelledby="contact-heading">
      <h2 id="contact-heading">Get in touch</h2>
      <p>Have a role or project in mind? I'd love to hear from you.</p>
      <p class="email-address"><a href="mailto:evanodacre@gmail.com">evanodacre@gmail.com</a></p>
      <a class="button primary" href="mailto:evanodacre@gmail.com">Send me an email <span aria-hidden="true">↗</span></a>
    </section>
  </main>
  <footer class="container">© 2026 Evan O'Dacre</footer>
</body>
</html>