Build dylanmazzei.com redesign as a static multi-page site

Eight pages (home, about, portfolio, consulting, marketing, business setup, contact, press) with copy taken verbatim from the content documents, a shared layout, and a zero-dependency Node build ready for Vercel. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 11:01:00 -04:00
commit ee8e0ab417
19 changed files with 2586 additions and 0 deletions
@@ -0,0 +1,127 @@
+import { icon, eyebrow, btn, textLink } from '../layout.mjs';
+
+const ventures = [
+  ['AI Growth Media Service', 'AG', 'CEO &amp; Board Member', 'AI-focused marketing and growth company working at the intersection of digital visibility, strategy, and performance.', ['AI Search', 'Digital Visibility', 'Growth Strategy']],
+  ['READTYCH', 'RT', 'Chief Marketing Officer, Co-Founder &amp; Board Member', 'Education technology company developing a two-screen Digital Book and connected learning platform designed around how students and educators actually work.', ['EdTech', 'Product Strategy', 'Market Development']],
+  ['Growth360Partners', 'G3', 'Chief Executive Officer &amp; Founder', 'Full-service digital marketing agency bringing together search, websites, paid media, social, optimization, and growth strategy.', ['Marketing', 'Search', 'Digital Growth']],
+  ['Infinitus Texas', 'IT', 'Partner &amp; Strategic Advisor', 'Strategic partnership focused on brand positioning, marketing direction, and creating stronger foundations for scalable growth.', ['Strategy', 'Positioning', 'Growth']],
+  ['Skinny Spiritz', 'SS', 'Chief Executive Officer &amp; Board Member', 'Beverage brand where product, positioning, placement, partnerships, and customer attention all have to work together.', ['Spirits', 'Brand Growth', 'Partnerships']],
+  ['Techie Marketing', 'TM', 'Chief Web3 Officer, Co-Founder &amp; Advisor', 'Digital marketing and branding company created around the needs of technology and Web3-focused businesses.', ['Web3', 'Branding', 'Digital Strategy']],
+  ['AiGrowth360', 'A3', 'Chief Executive Officer &amp; Founder', 'Performance-driven digital marketing company using AI, analytics, and search strategy to find better ways to create measurable growth.', ['AI', 'Analytics', 'Performance Marketing']],
+  ['Gangi Apparel', 'GA', 'Strategic Advisor &amp; Partner', 'Apparel brand focused on fashion, identity, positioning, and creating a brand people can recognize beyond the product itself.', ['Apparel', 'Brand Positioning', 'Consumer']],
+  ['meSEO', 'me', 'Founder &amp; Strategic Growth Leader', 'Web application built around AI search, SEO, and the changing ways businesses are discovered online.', ['Software', 'AI Search', 'SEO']],
+];
+
+const capabilities = [
+  'SEO Strategy', 'LLMO / AI Search Visibility', 'GEO / Local Expansion', 'Website Development', 'Website Optimization',
+  'Social Media Management', 'Paid Media', 'Brand Development', 'Strategic Partnerships', 'Investor Relations',
+  'Venture Growth', 'Business Development', 'Product Development', 'Fashion Brand Building',
+];
+
+const industries = [
+  'Education', 'Technology', 'AI', 'Digital Marketing', 'Beverage', 'Fashion / Apparel', 'Consumer Brands',
+  'Web3', 'Healthcare', 'Business Development', 'Partnerships', 'Investor Relations', 'Software / Web Apps',
+];
+
+const half = Math.ceil(capabilities.length / 2);
+const row = (items) => items.map((c) => `<span class="cap"><i></i>${c}</span>`).join('');
+const marquee = (items, rev) => `<div class="marquee"><div class="marquee-track${rev ? ' rev' : ''}">${row(items)}<span aria-hidden="true" style="display:contents">${row(items)}</span></div></div>`;
+
+export default {
+  path: '/portfolio/',
+  title: 'Venture Portfolio &amp; Brands | Dylan Mazzei',
+  description: 'Explore Dylan Mazzei’s portfolio of companies, brands, partnerships, and operating roles across AI, marketing, technology, education, and more.',
+  body: `
+<section class="page-hero" aria-labelledby="pf-hero">
+  <div class="wrap page-hero-grid">
+    <div class="stack anim">
+      ${eyebrow('PORTFOLIO')}
+      <h1 id="pf-hero" class="h-display-lg">Different Companies. Different Roles. Same Responsibility.</h1>
+      <p class="lead">I’ve worked across companies at very different stages, sometimes as founder, sometimes as operator, partner, advisor, or board member.</p>
+      <div class="btn-row">${btn('EXPLORE MY CURRENT VENTURES', '#ventures')}${btn('WORK WITH DYLAN', '/consulting/', 'ghost')}</div>
+    </div>
+    <div class="panel anim" aria-hidden="true">
+      <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>The title changes. The expectation doesn’t.</strong></div>
+      <ol class="steps-panel" style="padding:8px 0">
+        <li class="sp-step"><span class="num">1</span><h4>Understand the business.</h4></li>
+        <li class="sp-step"><span class="num">2</span><h4>Know where I can make a difference.</h4></li>
+        <li class="sp-step"><span class="num">3</span><h4>Then be accountable for what happens next.</h4></li>
+      </ol>
+    </div>
+  </div>
+  <p class="sr-only">The title changes. The expectation doesn’t. Understand the business. Know where I can make a difference. Then be accountable for what happens next.</p>
+</section>
+
+<section class="section" id="ventures" aria-labelledby="vb">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <div class="stack-sm">${eyebrow('FOUNDER-LED. OPERATOR-DRIVEN. ALWAYS CLOSE TO THE WORK.')}<h2 id="vb" class="h-display">Ventures &amp; Brands</h2></div>
+      <p class="body">Different industries have asked different things of me. That range is part of the point.</p>
+    </div>
+    <div class="ventures reveal">
+      ${ventures
+        .map(
+          ([name, mono, role, desc, focus]) => `<article class="venture">
+        <div class="venture-head"><span class="mono" aria-hidden="true">${mono}</span></div>
+        <div class="stack-xs"><h3>${name}</h3><p class="vrole">${role}</p></div>
+        <p>${desc}</p>
+        <div class="focus"><small>FOCUS:</small><div class="chips">${focus.map((f) => `<span class="tag">${f}</span>`).join('')}</div></div>
+      </article>`
+        )
+        .join('')}
+    </div>
+    <div class="sec-foot reveal" style="justify-content:flex-end">${textLink('SEE HOW I THINK AS AN OPERATOR', '/about/')}</div>
+  </div>
+</section>
+
+<section class="section band" aria-labelledby="caps">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <div class="stack-sm">${eyebrow('CORE CAPABILITIES')}<h2 id="caps" class="h-display">What I Keep Getting Pulled Into.</h2></div>
+      <p class="body">Different companies. Different problems. Certain kinds of work keep finding their way back to my desk.</p>
+    </div>
+  </div>
+  <div class="stack-sm reveal">
+    ${marquee(capabilities.slice(0, half))}
+    ${marquee(capabilities.slice(half), true)}
+  </div>
+  <div class="wrap">
+    <div class="sec-foot reveal" style="border-color:var(--dark-line);margin-top:48px">
+      <p style="color:var(--ash)">The operating experience behind these capabilities also shapes my consulting work with founders.</p>
+      ${btn('WORK WITH DYLAN', '/consulting/', 'light')}
+    </div>
+  </div>
+</section>
+
+<section class="section" aria-labelledby="ind">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <div class="stack-sm">${eyebrow('INDUSTRIES &amp; SECTORS')}<h2 id="ind" class="h-display">I Never Saw Much Value in Staying in One Lane.</h2></div>
+      <p class="body">Moving between industries keeps me from assuming the last answer will work on the next problem.</p>
+    </div>
+    <div class="industries reveal">
+      ${industries.map((n, i) => `<div class="industry"><span class="index">${String(i + 1).padStart(2, '0')}</span><b>${n}</b></div>`).join('')}
+      <a class="industry industry-note" href="/about/"><p>That range has also included businesses that went through successful exits. You can read more about the journey behind the portfolio.</p>${icon('arrow', 'check')}</a>
+      
+    </div>
+  </div>
+</section>
+
+<section class="section" aria-labelledby="next">
+  <div class="wrap">
+    <div class="closing reveal">
+      <div class="closing-inner">
+        ${eyebrow('WHAT’S NEXT')}
+        <h2 id="next" class="h-display-lg">The Portfolio Is Still Moving.</h2>
+        <div class="prose">
+          <p>Some of these businesses are growing. Others are changing. New ideas are already competing for attention.</p>
+          <p>If you want to see what I’m actively operating today, start with my current ventures.</p>
+          <p class="body-ink">If you have a business, partnership, or opportunity worth putting on the table, I’m open to the conversation.</p>
+        </div>
+        <div class="btn-row">${btn('EXPLORE MY VENTURES', '#ventures', 'ghost')}${btn('START A CONVERSATION', '/contact/')}</div>
+      </div>
+    </div>
+  </div>
+</section>
+`,
+};