dylanmazzei-website/src/pages/home.mjs

import { icon, eyebrow, btn, textLink, mark } from '../layout.mjs';

const ventures = [
  ['search', 'MARKETING & AI SEARCH'],
  ['chip', 'AI SOFTWARE'],
  ['edu', 'EDUCATION TECHNOLOGY'],
  ['shield', 'CYBERSECURITY'],
  ['bag', 'E-COMMERCE'],
];

const exits = [
  ['Insurance', 'I grew an insurance business around strong client relationships, a clear understanding of the market, and service people could trust.', '<path d="M24 5 8 11v11c0 10 7 17 16 21 9-4 16-11 16-21V11z"/><path d="m17 24 5 5 9-10"/>'],
  ['Marketing', 'Led an agency focused on helping businesses reach the right audiences, strengthen their presence, and turn attention into growth.', '<path d="M8 20v8h6l14 8V12l-14 8z"/><path d="M34 18c3 2 3 10 0 12M14 28l2 9h5l-2-9"/>'],
  ['Home Healthcare', 'Grew a people-first business in an industry where trust, quality of care, and responsible leadership mattered every day.', '<path d="M6 22 24 7l18 15M10 20v21h28V20"/><path d="M24 35c-6-4-8-7-8-10a4.2 4.2 0 0 1 8-1.5A4.2 4.2 0 0 1 32 25c0 3-2 6-8 10z"/>'],
  ['Apparel', 'Took a consumer concept into the market, shaping the product, brand, and customer experience from the ground up.', '<path d="M17 6 6 12l4 9 5-2v23h18V19l5 2 4-9-11-6c-1 3-4 5-7 5s-6-2-7-5z"/>'],
];

const consult = [
  ['<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/>', 'We look closely at the business', ''],
  ['<path d="M4 5h16v11H9l-5 4z"/>', 'Talk through what is getting in the way', ''],
  ['<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>', 'Figure out where your attention can make the biggest difference', ''],
  ['<path d="M12 3 4 6v6c0 4.5 3.4 7.6 8 9 4.6-1.4 8-4.5 8-9V6z"/><path d="m8.5 12 2.5 2.5 4.5-5"/>', 'Every engagement starts with a diagnostic.', 'Not because I already know the answer, but because your business deserves one that actually fits.'],
];

const ventureRows = ventures
  .map(([ic, name]) => `<div class="row"><span class="ico">${icon(ic)}</span><span class="name">${name}</span><span class="status"><span class="dot"></span>Active</span></div>`)
  .join('');
const exitRows = exits
  .map(([name]) => `<div class="row">${icon('check', 'check')}<span class="name">${name}</span><span class="status">Exited</span></div>`)
  .join('');
const exitWords = ['Insurance.', 'Marketing.', 'Home&nbsp;Healthcare.', 'Apparel.'];
const arrowUR = '<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10 10 4M5 4h5v5"/></svg>';

