mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
115 lines
5.9 KiB
HTML
115 lines
5.9 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">
|
|
<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;}}
|
|
</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>
|
|
|
|
<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
|
|
</footer>
|
|
</body>
|
|
</html> |