Add uses page and interactive features including toast notifications, cursor effects, and theme toggle

This commit is contained in:
2026-07-28 14:04:15 -05:00
parent 00f1314925
commit efb33d17ce
27 changed files with 1038 additions and 1804 deletions
+22 -33
View File
@@ -8,7 +8,7 @@
<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">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
:root{
--bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
@@ -72,6 +72,16 @@
}
@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>
@@ -88,37 +98,16 @@
<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>
<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>
</div>
Built by Miles · 2026 · Powered by too much coffee and the Konami code
</footer>
</body>
</html>