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>
This commit is contained in:
Alejandro Veras
@@ -0,0 +1,230 @@
|
||||
import { icon, eyebrow, btn, textLink, mark, SITE } from '../layout.mjs';
|
||||
|
||||
const ventures = [
|
||||
['search', 'MARKETING & AI SEARCH', 'Leading teams through a constantly changing search landscape.'],
|
||||
['chip', 'AI SOFTWARE', 'Building around new opportunities created by AI.'],
|
||||
['bottle', 'SPIRITS', 'Taking a consumer brand from idea to market.'],
|
||||
['edu', 'EDUCATION TECHNOLOGY', 'Creating technology designed for real classrooms.'],
|
||||
['shield', 'CYBERSECURITY', 'Solving security challenges for growing businesses.'],
|
||||
['bag', 'E-COMMERCE', 'Turning product ideas into businesses built around real customers.'],
|
||||
];
|
||||
|
||||
const exits = [
|
||||
['umbrella', 'Insurance', 'I grew an insurance business around strong client relationships, a clear understanding of the market, and service people could trust.'],
|
||||
['megaphone', 'Marketing', 'Led an agency focused on helping businesses reach the right audiences, strengthen their presence, and turn attention into growth.'],
|
||||
['heart', 'Home Healthcare', 'Grew a people-first business in an industry where trust, quality of care, and responsible leadership mattered every day.'],
|
||||
['shirt', 'Apparel', 'Took a consumer concept into the market, shaping the product, brand, and customer experience from the ground up.'],
|
||||
];
|
||||
|
||||
const ventureRows = ventures
|
||||
.map(([ic, name]) => `<div class="row"><span class="ico">${icon(ic)}</span><span class="name">${name.replace('&', '&')}</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('');
|
||||
|
||||
export default {
|
||||
path: '/',
|
||||
title: 'Dylan Mazzei | Founder, Operator & Entrepreneur',
|
||||
description: 'Meet Dylan Mazzei, a founder and operator leading ventures across AI, software, spirits, education, cybersecurity, e-commerce, and more.',
|
||||
body: `
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="wrap">
|
||||
<div class="hero-copy anim">
|
||||
<span class="tag tag-upper tag-white" style="border:1px solid var(--mist)"><span class="dot"></span>DYLAN MAZZEI | FOUNDER & OPERATOR</span>
|
||||
<h1 id="hero-title" class="h-display-lg">One Good Idea Has Never Been Enough for Me.</h1>
|
||||
<p class="lead">I’ve spent the last eight years turning ideas into companies across marketing, AI, software, spirits, 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/')}</div>
|
||||
</div>
|
||||
|
||||
<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 & 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>
|
||||
<span class="btn btn-primary btn-sm btn-block">START A CONVERSATION</span>
|
||||
</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 & 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>
|
||||
</section>
|
||||
|
||||
<section class="section" id="ventures" aria-labelledby="ventures-title">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('CURRENT VENTURES')}<h2 id="ventures-title" class="h-display">The Companies I’m Leading Today</h2></div>
|
||||
<div class="prose">
|
||||
<p>I like being close to the decisions that shape a company, especially when there is something new to figure out.</p>
|
||||
<p>Today, I lead businesses across AI, marketing, software, spirits, education technology, cybersecurity, and e-commerce. They operate in very different worlds, which keeps me curious.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features reveal">
|
||||
${ventures.map(([ic, h, p]) => `<article class="feature"><span class="ic">${icon(ic)}</span><h3>${h}</h3><p>${p}</p></article>`).join('')}
|
||||
</div>
|
||||
<div class="sec-foot reveal" style="justify-content:flex-end">${btn('EXPLORE MY VENTURES', '/portfolio/')}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="journey" aria-labelledby="journey-title">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('THE JOURNEY SO FAR')}<h2 id="journey-title" class="h-display">Good Opportunities Rarely Look the Same.</h2></div>
|
||||
<p class="body">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="cards cards-4 exits reveal">
|
||||
${exits
|
||||
.map(
|
||||
([ic, h, p]) => `<article class="card exit"><div class="card-top"><span class="ic">${icon(ic)}</span><span class="tag tag-white">${icon('check', 'check')}Exit</span></div><h3 class="h-md">${h}</h3><p>${p}</p></article>`
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="stats reveal">
|
||||
<div class="stat"><span>EXITS</span><b data-count="4">4</b></div>
|
||||
<div class="stat"><span>INDUSTRIES</span><b data-count="6">6</b></div>
|
||||
<div class="stat"><span>YEARS OPERATING</span><b data-count="8" data-suffix="+">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 class="section" id="about" aria-labelledby="about-title">
|
||||
<div class="wrap">
|
||||
<div class="showcase reveal">
|
||||
<div class="stack">
|
||||
${eyebrow('ABOUT DYLAN')}
|
||||
<h2 id="about-title" class="h-display">Curiosity Got Me Started. Ambition Kept Me Moving.</h2>
|
||||
<p class="quote-line">I have always been more interested in what could be possible than what already exists.</p>
|
||||
<div class="prose">
|
||||
<p>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>Business is a big part of my story, but it is not the whole story.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('GET TO KNOW DYLAN', '/about/')}</div>
|
||||
</div>
|
||||
<div class="visual portrait">
|
||||
<img src="/assets/dylan-portrait.jpg" alt="Dylan Mazzei" width="900" height="900" loading="lazy">
|
||||
<div class="flow" aria-hidden="true">
|
||||
<small>What connects them is the part I enjoy most:</small>
|
||||
<ol><li>seeing potential early</li><li>bringing the right people around it</li><li>giving an idea the chance to become something real</li></ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="consulting" aria-labelledby="consult-title">
|
||||
<div class="wrap">
|
||||
<div class="showcase reverse reveal">
|
||||
<div class="visual panel steps-panel" aria-hidden="true">
|
||||
<div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>Diagnosis Before Prescription.</strong></div>
|
||||
<ol>
|
||||
<li class="sp-step"><span class="num">1</span><h4>Business Diagnostic</h4></li>
|
||||
<li class="sp-step"><span class="num">2</span><h4>Roadmap Delivery</h4></li>
|
||||
<li class="sp-step"><span class="num">3</span><h4>Execution Sprint or Advisory</h4></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="stack">
|
||||
${eyebrow('CONSULT DYLAN')}
|
||||
<h2 id="consult-title" class="h-display">Sometimes You Need Another Founder in the Room.</h2>
|
||||
<p class="quote-line">I know what it is like to make decisions when the answer isn't obvious, and the outcome belongs to you.</p>
|
||||
<div class="prose">
|
||||
<p>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>
|
||||
<p>Every engagement starts with a diagnostic. Not because I already know the answer, but because your business deserves one that actually fits.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('WORK WITH DYLAN', '/consulting/')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="playbook" aria-labelledby="playbook-title">
|
||||
<div class="wrap">
|
||||
<div class="showcase reveal">
|
||||
<div class="stack">
|
||||
${eyebrow('FROM THE NOTEBOOK')}
|
||||
<h2 id="playbook-title" class="h-display">Different Businesses. Different Beginnings. One Playbook.</h2>
|
||||
<p class="body">I’ve started enough businesses to know the beginning matters.</p>
|
||||
<ul class="beats">
|
||||
<li>${icon('arrow')}The early calls.</li>
|
||||
<li>${icon('arrow')}The first customers.</li>
|
||||
<li>${icon('arrow')}The moments when an idea has to become more than an idea.</li>
|
||||
</ul>
|
||||
<p class="body">The Business Launch Playbook puts my approach to those moments on the page, shaped by years of starting, operating, and growing businesses across very different industries.</p>
|
||||
<div class="btn-row">${btn('GET THE PLAYBOOK', SITE.pending)}</div>
|
||||
</div>
|
||||
<div class="visual book-stage">
|
||||
<div class="book" role="img" aria-label="The Business Launch Playbook by Dylan Mazzei">
|
||||
${mark()}
|
||||
<h3>The Business Launch Playbook</h3>
|
||||
<div class="by">Dylan Mazzei</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="press" aria-label="Press and poetry">
|
||||
<div class="wrap duo reveal">
|
||||
<article class="card card-lg">
|
||||
${eyebrow('PRESS & MEDIA')}
|
||||
<h2 class="h-display">The Work Spoke. Then I Did.</h2>
|
||||
<div class="prose">
|
||||
<p>About the businesses. The exits. The ideas. What worked. What didn’t. And what I’m thinking about next.</p>
|
||||
<p>Some of those conversations made it into interviews, profiles, podcasts, and features.</p>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div>${btn('SEE THE FEATURES', '/press/')}</div>
|
||||
</article>
|
||||
<article class="card card-lg card-dark" id="poetry">
|
||||
${eyebrow('A DIFFERENT SIDE')}
|
||||
<h2 class="h-display">And Then There’s Poetry.</h2>
|
||||
<p class="poem"><span>Not every idea of mine becomes a company.</span><span>Some become words.</span></p>
|
||||
<p class="body">Poetry gives me somewhere to put thoughts that don't belong in a business plan, a strategy session, or a boardroom.</p>
|
||||
<div class="spacer"></div>
|
||||
<div>${btn('TURN THE PAGE', SITE.pending, 'ghost-light')}</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="connect" aria-labelledby="connect-title">
|
||||
<div class="wrap">
|
||||
<div class="closing reveal">
|
||||
<div class="closing-inner">
|
||||
${eyebrow('LET’S CONNECT')}
|
||||
<h2 id="connect-title" class="h-display-lg">Interesting Things Usually Start With a Conversation.</h2>
|
||||
<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 class="body-ink">If there’s something worth talking about, I’m listening.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
};
|
||||
Reference in New Issue
Block a user