mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
124 lines
6.0 KiB
HTML
124 lines
6.0 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/svg+xml" 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>
|
|
</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>
|
|
(function(){
|
|
var dot=document.getElementById('cursorDot');
|
|
var ring=document.getElementById('cursorRing');
|
|
if(!dot||!ring)return;
|
|
var mx=0,my=0,rx=0,ry=0;
|
|
document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;dot.style.left=mx+'px';dot.style.top=my+'px';});
|
|
(function loop(){
|
|
rx+=(mx-rx)*0.15;ry+=(my-ry)*0.15;
|
|
ring.style.left=rx+'px';ring.style.top=ry+'px';
|
|
requestAnimationFrame(loop);
|
|
})();
|
|
document.querySelectorAll('a,button').forEach(function(el){
|
|
el.addEventListener('mouseenter',function(){dot.classList.add('hover');ring.classList.add('hover');});
|
|
el.addEventListener('mouseleave',function(){dot.classList.remove('hover');ring.classList.remove('hover');});
|
|
});
|
|
|
|
var seq=['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
|
|
var pos=0;
|
|
window.addEventListener('keydown',function(e){
|
|
var key=e.key.length===1?e.key.toLowerCase():e.key;
|
|
if(key===seq[pos]){pos++;if(pos===seq.length){pos=0;revealCursor();}}
|
|
else{pos=(key===seq[0])?1:0;}
|
|
});
|
|
function revealCursor(){
|
|
document.body.style.cursor='auto';
|
|
var style=document.createElement('style');style.id='konami-cursor';
|
|
style.textContent='*{cursor:auto !important;}';
|
|
document.head.appendChild(style);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |