mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
working
This commit is contained in:
@@ -0,0 +1,589 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MILES — Wolf Allen | Developer & 3D Artist</title>
|
||||
<meta name="description" content="Portfolio of Miles Wolf Allen — developer, 3D artist, and builder of emulators, games, and tools.">
|
||||
<meta name="keywords" content="Miles Wolf Allen, developer, portfolio, emulator, Geometry Dash, FEDL, OmniEmu, Swift, TypeScript">
|
||||
<meta name="author" content="Miles Wolf Allen">
|
||||
<link rel="canonical" href="https://milesallen.site/">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="MILES WOLF ALLEN — Developer & 3D Artist">
|
||||
<meta property="og:description" content="Portfolio of Miles Wolf Allen — developer, 3D artist, and builder of emulators, games, and tools.">
|
||||
<meta property="og:url" content="https://milesallen.site/">
|
||||
<meta property="og:site_name" content="Miles Wolf Allen">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="MILES WOLF ALLEN — Developer & 3D Artist">
|
||||
<meta name="twitter:description" content="Portfolio of Miles Wolf Allen — developer, 3D artist, and builder of emulators, games, and tools.">
|
||||
<meta name="theme-color" content="#ffc700">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<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=Bebas+Neue&family=Josefin+Sans:wght@300;400&family=Spectral:ital,wght@0,400;0,600;1,400&family=Anton&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ================= SICK AGENCY STYLE SYSTEM ================= */
|
||||
:root{
|
||||
--yellow:#ffc700;
|
||||
--orange:#ff4e27;
|
||||
--cobalt:#0029ff;
|
||||
--sienna:#4d170c;
|
||||
--black:#000000;
|
||||
--white:#ffffff;
|
||||
--morganite:'Anton','Bebas Neue',Impact,sans-serif;
|
||||
--thunder:'Josefin Sans',ui-sans-serif,sans-serif;
|
||||
--sentient:'Spectral',Georgia,serif;
|
||||
--serif:Georgia,'Times New Roman',times,serif;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;overflow-x:hidden;}
|
||||
body{background:var(--yellow);color:var(--black);font-family:var(--sentient);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
img{display:block;max-width:100%;}
|
||||
|
||||
/* Full-bleed color bands stacked with zero gap. No shadows, no gradients,
|
||||
no rounded corners except pills. Type is the visual. */
|
||||
.band{width:100%;}
|
||||
.yellow{background:var(--yellow);color:var(--black);}
|
||||
.orange{background:var(--orange);color:var(--white);}
|
||||
.cobalt{background:var(--cobalt);color:var(--white);}
|
||||
|
||||
/* Sticker badges: circular, contrasting color, pill radius, CTA punctuation */
|
||||
.sticker{
|
||||
position:absolute;z-index:5;display:grid;place-items:center;align-content:center;
|
||||
width:140px;height:140px;border-radius:50%;
|
||||
font-family:var(--serif);font-size:11px;line-height:1.2;text-align:center;
|
||||
letter-spacing:.05em;text-transform:uppercase;
|
||||
transform:rotate(6deg);
|
||||
}
|
||||
.sticker b{font-size:20px;font-family:var(--morganite);font-weight:400;letter-spacing:0;display:block;line-height:1;}
|
||||
.sticker small{display:block;margin-top:4px;font-size:9px;}
|
||||
|
||||
/* ================= NAV ================= */
|
||||
.nav{
|
||||
position:sticky;top:0;z-index:50;background:var(--yellow);color:var(--black);
|
||||
display:flex;align-items:center;justify-content:space-between;gap:16px;
|
||||
padding:14px 5vw;border-bottom:3px solid var(--black);
|
||||
}
|
||||
.nav-brand{
|
||||
font-family:var(--morganite);font-weight:400;font-size:34px;line-height:1;
|
||||
letter-spacing:.02em;display:flex;align-items:center;gap:10px;
|
||||
}
|
||||
.nav-brand .swatch{width:18px;height:18px;border-radius:50%;background:var(--cobalt);display:inline-block;}
|
||||
.nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
|
||||
.nav-links a{
|
||||
font-family:var(--sentient);font-size:13px;letter-spacing:-.01em;
|
||||
padding:7px 16px;border-radius:999px;border:2px solid var(--black);
|
||||
transition:background .2s,color .2s;
|
||||
}
|
||||
.nav-links a:hover{background:var(--black);color:var(--yellow);}
|
||||
.nav-links a.cta{background:var(--cobalt);border-color:var(--cobalt);color:var(--white);}
|
||||
.nav-links a.cta:hover{background:var(--black);border-color:var(--black);color:var(--yellow);}
|
||||
@media(max-width:640px){
|
||||
.nav{flex-wrap:wrap;}
|
||||
.nav-links{width:100%;justify-content:flex-start;order:3;}
|
||||
}
|
||||
|
||||
/* ================= HERO ================= */
|
||||
.hero{position:relative;overflow:hidden;padding:70px 5vw 90px;}
|
||||
.hero .sticker{right:6vw;top:30px;}
|
||||
.hero-title{
|
||||
font-family:var(--morganite);font-weight:400;
|
||||
font-size:clamp(96px,22vw,229px);line-height:.7;
|
||||
letter-spacing:.01em;text-transform:uppercase;
|
||||
margin-top:24px;
|
||||
}
|
||||
.hero-title .kick{
|
||||
display:block;font-family:var(--thunder);font-weight:300;
|
||||
font-size:clamp(28px,4.5vw,46px);line-height:1;letter-spacing:.02em;
|
||||
margin-bottom:20px;text-transform:none;
|
||||
}
|
||||
.hero-title .loud{display:block;}
|
||||
.hero-sub{
|
||||
margin-top:70px;max-width:480px;
|
||||
font-size:16px;line-height:1.44;letter-spacing:-.015em;
|
||||
}
|
||||
.hero-sub em{font-weight:600;}
|
||||
.hero-status{
|
||||
display:inline-flex;align-items:center;gap:10px;margin-top:24px;
|
||||
font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
|
||||
border:1px solid var(--black);border-radius:999px;padding:6px 16px;
|
||||
}
|
||||
.hero-status i{width:9px;height:9px;border-radius:50%;background:var(--cobalt);display:inline-block;animation:pulse 1.6s ease-in-out infinite;}
|
||||
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
|
||||
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
|
||||
|
||||
.btn{
|
||||
display:inline-block;font-family:var(--sentient);font-size:16px;
|
||||
padding:9px 26px;border-radius:999px;border:2px solid var(--cobalt);
|
||||
color:var(--cobalt);transition:background .2s,color .2s;
|
||||
}
|
||||
.btn:hover{background:var(--cobalt);color:var(--white);}
|
||||
.btn.primary{background:var(--cobalt);border-color:var(--cobalt);color:var(--white);}
|
||||
.btn.primary:hover{background:var(--black);border-color:var(--black);}
|
||||
.btn.on-orange{border-color:var(--black);color:var(--black);}
|
||||
.btn.primary.on-orange{background:var(--black);border-color:var(--black);color:var(--yellow);}
|
||||
|
||||
.hook{
|
||||
text-align:center;padding:9vw 6vw;position:relative;
|
||||
}
|
||||
.hook-text{
|
||||
font-family:var(--thunder);font-weight:300;
|
||||
font-size:clamp(30px,5vw,56px);line-height:1.1;max-width:1100px;margin:0 auto;
|
||||
}
|
||||
.hook-text em{font-family:var(--serif);font-weight:400;}
|
||||
|
||||
/* ================= MARQUEE ================= */
|
||||
.marquee{overflow:hidden;white-space:nowrap;border-top:3px solid var(--black);border-bottom:3px solid var(--black);padding:16px 0;}
|
||||
.marquee .track{display:inline-flex;animation:scrollLeft 22s linear infinite;}
|
||||
.marquee span{
|
||||
font-family:var(--morganite);font-weight:400;font-size:32px;letter-spacing:.02em;
|
||||
margin:0 30px;text-transform:uppercase;flex-shrink:0;
|
||||
}
|
||||
@keyframes scrollLeft{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
|
||||
|
||||
/* ================= STAT STRIP ================= */
|
||||
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.35);}
|
||||
.stat{border-right:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35);padding:60px 5vw;text-align:center;}
|
||||
.stat:last-child{border-right:none;}
|
||||
.stat-num{font-family:var(--morganite);font-weight:400;font-size:clamp(64px,10vw,110px);line-height:.7;color:var(--white);}
|
||||
.stat-label{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--white);margin-top:16px;}
|
||||
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;}.stat:nth-child(2){border-right:none;}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.35);}}
|
||||
|
||||
/* ================= SECTION FRAME ================= */
|
||||
.section{position:relative;padding:110px 5vw 120px;}
|
||||
.section.orange,.section.cobalt{position:relative;}
|
||||
.sec-label{
|
||||
font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.16em;
|
||||
border:1px solid currentColor;border-radius:999px;display:inline-block;padding:5px 16px;margin-bottom:40px;
|
||||
}
|
||||
.sec-title{
|
||||
font-family:var(--morganite);font-weight:400;
|
||||
font-size:clamp(100px,18vw,229px);line-height:.66;letter-spacing:.01em;text-transform:uppercase;
|
||||
max-width:92vw;margin-bottom:48px;
|
||||
}
|
||||
.sec-sub{font-size:12px;font-family:var(--serif);text-transform:uppercase;letter-spacing:.14em;max-width:520px;line-height:1.6;margin-bottom:70px;}
|
||||
|
||||
/* ================= ABOUT ================= */
|
||||
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:start;}
|
||||
.avatar-frame{border:3px solid var(--black);outline:3px solid var(--white);transform:rotate(-3deg);width:240px;}
|
||||
.avatar-frame img{width:240px;filter:contrast(1.1);}
|
||||
.avatar-name{font-family:var(--morganite);font-weight:400;font-size:30px;text-transform:uppercase;margin-top:16px;}
|
||||
.avatar-tag{font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,.55);margin-top:2px;}
|
||||
.about-body p{font-size:17px;line-height:1.5;letter-spacing:-.015em;max-width:560px;margin-bottom:20px;}
|
||||
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
|
||||
.badge{padding:5px 18px;border-radius:999px;border:2px solid var(--black);font-family:var(--serif);font-size:13px;letter-spacing:-.01em;background:var(--cobalt);color:var(--white);transform:rotate(-2deg);}
|
||||
.badge:nth-child(2){background:var(--orange);color:var(--white);transform:rotate(1deg);}
|
||||
.badge:nth-child(3){background:var(--white);color:var(--black);transform:rotate(-1deg);}
|
||||
.about-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center;}
|
||||
.hairline{height:2px;background:var(--black);margin:60px 0 40px;width:100%;}
|
||||
.page-links{display:flex;gap:24px;flex-wrap:wrap;}
|
||||
.page-links a{font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--black);}
|
||||
.page-links a:hover{color:var(--cobalt);border-color:var(--cobalt);}
|
||||
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:40px;}.avatar-frame,.avatar-frame img{width:200px;}}
|
||||
|
||||
/* ================= SKILLS ================= */
|
||||
.or-white{color:var(--white);}
|
||||
.sec-label.flat{border-color:var(--white);}
|
||||
.skill-group-label{font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:24px;color:var(--white);}
|
||||
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:60px;}
|
||||
.skill{
|
||||
border:2px solid var(--white);border-right:none;border-bottom:none;
|
||||
padding:26px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:130px;
|
||||
}
|
||||
.skill:nth-child(4n){border-right:2px solid var(--white);}
|
||||
.skill .si{width:30px;height:30px;filter:invert(1);}
|
||||
.skill span{font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:.05em;}
|
||||
.skill.alt1{background:var(--black);color:var(--yellow);}
|
||||
.skill.alt2{background:var(--yellow);color:var(--black);}
|
||||
.skill.alt3{background:var(--white);color:var(--black);}
|
||||
.skill.alt1 .si{filter:none;}
|
||||
.skill.alt3 .si{filter:invert(0);}
|
||||
.skill.alt2 .si{filter:invert(0);}
|
||||
.skill.learn{border-style:dashed;opacity:.75;}
|
||||
|
||||
/* ================= PROJECTS ================= */
|
||||
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
|
||||
.proj-card{
|
||||
border:3px solid var(--black);display:block;padding:34px;
|
||||
transform:rotate(-1deg);transition:transform .25s,background .25s;
|
||||
}
|
||||
.proj-card:nth-child(odd){transform:rotate(1deg);}
|
||||
.proj-card:hover{transform:rotate(-1deg) scale(1.01);}
|
||||
.proj-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;}
|
||||
.proj-tag{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.1em;background:var(--yellow);color:var(--black);border-radius:999px;padding:4px 14px;border:2px solid var(--black);}
|
||||
.proj-tag.on-orange{background:var(--orange);color:var(--white);}
|
||||
.proj-meta{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:rgba(0,0,0,.5);}
|
||||
.proj-title{font-family:var(--morganite);font-weight:400;font-size:clamp(36px,4vw,56px);line-height:.8;text-transform:uppercase;margin-bottom:16px;}
|
||||
.proj-desc{font-size:15px;line-height:1.5;letter-spacing:-.01em;max-width:44ch;color:rgba(0,0,0,.78);}
|
||||
@media(max-width:800px){.project-grid{grid-template-columns:1fr;}}
|
||||
|
||||
/* ================= HIGHLIGHTS ================= */
|
||||
.hl-block{margin-bottom:80px;}
|
||||
.hl-block h3{font-family:var(--morganite);font-weight:400;font-size:clamp(40px,6vw,64px);text-transform:uppercase;margin-bottom:28px;color:var(--yellow);}
|
||||
.hl-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--yellow);}
|
||||
.hl-cell{border-right:2px solid var(--yellow);border-bottom:2px solid var(--yellow);padding:40px 30px;}
|
||||
.hl-cell:last-child{border-right:none;}
|
||||
.hl-num{font-family:var(--morganite);font-weight:400;font-size:clamp(52px,7vw,84px);line-height:.7;color:var(--white);}
|
||||
.hl-label{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--white);margin-top:16px;}
|
||||
@media(max-width:760px){.hl-row{grid-template-columns:1fr 1fr;}.hl-cell:nth-child(2){border-right:none;}}
|
||||
|
||||
/* ================= GITHUB STATS ================= */
|
||||
.gh-stats{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
|
||||
.gh-stats img{border:2px solid var(--black);height:165px;width:auto;}
|
||||
|
||||
/* ================= BLOG ================= */
|
||||
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
|
||||
.blog-card{border:3px solid var(--white);display:block;padding:30px;transform:rotate(-1deg);transition:transform .25s,border-color .25s;}
|
||||
.blog-card:nth-child(even){transform:rotate(1deg);}
|
||||
.blog-card:hover{transform:rotate(0);border-color:var(--yellow);}
|
||||
.blog-date{font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--yellow);margin-bottom:16px;}
|
||||
.blog-title{font-family:var(--morganite);font-weight:400;font-size:clamp(30px,3vw,40px);text-transform:uppercase;line-height:.85;margin-bottom:14px;}
|
||||
.blog-excerpt{font-size:15px;line-height:1.5;letter-spacing:-.01em;color:rgba(255,255,255,.78);margin-bottom:18px;max-width:46ch;}
|
||||
.blog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
|
||||
.blog-tag{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--yellow);color:var(--yellow);border-radius:999px;padding:4px 14px;}
|
||||
|
||||
/* ================= CONTACT ================= */
|
||||
.contact-card{border:3px solid var(--yellow);padding:44px;transform:rotate(-1deg);max-width:640px;position:relative;}
|
||||
.contact-card .sticker{right:-30px;top:-40px;background:var(--yellow);color:var(--cobalt);transform:rotate(10deg);}
|
||||
.contact-list{display:flex;flex-direction:column;}
|
||||
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 6px;border-bottom:2px solid var(--yellow);font-size:16px;transition:padding-left .2s;flex-wrap:wrap;}
|
||||
.contact-row:last-child{border-bottom:none;}
|
||||
.contact-row span.k{font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7;}
|
||||
.contact-row:hover{padding-left:18px;color:var(--yellow);}
|
||||
|
||||
/* ================= FOOTER ================= */
|
||||
footer{background:var(--black);color:var(--white);padding:70px 5vw 80px;text-align:center;}
|
||||
.foot-brand{font-family:var(--morganite);font-weight:400;font-size:clamp(48px,10vw,110px);line-height:.7;color:var(--yellow);text-transform:uppercase;margin-bottom:30px;}
|
||||
.foot-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;}
|
||||
.foot-links a{font-family:var(--serif);font-size:12px;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;border:1px solid var(--white);padding:7px 18px;}
|
||||
.foot-links a:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow);}
|
||||
.foot-note{color:rgba(255,255,255,.55);font-size:13px;line-height:1.7;}
|
||||
.foot-note a{color:var(--yellow);border-bottom:1px solid var(--yellow);}
|
||||
|
||||
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#top"><span class="swatch"></span>MILES</a>
|
||||
<div class="nav-links">
|
||||
<a href="#about">About</a>
|
||||
<a href="#skills">Skills</a>
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#blog">Devlog</a>
|
||||
<a class="cta" href="#contact">Say hi</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main id="top">
|
||||
|
||||
<!-- ============ HERO — YELLOW ============ -->
|
||||
<section class="band yellow hero" id="top">
|
||||
<span class="sticker" style="background:var(--cobalt);color:var(--white);"><b>USUALLY</b>ONLINE <small>@mileswolfallen2</small></span>
|
||||
<div class="hero-title">
|
||||
<span class="kick">Hi, I'm —</span>
|
||||
<span class="loud">MILES<br>WOLF<br>ALLEN</span>
|
||||
</div>
|
||||
<p class="hero-sub">I make games, tools, and websites. I'm still in school and building a full Electron replacement — <em>send help</em>. I also work at Diskette Labs.</p>
|
||||
<div class="hero-status"><i></i> usually online</div>
|
||||
<div class="hero-actions">
|
||||
<a class="btn primary" href="https://github.com/mileswolfallen2" target="_blank">GitHub</a>
|
||||
<a class="btn" href="https://replit.com/@MilesAllen1" target="_blank">Replit</a>
|
||||
<a class="btn" href="https://codepen.io/mileswolfallen2-the-typescripter" target="_blank">CodePen</a>
|
||||
<a class="btn" href="https://diskettelabs.com/" target="_blank">Diskette Labs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ HOOK — ORANGE ============ -->
|
||||
<section class="band orange hook">
|
||||
<p class="hook-text">I believe pancakes are better than waffles, cereal is soup, and software should <em>feel good to use.</em></p>
|
||||
</section>
|
||||
|
||||
<!-- ============ MARQUEE — YELLOW ============ -->
|
||||
<div class="band yellow marquee">
|
||||
<div class="track">
|
||||
<span>* building emulators *</span><span>* send help *</span><span>* 160 repos and counting *</span><span>* still debugging *</span><span>* geometry dash addict *</span><span>* usually online *</span><span>* ↑ ↑ ↓ ↓ ← → ← → B A *</span>
|
||||
<span>* building emulators *</span><span>* send help *</span><span>* 160 repos and counting *</span><span>* still debugging *</span><span>* geometry dash addict *</span><span>* usually online *</span><span>* ↑ ↑ ↓ ↓ ← → ← → B A *</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ STATS — ORANGE ============ -->
|
||||
<section class="band orange stats">
|
||||
<div class="stat"><div class="stat-num">160</div><div class="stat-label">Repos online</div></div>
|
||||
<div class="stat"><div class="stat-num">91</div><div class="stat-label">Stars earned</div></div>
|
||||
<div class="stat"><div class="stat-num">13</div><div class="stat-label">Watching me</div></div>
|
||||
<div class="stat"><div class="stat-num">37</div><div class="stat-label">I watch</div></div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ABOUT — YELLOW ============ -->
|
||||
<section class="band yellow section" id="about">
|
||||
<span class="sec-label">Level 01 // Identity</span>
|
||||
<h2 class="sec-title">Who's Miles?</h2>
|
||||
<p class="sec-sub">the human behind the commits</p>
|
||||
<div class="about-grid">
|
||||
<div class="avatar-block" style="text-align:center;">
|
||||
<div class="avatar-frame"><img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles Wolf Allen" loading="lazy" width="240" height="240"></div>
|
||||
<div class="avatar-name">Miles Wolf Allen</div>
|
||||
<div class="avatar-tag">@mileswolfallen2</div>
|
||||
</div>
|
||||
<div class="about-body">
|
||||
<p>I build things on the internet. Some of them are games, some are tools, and some are just because I thought it would be fun. 160 repos, 91 stars, and a growing list of things I'm figuring out as I go.</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge">Pull Shark x2</span>
|
||||
<span class="badge">YOLO</span>
|
||||
<span class="badge">Quickdraw</span>
|
||||
</div>
|
||||
<div class="about-cta">
|
||||
<a class="btn primary" href="https://diskettelabs.com/" target="_blank">Member of Diskette Labs</a>
|
||||
<a class="btn" href="about-me.html">More About Me</a>
|
||||
</div>
|
||||
<div class="hairline"></div>
|
||||
<div class="page-links">
|
||||
<a href="uses.html">Uses</a>
|
||||
<a href="now.html">Now</a>
|
||||
<a href="colophon.html">Colophon</a>
|
||||
<a href="experiments.html" style="color:var(--cobalt);border-color:var(--cobalt);">Internet History</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SKILLS — COBALT ============ -->
|
||||
<section class="band cobalt section" id="skills">
|
||||
<span class="sec-label flat">Level 02 // Loadout</span>
|
||||
<h2 class="sec-title or-white">My Loadout</h2>
|
||||
<p class="sec-sub or-white">what I actually know how to use</p>
|
||||
|
||||
<div class="skill-group-label">Ready to use</div>
|
||||
<div class="skill-grid">
|
||||
<div class="skill"><svg class="si" viewBox="0 0 24 24" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm13 0h2v3h3v2h-3v3h-2v-3h-3v-2h3z"/></svg><span>JavaScript</span></div>
|
||||
<div class="skill alt1"><span>Node.js</span><span style="font-size:11px;">Backend JS</span></div>
|
||||
<div class="skill alt2"><span>HTML5</span></div>
|
||||
<div class="skill alt3"><span>CSS3</span></div>
|
||||
<div class="skill"><svg class="si" viewBox="0 0 24 24" fill="#fff"><path d="M11.5 18h1v-5.5H17v-1h-4.5V6h-1v5.5H7v1h4.5z"/><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18.5A8.5 8.5 0 1 1 12 3.5a8.5 8.5 0 0 1 0 17z"/></svg><span>Python</span></div>
|
||||
<div class="skill alt1"><span>Git</span></div>
|
||||
<div class="skill alt2"><span>Blender</span></div>
|
||||
<div class="skill alt3"><span>Unity</span></div>
|
||||
<div class="skill"><span>Unreal</span></div>
|
||||
<div class="skill alt1"><span>Cloudflare</span></div>
|
||||
<div class="skill alt2"><span>Linux</span></div>
|
||||
<div class="skill alt3"><span>Netlify</span></div>
|
||||
<div class="skill"><span>Bash</span></div>
|
||||
<div class="skill alt1"><span>GitHub</span></div>
|
||||
<div class="skill alt2"><span>Electron</span></div>
|
||||
<div class="skill alt3"><span>Gelectron</span></div>
|
||||
</div>
|
||||
|
||||
<div class="skill-group-label">Currently unlocking</div>
|
||||
<div class="skill-grid">
|
||||
<div class="skill learn"><span>PHP</span></div>
|
||||
<div class="skill learn alt1"><span>.NET</span></div>
|
||||
<div class="skill learn alt2"><span>Nix</span></div>
|
||||
<div class="skill learn alt3"><span>Yarn</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PROJECTS — YELLOW ============ -->
|
||||
<section class="band yellow section" id="projects">
|
||||
<span class="sec-label">Level 03 // Builds</span>
|
||||
<h2 class="sec-title">The Projects</h2>
|
||||
<p class="sec-sub">stuff I've made (and some I forked)</p>
|
||||
|
||||
<div class="project-grid">
|
||||
<a class="proj-card" href="projects/omniemu.html">
|
||||
<div class="proj-top"><span class="proj-tag">Active</span><span class="proj-meta">TypeScript / v0.3.2</span></div>
|
||||
<div class="proj-title">OmniEmu 2.0</div>
|
||||
<div class="proj-desc">All your emulators in one place. Install 20+ emulators, scan your ROMs, and launch games without opening 15 different apps.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/gelectron.html">
|
||||
<div class="proj-top"><span class="proj-tag">Early</span><span class="proj-meta">Rust + Node.js</span></div>
|
||||
<div class="proj-title">Gelectron</div>
|
||||
<div class="proj-desc">Drop-in replacement for Electron using native web views (WKWebView / WebView2 / WebKitGTK) instead of bundling Chromium.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="https://vanilla.milesallen.site/" target="_blank">
|
||||
<div class="proj-top"><span class="proj-tag">Unreleased</span><span class="proj-meta">Vanilla JS</span></div>
|
||||
<div class="proj-title">Vanilla</div>
|
||||
<div class="proj-desc">A clean, minimal web experiment. Pure vanilla JS, no frameworks, no cruft.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/fedl.html">
|
||||
<div class="proj-top"><span class="proj-tag on-orange">Live</span><span class="proj-meta">2196 commits</span></div>
|
||||
<div class="proj-title">FEDL</div>
|
||||
<div class="proj-desc">The demon list for Geometry Dash. Ranked levels, run submissions, and a community of people way better at the game than me.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/command-move.html">
|
||||
<div class="proj-top"><span class="proj-tag">Swift</span><span class="proj-meta">macOS / MIT</span></div>
|
||||
<div class="proj-title">CommandMove</div>
|
||||
<div class="proj-desc">True cut-and-paste for Finder on macOS. Select files, Cmd+X, navigate, Cmd+V. What Apple forgot to build.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/noto.html">
|
||||
<div class="proj-top"><span class="proj-tag">Active</span><span class="proj-meta">Flutter / AI</span></div>
|
||||
<div class="proj-title">Noto</div>
|
||||
<div class="proj-desc">Note-taking app with AI built in. Built with Flutter, powered by Cortex AI, and actually good at organizing my chaos.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/nova.html">
|
||||
<div class="proj-top"><span class="proj-tag">Python</span><span class="proj-meta">Desktop / Web / CLI</span></div>
|
||||
<div class="proj-title">Nova AI</div>
|
||||
<div class="proj-desc">AI assistant that runs on your machine. Desktop GUI, web interface, and CLI. No cloud, no subscriptions, just vibes.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/music-app.html">
|
||||
<div class="proj-top"><span class="proj-tag">JS</span><span class="proj-meta">Apache-2.0</span></div>
|
||||
<div class="proj-title">Music App</div>
|
||||
<div class="proj-desc">Music player that doesn't interrupt you with ads. Inspired by YouTube Music but without the annoying parts.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/rhythm-game.html">
|
||||
<div class="proj-top"><span class="proj-tag">HTML</span><span class="proj-meta">MPL-2.0</span></div>
|
||||
<div class="proj-title">Rhythm Game</div>
|
||||
<div class="proj-desc">Hit keys to the beat. Song selection, real-time notes, and keyboard controls. My fingers hurt.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/geode-mod.html">
|
||||
<div class="proj-top"><span class="proj-tag">WIP</span><span class="proj-meta">MIT</span></div>
|
||||
<div class="proj-title">FEDL Geode Mod</div>
|
||||
<div class="proj-desc">Geometry Dash mod that shows the demon list in-game. Roulette mode, banned mod detection, and more.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/decompilations.html">
|
||||
<div class="proj-top"><span class="proj-tag">HTML</span><span class="proj-meta">MIT</span></div>
|
||||
<div class="proj-title">Decompilations</div>
|
||||
<div class="proj-desc">Native PC ports and decompilations of games. Progress tracking for projects that probably shouldn't exist.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/issue-tracker.html">
|
||||
<div class="proj-top"><span class="proj-tag">HTML</span><span class="proj-meta">Node.js</span></div>
|
||||
<div class="proj-title">Issue Tracker</div>
|
||||
<div class="proj-desc">Built my own issue tracker because why not. Node.js backend, no frameworks, just raw determination.</div>
|
||||
</a>
|
||||
<a class="proj-card" href="projects/moon-gaming.html">
|
||||
<div class="proj-top"><span class="proj-tag">HTML</span><span class="proj-meta">1,542 commits</span></div>
|
||||
<div class="proj-title">Moon Gaming</div>
|
||||
<div class="proj-desc">Game hub with 1,500+ commits. Browse, play, and explore a growing library of browser games I made at 2am.</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ HIGHLIGHTS — COBALT ============ -->
|
||||
<section class="band cobalt section" id="highlights">
|
||||
<span class="sec-label flat">Level 04 // Scoreboard</span>
|
||||
<h2 class="sec-title or-white">Scoreboard</h2>
|
||||
<p class="sec-sub or-white">what my projects have achieved</p>
|
||||
|
||||
<div class="hl-block">
|
||||
<h3>FEDL</h3>
|
||||
<div class="hl-row">
|
||||
<div class="hl-cell"><div class="hl-num">3,839</div><div class="hl-label">Verified runs</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">341</div><div class="hl-label">Ranked levels</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">250+</div><div class="hl-label">Active players</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">3,800+</div><div class="hl-label">YouTube videos</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hl-block">
|
||||
<h3>OmniEmu 2.0</h3>
|
||||
<div class="hl-row">
|
||||
<div class="hl-cell"><div class="hl-num">20+</div><div class="hl-label">Emulators</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">3</div><div class="hl-label">Platforms</div></div>
|
||||
<div class="hl-cell"><div class="hl-num" style="font-size:clamp(34px,5vw,58px);">v0.3.2</div><div class="hl-label">Latest</div></div>
|
||||
<div class="hl-cell"><div class="hl-num" style="font-size:clamp(34px,5vw,58px);">TS</div><div class="hl-label">Built with</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hl-block">
|
||||
<h3>Other projects</h3>
|
||||
<div class="hl-row">
|
||||
<div class="hl-cell"><div class="hl-num">3</div><div class="hl-label">Nova interfaces</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">5</div><div class="hl-label">Noto AI features</div></div>
|
||||
<div class="hl-cell"><div class="hl-num">1,542</div><div class="hl-label">Moon Gaming commits</div></div>
|
||||
<div class="hl-cell"><div class="hl-num" style="font-size:clamp(34px,5vw,58px);">MIT</div><div class="hl-label">Licensed</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ GITHUB STATS — YELLOW ============ -->
|
||||
<section class="band yellow section" id="stats">
|
||||
<span class="sec-label">Level 05 // GitHub</span>
|
||||
<h2 class="sec-title">Stats</h2>
|
||||
<p class="sec-sub">the raw numbers, straight from the API</p>
|
||||
<div class="gh-stats">
|
||||
<img src="https://github-readme-stats.josselinonduty.fr/api?username=mileswolfallen2&show_icons=true&theme=noctis_minimus" alt="GitHub stats" loading="lazy">
|
||||
<img src="https://github-readme-stats.josselinonduty.fr/api/top-langs/?username=mileswolfallen2&layout=compact&theme=noctis_minimus" alt="GitHub languages" loading="lazy">
|
||||
<img src="https://streak-stats.demolab.com/?user=mileswolfallen2&theme=noctis_minimus" alt="GitHub streak" loading="lazy">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ BLOG — COBALT ============ -->
|
||||
<section class="band cobalt section" id="blog">
|
||||
<span class="sec-label flat">Level 06 // Devlog</span>
|
||||
<h2 class="sec-title or-white">Devlog</h2>
|
||||
<p class="sec-sub or-white">things I've learned, broken, and fixed</p>
|
||||
<div class="blog-grid">
|
||||
<a class="blog-card" href="blog/diskette-devlog.html">
|
||||
<div class="blog-date">2026</div>
|
||||
<div class="blog-title">Focusing on Diskette Labs</div>
|
||||
<div class="blog-excerpt">I'm co-founder of Diskette Labs, a product design collective started by Owen. It's where my focus is now — but I'm still open to collaborations.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">Design</span><span class="blog-tag">Collective</span></div>
|
||||
</a>
|
||||
<a class="blog-card" href="blog/gelectron-devlog.html">
|
||||
<div class="blog-date">2026</div>
|
||||
<div class="blog-title">Why I Built Gelectron</div>
|
||||
<div class="blog-excerpt">Electron bundles Chromium with every app. 150-300MB per app, hundreds of MBs of RAM. Native web views fix that.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">Rust</span><span class="blog-tag">Native</span></div>
|
||||
</a>
|
||||
<a class="blog-card" href="blog/omniemu-devlog.html">
|
||||
<div class="blog-date">2026</div>
|
||||
<div class="blog-title">Why I Built OmniEmu</div>
|
||||
<div class="blog-excerpt">I got tired of opening 15 different emulator apps. So I built one that manages them all. Here's how it started.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">TypeScript</span><span class="blog-tag">Electron</span></div>
|
||||
</a>
|
||||
<a class="blog-card" href="blog/command-move-devlog.html">
|
||||
<div class="blog-date">2026</div>
|
||||
<div class="blog-title">CommandMove: Cut & Paste on Mac</div>
|
||||
<div class="blog-excerpt">macOS doesn't have Cmd+X for files. I fixed that. Global event taps, AppleScript, and a lot of Accessibility permissions.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">Swift</span><span class="blog-tag">macOS</span></div>
|
||||
</a>
|
||||
<a class="blog-card" href="blog/fedl-devlog.html">
|
||||
<div class="blog-date">2025</div>
|
||||
<div class="blog-title">Running the FEDL</div>
|
||||
<div class="blog-excerpt">What it takes to maintain a Geometry Dash demon list. 3,800+ verified runs, ranked levels, and a community that never sleeps.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">Node.js</span><span class="blog-tag">Community</span></div>
|
||||
</a>
|
||||
<a class="blog-card" href="blog/nova-devlog.html">
|
||||
<div class="blog-date">2025</div>
|
||||
<div class="blog-title">Building Nova AI</div>
|
||||
<div class="blog-excerpt">Local AI that doesn't phone home. Desktop GUI, web interface, CLI — no subscriptions, no cloud, no nonsense.</div>
|
||||
<div class="blog-tags"><span class="blog-tag">Python</span><span class="blog-tag">AI</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CONTACT — ORANGE ============ -->
|
||||
<section class="band orange section" id="contact">
|
||||
<span class="sec-label flat">Level 07 // Reach out</span>
|
||||
<h2 class="sec-title or-white">Get In Touch</h2>
|
||||
<p class="sec-sub or-white">unless you're a bot, then please go away</p>
|
||||
<div class="contact-card">
|
||||
<span class="sticker" style="background:var(--yellow);color:var(--cobalt);"><b>TEXT<br>US</b><small>or email</small></span>
|
||||
<div class="contact-list">
|
||||
<a class="contact-row" href="mailto:[email protected]"><span class="k">email</span><span>[email protected]</span></a>
|
||||
<a class="contact-row" href="https://github.com/mileswolfallen2" target="_blank"><span class="k">github</span><span>mileswolfallen2</span></a>
|
||||
<a class="contact-row" href="https://replit.com/@MilesAllen1" target="_blank"><span class="k">replit</span><span>@MilesAllen1</span></a>
|
||||
<a class="contact-row" href="https://codepen.io/mileswolfallen2-the-typescripter" target="_blank"><span class="k">codepen</span><span>mileswolfallen2</span></a>
|
||||
<a class="contact-row" href="https://me.fedl.site" target="_blank"><span class="k">website</span><span>me.fedl.site</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FOOTER — BLACK ============ -->
|
||||
<footer>
|
||||
<div class="foot-brand">MILES</div>
|
||||
<div class="foot-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="https://server.fedl.site/git/miles" target="_blank" rel="noopener">Backup</a>
|
||||
<a href="redesign/hub.html">View Redesigns</a>
|
||||
</div>
|
||||
<p class="foot-note">Built by Miles · 2026 · Powered by too much coffee and the Konami code<br>Designed in the style of a loud printed broadside.</p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+28
-3
@@ -266,7 +266,7 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
<nav class="nav">
|
||||
<a class="nav-back" href="../index.html">← Back to site</a>
|
||||
<span class="nav-title">Redesign Lab</span>
|
||||
<span class="nav-count">19 designs</span>
|
||||
<span class="nav-count">20 designs</span>
|
||||
</nav>
|
||||
|
||||
<!-- hero -->
|
||||
@@ -278,8 +278,8 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
</h1>
|
||||
<p class="hero-sub">
|
||||
Experimental redesigns of milesallen.site — exploring different design languages,
|
||||
animation approaches, and visual directions. Nineteen experiments so far,
|
||||
newest first: a 1976 punk zine, a Daily Bugle newspaper, retro intros, web cartoons, whimsical, loud/quiet, space stations, handhelds, and terminals.
|
||||
animation approaches, and visual directions. Twenty experiments so far,
|
||||
newest first: a loud SICK AGENCY printed broadside, a 1976 punk zine, a Daily Bugle newspaper, retro intros, web cartoons, whimsical, loud/quiet, space stations, handhelds, and terminals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -288,6 +288,31 @@ html.js .card.featured:hover { transform: translate(-3px,-3px) !important; }
|
||||
<div class="grid-label">History — all experiments, newest first</div>
|
||||
<div class="cards" id="history">
|
||||
|
||||
<!-- attempt6 — SICK AGENCY -->
|
||||
<a class="card featured" href="../attempt6.html">
|
||||
<div class="card-preview">
|
||||
<iframe src="../attempt6.html" title="SICK AGENCY printed broadside redesign preview" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="card-num">19</div>
|
||||
<div class="card-name">SICK BROADSIDE</div>
|
||||
<p class="card-desc">
|
||||
The portfolio as a loud printed broadside on a brick wall — a maximalist zine spread in the SICK AGENCY system: three saturated full-bleed color bands (voltage yellow, radioactive orange, electric cobalt) stacked with zero gap and hard color cuts. Anton/Morganite condensed display at up to 229px with 0.70 line-height (type as a solid printed block), Thunder 300 subheads, Sentient body with negative tracking, circular sticker badges as CAT/CTA anchors (USUALLY ONLINE, TEXT US), pill-shaped buttons as the only softness, sharp 0px corners everywhere else, hairline black rules, and no shadows, gradients, or neutrals — only #000 and #fff.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-tags">
|
||||
<span class="ctag ctag-y">SICK AGENCY</span>
|
||||
<span class="ctag ctag-p">Cobalt action</span>
|
||||
<span class="ctag ctag-c">Voltage yellow</span>
|
||||
<span class="ctag ctag-g">Full-bleed bands</span>
|
||||
</div>
|
||||
<span class="card-arrow">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- punk-zine -->
|
||||
<a class="card featured" href="punk-zine.html">
|
||||
<div class="card-preview">
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Miles Wolf Allen — independent developer, 3D artist, emulator builder, and game maker.">
|
||||
<title>Miles Wolf Allen — Creative Technology</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ink: #161616;
|
||||
--paper: #f2ead8;
|
||||
--yellow: #ffc700;
|
||||
--orange: #ff4e27;
|
||||
--pink: #f3a7bc;
|
||||
--muted: #6d6a61;
|
||||
--line: 1px solid var(--ink);
|
||||
--display: "Space Grotesk", Arial, sans-serif;
|
||||
--mono: "DM Mono", monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { background: var(--paper); color: var(--ink); font-family: var(--display); overflow-x: hidden; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
a:hover { color: var(--orange); }
|
||||
.wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
|
||||
|
||||
header { border-bottom: var(--line); }
|
||||
nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.brand { font-size: 19px; font-weight: 700; letter-spacing: -.06em; text-transform: uppercase; }
|
||||
nav ul { display: flex; gap: 28px; list-style: none; padding: 0; font: 12px var(--mono); text-transform: uppercase; }
|
||||
.menu-mark { display: none; font: 12px var(--mono); text-transform: uppercase; }
|
||||
|
||||
.hero { min-height: 690px; display: grid; grid-template-columns: 1.35fr .65fr; border-bottom: var(--line); }
|
||||
.hero-copy { padding: 92px 7vw 76px 0; border-right: var(--line); }
|
||||
.kicker, .label { color: var(--orange); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.hero h1 { max-width: 900px; margin-top: 24px; font-size: clamp(70px, 12vw, 174px); line-height: .82; letter-spacing: -.095em; text-transform: uppercase; }
|
||||
.hero h1 em { color: var(--orange); font-style: normal; }
|
||||
.lead { max-width: 480px; margin-top: 38px; font-size: 19px; line-height: 1.35; }
|
||||
.cta { display: inline-flex; align-items: center; gap: 22px; margin-top: 42px; padding: 15px 18px; background: var(--yellow); border: var(--line); font: 12px var(--mono); text-transform: uppercase; transition: transform .2s, background .2s; }
|
||||
.cta:hover { color: var(--ink); background: var(--orange); transform: translate(5px, -5px); }
|
||||
|
||||
.hero-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; background: var(--yellow); overflow: hidden; }
|
||||
.hero-side .index { font: 11px var(--mono); }
|
||||
.sun { width: min(260px, 70%); aspect-ratio: 1; margin: auto; border: var(--line); border-radius: 50%; background: var(--orange); display: grid; place-items: center; font-size: clamp(45px, 8vw, 100px); line-height: 1; transform: rotate(12deg); box-shadow: 12px 12px 0 var(--ink); }
|
||||
.side-note { font: 12px/1.4 var(--mono); text-transform: uppercase; }
|
||||
|
||||
.ticker { overflow: hidden; border-bottom: var(--line); background: var(--ink); color: var(--paper); white-space: nowrap; }
|
||||
.ticker-track { display: inline-block; padding: 16px 0; animation: slide 22s linear infinite; font-size: 15px; text-transform: uppercase; }
|
||||
@keyframes slide { to { transform: translateX(-50%); } }
|
||||
|
||||
section { padding: 100px 0; border-bottom: var(--line); }
|
||||
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 62px; }
|
||||
.section-title { max-width: 760px; font-size: clamp(43px, 7vw, 92px); line-height: .88; letter-spacing: -.075em; text-transform: uppercase; }
|
||||
.section-title span { color: var(--orange); }
|
||||
|
||||
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); border-left: var(--line); }
|
||||
.service { min-height: 330px; padding: 22px; border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.service:nth-child(2) { background: var(--pink); }
|
||||
.service:nth-child(3) { background: var(--orange); }
|
||||
.number { font: 11px var(--mono); }
|
||||
.service h3 { font-size: clamp(30px, 4vw, 53px); line-height: .86; letter-spacing: -.07em; text-transform: uppercase; }
|
||||
.service p { max-width: 290px; font-size: 15px; line-height: 1.35; }
|
||||
|
||||
.work { background: var(--orange); }
|
||||
.work .label { color: var(--ink); }
|
||||
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--line); border-left: var(--line); }
|
||||
.project { min-height: 300px; padding: 23px; border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; justify-content: flex-end; background: var(--paper); transition: background .2s, color .2s; }
|
||||
.project:hover { background: var(--yellow); color: var(--ink); }
|
||||
.project:nth-child(2) { background: var(--ink); color: var(--paper); }
|
||||
.project:nth-child(3) { background: var(--pink); }
|
||||
.project:nth-child(4) { background: var(--yellow); }
|
||||
.project h3 { font-size: clamp(42px, 7vw, 90px); line-height: .8; letter-spacing: -.09em; text-transform: uppercase; }
|
||||
.project p { margin-top: 18px; font: 11px var(--mono); text-transform: uppercase; }
|
||||
|
||||
.quote { max-width: 980px; margin: 0 auto; text-align: center; }
|
||||
blockquote { font-size: clamp(32px, 5.8vw, 76px); line-height: .93; letter-spacing: -.07em; }
|
||||
cite { display: block; margin-top: 30px; color: var(--muted); font: 11px var(--mono); font-style: normal; text-transform: uppercase; }
|
||||
|
||||
.contact { padding: 110px 0 80px; background: var(--ink); color: var(--paper); text-align: center; }
|
||||
.contact h2 { max-width: 1050px; margin: 0 auto; font-size: clamp(55px, 11vw, 150px); line-height: .8; letter-spacing: -.1em; text-transform: uppercase; }
|
||||
.contact h2 span { color: var(--yellow); }
|
||||
.contact .cta { color: var(--ink); margin-top: 54px; }
|
||||
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; margin-top: 58px; font: 11px var(--mono); text-transform: uppercase; }
|
||||
footer { padding: 22px 0; background: var(--ink); color: var(--paper); border-top: 1px solid #555; font: 11px var(--mono); text-transform: uppercase; }
|
||||
footer .wrap { display: flex; justify-content: space-between; gap: 20px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.wrap { width: min(100% - 30px, 1320px); }
|
||||
nav ul { display: none; }
|
||||
.menu-mark { display: block; }
|
||||
.hero { display: block; min-height: 0; }
|
||||
.hero-copy { padding: 74px 0 64px; border-right: 0; }
|
||||
.hero h1 { font-size: clamp(62px, 18vw, 110px); }
|
||||
.hero-side { min-height: 330px; margin: 0 -15px; padding: 20px 15px; }
|
||||
.sun { width: 180px; box-shadow: 8px 8px 0 var(--ink); }
|
||||
section { padding: 72px 0; }
|
||||
.section-head { display: block; margin-bottom: 40px; }
|
||||
.section-title { margin-top: 25px; }
|
||||
.services, .work-grid { grid-template-columns: 1fr; }
|
||||
.service { min-height: 270px; }
|
||||
.project { min-height: 230px; }
|
||||
footer .wrap { display: block; line-height: 2; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<nav>
|
||||
<a class="brand" href="#top">Miles Wolf Allen</a>
|
||||
<span class="menu-mark">Scroll / Explore</span>
|
||||
<ul>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="about-me.html">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<div class="wrap">
|
||||
<section class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="kicker">Independent developer / creative technologist</p>
|
||||
<h1>Build things that <em>refuse</em> to whisper.</h1>
|
||||
<p class="lead">I design weird tools, playful software, and 3D experiments that turn ideas into experiences people actually remember.</p>
|
||||
<a class="cta" href="#contact">Start a conversation <span>↗</span></a>
|
||||
</div>
|
||||
<div class="hero-side" aria-hidden="true">
|
||||
<span class="index">MWA / 001</span>
|
||||
<div class="sun">✳</div>
|
||||
<p class="side-note">Good ideas<br>move fast.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="ticker"><div class="ticker-track">Developer ✳ 3D Artist ✳ Emulator Builder ✳ Game Maker ✳ Toolsmith ✳ Developer ✳ 3D Artist ✳ Emulator Builder ✳ Game Maker ✳ Toolsmith ✳</div></div>
|
||||
|
||||
<div class="wrap">
|
||||
<section id="services">
|
||||
<div class="section-head">
|
||||
<p class="label">01 / What I do</p>
|
||||
<h2 class="section-title">A point of view, <span>not just a product.</span></h2>
|
||||
</div>
|
||||
<div class="services">
|
||||
<article class="service"><span class="number">01</span><h3>Prototype<br>Systems</h3><p>Explore, test, and ship weird ideas fast — from game mechanics to emulator tooling and browser experiments.</p></article>
|
||||
<article class="service"><span class="number">02</span><h3>Creative<br>Code</h3><p>Turn visuals, motion, and interaction into expressive interfaces with attention to feeling and clarity.</p></article>
|
||||
<article class="service"><span class="number">03</span><h3>3D + UI<br>Direction</h3><p>Shape side projects, concepts, and production-facing systems with a strong visual and technical identity.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="work" id="work">
|
||||
<div class="wrap">
|
||||
<div class="section-head"><p class="label">02 / Selected work</p><h2 class="section-title">Made to be <span>remembered.</span></h2></div>
|
||||
<div class="work-grid">
|
||||
<article class="project"><h3>FEDL</h3><p>Emulator engineering / Game tooling</p></article>
|
||||
<article class="project"><h3>OmniEmu</h3><p>Platform experimentation / Browser emulation</p></article>
|
||||
<article class="project"><h3>Gelectron</h3><p>Creative software / UI prototypes</p></article>
|
||||
<article class="project"><h3>Nova</h3><p>Game concept / Iterative design</p></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wrap"><section><div class="quote"><blockquote>“The work feels intentional, curious, and impossible to ignore — it turns complex ideas into something people instantly understand.”</blockquote><cite>— Personal note from building around the internet</cite></div></section></div>
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<div class="wrap">
|
||||
<h2>Make your next idea <span>impossible</span> to ignore.</h2>
|
||||
<a class="cta" href="mailto:[email protected]">[email protected] <span>↗</span></a>
|
||||
<div class="links"><a href="projects/">Projects</a><a href="about-me.html">About</a><a href="blog/">Blog</a><a href="https://github.com/mileswolfallen2">GitHub</a></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer><div class="wrap"><span>© 2026 Miles Wolf Allen</span><span>Built with intent, not templates.</span></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user