From d0357f1c52378101fbc9191c916377469db91707 Mon Sep 17 00:00:00 2001 From: Alejandro Veras Date: Thu, 1 Oct 2026 12:47:20 -0400 Subject: [PATCH] Merge option 2 homepage and visual language into the site Rebuild the homepage on option 2's sections and effects (3D DNA, spinning cube, giant words, fireworks journey, neon type, chrome ribbon) with copy kept verbatim from the content document. Each venture now has its own 3D object, the portfolio dashboard sits beside the DNA, the journey uses the original stats row and the playbook keeps our book. Inner pages adopt the same navy, glass and gradient skin, with dark as the default theme. Co-Authored-By: Claude Opus 5.5 --- build.mjs | 2 +- src/layout.mjs | 23 +- src/pages/contact.mjs | 2 +- src/pages/home.mjs | 380 +- src/pages/press.mjs | 2 +- static/assets/fonts.css | 65 + .../fonts/inter-tight-latin-300-normal.woff2 | Bin 0 -> 22480 bytes .../fonts/inter-tight-latin-400-normal.woff2 | Bin 0 -> 22016 bytes .../fonts/inter-tight-latin-500-normal.woff2 | Bin 0 -> 22616 bytes .../fonts/inter-tight-latin-600-normal.woff2 | Bin 0 -> 22660 bytes .../inter-tight-latin-ext-300-normal.woff2 | Bin 0 -> 37372 bytes .../inter-tight-latin-ext-400-normal.woff2 | Bin 0 -> 36220 bytes .../inter-tight-latin-ext-500-normal.woff2 | Bin 0 -> 37728 bytes .../inter-tight-latin-ext-600-normal.woff2 | Bin 0 -> 37904 bytes static/assets/home.css | 269 ++ static/assets/home.js | 402 ++ static/assets/o2/dna-fallback.webp | Bin 0 -> 173698 bytes static/assets/o2/dna-hero.min.js | 3851 +++++++++++++++++ static/assets/o2/dylan-monogram.webp | Bin 0 -> 89760 bytes static/assets/o2/logo.png | Bin 0 -> 72227 bytes static/assets/o2/ribbon.webp | Bin 0 -> 126174 bytes static/assets/o2/three.min.js | 6 + static/assets/site.js | 17 +- static/assets/styles.css | 185 +- static/licenses/Inter-Tight-OFL.txt | 93 + static/licenses/three.js-MIT.txt | 21 + .../licenses/three.js-bundled-in-dna-hero.txt | 21 + 27 files changed, 5120 insertions(+), 219 deletions(-) create mode 100644 static/assets/fonts.css create mode 100644 static/assets/fonts/inter-tight-latin-300-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-400-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-500-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-600-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-ext-300-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-ext-400-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-ext-500-normal.woff2 create mode 100644 static/assets/fonts/inter-tight-latin-ext-600-normal.woff2 create mode 100644 static/assets/home.css create mode 100644 static/assets/home.js create mode 100644 static/assets/o2/dna-fallback.webp create mode 100644 static/assets/o2/dna-hero.min.js create mode 100644 static/assets/o2/dylan-monogram.webp create mode 100644 static/assets/o2/logo.png create mode 100644 static/assets/o2/ribbon.webp create mode 100644 static/assets/o2/three.min.js create mode 100644 static/licenses/Inter-Tight-OFL.txt create mode 100644 static/licenses/three.js-MIT.txt create mode 100644 static/licenses/three.js-bundled-in-dna-hero.txt diff --git a/build.mjs b/build.mjs index 3cdd6f6..f62d166 100644 --- a/build.mjs +++ b/build.mjs @@ -15,7 +15,7 @@ await cp(join(root, 'static'), out, { recursive: true }); // Fingerprint CSS/JS so a new deploy never reuses a stale cached copy. const hashOf = async (f) => createHash('sha256').update(await readFile(join(root, 'static', f))).digest('hex').slice(0, 10); -const assetVersions = { '/assets/styles.css': await hashOf('assets/styles.css'), '/assets/site.js': await hashOf('assets/site.js') }; +const assetVersions = Object.fromEntries(await Promise.all(['styles.css', 'site.js', 'home.css', 'home.js', 'fonts.css'].map(async (f) => ['/assets/' + f, await hashOf('assets/' + f)]))); const fingerprint = (html) => Object.entries(assetVersions).reduce((h, [u, v]) => h.replaceAll(`"${u}"`, `"${u}?v=${v}"`), html); const urls = []; diff --git a/src/layout.mjs b/src/layout.mjs index ce9e063..f28c72e 100644 --- a/src/layout.mjs +++ b/src/layout.mjs @@ -61,13 +61,13 @@ export function icon(name, cls = '') { // Dylan Mazzei monogram: italic "D" (inherits text color) and the sky-blue blade. export const mark = (cls = 'logo-mark') => ``; -export const logo = () => `${mark()}Dylan Mazzei`; +export const logo = () => `${mark()}Dylan Mazzei`; export const eyebrow = (t) => `${t}`; export function btn(text, href, variant = 'primary', extra = '') { const ext = /^https?:/.test(href) ? ' target="_blank" rel="noopener"' : ''; - return `${text} ${icon('arrow')}`; + return `${text}${icon('arrow')}`; } export function textLink(text, href) { @@ -126,13 +126,13 @@ function nav(path) {
- START A CONVERSATION + START A CONVERSATION${icon('arrow')}
`; } @@ -184,7 +184,7 @@ function footer() { `; } -export function page({ path, title, description, body, schema = [] }) { +export function page({ path, title, description, body, schema = [], head = '', scripts = '' }) { const canonical = SITE.url + path; const person = { '@context': 'https://schema.org', @@ -206,8 +206,7 @@ export function page({ path, title, description, body, schema = [] }) { ${title} - - + @@ -222,18 +221,24 @@ export function page({ path, title, description, body, schema = [] }) { - + + + - +${head} + ${ld} + + ${nav(path)}
${body}
${footer()} +${scripts} `; diff --git a/src/pages/contact.mjs b/src/pages/contact.mjs index fe78130..aa829ee 100644 --- a/src/pages/contact.mjs +++ b/src/pages/contact.mjs @@ -50,7 +50,7 @@ export default {
- +

diff --git a/src/pages/home.mjs b/src/pages/home.mjs index ea8faa4..beb43a0 100644 --- a/src/pages/home.mjs +++ b/src/pages/home.mjs @@ -1,109 +1,181 @@ import { icon, eyebrow, btn, textLink, mark } 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.'], + ['search', 'MARKETING & AI SEARCH'], + ['chip', 'AI SOFTWARE'], + ['bottle', 'SPIRITS'], + ['edu', 'EDUCATION TECHNOLOGY'], + ['shield', 'CYBERSECURITY'], + ['bag', 'E-COMMERCE'], ]; 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.'], + ['Insurance', 'I grew an insurance business around strong client relationships, a clear understanding of the market, and service people could trust.', ''], + ['Marketing', 'Led an agency focused on helping businesses reach the right audiences, strengthen their presence, and turn attention into growth.', ''], + ['Home Healthcare', 'Grew a people-first business in an industry where trust, quality of care, and responsible leadership mattered every day.', ''], + ['Apparel', 'Took a consumer concept into the market, shaping the product, brand, and customer experience from the ground up.', ''], +]; + +const consult = [ + ['', 'We look closely at the business', ''], + ['', 'Talk through what is getting in the way', ''], + ['', 'Figure out where your attention can make the biggest difference', ''], + ['', '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]) => `
${icon(ic)}${name.replace('&', '&')}Active
`) + .map(([ic, name]) => `
${icon(ic)}${name}Active
`) .join(''); const exitRows = exits - .map(([, name]) => `
${icon('check', 'check')}${name}Exited
`) + .map(([name]) => `
${icon('check', 'check')}${name}Exited
`) .join(''); +const exitWords = ['Insurance.', 'Marketing.', 'Home Healthcare.', 'Apparel.']; +const arrowUR = ''; 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.', + head: '', + scripts: '\n\n', body: ` -
-
-
- DYLAN MAZZEI | FOUNDER & OPERATOR -

One Good Idea Has Never Been Enough for Me.

-

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.

-
${btn('MY STORY', '/about/')}
-
+
-