mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
241 lines
40 KiB
HTML
241 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Miles Wolf Allen — Creative Developer</title>
|
||
<meta name="description" content="Miles Wolf Allen — developer, 3D artist, and builder of games, tools, websites, and slightly strange ideas.">
|
||
<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' rx='22' fill='%23b9a4ff'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-family='Arial Black' font-size='60' fill='%2318243a'%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=DM+Mono:wght@400;500;700&family=DM+Sans:wght@400;500;700;900&family=Syne:wght@600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ================================================================
|
||
PINBOARD — a playful maximalist studio homepage
|
||
================================================================ */
|
||
:root{
|
||
--navy:#18243a;--navy-2:#243252;--cream:#fffaf0;--paper:#f7f0e5;
|
||
--lav:#b9a4ff;--lilac:#e5dcff;--mint:#a8edc8;--aqua:#8de2e8;
|
||
--coral:#ff8b78;--peach:#ffd1ae;--yellow:#ffe66d;--pink:#ff79aa;
|
||
--blue:#5d8cff;--white:#fff;--muted:#768097;--line:rgba(24,36,58,.16);
|
||
--display:'Syne',sans-serif;--body:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
|
||
--ease:cubic-bezier(.22,1,.36,1);--bounce:cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth;overflow-x:hidden}
|
||
body{background:var(--cream);color:var(--navy);font:16px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
|
||
::selection{background:var(--coral);color:var(--navy)}
|
||
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}
|
||
|
||
/* background doodles */
|
||
.doodle{position:fixed;z-index:0;pointer-events:none;color:var(--lav);opacity:.5}
|
||
.doodle-1{right:3%;top:17%;font-size:42px;transform:rotate(20deg);animation:wiggle 4s ease-in-out infinite}
|
||
.doodle-2{left:4%;top:62%;font-size:30px;color:var(--coral);transform:rotate(-15deg);animation:wiggle 5s ease-in-out infinite 1s}
|
||
.doodle-3{right:8%;bottom:13%;font-size:52px;color:var(--mint);animation:spin 14s linear infinite}
|
||
@keyframes wiggle{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:5deg}}
|
||
@keyframes spin{to{rotate:360deg}}
|
||
|
||
/* header */
|
||
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:18px clamp(20px,5vw,72px);background:rgba(255,250,240,.9);backdrop-filter:blur(15px);border-bottom:2px solid var(--navy)}
|
||
.logo{display:flex;align-items:center;gap:10px;font:800 17px var(--display);letter-spacing:-.04em;white-space:nowrap}
|
||
.logo-mark{width:31px;height:31px;border:2px solid var(--navy);border-radius:10px 10px 10px 3px;background:var(--lav);display:grid;place-items:center;font:800 17px var(--display);box-shadow:3px 3px 0 var(--navy);transform:rotate(-7deg)}
|
||
.nav-links{display:flex;align-items:center;gap:5px;margin-left:auto}
|
||
.nav-links a{padding:7px 12px;border-radius:99px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted);transition:all .25s var(--ease)}
|
||
.nav-links a:hover,.nav-links a.active{background:var(--navy);color:var(--cream);transform:translateY(-2px)}
|
||
.nav-cta{padding:10px 17px;border:2px solid var(--navy);border-radius:99px;background:var(--yellow);font:700 11px var(--mono);box-shadow:3px 3px 0 var(--navy);transition:all .2s var(--bounce);white-space:nowrap}
|
||
.nav-cta:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--navy);background:var(--coral)}
|
||
@media(max-width:800px){.nav-links{display:none}.nav-cta{margin-left:auto}}
|
||
|
||
/* global layout */
|
||
.wrap{width:min(1160px,88vw);margin:0 auto}.section{position:relative;z-index:1;padding:clamp(78px,10vw,140px) 0}
|
||
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:48px}
|
||
.kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:var(--yellow);font:700 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;box-shadow:3px 3px 0 rgba(24,36,58,.13);transform:rotate(-2deg)}
|
||
.kicker::before{content:'✦';color:var(--coral)}
|
||
h2{font:800 clamp(40px,7vw,82px)/.95 var(--display);letter-spacing:-.07em;margin-top:18px}h2 em{font-style:normal;color:var(--coral)}
|
||
.sub{color:var(--muted);font-size:16px;margin-top:14px}.section-number{font:700 12px var(--mono);color:var(--muted);letter-spacing:.08em}
|
||
@media(max-width:650px){.section-head{display:block}.section-number{display:block;margin-top:25px}}
|
||
|
||
/* hero */
|
||
.hero{position:relative;z-index:1;min-height:calc(100svh - 70px);padding:clamp(52px,7vw,95px) 0 clamp(45px,6vw,80px);overflow:hidden;background:linear-gradient(125deg,var(--cream) 0%,#fff8fa 47%,var(--lilac) 100%)}
|
||
.hero::before{content:'';position:absolute;left:-150px;bottom:-210px;width:490px;height:490px;border-radius:50%;background:var(--peach);opacity:.5;filter:blur(4px)}
|
||
.hero::after{content:'';position:absolute;right:-140px;top:-120px;width:470px;height:470px;border-radius:50%;background:var(--aqua);opacity:.42;filter:blur(5px)}
|
||
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);align-items:center;gap:clamp(35px,6vw,95px);position:relative;z-index:2}
|
||
.hero-copy{padding-bottom:15px}.hero-copy .kicker{background:var(--lav);margin-bottom:12px}
|
||
.hero-title{font:800 clamp(60px,9.6vw,132px)/.82 var(--display);letter-spacing:-.1em;margin:22px 0 28px;position:relative}
|
||
.hero-title span{display:block}.hero-title .outline{color:transparent;-webkit-text-stroke:2px var(--navy)}.hero-title .color{color:var(--coral);position:relative}.hero-title .color::after{content:'✦';position:absolute;color:var(--yellow);font:400 .24em var(--body);right:3%;top:-.15em;transform:rotate(17deg)}
|
||
.hero-copy p{max-width:470px;color:var(--muted);font-size:18px;line-height:1.65}.hero-copy p strong{color:var(--navy)}
|
||
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 21px;border:2px solid var(--navy);border-radius:99px;font:700 12px var(--mono);box-shadow:4px 4px 0 var(--navy);transition:all .25s var(--bounce)}
|
||
.btn:hover{translate:-3px -3px;box-shadow:7px 7px 0 var(--navy)}.btn-primary{background:var(--navy);color:var(--cream)}.btn-primary:hover{background:var(--coral);color:var(--navy)}.btn-secondary{background:var(--mint)}
|
||
.hero-meta{display:flex;align-items:center;gap:10px;margin-top:26px;font:500 11px var(--mono);color:var(--muted)}.online-dot{width:9px;height:9px;border-radius:50%;background:#33cd87;box-shadow:0 0 0 4px rgba(51,205,135,.18);animation:blink 2s ease-in-out infinite}@keyframes blink{50%{opacity:.35}}
|
||
|
||
/* browser illustration */
|
||
.browser-wrap{position:relative;min-height:510px;display:grid;place-items:center;perspective:1000px}.browser{width:min(620px,100%);border:3px solid var(--navy);border-radius:20px;background:#fff;box-shadow:12px 13px 0 var(--navy);transform:rotate(3deg);position:relative;transition:transform .5s var(--bounce)}.browser:hover{transform:rotate(0) translateY(-6px);box-shadow:15px 17px 0 var(--navy)}
|
||
.browser-bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 15px;border-bottom:2px solid var(--navy);background:var(--lav);border-radius:17px 17px 0 0}.browser-dot{width:10px;height:10px;border:1.5px solid var(--navy);border-radius:50%}.browser-dot:nth-child(1){background:var(--coral)}.browser-dot:nth-child(2){background:var(--yellow)}.browser-dot:nth-child(3){background:var(--mint)}.address{height:22px;flex:1;margin-left:10px;padding:3px 10px;border:1px solid rgba(24,36,58,.35);border-radius:99px;color:var(--muted);font:10px var(--mono);background:rgba(255,255,255,.45)}
|
||
.browser-screen{height:440px;padding:26px 27px;position:relative;overflow:hidden;background:linear-gradient(140deg,#fbf8ff,#effaff)}.browser-screen::after{content:'< / >';position:absolute;right:22px;top:18px;color:rgba(24,36,58,.1);font:700 24px var(--mono)}
|
||
.screen-nav{display:flex;align-items:center;justify-content:space-between;font:700 9px var(--mono);color:var(--navy);letter-spacing:.03em}.screen-links{display:flex;gap:10px;color:var(--muted);font-weight:400}.screen-links span:first-child{color:var(--coral)}
|
||
.screen-copy{position:relative;z-index:2;margin-top:47px}.screen-copy .tiny{color:var(--coral);font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.screen-copy h3{font:800 clamp(38px,5vw,68px)/.82 var(--display);letter-spacing:-.09em;margin:12px 0;color:var(--navy)}.screen-copy h3 span{color:var(--coral)}.screen-copy p{max-width:230px;color:var(--muted);font-size:12px;line-height:1.5}.screen-button{display:inline-block;margin-top:15px;padding:9px 14px;border:2px solid var(--navy);border-radius:99px;background:var(--yellow);font:700 9px var(--mono);box-shadow:3px 3px 0 var(--navy)}
|
||
/* css illustration */
|
||
.person{position:absolute;right:30px;bottom:-13px;width:215px;height:275px;z-index:3}.person .hair{position:absolute;left:57px;top:8px;width:98px;height:100px;background:var(--navy);border-radius:45% 55% 45% 48%;transform:rotate(-8deg)}.person .hair::before,.person .hair::after{content:'';position:absolute;background:var(--navy);border-radius:50%}.person .hair::before{width:41px;height:65px;left:-14px;top:29px;rotate:20deg}.person .hair::after{width:38px;height:60px;right:-11px;top:28px;rotate:-20deg}.person .face{position:absolute;left:73px;top:39px;width:73px;height:91px;background:var(--peach);border:3px solid var(--navy);border-radius:42% 50% 47% 50%;z-index:2}.person .ear{position:absolute;width:17px;height:27px;background:var(--peach);border:3px solid var(--navy);border-radius:50%;top:72px;z-index:1}.person .ear.left{left:61px}.person .ear.right{left:140px}.eye{position:absolute;width:7px;height:8px;border-radius:50%;background:var(--navy);top:75px}.eye.left{left:91px}.eye.right{left:121px}.nose{position:absolute;width:13px;height:8px;border-bottom:2px solid var(--navy);border-radius:50%;left:103px;top:90px}.smile{position:absolute;width:25px;height:11px;border-bottom:3px solid var(--coral);border-radius:0 0 50% 50%;left:97px;top:106px}.glasses{position:absolute;left:82px;top:69px;width:59px;height:21px;border:3px solid var(--navy);border-radius:8px;z-index:3}.glasses::after{content:'';position:absolute;left:26px;top:6px;width:10px;border-top:3px solid var(--navy)}
|
||
.person .neck{position:absolute;left:98px;top:120px;width:25px;height:29px;background:var(--peach);border:3px solid var(--navy);z-index:1}.person .body{position:absolute;left:36px;top:139px;width:150px;height:160px;background:var(--lav);border:3px solid var(--navy);border-radius:55px 55px 16px 16px;z-index:2}.person .shirt-logo{position:absolute;left:89px;top:181px;font:800 20px var(--display);color:var(--navy);z-index:3;rotate:-7deg}.arm{position:absolute;top:160px;width:37px;height:128px;background:var(--lav);border:3px solid var(--navy);border-radius:30px;z-index:1}.arm.left{left:22px;rotate:17deg}.arm.right{left:164px;rotate:-19deg}.hand{position:absolute;width:25px;height:25px;border:3px solid var(--navy);background:var(--peach);border-radius:50%;z-index:4}.hand.left{left:22px;bottom:15px}.hand.right{right:10px;bottom:32px}
|
||
.laptop{position:absolute;z-index:4;left:15px;bottom:5px;width:190px;height:78px;background:var(--aqua);border:3px solid var(--navy);border-radius:8px 8px 20px 20px;transform:rotate(-8deg);box-shadow:5px 5px 0 var(--navy)}.laptop::before{content:'</>';position:absolute;left:69px;top:17px;font:800 26px var(--display);color:var(--navy)}.laptop::after{content:'';position:absolute;left:-13px;bottom:-14px;width:215px;height:14px;border:3px solid var(--navy);background:var(--white);border-radius:50%}
|
||
.float-note{position:absolute;padding:10px 13px;border:2px solid var(--navy);border-radius:12px;background:var(--yellow);font:700 10px var(--mono);box-shadow:4px 4px 0 var(--navy);z-index:5;animation:floatNote 3.5s ease-in-out infinite}.note-1{right:-14px;top:24px;rotate:8deg}.note-2{left:-12px;bottom:47px;background:var(--coral);rotate:-8deg;animation-delay:1s}.note-3{right:26px;bottom:-6px;background:var(--mint);rotate:-5deg;animation-delay:2s}@keyframes floatNote{0%,100%{translate:0 0}50%{translate:0 -10px}}
|
||
@media(max-width:600px){.browser-wrap{min-height:460px;margin-top:20px}.browser{transform:rotate(1deg)}.browser-screen{height:370px;padding:20px}.person{scale:.8;transform-origin:bottom right;right:-5px}.screen-copy h3{font-size:44px}.screen-links{display:none}.float-note{scale:.8}}
|
||
|
||
/* ticker */
|
||
.ticker{position:relative;z-index:3;overflow:hidden;background:var(--navy);color:var(--yellow);border-block:3px solid var(--navy);transform:rotate(-1deg) scale(1.02);margin:0 -1%}.ticker-track{display:flex;width:max-content;animation:marquee 25s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}.ticker span{font:800 clamp(20px,3vw,32px) var(--display);letter-spacing:-.03em;text-transform:uppercase;padding:14px 25px;white-space:nowrap}.ticker i{font-style:normal;color:var(--coral)}@keyframes marquee{to{translate:-50%}}
|
||
|
||
/* about */
|
||
.about{background:var(--paper)}.about-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(35px,7vw,100px);align-items:start}.about-lead{font:700 clamp(25px,3.6vw,47px)/1.12 var(--display);letter-spacing:-.055em;margin-bottom:25px}.about-lead em{color:var(--coral);font-style:normal}.about-copy p{color:var(--muted);max-width:56ch;margin-bottom:15px}.about-copy p strong{color:var(--navy)}.about-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}.about-link{display:inline-block;padding:10px 16px;border:2px solid var(--navy);border-radius:99px;font:700 11px var(--mono);transition:all .2s var(--bounce)}.about-link:hover{background:var(--lav);translate:-2px -2px;box-shadow:4px 4px 0 var(--navy)}.facts{border:2px solid var(--navy);border-radius:17px;overflow:hidden;background:var(--cream);box-shadow:6px 6px 0 var(--peach)}.fact{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}.fact dt{font:700 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.fact dd{font-weight:600;font-size:14px}.fact dd .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#33cd87;margin-right:6px}.tag-list{display:flex;gap:4px;flex-wrap:wrap}.tag{font:500 10px var(--mono);border:1px solid var(--line);border-radius:8px;padding:3px 7px}
|
||
|
||
/* skills */
|
||
.skills-section{background:var(--lav);border-radius:35px;margin:0 clamp(12px,3vw,40px);padding:clamp(65px,9vw,120px) clamp(20px,6vw,85px);box-shadow:10px 12px 0 var(--navy)}.skills-section .kicker{background:var(--yellow)}.skills-section h2{color:var(--navy)}.skills-section .sub{color:rgba(24,36,58,.68)}.skill-label{display:flex;align-items:center;gap:14px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.skill-label::after{content:'';height:2px;flex:1;background:rgba(24,36,58,.18)}.skill-group{margin-bottom:34px}.skill-group:last-child{margin-bottom:0}.skill-wall{display:flex;flex-wrap:wrap;gap:11px}.skill{padding:11px 17px;border:2px solid var(--navy);border-radius:13px;background:#fff;font:700 13px var(--mono);box-shadow:3px 3px 0 var(--navy);rotate:var(--r,0deg);transition:all .25s var(--bounce)}.skill:nth-child(3n){background:var(--yellow)}.skill:nth-child(3n+1){background:var(--mint)}.skill:hover{translate:-3px -4px;rotate:0deg!important;box-shadow:7px 7px 0 var(--navy);background:var(--coral)}.skill.locked{background:transparent;border-style:dashed;opacity:.65;box-shadow:none}.skill.locked:hover{opacity:1;background:var(--peach)}
|
||
|
||
/* projects */
|
||
.projects{background:var(--cream)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:19px}.project{position:relative;display:flex;flex-direction:column;min-height:235px;padding:22px;border:3px solid var(--navy);border-radius:19px;background:#fff;box-shadow:5px 5px 0 var(--lav);overflow:hidden;transition:all .3s var(--bounce)}.project::before{content:'';position:absolute;inset:0;transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}.project:nth-child(5n+1)::before{background:var(--yellow)}.project:nth-child(5n+2)::before{background:var(--mint)}.project:nth-child(5n+3)::before{background:var(--peach)}.project:nth-child(5n+4)::before{background:var(--aqua)}.project:nth-child(5n)::before{background:var(--lav)}.project:hover::before{transform:translateY(0)}.project:hover{translate:0 -6px;box-shadow:8px 10px 0 var(--navy)}.project>*{position:relative;z-index:1}.project-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.project-tag{padding:5px 9px;border:2px solid var(--navy);border-radius:8px;background:var(--yellow);font:700 9px var(--mono);text-transform:uppercase}.project-meta{font:400 10px var(--mono);color:var(--muted)}.project h3{font:800 25px/1 var(--display);letter-spacing:-.05em;margin-bottom:10px}.project p{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:18px}.project:hover p{color:rgba(24,36,58,.75)}.project-arrow{margin-top:auto;align-self:flex-end;font-size:21px;color:var(--coral);transition:transform .25s}.project:hover .project-arrow{transform:translate(4px,-4px);color:var(--navy)}
|
||
|
||
/* scoreboard */
|
||
.scoreboard{background:var(--navy);color:var(--cream);border-radius:35px;margin:0 clamp(12px,3vw,40px);padding:clamp(65px,9vw,120px) clamp(20px,6vw,85px);box-shadow:10px 12px 0 var(--coral)}.scoreboard .kicker{background:var(--yellow);color:var(--navy)}.scoreboard h2{color:#fff}.scoreboard .sub{color:rgba(255,250,240,.6)}.score-group{margin-top:37px}.score-group h3{font:800 25px var(--display);color:var(--yellow);margin-bottom:14px}.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.score{padding:20px 15px;border:2px solid rgba(255,250,240,.22);border-radius:14px;background:rgba(255,255,255,.025);transition:all .3s var(--bounce)}.score:hover{translate:0 -4px;background:var(--pink);color:var(--navy);border-color:var(--pink)}.score-number{font:800 clamp(25px,3.5vw,42px)/1 var(--display)}.score-label{font:500 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,250,240,.52);margin-top:7px}.score:hover .score-label{color:rgba(24,36,58,.65)}@media(max-width:720px){.score-grid{grid-template-columns:1fr 1fr}}
|
||
|
||
/* github */
|
||
.github{background:var(--paper)}.github-cards{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.github-cards img{max-width:100%;height:auto;border:2px solid var(--navy);border-radius:15px;box-shadow:5px 5px 0 var(--lav);transition:all .25s var(--bounce)}.github-cards img:nth-child(2){box-shadow:5px 5px 0 var(--mint)}.github-cards img:nth-child(3){box-shadow:5px 5px 0 var(--coral)}.github-cards img:hover{translate:0 -4px;rotate:-1deg;box-shadow:8px 8px 0 var(--navy)}
|
||
|
||
/* devlog */
|
||
.devlog{background:var(--lilac)}.devlog .entry-list{border-top:2px solid var(--navy)}.entry{display:grid;grid-template-columns:75px 1fr auto;align-items:center;gap:18px;padding:21px 8px;border-bottom:1px solid rgba(24,36,58,.2);transition:all .25s var(--ease)}.entry:hover{padding-left:22px;background:rgba(255,255,255,.35)}.entry-year{font:700 11px var(--mono);color:var(--muted)}.entry-title{font:700 20px var(--display);letter-spacing:-.035em}.entry-tags{font:500 10px var(--mono);color:var(--muted);text-transform:uppercase}@media(max-width:650px){.entry{grid-template-columns:55px 1fr}.entry-tags{display:none}}
|
||
|
||
/* contact */
|
||
.contact{background:var(--peach);border-radius:35px;margin:0 clamp(12px,3vw,40px);padding:clamp(65px,9vw,120px) clamp(20px,6vw,85px);box-shadow:10px 12px 0 var(--navy);overflow:hidden}.contact h2{color:var(--navy)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:start;margin-top:34px}.contact-copy p{max-width:400px;font-size:18px;font-weight:600;line-height:1.55}.contact-copy p em{font-family:var(--display);color:var(--coral);font-style:italic}.email{display:inline-flex;align-items:center;gap:10px;margin-top:27px;padding:17px 22px;border:3px solid var(--navy);border-radius:99px;background:var(--navy);color:var(--mint);font:700 15px var(--mono);box-shadow:5px 5px 0 var(--white);transition:all .25s var(--bounce)}.email:hover{translate:-3px -3px;box-shadow:8px 8px 0 var(--white);background:var(--coral);color:var(--navy)}.social-list{border:3px solid var(--navy);border-radius:18px;overflow:hidden}.social{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid rgba(24,36,58,.3);font:700 14px var(--mono);text-transform:uppercase;transition:all .22s}.social:last-child{border-bottom:0}.social:hover{background:var(--yellow);padding-left:27px}.social small{font:400 11px var(--mono)}@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
|
||
|
||
/* footer */
|
||
footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:30px clamp(20px,5vw,72px);font:500 11px var(--mono);color:var(--muted)}footer a:hover{color:var(--coral)}.footer-links{display:flex;gap:12px;flex-wrap:wrap}
|
||
|
||
/* motion */
|
||
.reveal{opacity:0;translate:0 24px;transition:opacity .75s var(--ease),translate .75s var(--ease)}.reveal.in{opacity:1;translate:0 0}
|
||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;translate:0}.ticker-track{animation:none}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="doodle doodle-1" aria-hidden="true">✦</div><div class="doodle doodle-2" aria-hidden="true">〰</div><div class="doodle doodle-3" aria-hidden="true">✳</div>
|
||
|
||
<nav class="topbar">
|
||
<a class="logo" href="#hero"><span class="logo-mark">M</span><span>Miles Allen</span></a>
|
||
<div class="nav-links">
|
||
<a href="#about">About</a><a href="#skills">Skills</a><a href="#projects">Projects</a><a href="#scoreboard">Scores</a><a href="#devlog">Devlog</a>
|
||
</div>
|
||
<a class="nav-cta" href="#contact">Let's talk ↗</a>
|
||
</nav>
|
||
|
||
<main>
|
||
<!-- HERO -->
|
||
<section class="hero" id="hero">
|
||
<div class="wrap hero-grid">
|
||
<div class="hero-copy">
|
||
<span class="kicker">Creative developer & 3D artist</span>
|
||
<h1 class="hero-title"><span>Miles</span><span class="outline">Wolf</span><span class="color">Allen</span></h1>
|
||
<p>I make <strong>games, tools, and websites</strong> for curious people — with a little craft, a little chaos, and way too many open tabs.</p>
|
||
<div class="hero-actions"><a class="btn btn-primary" href="#projects">Explore my work ↓</a><a class="btn btn-secondary" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener">GitHub ↗</a></div>
|
||
<div class="hero-meta"><span class="online-dot"></span> Usually online · co-founder of Diskette Labs</div>
|
||
</div>
|
||
<div class="browser-wrap">
|
||
<div class="browser">
|
||
<div class="browser-bar"><i class="browser-dot"></i><i class="browser-dot"></i><i class="browser-dot"></i><span class="address">milesallen.site / home</span></div>
|
||
<div class="browser-screen">
|
||
<div class="screen-nav"><span>M—WA</span><div class="screen-links"><span>WORK</span><span>ABOUT</span><span>CONTACT</span></div></div>
|
||
<div class="screen-copy"><div class="tiny">HELLO, INTERNET ✦</div><h3>MAKE<br><span>GOOD</span><br>THINGS.</h3><p>Software can be useful and full of personality. That is the plan.</p><span class="screen-button">see the builds →</span></div>
|
||
<div class="person" aria-hidden="true"><div class="hair"></div><div class="ear left"></div><div class="ear right"></div><div class="face"></div><div class="glasses"></div><i class="eye left"></i><i class="eye right"></i><i class="nose"></i><i class="smile"></i><div class="neck"></div><div class="body"></div><div class="shirt-logo">M</div><div class="arm left"></div><div class="arm right"></div><div class="hand left"></div><div class="hand right"></div><div class="laptop"></div></div>
|
||
</div>
|
||
<span class="float-note note-1">✦ 160 repos</span><span class="float-note note-2">send help!</span><span class="float-note note-3">usually online</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="ticker" aria-hidden="true"><div class="ticker-track">
|
||
<span>building emulators <i>✦</i></span><span>send help <i>✦</i></span><span>160 repos and counting <i>✦</i></span><span>still debugging <i>✦</i></span><span>geometry dash addict <i>✦</i></span><span>cereal is soup <i>✦</i></span><span>building emulators <i>✦</i></span><span>send help <i>✦</i></span><span>160 repos and counting <i>✦</i></span><span>still debugging <i>✦</i></span><span>geometry dash addict <i>✦</i></span><span>cereal is soup <i>✦</i></span>
|
||
</div></div>
|
||
|
||
<!-- ABOUT -->
|
||
<section class="section about" id="about"><div class="wrap">
|
||
<div class="section-head"><div><span class="kicker reveal">01 // identity</span><h2 class="reveal">A person who<br><em>builds things.</em></h2><p class="sub reveal">the human behind the commits</p></div><span class="section-number">ABOUT / 01</span></div>
|
||
<div class="about-layout">
|
||
<div class="about-copy"><p class="about-lead reveal">Software should feel <em>good</em> to use — so I keep making things until it does.</p><p class="reveal">I'm <strong>Miles Wolf Allen</strong>, a developer and 3D artist still in school. Some things I make are games, some are tools, and some exist because I thought it would be fun.</p><p class="reveal">I'm also co-founder of <strong>Diskette Labs</strong>, building <strong>Gelectron</strong> (a full Electron replacement), and running <strong>FEDL</strong> — the Geometry Dash demon list.</p><div class="about-actions reveal"><a class="about-link" href="../about-me.html">More about me →</a><a class="about-link" href="https://diskettelabs.com/" target="_blank" rel="noopener">Diskette Labs ↗</a></div></div>
|
||
<dl class="facts reveal"><div class="fact"><dt>Status</dt><dd><span class="live"></span>usually online</dd></div><div class="fact"><dt>Crew</dt><dd>Diskette Labs — co-founder</dd></div><div class="fact"><dt>Badges</dt><dd class="tag-list"><span class="tag">Pull Shark ×2</span><span class="tag">YOLO</span><span class="tag">Quickdraw</span></dd></div><div class="fact"><dt>Believes</dt><dd>pancakes > waffles · cereal is soup</dd></div><div class="fact"><dt>Stack</dt><dd>JS · TS · Rust · Swift · Python · Blender</dd></div></dl>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- SKILLS -->
|
||
<section class="section" id="skills"><div class="skills-section"><div class="wrap">
|
||
<span class="kicker reveal">02 // loadout</span><h2 class="reveal">Things I<br><em>know how to use.</em></h2><p class="sub reveal">what I actually reach for</p>
|
||
<div class="skill-group reveal"><div class="skill-label">Ready to use <span>16</span></div><div class="skill-wall"><span class="skill" style="--r:-2deg">JavaScript</span><span class="skill" style="--r:1deg">Backend JS</span><span class="skill" style="--r:-1deg">HTML</span><span class="skill" style="--r:2deg">CSS</span><span class="skill" style="--r:-1deg">Python</span><span class="skill" style="--r:2deg">Git</span><span class="skill" style="--r:-2deg">Blender</span><span class="skill" style="--r:1deg">Unity</span><span class="skill" style="--r:-1deg">Unreal</span><span class="skill" style="--r:2deg">Cloudflare</span><span class="skill" style="--r:-2deg">Linux</span><span class="skill" style="--r:1deg">Netlify</span><span class="skill" style="--r:-1deg">Bash</span><span class="skill" style="--r:2deg">GitHub</span><span class="skill" style="--r:-2deg">Electron</span><span class="skill" style="--r:1deg">Gelectron</span></div></div>
|
||
<div class="skill-group reveal"><div class="skill-label">Currently unlocking <span>4</span></div><div class="skill-wall"><span class="skill locked" style="--r:-1deg">PHP</span><span class="skill locked" style="--r:2deg">.NET</span><span class="skill locked" style="--r:-2deg">Nix</span><span class="skill locked" style="--r:1deg">Yarn</span></div></div>
|
||
</div></div></section>
|
||
|
||
<!-- PROJECTS -->
|
||
<section class="section projects" id="projects"><div class="wrap">
|
||
<div class="section-head"><div><span class="kicker reveal">03 // builds</span><h2 class="reveal">The <em>projects.</em></h2><p class="sub reveal">stuff I've made (and some I forked)</p></div><span class="section-number">13 BUILDS / 2022—2026</span></div>
|
||
<div class="project-grid">
|
||
<a class="project reveal" href="../projects/omniemu.html"><div class="project-top"><span class="project-tag">Active</span><span class="project-meta">MIT · v0.3.2</span></div><h3>OmniEmu 2.0</h3><p>All your emulators in one place. Install 20+, scan ROMs, and launch games without opening 15 different apps.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.03s" href="../projects/gelectron.html"><div class="project-top"><span class="project-tag">Early</span><span class="project-meta">Rust + Node.js</span></div><h3>Gelectron</h3><p>Drop-in replacement for Electron using native web views instead of bundling Chromium.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.06s" href="https://vanilla.milesallen.site/" target="_blank" rel="noopener"><div class="project-top"><span class="project-tag">Unreleased</span><span class="project-meta">Vanilla JS</span></div><h3>Vanilla</h3><p>A clean, minimal web experiment. Pure vanilla JS, no frameworks, no cruft.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.09s" href="../projects/fedl.html"><div class="project-top"><span class="project-tag">Live</span><span class="project-meta">2196 commits</span></div><h3>FEDL</h3><p>The demon list for Geometry Dash. Ranked levels, run submissions, and a community better at the game than me.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.12s" href="../projects/command-move.html"><div class="project-top"><span class="project-tag">Swift</span><span class="project-meta">MIT · macOS</span></div><h3>CommandMove</h3><p>True cut-and-paste for Finder. Cmd+X, navigate, Cmd+V. What Apple forgot to build.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.15s" href="../projects/noto.html"><div class="project-top"><span class="project-tag">Active</span><span class="project-meta">Flutter · MIT</span></div><h3>Noto</h3><p>Note-taking app with AI built in. Powered by Cortex AI and good at organizing chaos.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.18s" href="../projects/nova.html"><div class="project-top"><span class="project-tag">Python</span><span class="project-meta">MIT · Local</span></div><h3>Nova AI</h3><p>AI assistant that runs on your machine. Desktop GUI, web interface, and CLI. No cloud.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.21s" href="../projects/music-app.html"><div class="project-top"><span class="project-tag">JS</span><span class="project-meta">Apache-2.0</span></div><h3>Music App</h3><p>Music player that doesn't interrupt you with ads. Inspired by YouTube Music without the annoying parts.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.24s" href="../projects/rhythm-game.html"><div class="project-top"><span class="project-tag">HTML</span><span class="project-meta">MPL-2.0</span></div><h3>Rhythm Game</h3><p>Hit keys to the beat. Song selection, real-time notes, and keyboard controls. My fingers hurt.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.27s" href="../projects/geode-mod.html"><div class="project-top"><span class="project-tag">WIP</span><span class="project-meta">MIT</span></div><h3>FEDL Geode Mod</h3><p>Geometry Dash mod that shows the demon list in-game. Roulette mode, banned mod detection, and more.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.30s" href="../projects/decompilations.html"><div class="project-top"><span class="project-tag">HTML</span><span class="project-meta">MIT</span></div><h3>Decompilations</h3><p>Native PC ports and decompilations of games. Progress tracking for projects that probably shouldn't exist.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.33s" href="../projects/issue-tracker.html"><div class="project-top"><span class="project-tag">HTML</span><span class="project-meta">MIT</span></div><h3>Issue Tracker</h3><p>Built my own issue tracker because why not. Node.js backend, no frameworks, raw determination.</p><span class="project-arrow">↗</span></a>
|
||
<a class="project reveal" style="--d:.36s" href="../projects/moon-gaming.html"><div class="project-top"><span class="project-tag">HTML</span><span class="project-meta">1,542 commits</span></div><h3>Moon Gaming</h3><p>Game hub with 1,500+ commits. Browse, play, and explore a growing library of browser games.</p><span class="project-arrow">↗</span></a>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- SCOREBOARD -->
|
||
<section class="section" id="scoreboard"><div class="scoreboard"><div class="wrap">
|
||
<span class="kicker reveal">04 // scoreboard</span><h2 class="reveal">A few <em>numbers.</em></h2><p class="sub reveal">what the projects have achieved</p>
|
||
<div class="score-group reveal"><h3>FEDL</h3><div class="score-grid"><div class="score"><div class="score-number">3,839</div><div class="score-label">verified runs</div></div><div class="score"><div class="score-number">341</div><div class="score-label">ranked levels</div></div><div class="score"><div class="score-number">250+</div><div class="score-label">active players</div></div><div class="score"><div class="score-number">3,800+</div><div class="score-label">youtube videos</div></div></div></div>
|
||
<div class="score-group reveal"><h3>OmniEmu 2.0</h3><div class="score-grid"><div class="score"><div class="score-number">20+</div><div class="score-label">emulators</div></div><div class="score"><div class="score-number">3</div><div class="score-label">platforms</div></div><div class="score"><div class="score-number">v0.3.2</div><div class="score-label">latest</div></div><div class="score"><div class="score-number">TS</div><div class="score-label">built with</div></div></div></div>
|
||
<div class="score-group reveal"><h3>Other projects</h3><div class="score-grid"><div class="score"><div class="score-number">3</div><div class="score-label">Nova interfaces</div></div><div class="score"><div class="score-number">5</div><div class="score-label">Noto AI features</div></div><div class="score"><div class="score-number">1,542</div><div class="score-label">Moon commits</div></div><div class="score"><div class="score-number">MIT</div><div class="score-label">licensed</div></div></div></div>
|
||
</div></div></section>
|
||
|
||
<!-- GITHUB -->
|
||
<section class="section github" id="github"><div class="wrap">
|
||
<div class="section-head"><div><span class="kicker reveal">05 // github</span><h2 class="reveal">Raw <em>stats.</em></h2><p class="sub reveal">straight from the API</p></div><span class="section-number">OPEN SOURCE / ALWAYS</span></div>
|
||
<div class="github-cards reveal"><img src="https://github-readme-stats.josselinonduty.fr/api?username=mileswolfallen2&show_icons=true&theme=noctis_minimus" alt="GitHub statistics" loading="lazy"><img src="https://github-readme-stats.josselinonduty.fr/api/top-langs/?username=mileswolfallen2&layout=compact&theme=noctis_minimus" alt="Most used languages" loading="lazy"><img src="https://streak-stats.demolab.com/?user=mileswolfallen2&theme=noctis_minimus" alt="GitHub streak" loading="lazy"></div>
|
||
</div></section>
|
||
|
||
<!-- DEVLOG -->
|
||
<section class="section devlog" id="devlog"><div class="wrap">
|
||
<div class="section-head"><div><span class="kicker reveal">06 // devlog</span><h2 class="reveal">Things I <em>learned.</em></h2><p class="sub reveal">things I've learned, broken, and fixed</p></div><span class="section-number">FIELD NOTES / 06</span></div>
|
||
<div class="entry-list"><a class="entry reveal" href="../blog/diskette-devlog.html"><span class="entry-year">2026</span><span class="entry-title">Focusing on Diskette Labs</span><span class="entry-tags">Design · Collective</span></a><a class="entry reveal" style="--d:.05s" href="../blog/gelectron-devlog.html"><span class="entry-year">2026</span><span class="entry-title">Why I Built Gelectron</span><span class="entry-tags">Rust · Native</span></a><a class="entry reveal" style="--d:.1s" href="../blog/omniemu-devlog.html"><span class="entry-year">2026</span><span class="entry-title">Why I Built OmniEmu</span><span class="entry-tags">TypeScript · Electron</span></a><a class="entry reveal" style="--d:.15s" href="../blog/command-move-devlog.html"><span class="entry-year">2026</span><span class="entry-title">CommandMove: Cut & Paste on Mac</span><span class="entry-tags">Swift · macOS</span></a><a class="entry reveal" style="--d:.2s" href="../blog/fedl-devlog.html"><span class="entry-year">2025</span><span class="entry-title">Running the FEDL</span><span class="entry-tags">Node.js · Community</span></a><a class="entry reveal" style="--d:.25s" href="../blog/nova-devlog.html"><span class="entry-year">2025</span><span class="entry-title">Building Nova AI</span><span class="entry-tags">Python · Local AI</span></a></div>
|
||
</div></section>
|
||
|
||
<!-- CONTACT -->
|
||
<section class="section" id="contact"><div class="contact"><div class="wrap">
|
||
<span class="kicker reveal">07 // reach out</span><h2 class="reveal">Let's <em>talk.</em></h2><p class="sub reveal">unless you're a bot, then please go away</p>
|
||
<div class="contact-grid"><div class="contact-copy"><p class="reveal">I'm open to collaborations, strange ideas, and <em>very</em> specific bug reports. The door is always open.</p><a class="email reveal" href="mailto:[email protected]">[email protected] <span>↗</span></a></div><div class="social-list reveal"><a class="social" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener"><span>GitHub</span><small>mileswolfallen2 ↗</small></a><a class="social" href="https://replit.com/@MilesAllen1" target="_blank" rel="noopener"><span>Replit</span><small>@MilesAllen1 ↗</small></a><a class="social" href="https://codepen.io/mileswolfallen2-the-typescripter" target="_blank" rel="noopener"><span>CodePen</span><small>mileswolfallen2 ↗</small></a><a class="social" href="https://me.fedl.site" target="_blank" rel="noopener"><span>Website</span><small>me.fedl.site ↗</small></a><a class="social" href="https://diskettelabs.com/" target="_blank" rel="noopener"><span>Studio</span><small>Diskette Labs ↗</small></a></div></div>
|
||
</div></div></section>
|
||
</main>
|
||
|
||
<footer><span>© 2026 Miles Wolf Allen</span><div class="footer-links"><a href="../uses.html">Uses</a><a href="../now.html">Now</a><a href="../colophon.html">Colophon</a><a href="../experiments.html">Internet History</a><a href="../music.html">Music</a></div><span>Built with curiosity ✦</span></footer>
|
||
|
||
<script>
|
||
(function(){
|
||
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
var reveal=document.querySelectorAll('.reveal');
|
||
if(reduce){reveal.forEach(function(el){el.classList.add('in')});}
|
||
else if('IntersectionObserver' in window){
|
||
var io=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){entry.target.classList.add('in');io.unobserve(entry.target)}})},{threshold:.12});
|
||
reveal.forEach(function(el){io.observe(el)});
|
||
}else reveal.forEach(function(el){el.classList.add('in')});
|
||
var links=document.querySelectorAll('.nav-links a');
|
||
var sections=['about','skills','projects','scoreboard','devlog'].map(function(id){return document.getElementById(id)});
|
||
if('IntersectionObserver' in window){
|
||
var navio=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting)links.forEach(function(a){a.classList.toggle('active',a.getAttribute('href')==='#'+entry.target.id)})})},{rootMargin:'-42% 0px -50% 0px'});
|
||
sections.forEach(function(section){if(section)navio.observe(section)});
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|