mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
51 lines
16 KiB
HTML
51 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Studio Plan // Miles Wolf Allen</title>
|
||
<meta name="description" content="A blueprint of Miles Wolf Allen's projects, systems, experiments, and next moves.">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23d6e8ff'/%3E%3Cpath d='M23 72V28h12l15 20 15-20h12v44H64V48L50 66 36 48v24z' fill='%231c3c62'/%3E%3C/svg%3E">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root { --blue:#d6e8ff; --blue-2:#a9c9ed; --deep:#1c3c62; --navy:#122b48; --ink:#173453; --red:#e75d56; --yellow:#f4c95d; --muted:#5d7894; --mono:'DM Mono',monospace; --display:'Space Grotesk',sans-serif; }
|
||
* { box-sizing:border-box; }
|
||
html { background:var(--blue); scroll-behavior:smooth; }
|
||
body { margin:0; color:var(--ink); background:var(--blue); font-family:var(--display); overflow-x:hidden; }
|
||
::selection { color:var(--blue); background:var(--red); }
|
||
a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; }
|
||
.paper { min-height:100vh; background-color:var(--blue); background-image:linear-gradient(rgba(28,60,98,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(28,60,98,.11) 1px,transparent 1px),linear-gradient(rgba(28,60,98,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(28,60,98,.045) 1px,transparent 1px); background-size:40px 40px,40px 40px,8px 8px,8px 8px; }
|
||
.paper::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
|
||
.wrap { width:min(1190px,90vw); margin:auto; }
|
||
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; border-bottom:2px solid var(--deep); color:var(--deep); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
|
||
.brand { display:flex; align-items:center; gap:10px; } .brand i { width:13px; height:13px; border:2px solid var(--red); background:var(--yellow); display:block; transform:rotate(45deg); } .topbar nav { display:flex; gap:25px; } .topbar nav a:hover { color:var(--red); } .revision { color:var(--red); }
|
||
.hero { min-height:77vh; display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; align-items:center; padding:100px 0 135px; position:relative; } .hero::after { content:'N↑'; position:absolute; right:5%; top:13%; color:var(--red); font:500 12px var(--mono); } .eyebrow { color:var(--red); font:500 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; } h1 { margin:18px 0 24px; color:var(--deep); font:700 clamp(4.7rem,12vw,11rem)/.77 var(--display); letter-spacing:-.11em; } h1 span { display:block; } h1 .outline { color:transparent; -webkit-text-stroke:2px var(--deep); } h1 .red { color:var(--red); } .hero p { max-width:490px; color:var(--muted); font:400 13px/1.85 var(--mono); } .hero-link { display:inline-flex; align-items:center; gap:11px; margin-top:26px; color:var(--red); font:500 10px var(--mono); text-transform:uppercase; } .hero-link i { display:block; width:37px; height:1px; background:var(--red); transition:.25s; } .hero-link:hover i { width:65px; }
|
||
.spec { position:relative; padding:28px; border:2px solid var(--deep); background:rgba(214,232,255,.45); transform:rotate(2deg); box-shadow:12px 12px 0 rgba(28,60,98,.18); } .spec::before { content:'SPECIFICATION / 001'; position:absolute; left:23px; top:-12px; padding:5px 8px; color:var(--blue); background:var(--deep); font:500 9px var(--mono); transform:rotate(-4deg); } .spec-head { display:flex; justify-content:space-between; color:var(--red); font:500 9px var(--mono); text-transform:uppercase; } .compass { width:150px; height:150px; position:relative; margin:28px auto; border:1px solid var(--deep); border-radius:50%; } .compass::before,.compass::after { content:''; position:absolute; left:50%; top:10%; bottom:10%; width:1px; background:var(--deep); transform:translateX(-50%); } .compass::after { top:50%; left:10%; right:10%; width:auto; height:1px; } .compass b { position:absolute; inset:0; display:grid; place-items:center; color:var(--red); font:500 30px var(--mono); transform:rotate(45deg); } .spec-list { border-top:1px solid rgba(28,60,98,.3); } .spec-row { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid rgba(28,60,98,.3); color:var(--muted); font:400 9px var(--mono); text-transform:uppercase; } .spec-row b { color:var(--deep); font-weight:400; }
|
||
.band { overflow:hidden; margin:0 -5vw; background:var(--red); color:var(--blue); transform:rotate(-1deg); } .band-track { display:flex; width:max-content; animation:move 27s linear infinite; } .band span { padding:11px 22px; font:500 10px var(--mono); letter-spacing:.11em; text-transform:uppercase; } @keyframes move { to { transform:translateX(-50%); } }
|
||
section { padding:130px 0; } .section-head { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:45px; } .section-label { color:var(--red); font:500 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; } h2 { margin:9px 0 0; color:var(--deep); font:700 clamp(3.2rem,8vw,7rem)/.78 var(--display); letter-spacing:-.11em; } h2 em { color:var(--red); font-style:normal; } .section-head p { max-width:280px; margin:0 0 4px; color:var(--muted); font:400 11px/1.75 var(--mono); }
|
||
.plan { position:relative; min-height:610px; padding:35px; border:2px solid var(--deep); background:rgba(214,232,255,.46); overflow:hidden; } .plan::before { content:'MASTER PLAN / CLICK A NODE TO INSPECT'; position:absolute; top:16px; left:20px; color:var(--muted); font:500 9px var(--mono); letter-spacing:.09em; } .plan::after { content:'SCALE 1:∞'; position:absolute; bottom:16px; right:20px; color:var(--muted); font:400 9px var(--mono); }
|
||
.plan svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .plan path { fill:none; stroke:rgba(28,60,98,.4); stroke-width:1.5; stroke-dasharray:6 7; } .plan path.hot { stroke:var(--red); stroke-width:2; stroke-dasharray:0; }
|
||
.node { position:absolute; width:190px; padding:17px; border:2px solid var(--deep); color:var(--deep); background:var(--blue); text-align:left; box-shadow:6px 6px 0 rgba(28,60,98,.18); transition:transform .3s, background .3s, color .3s; } .node:hover,.node.selected { z-index:3; color:var(--blue); background:var(--deep); transform:translateY(-8px) rotate(-2deg); } .node .node-no { display:block; margin-bottom:16px; color:var(--red); font:500 9px var(--mono); } .node:hover .node-no,.node.selected .node-no { color:var(--yellow); } .node h3 { margin:0 0 7px; font:600 22px/.9 var(--display); letter-spacing:-.06em; } .node p { margin:0; color:var(--muted); font:400 10px/1.6 var(--mono); } .node:hover p,.node.selected p { color:var(--blue-2); } .node-a { left:7%; top:24%; transform:rotate(-2deg); } .node-b { left:39%; top:14%; transform:rotate(1deg); } .node-c { right:6%; top:29%; transform:rotate(2deg); } .node-d { left:22%; bottom:13%; transform:rotate(1deg); } .node-e { right:23%; bottom:8%; transform:rotate(-2deg); }
|
||
.inspector { display:grid; grid-template-columns:.7fr 1.3fr; gap:1px; margin-top:18px; border:2px solid var(--deep); background:var(--deep); } .inspector > div { padding:24px; background:var(--blue); } .inspector-label { color:var(--red); font:500 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; } .inspector h3 { margin:13px 0 0; color:var(--deep); font-size:26px; } .inspector p { margin:0; color:var(--muted); font:400 11px/1.8 var(--mono); }
|
||
.materials { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .material { min-height:180px; padding:21px; border:1px solid var(--deep); background:rgba(214,232,255,.4); } .material:nth-child(2) { background:var(--yellow); } .material:nth-child(3) { background:var(--red); color:var(--blue); } .material:nth-child(4) { background:var(--deep); color:var(--blue); } .material small { display:block; font:500 9px var(--mono); letter-spacing:.08em; text-transform:uppercase; } .material strong { display:block; margin-top:46px; font:600 27px/.9 var(--display); letter-spacing:-.06em; } .material p { color:var(--muted); font:400 10px/1.6 var(--mono); } .material:nth-child(3) p,.material:nth-child(4) p { color:var(--blue-2); }
|
||
.contact { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; } .contact h2 { font-size:clamp(4rem,9vw,8.5rem); } .contact h2 span { color:var(--red); } .contact p { max-width:360px; color:var(--muted); font:400 12px/1.8 var(--mono); } .contact-links { border-top:2px solid var(--deep); } .contact-links a { display:flex; justify-content:space-between; gap:15px; padding:20px 0; border-bottom:1px solid rgba(28,60,98,.35); color:var(--muted); font:400 10px var(--mono); text-transform:uppercase; transition:.2s; } .contact-links a span:last-child { color:var(--red); } .contact-links a:hover { padding-left:10px; color:var(--deep); }
|
||
footer { display:flex; justify-content:space-between; gap:20px; padding:27px 0 42px; border-top:2px solid var(--deep); color:var(--muted); font:400 10px var(--mono); text-transform:uppercase; } footer a { color:var(--red); }
|
||
@media(max-width:760px) { .topbar nav { display:none; } .hero { grid-template-columns:1fr; padding:72px 0 100px; gap:60px; } .section-head { display:block; } .section-head p { margin-top:18px; } .plan { min-height:930px; padding:20px; } .node { width:155px; padding:13px; } .node h3 { font-size:19px; } .node-a { left:1%; top:19%; } .node-b { left:auto; right:1%; top:10%; } .node-c { right:1%; top:39%; } .node-d { left:1%; bottom:19%; } .node-e { right:1%; bottom:5%; } .inspector { grid-template-columns:1fr; } .materials { grid-template-columns:repeat(2,1fr); } .contact { grid-template-columns:1fr; gap:45px; } footer { flex-direction:column; } }
|
||
@media(max-width:430px) { h1 { font-size:4.3rem; } .node { width:140px; } .node p { font-size:9px; } }
|
||
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
|
||
</style>
|
||
</head>
|
||
<body><div class="paper"><div class="wrap"><header class="topbar"><a class="brand" href="#top"><i></i><span>MWA / studio plan</span></a><nav><a href="#plan">Plan</a><a href="#materials">Materials</a><a href="#contact">Contact</a></nav><span class="revision">rev. 06 / 2026</span></header>
|
||
<main id="top"><section class="hero"><div><div class="eyebrow">an annotated map of the workbench</div><h1><span class="outline">MILES</span><span>WOLF <b class="red">ALLEN</b></span></h1><p>Welcome to the studio plan: a blueprint of the tools, games, systems, and side quests currently under construction.</p><a class="hero-link" href="#plan"><i></i>inspect the plan</a></div><aside class="spec"><div class="spec-head"><span>project specification</span><b>status / live</b></div><div class="compass"><b>✳</b></div><div class="spec-list"><div class="spec-row"><span>primary material</span><b>curiosity</b></div><div class="spec-row"><span>load bearing ideas</span><b>160+</b></div><div class="spec-row"><span>estimated finish</span><b>never</b></div></div></aside></section><div class="band"><div class="band-track"><span>measure twice</span><span>build once</span><span>leave room for weird</span><span>measure twice</span><span>build once</span><span>leave room for weird</span></div></div>
|
||
<section id="plan"><div class="section-head"><div><div class="section-label">01 / master plan</div><h2>Everything is<br><em>connected.</em></h2></div><p>Click a node to inspect a project. The lines are not technically to scale.</p></div><div class="plan"><svg viewBox="0 0 1000 610" preserveAspectRatio="none" aria-hidden="true"><path class="hot" d="M180 210 C350 110 390 170 495 155 S750 170 850 225"></path><path d="M180 210 C210 360 320 440 430 505"></path><path d="M495 155 C500 300 590 390 720 500"></path><path d="M850 225 C800 350 760 440 720 500"></path><path d="M430 505 C520 510 625 510 720 500"></path></svg><button class="node node-a selected" type="button" data-title="OmniEmu 2.0" data-copy="A home for every emulator. Scan ROMs, install what you need, and launch without opening fifteen different apps." data-kind="tool / active"><span class="node-no">NODE / 01</span><h3>OmniEmu 2.0</h3><p>the emulator cabinet</p></button><button class="node node-b" type="button" data-title="Gelectron" data-copy="A drop-in Electron replacement using native web views instead of bundling an entire copy of Chromium with every app." data-kind="tool / in progress"><span class="node-no">NODE / 02</span><h3>Gelectron</h3><p>the native wing</p></button><button class="node node-c" type="button" data-title="FEDL" data-copy="A Geometry Dash demon list with ranked levels, run submissions, and a community that keeps raising the ceiling." data-kind="community / live"><span class="node-no">NODE / 03</span><h3>FEDL</h3><p>the community hall</p></button><button class="node node-d" type="button" data-title="Noto" data-copy="Note-taking with AI built in: a calmer way to turn a pile of fragments into something findable." data-kind="tool / active"><span class="node-no">NODE / 04</span><h3>Noto</h3><p>the memory room</p></button><button class="node node-e" type="button" data-title="Moon Gaming" data-copy="A browser game hub with a growing library of small games, experiments, and late-night ideas." data-kind="game hub / growing"><span class="node-no">NODE / 05</span><h3>Moon Gaming</h3><p>the arcade annex</p></button></div><div class="inspector"><div><div class="inspector-label" id="inspectorKind">tool / active</div><h3 id="inspectorTitle">OmniEmu 2.0</h3></div><div><p id="inspectorCopy">A home for every emulator. Scan ROMs, install what you need, and launch without opening fifteen different apps.</p></div></div></section>
|
||
<section id="materials"><div class="section-head"><div><div class="section-label">02 / materials list</div><h2>What the<br><em>studio uses.</em></h2></div><p>The ingredients change, but the general strategy remains: learn something, make something, repeat.</p></div><div class="materials"><article class="material"><small>01 / language</small><strong>TypeScript</strong><p>the daily driver</p></article><article class="material"><small>02 / material</small><strong>Rust</strong><p>learning the hard way</p></article><article class="material"><small>03 / medium</small><strong>Blender</strong><p>making shapes behave</p></article><article class="material"><small>04 / principle</small><strong>Make it feel good.</strong><p>non-negotiable</p></article></div></section>
|
||
<section id="contact"><div class="contact"><div><div class="section-label">03 / next revision</div><h2>Let’s build<br><span>something.</span></h2><p>Have a question, a collaboration idea, or a project that needs another pair of eyes? The drafting table is open.</p></div><div class="contact-links"><a href="mailto:[email protected]"><span>studio line</span><span>email ↗</span></a><a href="https://github.com/mileswolfallen2" target="_blank" rel="noopener"><span>source archive</span><span>github ↗</span></a><a href="https://diskettelabs.com/" target="_blank" rel="noopener"><span>collective</span><span>diskette labs ↗</span></a></div></div></section></main><footer><span>© 2026 Miles Wolf Allen / studio plan</span><a href="#top">back to origin ↑</a><span>do not erase the margins</span></footer></div></div>
|
||
<script>
|
||
const nodes = document.querySelectorAll('.node'); const title = document.getElementById('inspectorTitle'); const copy = document.getElementById('inspectorCopy'); const kind = document.getElementById('inspectorKind');
|
||
nodes.forEach(node => node.addEventListener('click', () => { nodes.forEach(item => item.classList.remove('selected')); node.classList.add('selected'); title.textContent = node.dataset.title; copy.textContent = node.dataset.copy; kind.textContent = node.dataset.kind; }));
|
||
</script>
|
||
</body>
|
||
</html>
|