Initial commit: site + GA4 + Docker for Coolify
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
import { icon, eyebrow, btn, paras } from '../layout.mjs';
|
||||
|
||||
const lines = (arr) => `<div class="lines">${arr.map((t, i) => `<p${i === 0 ? ' class="ink"' : ''}>${t}</p>`).join('')}</div>`;
|
||||
|
||||
const firsts = [
|
||||
['The First Yes', ['Before the team, the systems, and the growth plan, someone has to believe in what you’re selling.', 'That first customer teaches you something no projection can.']],
|
||||
['The First Wrong Call', ['Eventually, you make one.', 'Mine taught me something useful: being wrong is expensive only if your ego keeps you there.']],
|
||||
['The First Real Win', ['It changes your confidence.', 'Not because you suddenly know everything.', 'Because now you know you can figure something out.']],
|
||||
];
|
||||
|
||||
const noStraight = [
|
||||
['compass', 'New Industry. Blank Page.', ['Walking into a business you don’t completely understand is uncomfortable.', 'Good.', 'It makes you listen before speaking, find people smarter than you, and question things an insider might have stopped noticing.']],
|
||||
['layers', 'Different Business. Familiar Problem.', ['The terminology changes.', 'The fundamentals have a strange habit of showing up again: attention, trust, people, economics, execution, and whether the customer actually cares.']],
|
||||
['spark', 'Beginner Is a Useful Position.', ['I never want experience to make me too sophisticated to ask an obvious question.', 'Obvious questions have opened some very interesting doors.']],
|
||||
];
|
||||
|
||||
const people = [
|
||||
['mic', 'Speak Your Mind', ['I want people who bring their own judgment to the table. If there\'s a better approach, a concern I\'ve overlooked, or a decision worth questioning, I want to hear it.', 'A different perspective can change everything.']],
|
||||
['users', 'Experience Isn\'t Everything', ['Good ideas don\'t always come from the most senior person in the room.', 'I pay attention to people who understand the work firsthand. Sometimes the clearest insight comes from someone who has just joined the team.']],
|
||||
['target', 'Decide and Deliver', ['I believe in open discussions and honest disagreements. Every perspective deserves consideration, but eventually, a decision has to be made.', 'Once we agree on a direction, the focus shifts to execution. That\'s where a strong team proves itself.']],
|
||||
];
|
||||
|
||||
const exitsLater = [
|
||||
['Winning Doesn’t Make You Right Forever', ['Something worked.', 'Great.', 'The next company does not owe you the same answer.']],
|
||||
['Pattern Recognition Has a Catch', ['Experience helps you see what you’ve seen before.', 'It can also convince you that something new is familiar.', 'I try to know the difference.']],
|
||||
['I Still Want More', ['Not more for the sake of accumulation.', 'More problems worth thinking about. More people who raise my standard. More ideas that make ignoring them difficult.', 'My definition of ambition has become more selective, not smaller.']],
|
||||
];
|
||||
|
||||
const knowNow = [
|
||||
['I Know What I’m Good At.', ['And I’ve become much better at recognizing who is better than me at everything else.']],
|
||||
['I Know When I Don’t Know.', ['That sentence gets easier with experience.', 'It also gets more valuable.']],
|
||||
['I Know I’m Not Finished.', ['Not because I have a number of companies left to start or some finish line in mind.', 'I just haven’t stopped being interested yet.']],
|
||||
];
|
||||
|
||||
export default {
|
||||
path: '/about/',
|
||||
title: 'About Dylan Mazzei | Founder, Operator & Entrepreneur',
|
||||
description: 'Meet Dylan Mazzei, a founder and operator shaped by eight years of companies, four exits, hard decisions, changing industries, and what comes next.',
|
||||
body: `
|
||||
<section class="page-hero" aria-labelledby="about-hero">
|
||||
<div class="wrap page-hero-grid">
|
||||
<div class="stack anim">
|
||||
${eyebrow('ABOUT DYLAN')}
|
||||
<h1 id="about-hero" class="h-display-lg">Founder in Title. Operator in Practice.</h1>
|
||||
<p class="statement">Anyone can have an opinion about a business.<br><em>I prefer being responsible for one.</em></p>
|
||||
<div class="prose">
|
||||
<p>For more than eight years, I’ve put ideas into the world, brought people around them, watched customers respond, made decisions with imperfect information, and learned what happens after the strategy meeting ends.</p>
|
||||
<p>Four companies have been sold. Others are still growing, changing, and giving me new things to figure out.</p>
|
||||
<p class="body-ink">That’s the part I like.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual portrait anim">
|
||||
<img src="/assets/photos/dylan-gallery-wall.jpg" alt="Dylan Mazzei" width="1100" height="1467" style="object-position:center 18%">
|
||||
<div class="flow" aria-hidden="true">
|
||||
<small>Four companies have been sold.</small>
|
||||
<ol><li>Insurance</li><li>Marketing</li><li>Home Healthcare</li><li>Apparel</li></ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="beginning">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('THE BEGINNING')}<h2 id="beginning" class="h-display">Business Made More Sense Once It Was Mine to Figure Out.</h2></div>
|
||||
<p class="body">I grew up in South Florida and studied business. Then I got close enough to the real thing to understand how much the classroom could never simulate.</p>
|
||||
</div>
|
||||
<div class="process reveal">
|
||||
${firsts.map(([h, p], i) => `<article class="process-step"><span class="num">${i + 1}</span><h3 class="h-md">${h}</h3>${lines(p)}</article>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="straight">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('NO STRAIGHT LINES')}<h2 id="straight" class="h-display">My Career Would Be Easier to Explain If I Had Stayed in One Industry.</h2></div>
|
||||
<p class="statement">I didn’t.<br><em>And I wouldn’t rewrite it.</em></p>
|
||||
</div>
|
||||
<div class="cards cards-3 reveal">
|
||||
${noStraight.map(([ic, h, p]) => `<article class="card"><span class="ic">${icon(ic)}</span><h3 class="h-sm">${h}</h3>${lines(p)}</article>`).join('')}
|
||||
</div>
|
||||
<div class="sec-foot reveal" style="justify-content:flex-end">${btn('EXPLORE MY JOURNEY', '/portfolio/')}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section band" aria-labelledby="os">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('MY OPERATING SYSTEM')}<h2 id="os" class="h-display">I Don’t Have a Formula. I Have a Few Rules I Keep Coming Back To.</h2></div>
|
||||
<div class="prose"><p>Eight years has been long enough to develop instincts.</p><p>And long enough to know when not to trust them.</p></div>
|
||||
</div>
|
||||
<div class="rules">
|
||||
<article class="rule reveal"><span class="index">RULE_01</span><h3>Get Closer</h3><div class="prose">
|
||||
<p class="ink">When something doesn’t make sense, I move toward it.</p>
|
||||
<p>Talk to the customer. Sit with the team. Follow the process. Look at the numbers.</p>
|
||||
<p>Distance makes problems look cleaner than they are.</p></div></article>
|
||||
<article class="rule reveal"><span class="index">RULE_02</span><h3>Ask the Uncomfortable Question</h3><div class="prose">
|
||||
<div class="qlist"><p>Why are we doing this?</p><p>What if we’re wrong?</p><p>Would I buy this?</p><p>What are we pretending isn’t a problem?</p></div>
|
||||
<p>The question people least want to answer is occasionally the one worth asking first.</p></div></article>
|
||||
<article class="rule reveal"><span class="index">RULE_03</span><h3>Make the Call</h3><div class="prose">
|
||||
<p class="ink">Eventually, research becomes procrastination.</p>
|
||||
<p>Get enough information. Understand the risk. Decide.</p>
|
||||
<p>Then stay around for the consequences.</p></div></article>
|
||||
<article class="rule reveal"><span class="index">RULE_04</span><h3>Let Reality Win</h3><div class="prose">
|
||||
<p class="ink">I can love an idea.</p>
|
||||
<p>The customer is still allowed to hate it.</p>
|
||||
<p>Reality wins every argument eventually. I prefer finding out early.</p></div></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="people">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('THE PEOPLE BEHIND THE BUSINESS')}<h2 id="people" class="h-display">The Right People Make the Business Better.</h2></div>
|
||||
<div class="prose">
|
||||
<p>I've learned that the people around me influence far more than the work getting done. They shape the decisions we make, the problems we notice, and how far an idea can go.</p>
|
||||
<p>I value people who think independently, take ownership, and care enough about the outcome to challenge my perspective.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features reveal">
|
||||
${people.map(([ic, h, p]) => `<article class="feature"><span class="ic">${icon(ic)}</span><h3>${h}</h3><div class="prose">${paras(p)}</div></article>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="exits-later">
|
||||
<div class="wrap">
|
||||
<div class="showcase reveal" style="align-items:start">
|
||||
<div class="stack" style="position:sticky;top:calc(var(--nav-h) + 32px)">
|
||||
${eyebrow('FOUR EXITS LATER')}
|
||||
<h2 id="exits-later" class="h-display">Success Made Me More Confident. Experience Made Me Less Certain.</h2>
|
||||
<div class="prose"><p>Four exits look neat when reduced to a number.</p><p class="body-ink">The years behind them were anything but.</p></div>
|
||||
</div>
|
||||
<div class="stack-sm">
|
||||
${exitsLater.map(([h, p]) => `<article class="card card-white"><h3 class="h-sm">${h}</h3>${lines(p)}</article>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="notice">
|
||||
<div class="wrap">
|
||||
<div class="sec-head-center reveal">
|
||||
${eyebrow('THINGS I NOTICE')}
|
||||
<h2 id="notice" class="h-display">The Business Usually Whispers Before It Shouts.</h2>
|
||||
</div>
|
||||
<div class="whisper reveal">
|
||||
<div class="stack">
|
||||
<div class="signals">
|
||||
<p class="signal"><span class="dot"></span>A customer asks the same question for the tenth time.</p>
|
||||
<p class="signal"><span class="dot"></span>Someone creates a spreadsheet to work around the software.</p>
|
||||
<p class="signal"><span class="dot"></span>A five-minute task somehow takes an afternoon.</p>
|
||||
</div>
|
||||
<div class="prose"><p>Nobody thinks any of it is urgent.</p><p class="statement">I notice those things.</p></div>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<div class="shouts">
|
||||
<div class="shout"><q>“We’ve Always Done It This Way.”</q><span>Interesting.</span></div>
|
||||
<div class="shout"><q>“Nobody Complains About It.”</q><span>Even more interesting.</span></div>
|
||||
<div class="shout"><q>“It’s Not a Big Problem.”</q><span>Maybe.</span></div>
|
||||
</div>
|
||||
<div class="prose"><p>Or maybe everyone has simply become very good at living with it.</p><p class="body-ink">Small friction has introduced me to some very big questions.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="linkedin">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('THE PART THAT DOESN’T FIT ON LINKEDIN')}<h2 id="linkedin" class="h-display">Not Everything I Make Is Meant to Become a Company.</h2></div>
|
||||
<div class="prose">
|
||||
<p class="body-ink">This might be one of the more important things I’ve learned.</p>
|
||||
<p>Not every interest needs monetizing.<br>Not every thought needs optimizing.<br>Not everything meaningful needs a metric attached to it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<article class="card card-lg card-dark">
|
||||
${eyebrow('A DIFFERENT OUTLET')}
|
||||
<h3 class="h-lg">Some Thoughts Need Space.</h3>
|
||||
<p class="poem"><span>That’s poetry for me.</span><span>No pitch deck. No growth plan. No conversion rate.</span></p>
|
||||
<p class="body">Just something I wanted to say and the patience to find the right words for it.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="know-now">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('WHAT I KNOW NOW')}<h2 id="know-now" class="h-display">Eight Years In, I Have Fewer Absolutes.</h2></div>
|
||||
</div>
|
||||
<div class="principles reveal">
|
||||
${knowNow.map(([h, p]) => `<article class="principle"><h3 class="h-md">${h}</h3><div class="lines">${paras(p)}</div></article>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="founders-call">
|
||||
<div class="wrap">
|
||||
<div class="showcase reverse reveal">
|
||||
<div class="visual stack-sm">
|
||||
<article class="card card-white"><span class="index">01</span><h3 class="h-sm">Diagnose First</h3><div class="prose"><p>The obvious problem and the real problem are not always the same.</p><p>Get close enough to know the difference.</p></div></article>
|
||||
<article class="card card-white"><span class="index">02</span><h3 class="h-sm">Make It Work in the Real Business</h3><div class="prose"><p>A strategy can look great on paper and fall apart on Monday morning.</p><p>I care about what can actually be executed, measured, and improved.</p><p class="body-ink">That is the same standard I use inside my own companies.</p></div></article>
|
||||
</div>
|
||||
<div class="stack">
|
||||
${eyebrow('WHEN FOUNDERS CALL')}
|
||||
<h2 id="founders-call" class="h-display">I Work With Founders the Way I Run My Own Companies.</h2>
|
||||
<div class="prose">
|
||||
<p>When I step into another founder’s business, I want to understand what is actually happening before deciding what needs to change.</p>
|
||||
<p class="body-ink">No assumptions. No solution looking for a problem.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('WORK WITH DYLAN', '/consulting/')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="curious">
|
||||
<div class="wrap">
|
||||
<div class="closing closing-dark reveal">
|
||||
<div class="closing-inner">
|
||||
${eyebrow('STILL CURIOUS')}
|
||||
<h2 id="curious" class="h-display-lg">I’m More Interested in What I Haven’t Seen Yet.</h2>
|
||||
<div class="prose">
|
||||
<p>Eight years ago, I couldn’t have mapped the route that brought me here. I’m glad I didn’t.</p>
|
||||
<p>There are still people I haven’t met, problems I haven’t seen, and ideas that will probably ruin a perfectly good night’s sleep.</p>
|
||||
<p style="color:var(--on-dark)">If the next eight years surprise me too, I’ll take it.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
};
|
||||
Reference in New Issue
Block a user