miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d2ac45d1b51df747dca7ab18831db78704513525
miles-web/redesign/concept-five.html
T

51 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
Reference in New Issue View Git Blame Copy Permalink