mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
230 lines
17 KiB
HTML
230 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>404 | Miles Wolf Allen</title>
|
|
<meta name="description" content="Page not found. Head back to the portfolio.">
|
|
<link rel="canonical" href="https://milesallen.site/404.html">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<link rel="stylesheet" href="projects/style.css">
|
|
<style>
|
|
:root{
|
|
--bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
|
|
--font-pixel:'Press Start 2P',monospace;--font-mono:'Space Mono',monospace;--font-body:'Inter',sans-serif;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box;}
|
|
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
|
|
body::after{
|
|
content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
|
|
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
|
|
}
|
|
|
|
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;}
|
|
.cursor-dot{width:6px;height:6px;background:var(--accent);transform:translate(-50%,-50%);transition:width .2s,height .2s;}
|
|
.cursor-ring{width:36px;height:36px;border:2px solid var(--accent);transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:.5;}
|
|
.cursor-dot.hover{width:10px;height:10px;background:var(--tape);}
|
|
.cursor-ring.hover{width:50px;height:50px;border-color:var(--tape);opacity:.8;}
|
|
@media(max-width:720px){.cursor-dot,.cursor-ring{display:none;}}
|
|
@media(hover:none){.cursor-dot,.cursor-ring{display:none;}}
|
|
|
|
.code{
|
|
font-family:var(--font-pixel);font-size:clamp(80px,20vw,200px);font-weight:700;line-height:1;
|
|
color:var(--text);text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);
|
|
animation:glitch 3s ease-in-out infinite;transform:rotate(-3deg);margin-bottom:20px;
|
|
}
|
|
@keyframes glitch{
|
|
0%,90%,100%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);}
|
|
92%{text-shadow:6px 6px 0 var(--red),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(3px);}
|
|
94%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--red);transform:rotate(-3deg) translateX(-3px);}
|
|
96%{text-shadow:6px 6px 0 var(--tape),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(2px);}
|
|
}
|
|
|
|
.msg{
|
|
font-family:var(--font-mono);font-size:clamp(12px,2.5vw,16px);color:var(--muted);
|
|
text-align:center;max-width:500px;line-height:1.8;margin-bottom:40px;transform:rotate(1deg);
|
|
}
|
|
|
|
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;transform:rotate(-0.5deg);}
|
|
.btn{
|
|
font-family:var(--font-mono);font-weight:700;font-size:12px;padding:14px 28px;
|
|
border:2px solid var(--text);text-transform:uppercase;letter-spacing:.04em;
|
|
text-decoration:none;transition:all .2s;display:inline-block;
|
|
}
|
|
.btn-home{background:var(--text);color:#000;}
|
|
.btn-back{background:transparent;color:var(--text);}
|
|
.btn:hover{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.1);}
|
|
.btn:active{transform:translateY(0) scale(.98);}
|
|
|
|
.tape{
|
|
position:fixed;top:50%;left:-5%;right:-5%;height:28px;
|
|
background:var(--tape);transform:rotate(-5deg);z-index:10;display:flex;align-items:center;
|
|
justify-content:center;font-family:var(--font-pixel);font-size:9px;color:#000;
|
|
letter-spacing:.1em;text-transform:uppercase;opacity:.15;pointer-events:none;
|
|
}
|
|
.tape:nth-child(2){top:30%;transform:rotate(3deg);opacity:.08;}
|
|
.tape:nth-child(3){top:70%;transform:rotate(-2deg);opacity:.1;}
|
|
|
|
@media(max-width:720px){
|
|
.actions{flex-direction:column;width:80%;}
|
|
.btn{text-align:center;}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
|
|
|
|
body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
|
|
body.clean::after{display:none!important;}
|
|
body.clean .cursor-dot,body.clean .cursor-ring{display:none!important;}
|
|
body.clean *{cursor:auto!important;}
|
|
body.clean .code{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(48px,15vw,120px);color:var(--text);text-shadow:none!important;animation:none!important;transform:none!important;margin-bottom:12px;}
|
|
body.clean .msg{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);transform:none!important;margin-bottom:28px;line-height:1.6;}
|
|
body.clean .actions{transform:none!important;gap:8px;}
|
|
body.clean .btn{font-family:'Inter',sans-serif;font-weight:500;font-size:13px;padding:10px 24px;border-radius:8px;text-transform:none;letter-spacing:0;border:1px solid #333045;}
|
|
body.clean .btn-home{background:var(--text);color:var(--bg);border-color:var(--text);}
|
|
body.clean .btn-back{background:#22202a;color:var(--text);border-color:#333045;}
|
|
body.clean .btn:hover{transform:none!important;filter:none!important;opacity:.85;}
|
|
body.clean .tape{display:none!important;}
|
|
body.clean footer{font-family:'Inter',sans-serif!important;font-size:12px!important;color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important;position:static!important;}
|
|
body.clean footer .footer-links a{color:var(--muted)!important;font-size:12px!important;}
|
|
body.clean footer .footer-links a:hover{color:var(--accent)!important;}
|
|
|
|
/* ============ MAXIMALIST (404-specific) ============ */
|
|
body.maximalist::after{display:none!important;}
|
|
body.maximalist .cursor-dot,body.maximalist .cursor-ring{display:none!important;}
|
|
body.maximalist *{cursor:auto!important;}
|
|
body.maximalist .code{
|
|
font-family:var(--shout);font-size:clamp(80px,22vw,240px);color:var(--tape);
|
|
text-shadow:10px 10px 0 var(--red);animation:none!important;
|
|
transform:rotate(-4deg)!important;margin-bottom:8px;line-height:.9;
|
|
}
|
|
body.maximalist .code::after{content:'PAGE NOT FOUND';font-family:var(--font-pixel);font-size:clamp(10px,2vw,16px);display:block;color:var(--white);margin-top:14px;letter-spacing:3px;transform:rotate(1deg);}
|
|
body.maximalist .msg{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--muted);transform:rotate(1deg)!important;margin-bottom:34px;line-height:1.7;}
|
|
body.maximalist .actions{transform:rotate(-1deg)!important;gap:14px;}
|
|
body.maximalist .btn{
|
|
font-family:var(--font-pixel);font-size:14px;letter-spacing:1px;padding:15px 30px;
|
|
border:4px solid var(--black);border-radius:0;text-transform:uppercase;
|
|
box-shadow:6px 6px 0 var(--black);
|
|
}
|
|
body.maximalist .btn-home{background:var(--pink);color:var(--black);border-color:var(--black);}
|
|
body.maximalist .btn-back{background:var(--blue);color:var(--black);border-color:var(--black);}
|
|
body.maximalist .btn:hover{transform:translate(-3px,-3px)!important;filter:none!important;box-shadow:10px 10px 0 var(--black);background:var(--tape);color:var(--black);}
|
|
body.maximalist .btn:active{transform:translate(0,0)!important;}
|
|
body.maximalist .tape{display:none!important;}
|
|
body.maximalist footer{font-family:var(--font-pixel)!important;font-size:13px!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:1px!important;position:static!important;}
|
|
body.maximalist footer .footer-links a{color:var(--tape)!important;font-size:13px!important;}
|
|
body.maximalist footer .footer-links a:hover{color:var(--accent)!important;}
|
|
|
|
/* ============ SYNTHWAVE (404-specific) ============ */
|
|
body.synthwave::after{display:none!important;}
|
|
body.synthwave .cursor-dot,body.synthwave .cursor-ring{display:none!important;}
|
|
body.synthwave *{cursor:auto!important;}
|
|
body.synthwave .code{font-family:var(--shout);font-weight:900;font-size:clamp(80px,20vw,200px);color:var(--text);text-shadow:0 0 30px rgba(255,46,151,0.6),0 0 80px rgba(0,229,255,0.25);animation:none;transform:rotate(-2deg);margin-bottom:16px;}
|
|
body.synthwave .code::after{content:'PAGE NOT FOUND';font-family:var(--font-pixel);font-size:clamp(10px,2vw,14px);display:block;color:var(--blue);margin-top:16px;letter-spacing:4px;text-shadow:0 0 12px var(--blue);}
|
|
body.synthwave .msg{font-family:var(--font-mono);font-size:14px;color:var(--muted);transform:none;margin-bottom:34px;}
|
|
body.synthwave .actions{transform:none;gap:12px;}
|
|
body.synthwave .btn{font-family:var(--font-mono);font-weight:700;font-size:13px;border:1px solid var(--accent);text-transform:uppercase;letter-spacing:1px;border-radius:0;box-shadow:0 0 14px rgba(255,46,151,0.15);}
|
|
body.synthwave .btn:hover{transform:translateY(-3px);filter:none;box-shadow:0 0 24px rgba(255,46,151,0.35);}
|
|
body.synthwave .btn-home{background:linear-gradient(90deg,var(--accent),#7a1bf0);color:#fff;border-color:transparent;}
|
|
body.synthwave .btn-back{background:transparent;color:var(--text);border-color:var(--blue);box-shadow:0 0 14px rgba(0,229,255,0.15);}
|
|
body.synthwave .tape{display:none!important;}
|
|
body.synthwave footer{font-family:var(--font-mono)!important;font-size:12px!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:1px!important;position:static!important;}
|
|
body.synthwave footer .footer-links a{color:var(--blue)!important;font-size:12px!important;}
|
|
body.synthwave footer .footer-links a:hover{color:var(--accent)!important;}
|
|
|
|
/* ============ PHOSPHOR (404-specific) ============ */
|
|
body.phosphor::after{display:none!important;}
|
|
body.phosphor .cursor-dot,body.phosphor .cursor-ring{display:none!important;}
|
|
body.phosphor *{cursor:auto!important;}
|
|
body.phosphor .code{font-family:var(--shout);font-size:clamp(80px,20vw,200px);color:var(--text);text-shadow:0 0 8px var(--text);animation:none;transform:rotate(-2deg);margin-bottom:16px;}
|
|
body.phosphor .code::after{content:'PAGE NOT FOUND';font-family:var(--font-pixel);font-size:clamp(12px,2vw,16px);display:block;color:var(--accent);margin-top:16px;letter-spacing:3px;text-shadow:0 0 6px var(--accent);}
|
|
body.phosphor .msg{font-family:var(--font-mono);font-size:14px;color:var(--muted);transform:none;margin-bottom:34px;}
|
|
body.phosphor .actions{transform:none;gap:12px;}
|
|
body.phosphor .btn{font-family:var(--font-mono);font-weight:700;font-size:14px;border:1px solid var(--accent);text-transform:uppercase;letter-spacing:1px;border-radius:0;}
|
|
body.phosphor .btn:hover{transform:translateY(-3px);filter:none;box-shadow:0 0 16px rgba(57,255,108,0.3);}
|
|
body.phosphor .btn-home{background:var(--accent);color:var(--bg);border-color:var(--accent);}
|
|
body.phosphor .btn-back{background:transparent;color:var(--accent);border-color:var(--accent);}
|
|
body.phosphor .tape{display:none!important;}
|
|
body.phosphor footer{font-family:var(--font-mono)!important;font-size:12px!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:1px!important;position:static!important;}
|
|
body.phosphor footer .footer-links a{color:var(--accent)!important;font-size:12px!important;}
|
|
body.phosphor footer .footer-links a:hover{color:var(--text)!important;}
|
|
|
|
/* ============ CHROME (404-specific) ============ */
|
|
body.chrome::after{display:none!important;}
|
|
body.chrome .cursor-dot,body.chrome .cursor-ring{display:none!important;}
|
|
body.chrome *{cursor:auto!important;}
|
|
body.chrome .code{font-family:var(--shout);font-size:clamp(90px,22vw,220px);color:var(--text);text-shadow:8px 8px 0 rgba(255,255,255,0.2);animation:none;transform:rotate(-3deg);margin-bottom:16px;}
|
|
body.chrome .code::after{content:'PAGE NOT FOUND';font-family:var(--font-pixel);font-size:clamp(12px,2vw,16px);display:block;color:var(--muted);margin-top:16px;letter-spacing:4px;transform:none;}
|
|
body.chrome .msg{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--muted);transform:none;margin-bottom:34px;}
|
|
body.chrome .actions{transform:none;gap:12px;}
|
|
body.chrome .btn{font-family:var(--font-mono);font-weight:700;font-size:13px;border:2px solid var(--text);text-transform:uppercase;letter-spacing:2px;border-radius:0;}
|
|
body.chrome .btn:hover{transform:translateY(-3px);filter:none;}
|
|
body.chrome .btn-home{background:var(--text);color:var(--bg);border-color:var(--text);}
|
|
body.chrome .btn-back{background:transparent;color:var(--text);border-color:var(--text);}
|
|
body.chrome .btn-back:hover{background:var(--text);color:var(--bg);}
|
|
body.chrome .tape{display:none!important;}
|
|
body.chrome footer{font-family:var(--font-mono)!important;font-size:12px!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:1px!important;position:static!important;}
|
|
body.chrome footer .footer-links a{color:var(--text)!important;font-size:12px!important;}
|
|
body.chrome footer .footer-links a:hover{color:var(--accent)!important;}
|
|
|
|
/* ============ PAPER (404-specific) ============ */
|
|
body.paper::after{display:none!important;}
|
|
body.paper .cursor-dot,body.paper .cursor-ring{display:none!important;}
|
|
body.paper *{cursor:auto!important;}
|
|
body.paper .code{font-family:var(--shout);font-size:clamp(80px,20vw,180px);color:var(--text);text-shadow:none;animation:none;transform:rotate(-2deg);margin-bottom:12px;}
|
|
body.paper .code::after{content:'PAGE NOT FOUND';font-family:var(--font-mono);font-size:clamp(12px,2vw,16px);display:block;color:var(--accent);margin-top:14px;letter-spacing:2px;text-transform:uppercase;transform:rotate(1deg);}
|
|
body.paper .msg{font-family:var(--font-body);font-size:17px;color:var(--muted);transform:rotate(-.5deg);margin-bottom:30px;}
|
|
body.paper .actions{transform:none;gap:10px;}
|
|
body.paper .btn{font-family:var(--font-mono);font-weight:700;font-size:14px;border:1px solid #d9d2c2;background:#fff;color:var(--text);text-transform:uppercase;letter-spacing:1px;border-radius:9px 6px 11px 7px/7px 11px 6px 9px;box-shadow:2px 3px 0 rgba(43,38,32,0.06),5px 8px 18px rgba(43,38,32,0.06);transform:rotate(-1deg);}
|
|
body.paper .btn:nth-of-type(2){transform:rotate(1deg);}
|
|
body.paper .btn:hover{transform:translateY(-2px) rotate(0);filter:none;border-color:var(--accent);color:var(--accent);box-shadow:0 4px 14px rgba(27,25,23,0.1);}
|
|
body.paper .btn-home{background:var(--accent);color:#fff;border-color:var(--accent);}
|
|
body.paper .btn-home:hover{color:#fff;}
|
|
body.paper .tape{display:none!important;}
|
|
body.paper footer{font-family:var(--font-body)!important;font-size:12px!important;color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important;position:static!important;}
|
|
body.paper footer .footer-links a{color:var(--muted)!important;font-size:12px!important;}
|
|
body.paper footer .footer-links a:hover{color:var(--accent)!important;}
|
|
</style>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://milesallen.site/" },
|
|
{ "@type": "ListItem", "position": 2, "name": "404", "item": "https://milesallen.site/404.html" }
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="cursor-dot" id="cursorDot"></div>
|
|
<div class="cursor-ring" id="cursorRing"></div>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
|
|
|
|
<div class="tape">PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND *</div>
|
|
<div class="tape">404 * 404 * 404 * 404 * 404 * 404 * 404 * 404 *</div>
|
|
<div class="tape">DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST *</div>
|
|
|
|
<div class="code">404</div>
|
|
<p class="msg">This page doesn't exist. Either the URL is wrong or I never built it. Probably both.</p>
|
|
<div class="actions">
|
|
<a href="index.html" class="btn btn-home">Go Home</a>
|
|
<a href="javascript:history.back()" class="btn btn-back">Go Back</a>
|
|
</div>
|
|
|
|
<script src="projects/script.js"></script>
|
|
<footer style="text-align:center;padding:40px 24px;font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:20;">
|
|
<div class="footer-links" style="margin-bottom: 12px;">
|
|
<a href="uses.html" style="color:var(--muted);text-decoration:none;">Uses</a>
|
|
<span style="color:var(--muted);margin:0 8px;">·</span>
|
|
<a href="now.html" style="color:var(--muted);text-decoration:none;">Now</a>
|
|
<span style="color:var(--muted);margin:0 8px;">·</span>
|
|
<a href="colophon.html" style="color:var(--muted);text-decoration:none;">Colophon</a>
|
|
<span style="color:var(--muted);margin:0 8px;">·</span>
|
|
<a href="experiments.html" style="color:var(--accent);text-decoration:none;">Internet History</a>
|
|
</div>
|
|
Built by Miles · 2026 · Powered by too much coffee and the Konami code<br>
|
|
<span style="font-size:9px;opacity:.4;">A B ← → ← → ↓ ↓ ↑ ↑</span>
|
|
</footer>
|
|
</body>
|
|
</html> |