ocean-bennett/404.html at main · undergroundrap/ocean-bennett · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>404 — Ocean Bennett</title>
<meta name="description" content="Page not found. Return to Ocean Bennett's portfolio — AI Automation Engineer." />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<style>
:root { --bg: #000; --fg: #fff; --dim: #949494; --line: #1a1a1a; --line-2: #262626; }
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
body { font-family: "Inter", -apple-system, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 24px; overflow: hidden; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
main { position: relative; z-index: 1; max-width: 500px; width: 100%; text-align: center; border: 1px solid var(--line-2); border-radius: 24px; padding: 48px 32px; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 32px 64px -16px rgba(0,0,0,0.5); }
h1 { font-size: clamp(64px, 12vw, 120px); line-height: 0.9; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 16px; }
p { font-size: 16px; color: #d4d4d4; line-height: 1.6; margin: 0 0 32px; letter-spacing: -0.01em; }
.btn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #000; text-decoration: none; border-radius: 999px; padding: 16px 24px; font-weight: 600; font-size: 15px; transition: transform 180ms ease, box-shadow 180ms ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,0.15); }
</style>
</head>
<body>
<canvas id="stars" aria-hidden="true"></canvas>
<main>
  <h1>404</h1>
  <p>That page does not exist.<br>Go back to Ocean Bennett’s portfolio.</p>
  <a href="/" class="btn">Return home <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
</main>
<script>
  if('serviceWorker'in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js').catch(e=>console.log('SW error:',e))})}
  (()=>{const c=document.getElementById("stars");if(!c)return;const x=c.getContext("2d"),m=window.matchMedia("(prefers-reduced-motion:reduce)").matches;let W=0,H=0,D=Math.min(window.devicePixelRatio||1,2),s=[];function r(){W=window.innerWidth;H=window.innerHeight;c.width=W*D;c.height=H*D;x.setTransform(D,0,0,D,0,0);const n=Math.min(180,Math.floor(W*H/12e3));s=new Array(n).fill(0).map(()=>({x:Math.random()*W,y:Math.random()*H,r:.3+Math.random()*1.1,a:.25+Math.random()*.55,vx:(Math.random()-.5)*.04*(.4+Math.random()),vy:-.02-Math.random()*.05,tw:Math.random()*Math.PI*2,ts:.004+Math.random()*.01}))}function t(){x.clearRect(0,0,W,H);for(const i of s){i.x+=i.vx;i.y+=i.vy;i.tw+=i.ts;if(i.x<-2)i.x=W+2;if(i.x>W+2)i.x=-2;if(i.y<-2){i.y=H+2;i.x=Math.random()*W}const a=i.a*(.65+.35*Math.sin(i.tw));x.globalAlpha=a;x.fillStyle="#fff";x.beginPath();x.arc(i.x,i.y,i.r,0,Math.PI*2);x.fill()}x.globalAlpha=1;if(!m)requestAnimationFrame(t)}window.addEventListener("load",()=>{const f=()=>{r();if(!m)requestAnimationFrame(t)};if(window.requestIdleCallback){requestIdleCallback(f,{timeout:2e3})}else{setTimeout(f,200)}});window.addEventListener("resize",r)})();
</script>
</body>
</html>