export default {
  path: '/',
  title: 'Dylan Mazzei | Founder, Operator &amp; Entrepreneur',
  description: 'Meet Dylan Mazzei, a founder and operator leading ventures across AI, software, education, cybersecurity, e-commerce, and more.',
  head: '<link rel="stylesheet" href="/assets/home.css">',
  scripts: '<script src="/assets/o2/three.min.js" defer></script>\n<script src="/assets/home.js" defer></script>',
  body: `
<div class="o2">

<section id="hero" aria-labelledby="hero-title">
  <div class="beam" aria-hidden="true"></div>
  <div class="floaters" id="floaters" aria-hidden="true"></div>
  <div class="hero-in">
    <div class="emblem" id="emblem"><img alt="Dylan Mazzei monogram" src="/assets/o2/dylan-monogram.webp" width="720" height="480"></div>
    ${eyebrow('DYLAN MAZZEI | FOUNDER &amp; OPERATOR')}
    <h1 id="hero-title"><span class="grad">One Good Idea Has Never</span> <span class="grad2">Been Enough for Me.</span></h1>
    <p class="lead">I’ve spent the last eight years turning ideas into companies across marketing, AI, software, education, cybersecurity, e-commerce, and more. Four have been sold. Others are growing. And I’m nowhere near finished building.</p>
    <div class="btn-row">${btn('MY STORY', '/about/')}${btn('EXPLORE MY VENTURES', '#ventures', 'ghost')}</div>
    <div class="icon-row" id="iconRow" aria-hidden="true"></div>
  </div>
  <div class="scroll-note" aria-hidden="true"><i></i></div>
</section>

<section class="wsec" id="words" aria-label="Four exits">
  <div class="wsec-in">
    <div class="cube-glow" aria-hidden="true"></div>
    <div class="cube" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="w-top">${eyebrow('4 EXITS')}</div>
    <div class="wmask" aria-hidden="true"><div id="wTrack">${[...exitWords, ...exitWords].map((w) => `<span>${w}</span>`).join('')}</div></div>
    <p class="sr-only">Insurance. Marketing. Home Healthcare. Apparel.</p>
    <div class="w-side"><p>Four have been sold. Others are growing. And I’m nowhere near finished building.</p>${btn('FOLLOW THE JOURNEY', '#journey', 'ghost', 'btn-sm')}</div>
  </div>
</section>

<section id="building" aria-labelledby="building-title">
  <div class="wrap bgrid">
    <div class="bhead reveal">
      ${eyebrow('CURRENT VENTURES')}
      <h2 id="building-title" class="h-display">The Companies I’m Leading Today</h2>
      <p class="lead">I like being close to the decisions that shape a company, especially when there is something new to figure out.</p>
      <div>${btn('EXPLORE MY VENTURES', '/portfolio/')}</div>
    </div>
    <div class="cluster-fit reveal">
        <div class="cluster" aria-hidden="true">
          <div class="panel dash">
            <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span>Portfolio</span><span class="panel-url">dylanmazzei.com/portfolio</span></div>
            <div class="dash-body">
              <div class="dash-head"><div><small>CURRENT VENTURES</small><strong>The Companies I’m Leading Today</strong></div></div>
              <div class="kpis">
                <div class="kpi"><span>EXITS</span><b>4</b></div>
                <div class="kpi"><span>INDUSTRIES</span><b>6</b></div>
                <div class="kpi"><span>YEARS OPERATING</span><b>8+</b></div>
                <div class="kpi"><span>WHERE I WORK</span><b>4</b></div>
              </div>
              <div class="dash-cols">
                <div class="list"><div class="list-head"><span>CURRENT VENTURES</span><span></span></div>${ventureRows}</div>
                <div class="list"><div class="list-head"><span>4 EXITS</span><span></span></div>${exitRows}</div>
              </div>
            </div>
          </div>
          <div class="panel profile">
            <img src="/assets/dylan-portrait.jpg" alt="" width="900" height="900">
            <div class="profile-meta">
              <strong>Dylan Mazzei</strong>
              <span class="prole">FOUNDER &amp; OPERATOR</span>
              <div class="chips"><span class="tag">Texas</span><span class="tag">Florida</span><span class="tag">New York</span><span class="tag">Dubai</span></div>
            </div>
          </div>
          <div class="panel panel-dark code">
            <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span class="file">${icon('brace')}dylan.json</span></div>
<pre class="code-pre"><span class="ln"><span class="p">{</span></span><span class="ln">  <span class="k">"role"</span><span class="p">:</span> <span class="s">"Founder &amp; Operator"</span><span class="p">,</span></span><span class="ln">  <span class="k">"exits"</span><span class="p">:</span> <span class="n">4</span><span class="p">,</span></span><span class="ln">  <span class="k">"industries"</span><span class="p">:</span> <span class="n">6</span><span class="p">,</span></span><span class="ln">  <span class="k">"yearsOperating"</span><span class="p">:</span> <span class="s">"8+"</span><span class="p">,</span></span><span class="ln">  <span class="k">"whereIWork"</span><span class="p">: [</span></span><span class="ln">    <span class="s">"Texas"</span><span class="p">,</span> <span class="s">"Florida"</span><span class="p">,</span></span><span class="ln">    <span class="s">"New York"</span><span class="p">,</span> <span class="s">"Dubai"</span></span><span class="ln">  <span class="p">],</span></span><span class="ln">  <span class="k">"finishedBuilding"</span><span class="p">:</span> <span class="n">false</span><span class="cursor"></span></span><span class="ln"><span class="p">}</span></span></pre>
          </div>
        </div>
    </div>
  </div>
</section>

<section id="ventures" aria-labelledby="ventures-title">
  <div class="wrap">
    <div class="vhead reveal">
      ${eyebrow('CURRENT VENTURES')}
      <h2 id="ventures-title" class="sr-only">Current ventures</h2>
      <p class="lead">Today, I lead businesses across AI, marketing, software, education technology, cybersecurity, and e-commerce. They operate in very different worlds, which keeps me curious.</p>
    </div>
    <ul class="sr-only">
      <li>MARKETING &amp; AI SEARCH Leading teams through a constantly changing search landscape.</li>
      <li>AI SOFTWARE Building around new opportunities created by AI.</li>
      <li>EDUCATION TECHNOLOGY Creating technology designed for real classrooms.</li>
      <li>CYBERSECURITY Solving security challenges for growing businesses.</li>
      <li>E-COMMERCE Turning product ideas into businesses built around real customers.</li>
    </ul>
    <div class="vtabs reveal" id="vtabs" role="tablist" aria-label="Ventures"></div>
    <div class="vpanel reveal" id="vpanel">
      <div class="vinfo">
        <div><span class="vnum" id="vnum">01 / 05</span></div>
        <div class="vt" id="vt" aria-live="polite"><h3 id="vname">MARKETING &amp; AI SEARCH</h3><p id="vdesc">Leading teams through a constantly changing search landscape.</p></div>
        <div class="btn-row">${btn('EXPLORE MY VENTURES', '/portfolio/', 'primary', 'btn-sm')}</div>
      </div>
      <canvas id="vcanvas" aria-hidden="true"></canvas>
      <div class="varrows">
        <button id="vprev" type="button" aria-label="Previous venture"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4 3 8l4 4"/></svg></button>
        <button id="vnext" type="button" aria-label="Next venture"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button>
      </div>
    </div>
  </div>
</section>

<section id="journey" aria-labelledby="journey-title">
  <div class="wrap">
    <div class="jgrid">
      <div class="jhead reveal">
        ${eyebrow('THE JOURNEY SO FAR')}
        <h2 id="journey-title" class="h-display">Good Opportunities Rarely Look the Same.</h2>
        <p class="lead">I’ve never looked at opportunity through the lens of one industry. Over the years, that curiosity has taken me into very different businesses, including four that grew into successful exits.</p>
      </div>
      <div class="jstage" id="jstage">
        <div class="floor" aria-hidden="true"></div>
        <div class="pins" aria-hidden="true">
          ${['Insurance', 'Marketing', 'Home Healthcare', 'Apparel', 'Today'].map((p) => `<div class="pn"><i></i><b></b><em>${p}</em></div>`).join('')}
        </div>
        <canvas id="fw" aria-hidden="true"></canvas>
        <p class="jfinal" id="jfinal">Others are growing. And I’m nowhere near finished building.</p>
        <button class="btn btn-ghost btn-sm jreplay" id="jreplay" type="button">Replay</button>
      </div>
      <div class="jbody">
        <ul class="jlist">
          ${exits.map(([h, p, path]) => `<li class="jx"><div class="ji"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg></div><div><h3>${h}</h3><p>${p}</p></div></li>`).join('')}
        </ul>
      </div>
    </div>
    <div class="stats">
      <div class="stat"><span>EXITS</span><b id="cEx">4</b></div>
      <div class="stat"><span>INDUSTRIES</span><b id="cInd">6</b></div>
      <div class="stat"><span>YEARS OPERATING</span><b id="cYr">8+</b></div>
      <div class="stat stat-note">
        <p>Different businesses have called for different decisions, teams, and ways of thinking. That range still shapes how I approach every opportunity today.</p>
        ${textLink('FOLLOW THE JOURNEY', '/about/')}
      </div>
    </div>
  </div>
</section>

<section id="about" aria-labelledby="about-title">
  <div class="wrap agrid">
    <div class="stack">
      ${eyebrow('ABOUT DYLAN')}
      <h2 id="about-title" class="awords"><span class="grad">Curiosity</span><span class="grad">Got Me Started.</span><span class="neon">Ambition</span><span class="neon n2">Kept Me Moving.</span></h2>
    </div>
    <div class="atext reveal">
      <p class="q">I have always been more interested in what could be possible than what already exists.</p>
      <p class="lead">That curiosity has taken me into industries I never expected to enter, across markets, teams, and ideas that looked nothing alike from the outside. What connects them is the part I enjoy most: seeing potential early, bringing the right people around it, and giving an idea the chance to become something real.</p>
      <p class="lead">Business is a big part of my story, but it is not the whole story.</p>
      ${btn('GET TO KNOW DYLAN', '/about/')}
    </div>
  </div>
</section>

<section id="consult" aria-labelledby="consult-title">
  <div class="wrap">
    <div class="chead">
      <div class="stack-sm reveal">${eyebrow('CONSULT DYLAN')}<h2 id="consult-title" class="h-display">Sometimes You Need Another Founder in the Room.</h2></div>
      <div class="stack-sm reveal">
        <p class="lead" style="color:var(--ink)">I know what it is like to make decisions when the answer isn't obvious, and the outcome belongs to you.</p>
        <p class="lead">That is the perspective I bring when I work with founders. We look closely at the business, talk through what is getting in the way, and figure out where your attention can make the biggest difference.</p>
        <div>${btn('WORK WITH DYLAN', '/consulting/')}</div>
      </div>
    </div>
    <div class="cgrid">
      ${consult.map(([path, h, p]) => `<article class="cc reveal"><div class="cic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg></div><h3>${h}</h3>${p ? `<p>${p}</p>` : ''}</article>`).join('')}
    </div>
  </div>
</section>

<section id="press" aria-labelledby="press-title">
  <div class="wrap">
    <div class="phead">
      <div class="stack-sm reveal">${eyebrow('PRESS &amp; MEDIA')}<h2 id="press-title" class="h-display">The Work Spoke. Then I Did.</h2></div>
      <div class="stack-sm reveal" style="max-width:48ch">
        <p class="lead">About the businesses. The exits. The ideas. What worked. What didn’t. And what I’m thinking about next.</p>
        <p class="lead">Some of those conversations made it into interviews, profiles, podcasts, and features.</p>
      </div>
    </div>
    <div class="pgrid">
      ${['Interviews', 'Profiles', 'Podcasts', 'Features'].map((t) => `<a class="pt reveal" href="/press/"><h3>${t}</h3><span class="arrow">${arrowUR}</span></a>`).join('')}
    </div>
    <div class="btn-row reveal" style="margin-top:2rem">${btn('SEE THE FEATURES', '/press/', 'ghost')}</div>
  </div>
</section>

<section id="poetry" aria-labelledby="poetry-title">
  <div class="arc" aria-hidden="true"></div>
  <div class="in-wrap reveal">
    ${eyebrow('A DIFFERENT SIDE')}
    <h2 id="poetry-title" class="h-display">And Then There’s Poetry.</h2>
    <p class="poem-line">Not every idea of mine becomes a company.<br>Some become words.</p>
    <p class="lead">Poetry gives me somewhere to put thoughts that don't belong in a business plan, a strategy session, or a boardroom.</p>
  </div>
</section>

<section id="connect" aria-labelledby="connect-title">
  <div class="talk" aria-hidden="true"><img class="ribbon" alt="" src="/assets/o2/ribbon-hd.webp" width="3200" height="1800" loading="lazy"><h2>Let’s talk</h2></div>
  <div class="cbody">
    ${eyebrow('LET’S CONNECT')}
    <h3 id="connect-title" class="grad">Interesting Things Usually Start With a Conversation.</h3>
    <div class="prose">
      <p>Maybe you have an idea taking shape. A business at an interesting crossroads. A partnership worth exploring. Or simply a question you think I might have a perspective on.</p>
      <p>I’ve learned to pay attention when an interesting conversation begins. Some of the best opportunities in my life have started exactly that way.</p>
      <p style="color:var(--ink)">If there’s something worth talking about, I’m listening.</p>
    </div>
    <div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
  </div>
</section>

</div>
`,
};