G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge option 2 homepage and visual language into the site

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 12:47:20 -04:00
parent e6279c2e91
commit d0357f1c52
27 changed files with 5120 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout.mjs
+14 -9
View File
@@ -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') => `<svg class="${cls}" viewBox="0 0 104 60" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M9 4h55c10 0 13 7 9 14L58 46c-3 6-8 8-15 8.5L3 57zM21.5 15.5 18.3 45.8 40 44.5c4-.3 6-1.5 7.5-4.3l12-21.4c1.2-2.2.3-3.3-2-3.3z"/><path fill="#33b9ff" d="M24 59 102 1 91 52 72 54.5 79 33z"/><path fill="#8fdcff" d="M24 59 102 1 79 33z"/></svg>`;
export const logo = () => `${mark()}<span class="brand-word">Dylan <b>Mazzei</b></span>`;
export const logo = () => `<img class="logo-img" src="/assets/o2/logo.png" alt="" width="640" height="121">${mark()}<span class="brand-word">Dylan <b>Mazzei</b></span>`;
export const eyebrow = (t) => `<span class="eyebrow">${t}</span>`;
export function btn(text, href, variant = 'primary', extra = '') {
const ext = /^https?:/.test(href) ? ' target="_blank" rel="noopener"' : '';
return `<a class="btn btn-${variant}${extra ? ' ' + extra : ''}" href="${href}"${ext}>${text} ${icon('arrow')}</a>`;
return `<a class="btn btn-${variant}${extra ? ' ' + extra : ''}" href="${href}"${ext}>${text}<span class="go">${icon('arrow')}</span></a>`;
}
export function textLink(text, href) {
@@ -126,13 +126,13 @@ function nav(path) {
<nav aria-label="Primary"><ul class="nav-links">${desktop}</ul></nav>
<div class="nav-cta">
<button class="theme-btn" id="theme-btn" type="button" aria-label="Switch to dark mode">${icon('moon', 'moon')}${icon('sun', 'sun')}</button>
<a class="btn btn-primary btn-sm" href="/contact/">START A CONVERSATION</a>
<a class="btn btn-primary btn-sm" href="/contact/">START A CONVERSATION<span class="go">${icon('arrow')}</span></a>
<button class="menu-btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">${icon('menu')}</button>
</div>
</div>
<div class="wrap mobile-menu" id="mobile-menu" hidden>
<ul>${mobile}</ul>
<a class="btn btn-primary" href="/contact/">START A CONVERSATION ${icon('arrow')}</a>
<a class="btn btn-primary" href="/contact/">START A CONVERSATION<span class="go">${icon('arrow')}</span></a>
</div>
</header>`;
}
@@ -184,7 +184,7 @@ function footer() {
</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>${title}</title>
<meta name="description" content="${description}">
<link rel="canonical" href="${canonical}">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0d" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#04060c">
<meta name="color-scheme" content="light dark">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Dylan Mazzei">
@@ -222,18 +221,24 @@ export function page({ path, title, description, body, schema = [] }) {
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=JetBrains+Mono:wght@500&family=Unbounded:wght@700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Unbounded:wght@700&display=swap">
<link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/inter-tight-latin-500-normal.woff2">
<link rel="stylesheet" href="/assets/fonts.css">
<link rel="stylesheet" href="/assets/styles.css">
<script>(function(){var r=document.documentElement;try{var t=localStorage.getItem('theme');if(t==='dark'||t==='light')r.setAttribute('data-theme',t)}catch(e){}if(!r.hasAttribute('data-theme')&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)r.setAttribute('data-theme','dark')})();document.documentElement.classList.add('js');setTimeout(function(){if(!window.__site)document.documentElement.classList.remove('js')},2500)</script>
${head}
<script>(function(){var r=document.documentElement;try{var t=localStorage.getItem('theme');if(t==='dark'||t==='light')r.setAttribute('data-theme',t)}catch(e){}if(!r.hasAttribute('data-theme'))r.setAttribute('data-theme','dark')})();document.documentElement.classList.add('js');setTimeout(function(){if(!window.__site)document.documentElement.classList.remove('js')},2500)</script>
${ld}
</head>
<body>
<div class="bgfx" aria-hidden="true"></div>
<div class="progress" id="progress" aria-hidden="true"></div>
${nav(path)}
<main id="main">
${body}
</main>
${footer()}
<script src="/assets/site.js" defer></script>
${scripts}
</body>
</html>
`;