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

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
miles
2026-08-16 00:05:26 -05:00
parent b958e4babf
commit 93979bd467
4 changed files with 1082 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
photos/fedl.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

photos/noto.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

redesign/index-three.html
+445
View File
@@ -0,0 +1,445 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#083D2A">
<title>Miles Wolf Allen — Developer &amp; Interactive Builder</title>
<meta name="description" content="Miles Wolf Allen — Developer & 3D artist. I make software feel good to use — games, tools, websites, and a world without bundled Chromium.">
<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='%23083D2A'/%3E%3Ctext x='50' y='74' font-size='60' font-family='Anton' font-weight='900' text-anchor='middle' fill='%23F6E016'%3EM%3C/text%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=Anton&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<script>document.documentElement.className='js';</script>
<style>
:root{
--green:#083D2A; --beige:#EED6C8; --paper:#F7F7F7; --ink:#022016;
--yellow:#F6E016; --dot:#008841; --rule:rgba(0,0,0,.1);
--t:'Anton','Archivo Black',sans-serif; --b:'Space Grotesk','Neue Haas Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:clamp(12px,.9722222222vw,28px);scroll-behavior:smooth;}
@media(min-width:1920px){html{font-size:1vw;}}
body{background:var(--paper);color:var(--ink);font-family:var(--b);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-size-adjust:none;}
body,html{scrollbar-width:none;}
body::-webkit-scrollbar{display:none;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--yellow);color:var(--ink);}
img{max-width:100%;display:block;}
.grid{width:100%;max-width:2560px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:clamp(8px,1.39vw,40px);padding:0 clamp(16px,2.857vw,80px);}
.meta{font-family:var(--b);font-size:.9722222222vw;font-size:clamp(10px,.972vw,16px);text-transform:uppercase;letter-spacing:.04em;}
.star{font-size:2.36vw;font-size:clamp(18px,2.36vw,40px);line-height:.6;color:inherit;}
/* ---------- custom cursor ---------- */
.cursor{position:fixed;z-index:2000;left:0;top:0;pointer-events:none;display:flex;align-items:center;justify-content:center;width:4.2rem;height:4.2rem;border-radius:3.57rem;background:var(--yellow);color:var(--ink);font-family:var(--b);font-size:.76vw;font-size:clamp(9px,.76vw,14px);text-transform:uppercase;letter-spacing:.04em;transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.16,1,.1,1),width .35s cubic-bezier(.16,1,.1,1),height .35s cubic-bezier(.16,1,.1,1);will-change:transform;}
.cursor.show{transform:translate(-50%,-50%) scale(1);}
.cursor.big{width:7rem;height:7rem;}
@media(pointer:coarse){.cursor{display:none;}}
/* ---------- navbar ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:4;margin-top:2.85rem;padding:0 clamp(16px,2.857vw,80px);display:flex;align-items:center;justify-content:space-between;color:var(--beige);opacity:0;animation:fadeNav 1s .5s ease forwards;transition:color .4s ease;}
@keyframes fadeNav{to{opacity:1;}}
body.nav-ink .nav{color:var(--ink);}
body.nav-ink .nav-link::before,body.nav-ink .foot-socials a::before{background:currentColor;}
.nav-logo{font-family:var(--t);font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;}
.nav-links{display:flex;gap:1.5rem;align-items:center;}
.nav-link{position:relative;padding-bottom:.25rem;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;}
.nav-link::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .75s cubic-bezier(.16,1,.1,1);}
.nav-link:hover::before{transform:scaleX(1);transform-origin:left;}
.nav-pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--yellow);color:var(--ink);border-radius:7.14rem;padding:.45rem .9rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;}
.nav-pill i{width:.55rem;height:.55rem;border-radius:50%;background:var(--dot);}
/* ---------- hero ---------- */
.hero{position:relative;min-height:100dvh;background:var(--green);color:var(--beige);display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 30%,rgba(238,214,200,.05),transparent 55%);}
.hero-meta{position:absolute;top:6.8rem;left:0;right:0;display:flex;justify-content:space-between;align-items:center;color:var(--beige);opacity:.75;}
.hero-meta .meta:nth-child(2){text-align:center;}
.hero-grid{position:relative;z-index:1;padding-top:4rem;padding-bottom:6rem;}
.hero-title{grid-column:1 / -1;font-family:var(--t);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.005em;}
.hero-title .line{overflow:hidden;}
.hero-title .line>span{display:block;font-size:11.25vw;font-size:clamp(52px,11.25vw,320px);transform:translateY(112%);transition:transform 1.2s cubic-bezier(.16,1,.1,1);}
html.js .in .hero-title .line>span{transform:translateY(0);}
html.js .hero-title .line:nth-child(2)>span{transition-delay:.12s;}
.hero-title .l2{color:var(--yellow);}
.hero-sub{grid-column:1 / 9;margin-top:2.2rem;font-size:clamp(15px,1.25vw,34px);line-height:1.3;opacity:.9;}
.hero-cta{grid-column:1 / 13;display:flex;justify-content:space-between;align-items:flex-end;margin-top:2.8rem;}
.hero-cta .meta{opacity:.7;}
.scroll-cue{display:inline-flex;align-items:center;gap:.6rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8;}
.scroll-cue .bar{width:1px;height:3.4rem;background:var(--beige);opacity:.5;animation:cue 2.2s cubic-bezier(.16,1,.1,1) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
/* ---------- statement (sticky) ---------- */
.statement{height:220dvh;background:var(--paper);color:var(--ink);}
.statement-in{position:sticky;top:0;height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;}
.statement p{max-width:34.7vw;font-size:clamp(20px,1.66vw,48px);line-height:1.25;}
.statement .star{display:block;margin:0 auto 1.4rem;}
@media(max-width:900px){.statement p{max-width:80vw;}}
/* ---------- about ---------- */
.about{background:var(--green);color:var(--beige);padding-top:11.8vw;padding-bottom:11.8vw;}
.about-title{grid-column:1 / -1;font-family:var(--t);font-size:clamp(40px,6vw,160px);text-transform:uppercase;line-height:.9;}
.about-col{grid-column:2 / 7;margin-top:6rem;font-size:clamp(15px,1.25vw,34px);line-height:1.45;}
.about-col p+p{margin-top:1.4rem;}
.about-body{grid-column:8 / 13;margin-top:6rem;}
.about-body .meta{opacity:.75;margin-bottom:1.2rem;}
.about-line{padding:1.1rem 0;border-top:1px solid rgba(238,214,200,.18);display:flex;justify-content:space-between;gap:2rem;font-size:clamp(14px,1vw,28px);}
.about-line span:last-child{opacity:.55;text-align:right;}
.about-badge{margin-top:2.6rem;}
@media(max-width:900px){.about-col{grid-column:1 / -1;margin-top:3rem;} .about-body{grid-column:1 / -1;margin-top:3rem;} .about{padding-top:6rem;padding-bottom:6rem;}}
/* ---------- work archive ---------- */
.work{background:var(--paper);color:var(--ink);padding-top:11.8vw;padding-bottom:8vw;}
.work-head{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2rem;}
.work-head h2{font-family:var(--t);font-size:clamp(30px,3.6vw,104px);text-transform:uppercase;line-height:.9;}
.work-head .meta{opacity:.5;}
.prow{grid-column:1 / -1;border-top:1px solid var(--rule);}
.prow:last-child{border-bottom:1px solid var(--rule);}
.prow-head{display:grid;grid-template-columns:1fr 7fr 2fr 2fr .5fr;align-items:center;gap:1rem;padding:1.1rem 0;cursor:pointer;position:relative;}
.prow-num{font-size:clamp(12px,.83vw,22px);opacity:.4;}
.prow-name{font-family:var(--t);font-size:clamp(20px,2.63vw,76px);text-transform:uppercase;line-height:1;letter-spacing:.005em;}
.prow-type{font-size:clamp(11px,.83vw,20px);opacity:.3;}
.prow-year{font-size:clamp(11px,.83vw,20px);opacity:.5;}
.prow-arrow{width:.75rem;height:.75rem;position:relative;transition:transform .6s cubic-bezier(.16,1,.1,1);}
.prow-arrow::before,.prow-arrow::after{content:'';position:absolute;inset:0;background:var(--ink);transition:transform .6s cubic-bezier(.16,1,.1,1);}
.prow-arrow::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='12' height='2' y='5'/%3E%3Crect width='2' height='12' x='5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='12' height='2' y='5'/%3E%3Crect width='2' height='12' x='5'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--ink);}
.prow-arrow::after{background:var(--yellow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='12' height='2' y='5'/%3E%3Crect width='2' height='12' x='5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='12' height='2' y='5'/%3E%3Crect width='2' height='12' x='5'/%3E%3C/svg%3E") center/contain no-repeat;transform:translate(-100%,100%);}
.prow:hover .prow-arrow::before{transform:translate(100%,-100%);}
.prow:hover .prow-arrow::after{transform:translate(0,0);}
.prow-body{max-height:0;overflow:hidden;transition:max-height 1s cubic-bezier(.16,1,.1,1);}
.prow-body-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.2rem 2.5rem;padding:0 0 1.6rem;opacity:.75;}
.prow.open .prow-body{max-height:14rem;}
.prow-desc{font-size:clamp(13px,.97vw,26px);line-height:1.4;}
.prow-visit{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;position:relative;padding-bottom:.2rem;}
.prow-visit::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .75s cubic-bezier(.16,1,.1,1);}
.prow-visit:hover::before{transform:scaleX(1);transform-origin:left;}
@media(max-width:768px){.prow-head{grid-template-columns:1fr 4fr 1.2fr;}.prow-type{display:none;} .prow-year{display:none;}}
.work-foot{grid-column:1 / -1;margin-top:3rem;display:flex;justify-content:space-between;align-items:baseline;opacity:.6;}
.work-foot .meta{opacity:.7;}
/* ---------- stats ---------- */
.stats{background:var(--paper);color:var(--ink);padding-bottom:8vw;}
.stats .grid{border-top:1px solid var(--rule);}
.stat{padding:2.4rem 0;grid-column:span 3;border-right:1px solid var(--rule);text-align:center;}
.stat:first-child{border-left:1px solid var(--rule);}
.stat b{display:block;font-family:var(--t);font-weight:400;font-size:clamp(34px,3.6vw,104px);line-height:1;}
.stat span{display:block;margin-top:.6rem;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;opacity:.5;}
@media(max-width:768px){.stat{grid-column:span 6;margin-top:-1px;} .stat:nth-child(3){border-left:1px solid var(--rule);} .stat:nth-child(odd){border-right:1px solid var(--rule);}}
@media(max-width:480px){.stat{grid-column:span 12;}}
/* ---------- marquee ---------- */
.mq{background:var(--green);color:var(--beige);overflow:hidden;padding:4rem 0;border-top:1px solid rgba(238,214,200,.18);border-bottom:1px solid rgba(238,214,200,.18);}
.mq-track{display:flex;width:max-content;animation:mq 28s linear infinite;white-space:nowrap;font-family:var(--t);text-transform:uppercase;font-size:clamp(28px,5.2vw,150px);line-height:1;}
.mq-track span{display:inline-flex;align-items:center;gap:2rem;padding-right:2rem;}
.mq-track .star{color:var(--yellow);}
@keyframes mq{to{transform:translateX(-50%);}}
/* ---------- footer ---------- */
footer{background:var(--yellow);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:11.8vw clamp(16px,2.857vw,80px) 2.85rem;overflow:hidden;}
.foot-title{font-family:var(--t);text-transform:uppercase;line-height:.85;font-size:clamp(42px,8.19vw,236px);}
.foot-title .line{overflow:hidden;}
.foot-title .line>span{display:block;transform:translateY(112%);transition:transform 1.2s cubic-bezier(.16,1,.1,1);}
html.js .in .foot-title .line>span{transform:translateY(0);}
.foot-mail{display:inline-block;margin-top:3rem;font-family:var(--t);text-transform:uppercase;font-size:clamp(20px,2.63vw,76px);line-height:1;}
.foot-mail{position:relative;padding-bottom:.15em;}
.foot-mail::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.16,1,.1,1);}
.foot-mail:hover::before{transform:scaleX(1);transform-origin:left;}
.foot-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:4rem;border-top:1px solid rgba(2,32,22,.25);padding-top:1.4rem;gap:2rem;flex-wrap:wrap;}
.foot-socials{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.foot-socials a{text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;position:relative;padding-bottom:.2rem;}
.foot-socials a::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .75s cubic-bezier(.16,1,.1,1);}
.foot-socials a:hover::before{transform:scaleX(1);transform-origin:left;}
.foot-socials i{width:.32rem;height:.32rem;border-radius:50%;background:currentColor;}
@media(max-width:768px){
.hero-meta .meta:nth-child(2){display:none;}
.hero-sub{grid-column:1 / -1;}
.nav-links .nav-link{display:none;}
.work-head{flex-direction:column;align-items:flex-start;gap:1rem;}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;}
html.js .hero-title .line>span,html.js .foot-title .line>span{transform:none;}
.cursor{display:none;}
.statement{height:auto;} .statement-in{position:static;height:auto;padding:8rem 0;}
}
</style>
</head>
<body>
<div class="cursor" id="cursor" aria-hidden="true"><span>scroll</span></div>
<nav class="nav" aria-label="Main">
<a class="nav-logo" href="#top" data-cursor="home">miles<span style="opacity:.55">.site</span></a>
<div class="nav-links">
<a class="nav-link" href="#work" data-cursor="work">Work</a>
<a class="nav-link" href="#about" data-cursor="about">About</a>
<a class="nav-pill" href="mailto:[email protected]" data-cursor="hello"><i></i>Open to work</a>
</div>
</nav>
<header class="hero rv" id="top">
<div class="grid hero-meta">
<span class="meta">Miles Wolf Allen — Developer &amp; 3D Artist</span>
<span class="meta">Games · Tools · Websites</span>
<span class="meta">Est. 2008</span>
</div>
<div class="grid hero-grid">
<h1 class="hero-title">
<span class="line"><span>Miles</span></span>
<span class="line"><span class="l2">Wolf Allen</span></span>
</h1>
<p class="hero-sub">I make software feel good to use — games, tools and websites built with craft and a little chaos. Co-founder of Diskette Labs.</p>
<div class="hero-cta">
<span class="meta">✦ 160 repos &amp; counting</span>
<span class="scroll-cue">Scroll<span class="bar"></span></span>
</div>
</div>
</header>
<section class="statement rv">
<div class="statement-in">
<p><span class="star">✦</span>I explore how to make software feel good to use — a full Electron replacement, emulators, rhythm games, and way too many other repos.</p>
</div>
</section>
<section class="about rv" id="about">
<div class="grid">
<h2 class="about-title">About</h2>
<div class="about-col">
<p>I'm <b>Miles Wolf Allen</b>, a developer &amp; 3D artist still in school — and currently co-founder of <a class="prow-visit" href="https://diskettelabs.com/" target="_blank" rel="noopener">Diskette Labs</a>.</p>
<p>Right now I'm building <b>Gelectron</b>, a drop-in Electron replacement that uses native web views instead of bundling an entire Chromium. I've also built FEDL, OmniEmu, CommandMove, and 160+ other repos.</p>
<p>I believe pancakes are better than waffles, cereal is soup, and software should feel good to use.</p>
</div>
<div class="about-body">
<div class="meta">Currently</div>
<div class="about-line"><span>Building</span><span>Gelectron — native web views, no bundled Chromium</span></div>
<div class="about-line"><span>Co-founder</span><span>Diskette Labs</span></div>
<div class="about-line"><span>Habit</span><span>Geometry Dash addict · Pull shark ×2</span></div>
<div class="about-line"><span>Mode</span><span>Full maximalism, still debugging</span></div>
<a class="nav-pill about-badge" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" data-cursor="gh"><i></i>github.com/mileswolfallen2</a>
</div>
</div>
</section>
<section class="work rv" id="work">
<div class="grid">
<div class="work-head">
<h2>Selected work</h2>
<span class="meta">✦ 2022 — 2026 · tap to expand</span>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">01</span><span class="prow-name">OmniEmu 2.0</span><span class="prow-type">App</span><span class="prow-year">2024—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A multi-system emulator wrapping several cores in one clean desktop shell. Active.</span><a class="prow-visit" href="https://milesallen.site/projects/omniemu.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">02</span><span class="prow-name">Gelectron</span><span class="prow-type">App</span><span class="prow-year">2025—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A drop-in Electron replacement using native web views instead of bundled Chromium. Early days.</span><a class="prow-visit" href="https://milesallen.site/projects/gelectron.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">03</span><span class="prow-name">Vanilla</span><span class="prow-type">Framework</span><span class="prow-year">2025</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A clean, modern framework with Diskette Labs. Unreleased — building quietly.</span><a class="prow-visit" href="https://vanilla.milesallen.site/" target="_blank" rel="noopener">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">04</span><span class="prow-name">FEDL</span><span class="prow-type">Ecosystem</span><span class="prow-year">2024—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A fast, lightweight package manager and dev tool ecosystem. Live.</span><a class="prow-visit" href="https://me.fedl.site/" target="_blank" rel="noopener">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">05</span><span class="prow-name">CommandMove</span><span class="prow-type">Tool</span><span class="prow-year">2023</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A tool for moving commands and workflows around your terminal.</span><a class="prow-visit" href="https://milesallen.site/projects/command-move.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">06</span><span class="prow-name">Noto</span><span class="prow-type">AI</span><span class="prow-year">2025—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">AI note-taking that actually understands what you meant.</span><a class="prow-visit" href="https://milesallen.site/projects/noto.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">07</span><span class="prow-name">Nova AI</span><span class="prow-type">Local AI</span><span class="prow-year">2024—2025</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A local-first AI assistant that runs entirely on your machine.</span><a class="prow-visit" href="https://milesallen.site/projects/nova.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">08</span><span class="prow-name">Music App</span><span class="prow-type">Web</span><span class="prow-year">2023—2024</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A web music player that makes listening feel like the whole point.</span><a class="prow-visit" href="https://milesallen.site/projects/music-app.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">09</span><span class="prow-name">Rhythm Game</span><span class="prow-type">Game</span><span class="prow-year">2022—2023</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A rhythm game experiment in timing, feedback and juice.</span><a class="prow-visit" href="https://milesallen.site/projects/rhythm-game.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">10</span><span class="prow-name">FEDL Geode Mod</span><span class="prow-type">Mod</span><span class="prow-year">2025—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">The FEDL mod for Geometry Dash's Geode — extensions for the modding scene.</span><a class="prow-visit" href="https://milesallen.site/projects/geode-mod.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">11</span><span class="prow-name">Decompilations</span><span class="prow-type">Tool</span><span class="prow-year">2023—2024</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A tool for exploring and documenting decompiled game code.</span><a class="prow-visit" href="https://milesallen.site/projects/decompilations.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">12</span><span class="prow-name">Issue Tracker</span><span class="prow-type">Tool</span><span class="prow-year">2024</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A no-nonsense issue tracker that gets out of your way.</span><a class="prow-visit" href="https://milesallen.site/projects/issue-tracker.html">visit →</a></div></div>
</div>
<div class="prow" data-cursor="open">
<div class="prow-head">
<span class="prow-num">13</span><span class="prow-name">Moon Gaming</span><span class="prow-type">Game</span><span class="prow-year">2022—2026</span><span class="prow-arrow"></span>
</div>
<div class="prow-body"><div class="prow-body-in"><span class="prow-desc">A long-running gaming project — mods, tools and experiments since 2022.</span><a class="prow-visit" href="https://milesallen.site/projects/moon-gaming.html">visit →</a></div></div>
</div>
<div class="work-foot"><span class="meta">and 160+ more on GitHub</span><span class="meta">Miles Wolf Allen © 2026</span></div>
</div>
</section>
<section class="stats rv">
<div class="grid">
<div class="stat"><b data-count="160">0</b><span>Repos online</span></div>
<div class="stat"><b data-count="91">0</b><span>Stars earned</span></div>
<div class="stat"><b data-count="13">0</b><span>Watching me</span></div>
<div class="stat"><b data-count="37">0</b><span>I watch</span></div>
</div>
</section>
<div class="mq" aria-hidden="true">
<div class="mq-track">
<span>✦ Geometry Dash addict</span><span>✦ Cereal is soup</span><span>✦ Send help</span><span>✦ Full maximalism</span><span>✦ Usually online</span><span>✦ Pancakes &gt; waffles</span>
<span>✦ Geometry Dash addict</span><span>✦ Cereal is soup</span><span>✦ Send help</span><span>✦ Full maximalism</span><span>✦ Usually online</span><span>✦ Pancakes &gt; waffles</span>
</div>
</div>
<footer class="rv" id="contact">
<div class="foot-title">
<span class="line"><span>Let's</span></span>
<span class="line"><span>Make</span></span>
<span class="line"><span>Something</span></span>
<span class="line"><span>Great</span></span>
</div>
<a class="foot-mail" href="mailto:[email protected]" data-cursor="mail">[email protected]</a>
<div class="foot-meta">
<span class="meta">© 2026 Miles Wolf Allen — built by hand</span>
<div class="foot-socials">
<a href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" data-cursor="gh">GitHub</a><i></i>
<a href="https://replit.com/@MilesAllen1" target="_blank" rel="noopener" data-cursor="go">Replit</a><i></i>
<a href="https://codepen.io/mileswolfallen2-the-typescripter" target="_blank" rel="noopener" data-cursor="go">CodePen</a><i></i>
<a href="https://me.fedl.site" target="_blank" rel="noopener" data-cursor="go">Website</a>
</div>
</div>
</footer>
<script>
(function(){
var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es){
es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});
},{threshold:.12}):null;
var reveal=document.querySelectorAll('.rv');
for(var i=0;i<reveal.length;i++){if(io)io.observe(reveal[i]);else reveal[i].classList.add('in');}
var rows=document.querySelectorAll('.prow');
for(var r=0;r<rows.length;r++){(function(row){
var head=row.querySelector('.prow-head');
head.addEventListener('click',function(){
var was=row.classList.contains('open');
for(var x=0;x<rows.length;x++)rows[x].classList.remove('open');
if(!was)row.classList.add('open');
});
})(rows[r]);}
var counts=document.querySelectorAll('[data-count]');
if(counts.length&&io&&!reduce){
var cio=new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){
var el=e.target,target=parseInt(el.getAttribute('data-count'),10),t0=null;
var run=function(ts){
if(!t0)t0=ts;
var p=Math.min((ts-t0)/1300,1);
var eased=1-Math.pow(1-p,3);
el.textContent=Math.round(target*eased);
if(p<1)requestAnimationFrame(run);
};
requestAnimationFrame(run);
cio.unobserve(el);
}
});
},{threshold:.5});
for(var c=0;c<counts.length;c++)cio.observe(counts[c]);
}else{
for(var c2=0;c2<counts.length;c2++)counts[c2].textContent=counts[c2].getAttribute('data-count');
}
if(window.matchMedia&&window.matchMedia('(pointer:fine)').matches&&!reduce){
var cursor=document.getElementById('cursor');
var label=cursor.querySelector('span');
var px=0,py=0,cx=0,cy=0,shown=false,raf=null;
document.addEventListener('mousemove',function(ev){
px=ev.clientX;py=ev.clientY;
if(!shown){cursor.classList.add('show');shown=true;}
var t=ev.target;
while(t&&t!==document){
if(t.hasAttribute&&t.hasAttribute('data-cursor'))break;
t=t.parentNode;
}
if(t&&t!==document){
label.textContent=t.getAttribute('data-cursor');
cursor.classList.add('big');
}else{
label.textContent='scroll';
cursor.classList.remove('big');
}
if(!raf){
raf=requestAnimationFrame(function(){
cx+=(px-cx)*.22;cy+=(py-cy)*.22;
cursor.style.left=cx+'px';
cursor.style.top=cy+'px';
raf=null;
});
}
});
document.addEventListener('mouseleave',function(){cursor.classList.remove('show');shown=false;});
}
var nav=document.querySelector('.nav');
if(nav){
var secs=[['.hero',0],['.statement',1],['.about',0],['.work',1],['.stats',1],['.mq',0],['footer',1]];
var cache=secs.map(function(s){return {el:document.querySelector(s[0]),ink:s[1]};}).filter(function(s){return s.el;});
var paint=function(){
var y=window.scrollY+1,found=0;
for(var i=0;i<cache.length;i++){
if(cache[i].el.offsetTop<=y)found=cache[i].ink;
}
document.body.classList.toggle('nav-ink',!!found);
};
var tick=null;
window.addEventListener('scroll',function(){
if(tick)return;
tick=requestAnimationFrame(function(){paint();tick=null;});
},{passive:true});
paint();
}
})();
</script>
</body>
</html>
redesign/index-two.html
+637
View File
@@ -0,0 +1,637 @@
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MILES WOLF ALLEN © 2026</title>
<meta name="description" content="Miles Wolf Allen — developer & 3D artist. Games, tools, websites, and a world without bundled Chromium.">
<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='%23F7FF00'/%3E%3Ctext x='50' y='72' font-size='60' font-family='Arial Black' font-weight='900' text-anchor='middle' fill='%23000'%3EM%3C/text%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=Archivo:wdth,[email protected],100..900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<script>document.documentElement.className='js';</script>
<style>
:root{
--bg:#0b0b0e; --bg2:#121217; --fg:#f2f2f5; --mut:#8f8f98; --ln:#26262e;
--acc:#F7FF00; --sig:#F7FF00; --hov:#FF2EA6;
--d:'Archivo',sans-serif; --m:'Space Mono',monospace;
}
[data-theme="light"]{
--bg:#f4f4f1; --bg2:#e9e9e5; --fg:#131316; --mut:#6d6d75; --ln:#d3d3d9;
--acc:#131316; --sig:#131316; --hov:#cf005c;
}
[data-theme="max"]{
--bg:#0d0b12; --bg2:#171023; --fg:#ffffff; --mut:#b9a7c8; --ln:#3a2f4a;
--acc:#F7FF00; --sig:#F7FF00; --hov:#FF2EA6;
--pink:#FF2EA6; --yellow:#F7FF00; --cyan:#00F4FF; --orange:#FF5C00; --purple:#8A2BFF; --green:#00FF85;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:var(--d);font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--acc);color:var(--bg);}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--mut);border:2px solid var(--bg);}
.dsp{font-family:var(--d);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:750;text-transform:uppercase;line-height:.96;letter-spacing:.005em;}
.mono{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
/* ---------- fixed layers ---------- */
.prog{position:fixed;top:0;left:50%;transform:translateX(-50%);width:150px;height:4px;z-index:70;background:var(--ln);}
.prog-i{height:100%;width:0;background:var(--sig);transition:width .2s linear;}
/* ---------- header ---------- */
.hdr{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:var(--fg);}
.hdr-top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,56px);}
.hdr-bot{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,56px);color:var(--mut);}
.logo{font-family:var(--d);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.02em;pointer-events:auto;}
.logo .o{opacity:.45;}
.hdr-nav{display:flex;gap:2px;pointer-events:auto;}
.hdr-mid{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:var(--mut);pointer-events:none;}
.hl{position:relative;padding:8px 10px;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);background:none;border:0;cursor:pointer;transition:color .18s;}
.hl::before{content:'';position:absolute;inset:0;border:2px dashed transparent;transition:border-color .18s;}
a.hl:hover,button.hl:hover{color:var(--hov);}
a.hl:hover::before,button.hl:hover::before{border-color:var(--mut);}
.hdr-mid{font-size:10px;}
@media(max-width:900px){.hdr-mid{display:none;}}
@media(max-width:768px){.hdr-nav{display:none;}}
/* ---------- line mask reveal ---------- */
.mask .ln{display:block;overflow:hidden;}
html.js .mask .ln>span{display:inline-block;transform:translateY(120%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) var(--dl,0s);will-change:transform;}
html.js .mask.in .ln>span{transform:translateY(0);}
.ln{display:block;}
/* ---------- generic reveal ---------- */
html.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);}
html.js .rv.in{opacity:1;transform:none;}
/* ---------- inline links ---------- */
a.l{color:var(--fg);text-decoration:underline;text-decoration-color:var(--mut);text-decoration-thickness:1px;text-underline-offset:.16em;transition:color .15s,text-decoration-color .15s;}
a.l:hover{color:var(--hov);text-decoration-color:var(--hov);}
/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;padding:20vh clamp(16px,4vw,56px) 7vh;}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 12px;flex:1;align-content:start;}
.hero-role{grid-column:1 / span 3;font-size:clamp(18px,1.8vw,30px);}
.hero-think{grid-column:4 / span 2;color:var(--mut);padding-top:6px;font-size:11px;line-height:1.7;}
.hero-bio{grid-column:6 / span 5;color:var(--mut);font-size:15px;line-height:1.7;padding-top:2px;}
.hero-bio b{color:var(--fg);font-weight:700;}
.hero-tag{grid-column:1 / -1;margin-top:auto;align-self:end;padding-top:60px;font-size:clamp(38px,8.4vw,120px);}
.hero-tag .ln>span{font-size:inherit;}
@media(max-width:768px){
.hero{padding-top:22vh;}
.hero-role{grid-column:1 / -1;}
.hero-think{grid-column:1 / -1;margin-top:14px;}
.hero-bio{grid-column:1 / -1;margin-top:14px;max-width:46ch;}
.hero-tag{font-size:clamp(34px,11vw,64px);}
}
/* ---------- statement / signature ---------- */
.stmt{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:20vh clamp(16px,4vw,56px) 6vh;}
.sign-col{grid-column:1 / span 4;align-self:start;}
.sign{width:100%;max-width:380px;display:block;}
.sign .p{opacity:0;fill:none;stroke:var(--sig);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:700;stroke-dashoffset:700;}
.sign.in .p{animation:show 0s linear var(--pd,0s) forwards,draw var(--dr,1.4s) cubic-bezier(.65,0,.35,1) var(--pd,0s) forwards;}
.sign-gh{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;}
.gh-av{width:24px;height:24px;border-radius:50%;border:1px solid var(--ln);display:block;flex:none;}
.sign-cap{color:var(--mut);margin-top:12px;font-size:9px;letter-spacing:.05em;text-transform:uppercase;max-width:300px;line-height:1.7;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes show{to{opacity:1;}}
.stmt-copy{grid-column:6 / span 6;}
.stmt-1{font-size:clamp(22px,3vw,40px);line-height:1.25;margin-bottom:26px;}
.stmt-2{color:var(--mut);font-size:15px;line-height:1.75;max-width:52ch;}
@media(max-width:768px){.sign-col{grid-column:1 / -1;margin-bottom:20px;} .stmt-copy{grid-column:1 / -1;}}
/* ---------- selected work ---------- */
.work{padding:16vh clamp(16px,4vw,56px) 0;}
.work-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--mut);padding-bottom:30px;border-bottom:1px solid var(--ln);margin-bottom:16px;}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;}
.pcard{display:block;padding:6px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.pcard:nth-child(1){grid-column:span 8;}
.pcard:nth-child(2){grid-column:span 6;}
.pcard:nth-child(3){grid-column:span 6;}
.pcard:nth-child(4),.pcard:nth-child(5),.pcard:nth-child(6){grid-column:span 4;}
.pcard:nth-child(7),.pcard:nth-child(8),.pcard:nth-child(9){grid-column:span 4;}
.pcard:nth-child(10),.pcard:nth-child(11),.pcard:nth-child(12),.pcard:nth-child(13){grid-column:span 3;}
.ptile{position:relative;aspect-ratio:1 / 1;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;}
.pcard:hover .ptile{transform:scale(.965) rotate(1deg);box-shadow:0 22px 44px rgba(0,0,0,.35);}
.pchip{position:absolute;top:10px;right:10px;background:var(--acc);color:var(--bg);font-family:var(--m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;pointer-events:none;transition:transform .4s;}
.pcard:hover .pchip{transform:rotate(4deg);}
.pnum{position:absolute;bottom:6px;left:10px;font-family:var(--m);font-size:clamp(34px,5vw,64px);color:rgba(255,255,255,.30);pointer-events:none;line-height:1;}
.pcard.neutral .pnum{color:var(--mut);}
.pmeta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 4px 0;min-width:0;}
.ptitle{font-family:var(--d);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s;}
.pcard:hover .ptitle{color:var(--hov);}
.pyear{font-family:var(--m);font-size:10px;letter-spacing:.06em;color:var(--mut);white-space:nowrap;}
.t1{background:linear-gradient(135deg,#FF2EA6,#8A2BFF);}
.t2{background:linear-gradient(135deg,#F7FF00,#00FF85);}
.t3{background:var(--bg2);}
.t4{background:linear-gradient(135deg,#FF1F1F,#FF5C00);}
.t5{background:linear-gradient(135deg,#8A2BFF,#1a1a22);}
.t6{background:linear-gradient(135deg,#00F4FF,#8A2BFF);}
.t7{background:linear-gradient(135deg,#00FF85,#00F4FF);}
.t8{background:var(--bg2);}
.t9{background:linear-gradient(135deg,#FF2EA6,#FF5C00);}
.t10{background:linear-gradient(135deg,#00F4FF,#00FF85);}
.t11{background:var(--bg2);}
.t12{background:linear-gradient(135deg,#F7FF00,#FF5C00);}
.t13{background:linear-gradient(135deg,#8A2BFF,#FF2EA6);}
.ptile.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none;}
.ptile.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,14,.12) 0%,rgba(10,10,14,.18) 45%,rgba(10,10,14,.55) 100%);}
.ptile.frame .pchip,.ptile.frame .pnum{z-index:2;}
@media(max-width:768px){
.pcard:nth-child(n){grid-column:span 6;}
}
@media(max-width:480px){
.pcard:nth-child(n){grid-column:span 12;}
}
/* ---------- sticky slogan ---------- */
.slogan{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 clamp(16px,4vw,56px);z-index:1;}
.slogan-in{font-size:clamp(44px,10vw,150px);text-align:center;line-height:1.05;}
.slogan-in .ln{color:var(--mut);}
.slogan-in .ln:nth-child(2){color:var(--fg);}
.slogan-in .ln:nth-child(3){color:var(--mut);}
/* ---------- footer ---------- */
.footer{position:relative;z-index:2;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(16px,4vw,56px);background:var(--bg);overflow:hidden;}
.f-head{font-size:clamp(44px,9.5vw,140px);}
.f-head .ln:nth-child(1){text-align:left;}
.f-head .ln:nth-child(2){text-align:right;padding-right:7vw;}
.f-head .ln:nth-child(3){text-align:left;padding-left:11vw;}
.f-head .ln:nth-child(4){text-align:right;padding-right:3vw;}
.f-row{position:absolute;inset:auto clamp(16px,4vw,56px) 5vh;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.f-links{display:flex;gap:0;}
.f-copy{color:var(--mut);font-size:10px;}
/* ---------- stats ---------- */
.stats{max-width:1160px;margin:0 auto;padding:6vh clamp(16px,4vw,56px) 4vh;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.sstat{border-left:1px solid var(--ln);padding:6px 22px 6px 26px;}
.sstat:first-child{border-left:0;}
.snum{font-family:var(--d);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:750;font-size:clamp(46px,6vw,86px);line-height:1;display:block;transition:color .2s;}
.sstat:hover .snum{color:var(--hov);}
.sdesc{color:var(--mut);}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 0;} .sstat:nth-child(3){border-left:0;}}
/* ---------- loadout ---------- */
.loadout{max-width:1160px;margin:0 auto;padding:8vh clamp(16px,4vw,56px) 4vh;}
.load-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;}
.lg-label{color:var(--mut);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--ln);}
.skill-list{list-style:none;}
.skill{display:flex;align-items:baseline;gap:16px;padding:12px 3px;border-bottom:1px solid var(--ln);transition:color .15s;}
.skill:hover{color:var(--hov);}
.sk-num{color:var(--mut);font-size:10px;}
.sk-name{font-family:var(--d);font-stretch:115%;font-variation-settings:'wdth' 115;font-weight:650;text-transform:uppercase;font-size:15px;letter-spacing:.02em;}
@media(max-width:768px){.load-grid{grid-template-columns:1fr;}}
/* ---------- devlog ---------- */
.devlog{max-width:1160px;margin:0 auto;padding:8vh clamp(16px,4vw,56px) 8vh;}
.post-list{display:flex;flex-direction:column;}
.post{display:grid;grid-template-columns:130px 1fr auto;gap:22px;align-items:baseline;padding:28px 8px;border-bottom:1px solid var(--ln);transition:padding-left .2s,background .2s;}
.post:first-child{border-top:1px solid var(--ln);}
.post:hover{padding-left:16px;}
.p-date{color:var(--mut);font-size:10px;}
.p-title{font-family:var(--d);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.6vw,30px);transition:color .18s;}
.post:hover .p-title{color:var(--hov);}
.p-desc{color:var(--mut);font-size:13px;margin-top:5px;max-width:60ch;}
.p-go{font-size:20px;transition:transform .2s,color .2s;color:var(--mut);}
.post:hover .p-go{transform:translateX(8px);color:var(--hov);}
@media(max-width:768px){.post{grid-template-columns:1fr;gap:8px;} .p-go{display:none;}}
/* ---------- badges ---------- */
.stmt-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.sb{font-family:var(--m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border:1px solid var(--ln);padding:6px 10px;transition:color .15s,border-color .15s;}
.sb:hover{color:var(--hov);border-color:var(--hov);}
/* ---------- marquee (max mode) ---------- */
.mq{display:none;overflow:hidden;white-space:nowrap;border-top:3px solid #000;border-bottom:3px solid #000;position:relative;}
[data-theme="max"] .mq{display:block;}
.mq-track{display:inline-flex;white-space:nowrap;animation:mqScroll 26s linear infinite;font-family:var(--m);font-size:12px;letter-spacing:.05em;}
.mq-track span{padding:12px 22px;color:#000;}
.mq-y{background:var(--yellow);}
.mq-p{background:var(--pink);}
@keyframes mqScroll{to{transform:translateX(-50%);}}
/* ---------- MAX mode overrides ---------- */
[data-theme="max"] .logo{color:var(--acc);}
[data-theme="max"] .hero-role{color:var(--acc);}
[data-theme="max"] .hero-tag .ln:nth-child(1) span{color:var(--pink);}
[data-theme="max"] .hero-tag .ln:nth-child(2) span{color:var(--yellow);}
[data-theme="max"] .hero-tag .ln:nth-child(3) span{color:var(--cyan);}
[data-theme="max"] .stmt-1{color:var(--acc);}
[data-theme="max"] .work-head{border-bottom:2px solid var(--acc);}
[data-theme="max"] .slogan-in .ln:nth-child(1){color:var(--pink);}
[data-theme="max"] .slogan-in .ln:nth-child(2){color:var(--yellow);}
[data-theme="max"] .slogan-in .ln:nth-child(3){color:var(--cyan);}
[data-theme="max"] .f-head .ln:nth-child(1){color:var(--pink);}
[data-theme="max"] .f-head .ln:nth-child(2){color:var(--yellow);}
[data-theme="max"] .f-head .ln:nth-child(3){color:var(--cyan);}
[data-theme="max"] .f-head .ln:nth-child(4){color:var(--orange);}
[data-theme="max"] .ptile{border:3px solid #000;box-shadow:8px 8px 0 #000;}
[data-theme="max"] .pcard:nth-child(odd) .ptile{transform:rotate(-1.2deg);}
[data-theme="max"] .pcard:nth-child(even) .ptile{transform:rotate(1deg);}
[data-theme="max"] .pcard:hover .ptile{transform:rotate(0) scale(1.02);box-shadow:12px 12px 0 var(--hov);}
[data-theme="max"] .pchip{border:2px solid #000;box-shadow:3px 3px 0 #000;}
[data-theme="max"] .sstat{border:3px solid #000;background:var(--bg2);box-shadow:6px 6px 0 #000;margin:0 8px 8px 0;}
[data-theme="max"] .sstat:first-child{border-left:3px solid #000;}
[data-theme="max"] .sstat:nth-child(odd){transform:rotate(-1deg);}
[data-theme="max"] .sstat:nth-child(even){transform:rotate(1.2deg) translateY(4px);}
[data-theme="max"] .skill{border:3px solid #000;background:var(--bg2);box-shadow:4px 4px 0 #000;margin-bottom:10px;padding:13px 16px;}
[data-theme="max"] .skill:nth-child(3n){transform:rotate(-.6deg);}
[data-theme="max"] .skill:nth-child(3n+2){transform:rotate(.7deg);}
[data-theme="max"] .skill:hover{color:var(--acc);}
[data-theme="max"] .lg-label{border-bottom:2px solid var(--acc);color:var(--acc);}
[data-theme="max"] .post{border:3px solid #000;box-shadow:6px 6px 0 #000;margin-bottom:16px;background:var(--bg2);border-bottom:3px solid #000;}
[data-theme="max"] .post:first-child{border-top:3px solid #000;}
[data-theme="max"] .post:hover{background:var(--pink);padding-left:16px;}
[data-theme="max"] .post:hover .p-title,[data-theme="max"] .post:hover .p-desc{color:#000;}
[data-theme="max"] .post:hover .p-go{color:#000;}
[data-theme="max"] .post:hover .p-date{color:#000;}
[data-theme="max"] .sb{border:2px solid #000;color:#000;box-shadow:3px 3px 0 #000;}
[data-theme="max"] .sb:nth-child(4n+1){background:var(--pink);}
[data-theme="max"] .sb:nth-child(4n+2){background:var(--yellow);}
[data-theme="max"] .sb:nth-child(4n+3){background:var(--cyan);}
[data-theme="max"] .sb:nth-child(4n){background:var(--green);}
[data-theme="max"] .f-row a.hl{color:var(--acc);}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;}
html.js .mask .ln>span,html.js .rv{transform:none;opacity:1;}
html.js .sign.in .p{opacity:1;stroke-dashoffset:0;}
}
</style>
</head>
<body>
<div class="prog" aria-hidden="true"><div class="prog-i" id="pbar"></div></div>
<header class="hdr">
<div class="hdr-top">
<a class="logo hl" href="#top"><span>miles</span><span class="o">.site</span></a>
<nav class="hdr-nav">
<a class="hl" href="#work">Work</a>
<a class="hl" href="#contact">Contact</a>
<button class="hl" id="themeBtn" type="button" aria-label="Theme: dark, click to toggle">THEME[A]</button>
<button class="hl" id="soundBtn" type="button" aria-label="Sound paused, click to play" aria-pressed="false">SOUND[&gt;]</button>
</nav>
</div>
<span class="hdr-mid mono" id="coords">0000 X 0000 Y</span>
<div class="hdr-bot">
<span class="mono" id="clock">--:--</span>
<span class="mono" style="color:var(--mut)">© 2026</span>
</div>
</header>
<main>
<section class="hero" id="top">
<div class="hero-grid">
<div class="hero-role dsp mask" data-mask>
<span class="ln"><span>Developer &amp;</span></span>
<span class="ln"><span style="--dl:.06s">3D Artist</span></span>
</div>
<p class="hero-think mono rv">Thinking in systems.<br>Building with intent.</p>
<p class="hero-bio rv">I'm <b>Miles Wolf Allen</b>, developer &amp; 3D artist. Co-founder of <a class="l" href="https://diskettelabs.com/" target="_blank" rel="noopener">Diskette Labs</a>, still in school, and building a full <b>Electron replacement</b> — send help. 160 repos and counting.</p>
<div class="hero-tag dsp mask" data-mask>
<span class="ln"><span>I build</span></span>
<span class="ln"><span style="--dl:.06s">games, tools</span></span>
<span class="ln"><span style="--dl:.12s">&amp; websites</span></span>
</div>
</div>
</section>
<section class="stmt" id="about">
<div class="sign-col rv">
<svg class="sign" id="sign" viewBox="0 0 320 160" aria-hidden="true">
<path class="p" style="--pd:.1s;--dr:1.1s" d="M30 38 L44 108 L62 72 L80 108 L94 38"/>
<path class="p" style="--pd:.7s;--dr:.8s" d="M120 38 L144 38 M144 30 L144 108 M134 108 L154 108"/>
<path class="p" style="--pd:1s;--dr:.8s" d="M170 40 L170 108 L212 108"/>
<path class="p" style="--pd:1.3s;--dr:.9s" d="M230 40 L262 40 M230 40 L230 108 M230 108 L262 108 M230 74 L256 74"/>
<path class="p" style="--pd:1.6s;--dr:1.2s" d="M278 46 C300 40 308 60 290 68 C276 74 268 84 274 98 C278 108 296 114 308 106"/>
<path class="p" style="--pd:2.1s;--dr:1.2s" d="M26 128 C100 142 220 134 312 126"/>
</svg>
<div class="sign-gh">
<img class="gh-av" src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles Wolf Allen" width="24" height="24" loading="lazy">
<a class="l" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener">github.com/mileswolfallen2</a>
</div>
<p class="sign-cap">I believe pancakes are better than waffles, cereal is soup, and software should feel good to use.</p>
</div>
<div class="stmt-copy">
<p class="stmt-1 rv">I explore how to make software feel good to use — games, tools, and websites built with craft and a little chaos.</p>
<p class="stmt-2 rv">I'm co-founder of <a class="l" href="https://diskettelabs.com/" target="_blank" rel="noopener">Diskette Labs</a>, currently building <a class="l" href="https://milesallen.site/projects/gelectron.html">Gelectron</a> — a drop-in Electron replacement using native web views instead of bundled Chromium — and previously built <a class="l" href="https://milesallen.site/projects/fedl.html">FEDL</a>, <a class="l" href="https://milesallen.site/projects/omniemu.html">OmniEmu</a>, <a class="l" href="https://milesallen.site/projects/command-move.html">CommandMove</a>, and way too many other repos.</p>
<div class="stmt-badges rv">
<span class="sb">Pull shark ×2</span>
<span class="sb">YOLO</span>
<span class="sb">Quickdraw</span>
<span class="sb">Geometry dash addict</span>
</div>
</div>
</section>
<section class="stats" id="stats">
<div class="stats-grid">
<div class="sstat rv"><span class="snum" data-count="160">0</span><span class="sdesc mono">Repos online</span></div>
<div class="sstat rv"><span class="snum" data-count="91">0</span><span class="sdesc mono">Stars earned</span></div>
<div class="sstat rv"><span class="snum" data-count="13">0</span><span class="sdesc mono">Watching me</span></div>
<div class="sstat rv"><span class="snum" data-count="37">0</span><span class="sdesc mono">I watch</span></div>
</div>
</section>
<section class="work" id="work">
<div class="work-head mono"><span>Selected work</span><span>2022 — 2026</span></div>
<div class="work-grid">
<a class="pcard rv" href="https://milesallen.site/projects/omniemu.html">
<div class="ptile t1 frame"><iframe src="https://milesallen.site/projects/omniemu" title="Project 1 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Active</span><span class="pnum">01</span></div>
<div class="pmeta"><span class="ptitle">OmniEmu 2.0</span><span class="pyear">2024-2026</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/gelectron.html">
<div class="ptile t2 frame"><iframe src="https://milesallen.site/projects/gelectron" title="Project 2 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Early</span><span class="pnum">02</span></div>
<div class="pmeta"><span class="ptitle">Gelectron</span><span class="pyear">2025-2026</span></div>
</a>
<a class="pcard rv" href="https://vanilla.milesallen.site/" target="_blank" rel="noopener">
<div class="ptile t3 frame"><iframe src="https://vanilla.milesallen.site/" title="Project 3 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Unreleased ↗</span><span class="pnum">03</span></div>
<div class="pmeta"><span class="ptitle">Vanilla</span><span class="pyear">2025</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/fedl.html">
<div class="ptile t4 frame"><iframe src="https://me.fedl.site/" title="Project 4 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Live</span><span class="pnum">04</span></div>
<div class="pmeta"><span class="ptitle">FEDL</span><span class="pyear">2024-2026</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/command-move.html">
<div class="ptile t5 frame"><iframe src="https://milesallen.site/projects/command-move" title="Project 5 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Tool</span><span class="pnum">05</span></div>
<div class="pmeta"><span class="ptitle">CommandMove</span><span class="pyear">2023</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/noto.html">
<div class="ptile t6 frame"><iframe src="https://milesallen.site/projects/noto" title="Project 6 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">AI</span><span class="pnum">06</span></div>
<div class="pmeta"><span class="ptitle">Noto</span><span class="pyear">2025-2026</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/nova.html">
<div class="ptile t7 frame"><iframe src="https://milesallen.site/projects/nova" title="Project 7 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Local AI</span><span class="pnum">07</span></div>
<div class="pmeta"><span class="ptitle">Nova AI</span><span class="pyear">2024-2025</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/music-app.html">
<div class="ptile t8 frame"><iframe src="https://milesallen.site/projects/music-app" title="Project 8 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Web</span><span class="pnum">08</span></div>
<div class="pmeta"><span class="ptitle">Music App</span><span class="pyear">2023-2024</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/rhythm-game.html">
<div class="ptile t9 frame"><iframe src="https://milesallen.site/projects/rhythm-game" title="Project 9 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Game</span><span class="pnum">09</span></div>
<div class="pmeta"><span class="ptitle">Rhythm Game</span><span class="pyear">2022-2023</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/geode-mod.html">
<div class="ptile t10 frame"><iframe src="https://milesallen.site/projects/geode-mod" title="Project 10 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Mod</span><span class="pnum">10</span></div>
<div class="pmeta"><span class="ptitle">FEDL Geode Mod</span><span class="pyear">2025-2026</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/decompilations.html">
<div class="ptile t11 frame"><iframe src="https://milesallen.site/projects/decompilations" title="Project 11 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Tool</span><span class="pnum">11</span></div>
<div class="pmeta"><span class="ptitle">Decompilations</span><span class="pyear">2023-2024</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/issue-tracker.html">
<div class="ptile t12 frame"><iframe src="https://milesallen.site/projects/issue-tracker" title="Project 12 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Tool</span><span class="pnum">12</span></div>
<div class="pmeta"><span class="ptitle">Issue Tracker</span><span class="pyear">2024</span></div>
</a>
<a class="pcard rv" href="https://milesallen.site/projects/moon-gaming.html">
<div class="ptile t13 frame"><iframe src="https://milesallen.site/projects/moon-gaming" title="Project 13 preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe><span class="pchip">Game</span><span class="pnum">13</span></div>
<div class="pmeta"><span class="ptitle">Moon Gaming</span><span class="pyear">2022-2026</span></div>
</a>
</div>
</section>
<div class="mq mq-y" aria-hidden="true">
<div class="mq-track">
<span>★ 160 REPOS AND COUNTING</span><span>★ SEND HELP</span><span>★ CEREAL IS SOUP</span><span>★ GEOMETRY DASH ADDICT</span><span>★ USUALLY ONLINE</span><span>★ FULL MAXIMALISM</span><span>★ STILL DEBUGGING</span><span>★ EST. 2008</span>
<span>★ 160 REPOS AND COUNTING</span><span>★ SEND HELP</span><span>★ CEREAL IS SOUP</span><span>★ GEOMETRY DASH ADDICT</span><span>★ USUALLY ONLINE</span><span>★ FULL MAXIMALISM</span><span>★ STILL DEBUGGING</span><span>★ EST. 2008</span>
</div>
</div>
<section class="loadout" id="loadout">
<div class="work-head mono"><span>Loadout</span><span>skills</span></div>
<div class="load-grid">
<div>
<div class="lg-label mono">Ready to use</div>
<ul class="skill-list">
<li class="skill rv"><span class="sk-num">01</span><span class="sk-name">JavaScript</span></li>
<li class="skill rv"><span class="sk-num">02</span><span class="sk-name">Backend JS</span></li>
<li class="skill rv"><span class="sk-num">03</span><span class="sk-name">HTML / CSS</span></li>
<li class="skill rv"><span class="sk-num">04</span><span class="sk-name">Python</span></li>
<li class="skill rv"><span class="sk-num">05</span><span class="sk-name">Git</span></li>
<li class="skill rv"><span class="sk-num">06</span><span class="sk-name">Blender</span></li>
<li class="skill rv"><span class="sk-num">07</span><span class="sk-name">Unity / Unreal</span></li>
<li class="skill rv"><span class="sk-num">08</span><span class="sk-name">Cloudflare</span></li>
<li class="skill rv"><span class="sk-num">09</span><span class="sk-name">Linux / Bash</span></li>
<li class="skill rv"><span class="sk-num">10</span><span class="sk-name">Electron</span></li>
</ul>
</div>
<div>
<div class="lg-label mono">Currently unlocking</div>
<ul class="skill-list">
<li class="skill rv"><span class="sk-num">11</span><span class="sk-name">Rust</span></li>
<li class="skill rv"><span class="sk-num">12</span><span class="sk-name">Swift</span></li>
<li class="skill rv"><span class="sk-num">13</span><span class="sk-name">Flutter</span></li>
<li class="skill rv"><span class="sk-num">14</span><span class="sk-name">PHP</span></li>
<li class="skill rv"><span class="sk-num">15</span><span class="sk-name">.NET</span></li>
<li class="skill rv"><span class="sk-num">16</span><span class="sk-name">Nix</span></li>
</ul>
</div>
</div>
</section>
<section class="devlog" id="devlog">
<div class="work-head mono"><span>Devlog</span><span>6 entries</span></div>
<div class="post-list">
<a class="post rv" href="https://milesallen.site/blog/diskette-devlog.html">
<span class="p-date">2026 // 001</span>
<div><div class="p-title">Focusing on Diskette Labs</div><p class="p-desc">Co-founder of a product design collective. Where my focus is now — still open to collabs.</p></div>
<span class="p-go">→</span>
</a>
<a class="post rv" href="https://milesallen.site/blog/gelectron-devlog.html">
<span class="p-date">2026 // 002</span>
<div><div class="p-title">Why I built Gelectron</div><p class="p-desc">Electron bundles Chromium with every app. Native web views fix that.</p></div>
<span class="p-go">→</span>
</a>
<a class="post rv" href="https://milesallen.site/blog/omniemu-devlog.html">
<span class="p-date">2026 // 003</span>
<div><div class="p-title">Why I built OmniEmu</div><p class="p-desc">I got tired of opening 15 emulator apps. So I built one that manages them all.</p></div>
<span class="p-go">→</span>
</a>
<a class="post rv" href="https://milesallen.site/blog/command-move-devlog.html">
<span class="p-date">2026 // 004</span>
<div><div class="p-title">CommandMove: cut &amp; paste</div><p class="p-desc">macOS doesn't have Cmd+X for files. I fixed that. Global event taps and AppleScript.</p></div>
<span class="p-go">→</span>
</a>
<a class="post rv" href="https://milesallen.site/blog/fedl-devlog.html">
<span class="p-date">2025 // 005</span>
<div><div class="p-title">Running the FEDL</div><p class="p-desc">What it takes to maintain a Geometry Dash demon list. 3,800+ verified runs.</p></div>
<span class="p-go">→</span>
</a>
<a class="post rv" href="https://milesallen.site/blog/nova-devlog.html">
<span class="p-date">2025 // 006</span>
<div><div class="p-title">Building Nova AI</div><p class="p-desc">Local AI that doesn't phone home. Desktop GUI, web interface, CLI — no subscriptions.</p></div>
<span class="p-go">→</span>
</a>
</div>
</section>
<div class="mq mq-p" aria-hidden="true">
<div class="mq-track">
<span>★ EMAIL ME</span><span>★ GITHUB ↗</span><span>★ REPLIT ↗</span><span>★ CODEPEN ↗</span><span>★ I RESPOND MAYBE FAST</span><span>★ COFFEE COUNT: UNKNOWN</span><span>★ BUGS: INFINITE</span><span>★ OVERCLOCKED</span>
<span>★ EMAIL ME</span><span>★ GITHUB ↗</span><span>★ REPLIT ↗</span><span>★ CODEPEN ↗</span><span>★ I RESPOND MAYBE FAST</span><span>★ COFFEE COUNT: UNKNOWN</span><span>★ BUGS: INFINITE</span><span>★ OVERCLOCKED</span>
</div>
</div>
<section class="slogan">
<div class="slogan-in dsp mask" data-mask>
<span class="ln"><span>Build</span></span>
<span class="ln"><span style="--dl:.08s">with</span></span>
<span class="ln"><span style="--dl:.16s">intent</span></span>
</div>
</section>
<footer class="footer" id="contact">
<div class="f-head dsp mask" data-mask>
<span class="ln"><span>Let's</span></span>
<span class="ln"><span style="--dl:.07s">Make</span></span>
<span class="ln"><span style="--dl:.14s">Something</span></span>
<span class="ln"><span style="--dl:.21s">Great</span></span>
</div>
<div class="f-row">
<a class="hl" href="mailto:[email protected]">[email protected]</a>
<div class="f-links">
<a class="hl" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener">GitHub</a>
<a class="hl" href="https://replit.com/@MilesAllen1" target="_blank" rel="noopener">Replit</a>
<a class="hl" href="https://codepen.io/mileswolfallen2-the-typescripter" target="_blank" rel="noopener">CodePen</a>
<a class="hl" href="https://me.fedl.site" target="_blank" rel="noopener">Website</a>
</div>
<span class="f-copy mono">©2026</span>
</div>
</footer>
</main>
<script>
(function(){
'use strict';
var body=document.body;
var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- theme ---------- */
var themeBtn=document.getElementById('themeBtn');
var THEMES=['dark','light','max'];
function themeLabel(t){ return t==='max'?'MAX':(t==='light'?'THEME[B]':'THEME[A]'); }
function setTheme(t){
document.documentElement.setAttribute('data-theme',t);
themeBtn.textContent=themeLabel(t);
themeBtn.setAttribute('aria-label','Theme: '+t+', click to toggle');
try{localStorage.setItem('miles-theme',t);}catch(e){}
}
try{var savedTheme=localStorage.getItem('miles-theme');}catch(e){}
setTheme(THEMES.indexOf(savedTheme)>-1?savedTheme:'dark');
themeBtn.addEventListener('click',function(){
var cur=document.documentElement.getAttribute('data-theme')||'dark';
setTheme(THEMES[(THEMES.indexOf(cur)+1)%THEMES.length]);
});
/* ---------- clock ---------- */
var clock=document.getElementById('clock');
var tz='';
try{tz=new Date().toLocaleTimeString('en-US',{timeZoneName:'short'}).match(/[A-Z]{2,6}$/)[0]||'';}catch(e){}
function tick(){
var d=new Date();
var hh=('0'+d.getHours()).slice(-2),mm=('0'+d.getMinutes()).slice(-2);
clock.textContent=(tz?tz+' ':'')+hh+':'+mm;
}
tick();
setInterval(tick,1000);
/* ---------- mouse coordinates ---------- */
var coords=document.getElementById('coords');
if(window.matchMedia&&window.matchMedia('(pointer: fine)').matches){
document.addEventListener('mousemove',function(e){
coords.textContent=('000'+e.clientX).slice(-4)+' X '+('000'+e.clientY).slice(-4)+' Y';
},{passive:true});
}
/* ---------- progress bar ---------- */
var pbar=document.getElementById('pbar');
function prog(){
var h=document.documentElement;
pbar.style.width=((window.scrollY/(h.scrollHeight-window.innerHeight))*100)+'%';
}
window.addEventListener('scroll',prog,{passive:true});
prog();
/* ---------- stats count-up ---------- */
function countUp(el){
var target=parseInt(el.getAttribute('data-count'),10)||0;
var t0=null;
function fmt(n){return Math.round(n).toLocaleString('en-US');}
function step(ts){
if(t0===null)t0=ts;
var p=Math.min(1,(ts-t0)/1000);
var ease=1-Math.pow(1-p,3);
el.textContent=fmt(target*ease);
if(p<1)requestAnimationFrame(step);else el.textContent=fmt(target);
}
requestAnimationFrame(step);
}
if('IntersectionObserver' in window&&!reduce){
var cio=new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){countUp(e.target);cio.unobserve(e.target);}
});
},{threshold:0.4});
document.querySelectorAll('[data-count]').forEach(function(el){cio.observe(el);});
} else {
document.querySelectorAll('[data-count]').forEach(function(el){
el.textContent=(parseInt(el.getAttribute('data-count'),10)||0).toLocaleString('en-US');
});
}
/* ---------- reveal system ---------- */
function revealAll(){
document.querySelectorAll('.rv,[data-mask],#sign').forEach(function(el){ el.classList.add('in'); });
}
if('IntersectionObserver' in window&&!reduce){
var io=new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
});
},{threshold:0.16,rootMargin:'0px 0px -8% 0px'});
document.querySelectorAll('.rv,[data-mask],#sign').forEach(function(el){ io.observe(el); });
} else {
revealAll();
}
/* ---------- sound ---------- */
var soundBtn=document.getElementById('soundBtn');
var snd=null;
function stopSound(){
if(!snd)return;
snd._g.gain.linearRampToValueAtTime(0,snd.currentTime+0.35);
setTimeout(function(){
if(!snd)return;
snd._o.forEach(function(o){try{o.stop();}catch(e){}});
snd.close();snd=null;
},500);
}
soundBtn.addEventListener('click',function(){
var AC=window.AudioContext||window.webkitAudioContext;
if(!AC)return;
if(snd){ stopSound(); soundBtn.setAttribute('aria-pressed','false'); soundBtn.innerHTML='SOUND[&gt;]'; return; }
snd=new AC();
var o1=snd.createOscillator(),o2=snd.createOscillator(),g=snd.createGain();
var lfo=snd.createOscillator(),lg=snd.createGain();
o1.type='sine';o1.frequency.value=55;
o2.type='triangle';o2.frequency.value=110.5;
lfo.frequency.value=0.13;lg.gain.value=0.015;
g.gain.value=0;
lfo.connect(lg);lg.connect(g.gain);
o1.connect(g);o2.connect(g);g.connect(snd.destination);
o1.start();o2.start();lfo.start();
g.gain.linearRampToValueAtTime(0.035,snd.currentTime+1.2);
snd._o=[o1,o2,lfo];snd._g=g;
soundBtn.setAttribute('aria-pressed','true');
soundBtn.innerHTML='SOUND[|]';
});
})();
</script>
</body>
</html>