+
-
- ${eyebrow('CURRENT VENTURES')}
- The Companies I’m Leading Today
-
+ ${eyebrow('CURRENT VENTURES')}
+ I like being close to the decisions that shape a company, especially when there is something new to figure out.
-${btn('EXPLORE MY VENTURES', '/portfolio/')}
- The Companies I’m Leading Today
+I like being close to the decisions that shape a company, especially when there is something new to figure out.
+${btn('EXPLORE MY VENTURES', '/portfolio/')}
-
@@ -164,7 +155,7 @@ export default {
- ${''.repeat(6)}
-
- 
-
-
-
+
-
Others are growing. And I’m nowhere near finished building.
- +-
diff --git a/static/assets/home.css b/static/assets/home.css
index 52af3b2..29accc6 100644
--- a/static/assets/home.css
+++ b/static/assets/home.css
@@ -86,18 +86,10 @@
.w-top { position: absolute; left: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); top: 2.5rem; z-index: 3; }
@media (max-width: 700px) { .w-side { left: var(--gutter); right: var(--gutter); max-width: none; } }
-/* ---------- building: copy, DNA and the portfolio dashboard side by side ---------- */
-.bhead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
-.bhead > * { min-width: 0; }
-.bgrid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; align-items: center; }
+/* ---------- building: copy beside the portfolio dashboard ---------- */
+.bgrid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.bgrid > * { min-width: 0; }
-.bstack { position: relative; overflow: visible; height: min(78vh, 680px); display: flex; flex-direction: column; justify-content: center; }
-.bstack .r { display: block; white-space: nowrap; font-weight: 500; font-size: clamp(2.6rem, 5.6vw, 6.2rem); line-height: .98; letter-spacing: -0.055em;
- background: linear-gradient(180deg, var(--grad-a), #5fb4ff 70%, #1a7fff); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; }
-.dna3d { position: absolute; left: 50%; top: 50%; height: 104%; width: auto; aspect-ratio: 2 / 3; transform: translate(-50%, -50%); z-index: 2; }
-.helix { position: absolute; left: 50%; top: 50%; height: 104%; width: auto; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 0 40px rgba(26, 127, 255, .5)); }
-.helix[hidden], .dna3d[hidden] { display: none; }
-.bglow { position: absolute; left: 50%; top: 50%; width: 80%; height: 90%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(26, 127, 255, .28), transparent); pointer-events: none; }
+.bhead { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.cluster-fit { position: relative; width: 100%; }
.cluster-fit .cluster { margin: 0; width: 760px; height: 740px; max-width: none; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.cluster-fit .dash { left: 176px; top: 0; width: 540px; }
@@ -106,9 +98,7 @@
.cluster-fit .dash-cols { grid-template-columns: 1.25fr 1fr; }
.cluster-fit .row { font-size: 12.5px; }
@media (max-width: 1100px) {
- .bhead { grid-template-columns: 1fr; gap: 1.5rem; }
.bgrid { grid-template-columns: 1fr; }
- .bstack { height: 62vh; }
.cluster-fit .cluster { width: auto; height: auto; transform: none; }
.cluster-fit .panel { left: auto; right: auto; top: auto; width: auto; }
.cluster-fit .profile { max-width: 340px; }
@@ -134,7 +124,6 @@
.vinfo p { color: #b3c0da; font-size: 1.08rem; max-width: 34ch; }
.vinfo .vt { transition: opacity .3s, transform .3s; }
.vinfo .vt.out { opacity: 0; transform: translateY(10px); }
-.vinfo .btn-primary { background: #fff; color: #06101f; }
#vcanvas { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 340px; cursor: grab; }
.varrows { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; display: flex; gap: .5rem; }
.varrows button { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(10, 14, 26, .7); color: #fff; backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
@@ -147,8 +136,11 @@
.jgrid > * { min-width: 0; }
.jhead { grid-area: head; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.jbody { grid-area: body; }
-.jstage { grid-area: stage; position: relative; height: clamp(460px, 78vh, 680px); align-self: stretch; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); color: #f3f7ff;
+.jstage { grid-area: stage; position: relative; height: clamp(460px, 78vh, 680px); align-self: stretch; overflow: hidden; border-radius: 18px; border: 1px solid var(--bd); color: var(--ink);
+ --floor-line: rgba(159, 230, 255, .26); --pin: #1fb7ff; --pin-label: #55627f; --pin-done: #fff; --final: #d6e8ff;
background: radial-gradient(70% 55% at 50% 100%, rgba(26, 127, 255, .18), transparent 70%), #060a14; }
+:root[data-theme="light"] .jstage { --floor-line: rgba(26, 111, 224, .28); --pin: #1a7fff; --pin-label: #8896b3; --pin-done: #0b1220; --final: #13306b;
+ background: radial-gradient(70% 55% at 50% 100%, rgba(26, 127, 255, .14), transparent 70%), linear-gradient(180deg, #ffffff, #eef4fd); }
.jlist { display: grid; gap: .7rem; }
.jx { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.2rem; border: 1px solid var(--bd); border-radius: 14px; background: var(--glass); opacity: .4; transition: opacity .6s, border-color .6s, box-shadow .6s, background .6s; }
.jx .ji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--bd); color: var(--o2-faint); transition: all .6s; }
@@ -158,18 +150,18 @@
.jx.lit { opacity: 1; border-color: rgba(31, 183, 255, .5); background: linear-gradient(150deg, rgba(26, 127, 255, .14), var(--glass)); box-shadow: 0 0 36px rgba(26, 127, 255, .14); }
.jx.lit .ji { color: var(--ice); border-color: rgba(31, 183, 255, .55); box-shadow: 0 0 18px rgba(31, 183, 255, .4); }
.floor { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 46%; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
- background: linear-gradient(rgba(159, 230, 255, .26) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(159, 230, 255, .26) 1px, transparent 1px) 0 0 / 56px 56px;
+ background: linear-gradient(var(--floor-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--floor-line) 1px, transparent 1px) 0 0 / 56px 56px;
-webkit-mask-image: radial-gradient(closest-side at 50% 70%, #000 35%, transparent); mask-image: radial-gradient(closest-side at 50% 70%, #000 35%, transparent); }
.pins { position: absolute; left: 0; right: 0; bottom: 17%; height: 0; }
.pn { position: absolute; bottom: 0; width: 0; }
-.pn i { position: absolute; left: 0; bottom: 0; width: 2px; height: 0; transform: translateX(-1px); background: linear-gradient(#1fb7ff, transparent); opacity: 0; }
+.pn i { position: absolute; left: 0; bottom: 0; width: 2px; height: 0; transform: translateX(-1px); background: linear-gradient(var(--pin), transparent); opacity: 0; }
.pn.rise i { height: var(--ph, 100px); opacity: 1; transition: height .8s cubic-bezier(.25, .7, .35, 1), opacity .2s; }
-.pn b { position: absolute; left: -8px; bottom: var(--ph, 100px); width: 16px; height: 16px; margin-bottom: -8px; border-radius: 50%; background: #fff; border: 2px solid #1fb7ff; opacity: 0; transform: scale(.2); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
-.pn.done b { opacity: 1; transform: scale(1); box-shadow: 0 0 24px 6px #1fb7ff; }
-.pn em { position: absolute; top: 20px; left: 0; transform: translateX(-50%); width: 84px; text-align: center; line-height: 1.15; font-style: normal; font-size: .76rem; color: #55627f; transition: color .5s; }
-.pn.done em { color: #fff; }
+.pn b { position: absolute; left: -8px; bottom: var(--ph, 100px); width: 16px; height: 16px; margin-bottom: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--pin); opacity: 0; transform: scale(.2); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
+.pn.done b { opacity: 1; transform: scale(1); box-shadow: 0 0 24px 6px var(--pin); }
+.pn em { position: absolute; top: 20px; left: 0; transform: translateX(-50%); width: 84px; text-align: center; line-height: 1.15; font-style: normal; font-size: .76rem; color: var(--pin-label); transition: color .5s; }
+.pn.done em { color: var(--pin-done); }
#fw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.jfinal { position: absolute; left: 1.2rem; top: 1.2rem; max-width: 240px; font-size: .98rem; line-height: 1.35; color: #d6e8ff; opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; }
+.jfinal { position: absolute; left: 1.2rem; top: 1.2rem; max-width: 240px; font-size: .98rem; line-height: 1.35; color: var(--final); opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; }
.jfinal.show { opacity: 1; transform: none; }
.jreplay { position: absolute; right: 1rem; top: 1rem; opacity: 0; pointer-events: none; transition: opacity .4s; }
.jreplay.show { opacity: 1; pointer-events: auto; }
diff --git a/static/assets/home.js b/static/assets/home.js
index c865d5e..9ae7e98 100644
--- a/static/assets/home.js
+++ b/static/assets/home.js
@@ -60,20 +60,10 @@
sizeCluster();
addEventListener('resize', sizeCluster);
- /* ---------- scroll-linked: "still building" rows + playbook word ---------- */
- const bst = $('#bstack'), rows = bst ? $$('.r', bst) : [], pbSec = $('#playbook'), pbWord = $('#pbword');
+ /* ---------- scroll-linked playbook word ---------- */
+ const pbSec = $('#playbook'), pbWord = $('#pbword');
let ticking = false;
function onScroll() {
- if (bst) {
- const r = bst.getBoundingClientRect();
- const k = clamp((innerHeight - r.top) / (innerHeight + r.height), 0, 1) - .5;
- rows.forEach((el, i) => {
- const dir = i % 2 ? 1 : -1;
- const op = 1 - Math.abs(i - 2.5) / 3.2;
- el.style.opacity = clamp(op, .18, 1).toFixed(2);
- el.style.transform = reduce ? '' : 'translate3d(' + (k * dir * (120 + i * 14)).toFixed(1) + 'px,0,0)';
- });
- }
if (pbSec && pbWord) {
const rp = pbSec.getBoundingClientRect();
const kp = clamp((innerHeight - rp.top) / (innerHeight + rp.height), 0, 1);
@@ -111,7 +101,9 @@
const pinEls = $$('.pn'), jx = $$('.jx'), jfinal = $('#jfinal'), jreplay = $('#jreplay');
const cEx = $('#cEx'), cInd = $('#cInd'), cYr = $('#cYr');
const PINX = [.12, .31, .5, .69, .88], PINF = [.22, .34, .46, .58, .72], LAUNCH = [200, 950, 1700, 2450, 3300];
- const COLORS = ['#ffffff', '#9fe6ff', '#1fb7ff', '#3d8bff', '#d6ecff'];
+ const COLORS_DARK = ['#ffffff', '#9fe6ff', '#1fb7ff', '#3d8bff', '#d6ecff'];
+ const COLORS_LIGHT = ['#1a7fff', '#0b5fd0', '#1fb7ff', '#5b6cff', '#0870c4'];
+ const isLight = () => document.documentElement.getAttribute('data-theme') === 'light';
let FW = { w: 0, h: 0, floor: 0 }, PH = [0, 0, 0, 0, 0], rockets = [], parts = [], extra = [];
let fwState = 'idle', fwStart = 0, fwVis = false, cleared = true, fwLaunched = [false, false, false, false, false], fwPlayed = false;
const countUp = (el, to, suf) => {
@@ -133,6 +125,7 @@
pinEls.forEach((p, i) => { PH[i] = Math.round(FW.h * PINF[i] * .88); p.style.left = (PINX[i] * 100) + '%'; p.style.setProperty('--ph', PH[i] + 'px'); });
}
function burst(x, y, n, spread) {
+ const COLORS = isLight() ? COLORS_LIGHT : COLORS_DARK;
const base = COLORS[(Math.random() * COLORS.length) | 0], sp = spread || 1;
for (let i = 0; i < n; i++) {
const a = Math.random() * Math.PI * 2, v = (50 + Math.random() * 190) * sp;
@@ -188,12 +181,13 @@
cleared = false;
if (fwState === 'play') { const el = now - fwStart; LAUNCH.forEach((t, i) => { if (!fwLaunched[i] && el >= t) { fwLaunched[i] = true; launch(i); } }); }
if (extra.length) { extra.forEach((e) => { e.t -= dt; }); extra = extra.filter((e) => { if (e.t <= 0) { burst(e.x * FW.w, e.y * FW.h, 70, 1.1); return false; } return true; }); }
- fx.clearRect(0, 0, FW.w, FW.h); fx.globalCompositeOperation = 'lighter'; fx.lineCap = 'round';
+ const light = isLight();
+ fx.clearRect(0, 0, FW.w, FW.h); fx.globalCompositeOperation = light ? 'source-over' : 'lighter'; fx.lineCap = 'round';
rockets = rockets.filter((r) => {
r.t += dt; const k = Math.min(1, r.t / r.dur), e = 1 - Math.pow(1 - k, 3); r.y = lerp(FW.floor, r.ty, e);
r.trail.push({ x: r.x + (Math.random() - .5) * 1.5, y: r.y }); if (r.trail.length > 14) r.trail.shift();
- for (let j = 1; j < r.trail.length; j++) { const a = j / r.trail.length; fx.strokeStyle = 'rgba(159,230,255,' + (a * .8) + ')'; fx.lineWidth = 2.4 * a; fx.beginPath(); fx.moveTo(r.trail[j - 1].x, r.trail[j - 1].y); fx.lineTo(r.trail[j].x, r.trail[j].y); fx.stroke(); }
- fx.fillStyle = '#fff'; fx.beginPath(); fx.arc(r.x, r.y, 2.6, 0, 6.283); fx.fill();
+ for (let j = 1; j < r.trail.length; j++) { const a = j / r.trail.length; fx.strokeStyle = (light ? 'rgba(26,127,255,' : 'rgba(159,230,255,') + (a * .8) + ')'; fx.lineWidth = 2.4 * a; fx.beginPath(); fx.moveTo(r.trail[j - 1].x, r.trail[j - 1].y); fx.lineTo(r.trail[j].x, r.trail[j].y); fx.stroke(); }
+ fx.fillStyle = light ? '#0b5fd0' : '#fff'; fx.beginPath(); fx.arc(r.x, r.y, 2.6, 0, 6.283); fx.fill();
if (k >= 1) { arrive(r.i); return false; } return true;
});
parts = parts.filter((p) => {
@@ -207,13 +201,6 @@
fx.globalAlpha = 1; fx.globalCompositeOperation = 'source-over';
}
- /* ---------- 3D DNA: fall back to the still image without WebGL ---------- */
- setTimeout(() => {
- const dna = $('#dna'), fb = $('#dnaFallback');
- const ok = dna && dna.shadowRoot && dna.shadowRoot.querySelector('canvas');
- if (!ok && fb) { if (dna) dna.hidden = true; fb.hidden = false; }
- }, 1500);
-
/* ---------- main loop ---------- */
let last = performance.now();
(function loop(now) {
diff --git a/static/assets/o2/dna-fallback.webp b/static/assets/o2/dna-fallback.webp
deleted file mode 100644
index 3c9d7b0..0000000
Binary files a/static/assets/o2/dna-fallback.webp and /dev/null differ
diff --git a/static/assets/o2/dna-hero.min.js b/static/assets/o2/dna-hero.min.js
deleted file mode 100644
index 20ec104..0000000
--- a/static/assets/o2/dna-hero.min.js
+++ /dev/null
@@ -1,3851 +0,0 @@
-var DylanDNA=(()=>{var Ms=Object.defineProperty;var Zc=Object.getOwnPropertyDescriptor;var Jc=Object.getOwnPropertyNames;var $c=Object.prototype.hasOwnProperty;var Kc=(i,t,e)=>t in i?Ms(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var Qc=(i,t)=>{for(var e in t)Ms(i,e,{get:t[e],enumerable:!0})},jc=(i,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Jc(t))!$c.call(i,s)&&s!==e&&Ms(i,s,{get:()=>t[s],enumerable:!(n=Zc(t,s))||n.enumerable});return i};var th=i=>jc(Ms({},"__esModule",{value:!0}),i);var $o=(i,t,e)=>Kc(i,typeof t!="symbol"?t+"":t,e);var km={};Qc(km,{DNAHero:()=>xs});var xl=0,Qa=1,vl=2;var ja=1,yl=2,je=3,un=0,Te=1,ze=2,fn=0,zn=1,to=2,eo=3,no=4,Ml=5,En=100,Sl=101,bl=102,El=103,Tl=104,Al=200,wl=201,Rl=202,Cl=203,Hs=204,Gs=205,Il=206,Pl=207,Ll=208,Dl=209,Ul=210,Nl=211,Fl=212,Ol=213,Bl=214,vr=0,yr=1,Mr=2,kn=3,Sr=4,br=5,Er=6,Tr=7,io=0,zl=1,kl=2,pn=0,Vl=1,Hl=2,Gl=3,Ar=4,Wl=5,Xl=6,ql=7;var so=300,Yn=301,Zn=302,wr=303,Rr=304,us=306,Ws=1e3,bn=1001,Xs=1002,Be=1003,Yl=1004;var ds=1005;var Xe=1006,Cr=1007;var Cn=1008;var Je=1009,ro=1010,ao=1011,Ai=1012,Ir=1013,In=1014,tn=1015,wi=1016,Pr=1017,Lr=1018,Ri=1020,oo=35902,lo=35899,co=1021,ho=1022,ke=1023,mi=1026,Ci=1027,uo=1028,Dr=1029,fo=1030,Ur=1031;var Nr=1033,fs=33776,ps=33777,ms=33778,gs=33779,Fr=35840,Or=35841,Br=35842,zr=35843,kr=36196,Vr=37492,Hr=37496,Gr=37808,Wr=37809,Xr=37810,qr=37811,Yr=37812,Zr=37813,Jr=37814,$r=37815,Kr=37816,Qr=37817,jr=37818,ta=37819,ea=37820,na=37821,ia=36492,sa=36494,ra=36495,aa=36283,oa=36284,la=36285,ca=36286;var Xi=2300,qs=2301,Vs=2302,Wa=2400,Xa=2401,qa=2402;var Zl=3200,Jl=3201;var po=0,$l=1,mn="",Se="srgb",Vn="srgb-linear",qi="linear",qt="srgb";var Bn=7680;var Ya=519,Kl=512,Ql=513,jl=514,mo=515,tc=516,ec=517,nc=518,ic=519,Za=35044;var go="300 es",We=2e3,Yi=2001;var dn=class{addEventListener(t,e){this._listeners===void 0&&(this._listeners={});let n=this._listeners;n[t]===void 0&&(n[t]=[]),n[t].indexOf(e)===-1&&n[t].push(e)}hasEventListener(t,e){let n=this._listeners;return n===void 0?!1:n[t]!==void 0&&n[t].indexOf(e)!==-1}removeEventListener(t,e){let n=this._listeners;if(n===void 0)return;let s=n[t];if(s!==void 0){let r=s.indexOf(e);r!==-1&&s.splice(r,1)}}dispatchEvent(t){let e=this._listeners;if(e===void 0)return;let n=e[t.type];if(n!==void 0){t.target=this;let s=n.slice(0);for(let r=0,a=s.length;r