jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

404

Browse Source
This commit is contained in:
John Gatward
2026-03-20 19:05:39 +00:00
parent af0cb702a2
commit 6afbbc5d99
3 changed files with 277 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
404.css Normal file
View File

@@ -0,0 +1,171 @@
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.not-found {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 7rem 2rem 5rem;
gap: 0;
position: relative;
}
.nf-code {
font-family: 'Fraunces', serif;
font-size: clamp(7rem, 22vw, 16rem);
font-weight: 600;
line-height: 1;
color: var(--surface0);
letter-spacing: -0.02em;
user-select: none;
position: relative;
opacity: 0;
animation: fadeUp 0.6s 0.1s forwards;
}
.nf-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mauve);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
opacity: 0;
animation: fadeUp 0.6s 0.3s forwards;
}
.nf-eyebrow::before,
.nf-eyebrow::after {
content: '';
display: block;
height: 1px;
width: 3rem;
background: var(--mauve);
opacity: 0.5;
}
.nf-heading {
font-family: 'Fraunces', serif;
font-size: clamp(1.6rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--text);
line-height: 1.15;
margin-bottom: 1rem;
opacity: 0;
animation: fadeUp 0.6s 0.4s forwards;
}
.nf-heading em {
font-style: italic;
color: var(--mauve);
}
.nf-desc {
font-size: 0.88rem;
color: var(--subtext0);
max-width: 420px;
line-height: 1.8;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.6s 0.5s forwards;
}
.nf-terminal {
background: var(--mantle);
border: 1px solid var(--surface0);
border-radius: 8px;
padding: 1rem 1.5rem;
font-size: 0.78rem;
color: var(--subtext1);
text-align: left;
max-width: 440px;
width: 100%;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.6s 0.6s forwards;
}
.nf-terminal-bar {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.nf-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.nf-dot--red {
background: var(--red);
opacity: 0.7;
}
.nf-dot--yellow {
background: var(--yellow);
opacity: 0.7;
}
.nf-dot--green {
background: var(--green);
opacity: 0.7;
}
.nf-terminal-line {
display: flex;
gap: 0.6rem;
line-height: 1.9;
}
.nf-prompt {
color: var(--green);
}
.nf-cmd {
color: var(--text);
}
.nf-err {
color: var(--red);
}
.nf-comment {
color: var(--overlay1);
}
.nf-cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--mauve);
vertical-align: text-bottom;
animation: blink 1.1s step-end infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.nf-actions {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
animation: fadeUp 0.6s 0.7s forwards;
}

84
404.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>404 — Havox</title>
<meta name="description" content="Page not found."/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="404.css"/>
</head>
<body>
<!-- ─── Nav ─────────────────────────────────────────────────── -->
<nav>
<a href="index.html" class="nav-logo">havox</a>
<ul class="nav-links">
<li><a href="index.html#about">about</a></li>
<li><a href="index.html#skills">skills</a></li>
<li><a href="index.html#projects">projects</a></li>
<li><a href="index.html#contact">contact</a></li>
</ul>
</nav>
<!-- ─── 404 ──────────────────────────────────────────────────── -->
<main class="not-found">
<div class="nf-code">404</div>
<p class="nf-eyebrow">page not found</p>
<h1 class="nf-heading">This page <em>doesn't exist</em></h1>
<p class="nf-desc">
Either this URL was wrong, something got moved, or you've stumbled onto a
dead link I haven't cleaned up yet. Wouldn't be the first time.
</p>
<div class="nf-terminal" aria-hidden="true">
<div class="nf-terminal-bar">
<span class="nf-dot nf-dot--red"></span>
<span class="nf-dot nf-dot--yellow"></span>
<span class="nf-dot nf-dot--green"></span>
</div>
<div class="nf-terminal-line">
<span class="nf-prompt">~</span>
<span class="nf-cmd">curl -I <span id="typed-path"></span></span>
</div>
<div class="nf-terminal-line" id="nf-response" style="opacity:0; transition: opacity 0.3s;">
<span class="nf-err">HTTP/1.1 404 Not Found</span>
</div>
<div class="nf-terminal-line" id="nf-hint" style="opacity:0; transition: opacity 0.3s;">
<span class="nf-comment"># maybe try going home?</span>
</div>
<div class="nf-terminal-line">
<span class="nf-prompt">~</span>
<span class="nf-cursor"></span>
</div>
</div>
<div class="nf-actions">
<a href="index.html" class="btn btn-primary">← Back home</a>
<a href="index.html#projects" class="btn btn-ghost">View projects</a>
</div>
</main>
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<span>umbra.mom — John Gatward</span>
<span>
Source code (self‑hosted): <a href="https://gitea.umbra.mom/jay/havox">repository</a>
</span>
</footer>
<script src="404.js">
</script>
</body>
</html>

22
404.js Normal file
View File

@@ -0,0 +1,22 @@
(function () {
const pathEl = document.getElementById('typed-path');
const responseEl = document.getElementById('nf-response');
const hintEl = document.getElementById('nf-hint');
const href = globalThis.location.href;
const path = (href.length >= 45) ? href.substring(0, 45) : href;
let i = 0;
const interval = setInterval(() => {
if (i < path.length) {
pathEl.textContent += path[i++];
} else {
clearInterval(interval);
setTimeout(() => {
responseEl.style.opacity = '1';
setTimeout(() => {
hintEl.style.opacity = '1';
}, 400);
}, 300);
}
}, 45);
})();