init
This commit is contained in:
357
site-profile-new/src/pages/404.astro
Normal file
357
site-profile-new/src/pages/404.astro
Normal file
@@ -0,0 +1,357 @@
|
||||
---
|
||||
import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
||||
import GoBack from '@/components/ui/buttons/GoBack.astro';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Page Not Found"
|
||||
description="Page Not Found"
|
||||
structuredData={{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'WebPage',
|
||||
inLanguage: 'en-US',
|
||||
'@id': Astro.url.href,
|
||||
url: Astro.url.href,
|
||||
name: `Page Not Found | ${global.name}`,
|
||||
description: 'Page Not Found',
|
||||
isPartOf: {
|
||||
'@type': 'WebSite',
|
||||
url: global.site_url,
|
||||
name: global.name,
|
||||
description: global.about,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<section class="mt-20 grid place-content-center">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
|
||||
<div class="mx-auto max-w-screen-sm text-center">
|
||||
<div class="glitch-wrapper smooth-reveal">
|
||||
<h1
|
||||
class="glitch text-9xl leading-none font-bold text-neutral-900 sm:text-[12rem] dark:text-neutral-100"
|
||||
data-text="404"
|
||||
>
|
||||
Not Found
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h1
|
||||
class="text-dark smooth-reveal mb-4 text-7xl font-extrabold text-yellow-500 lg:text-9xl dark:text-yellow-400"
|
||||
>
|
||||
{`Page Not Found - ${global.name}`}
|
||||
</h1>
|
||||
<div
|
||||
class="smooth-reveal mx-auto mt-16 max-w-md rounded-xl bg-neutral-100 p-6 shadow-xs dark:border-neutral-700/50 dark:bg-stone-800"
|
||||
>
|
||||
<h3
|
||||
class="text-sm font-medium tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
|
||||
>
|
||||
Did you know?
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-300" id="fun-fact">
|
||||
The 404 error code originated when CERN's web server displayed room 404 (their server
|
||||
room) as the error message when a file wasn't found.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
|
||||
>
|
||||
<GoBack title="Go Back" />
|
||||
<PrimaryCTA title="Return Home" url={global.site_url} noArrow addHome />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
const funFacts = [
|
||||
"The 404 error code originated when CERN's web server displayed room 404 (their server room) as the error message when a file wasn't found.",
|
||||
"In internet slang, '404' has become shorthand for something that's missing or someone who's clueless.",
|
||||
"Some websites turn their 404 pages into games, like Google's Pac-Man 404 page that once existed.",
|
||||
'The first web server was a NeXT computer used by Tim Berners-Lee at CERN, where the 404 error was born.',
|
||||
'Many companies use creative 404 pages as a way to showcase their brand personality and humor.',
|
||||
"The HTTP 1.0 specification from 1996 officially defined the 404 error as 'Not Found'.",
|
||||
'Studies show that well-designed 404 pages can reduce bounce rates by up to 30%.',
|
||||
'The most common cause of 404 errors is mistyped URLs.',
|
||||
];
|
||||
|
||||
// Display a random fun fact
|
||||
const funFactElement = document.getElementById('fun-fact');
|
||||
if (funFactElement) {
|
||||
const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
|
||||
funFactElement.textContent = randomFact;
|
||||
}
|
||||
|
||||
// Add smooth reveal animations for content after loading
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const animateContent = () => {
|
||||
// Animate group 1
|
||||
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
||||
smoothReveal.forEach((el, index) => {
|
||||
setTimeout(
|
||||
() => {
|
||||
el.classList.add('animate-reveal');
|
||||
},
|
||||
100 + index * 150
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
animateContent();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Glitch effect for 404 text */
|
||||
.glitch-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.glitch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: glitch-skew 1s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
.glitch::before,
|
||||
.glitch::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.glitch::before {
|
||||
left: 2px;
|
||||
text-shadow: -2px 0 #ff00c1;
|
||||
clip: rect(44px, 450px, 56px, 0);
|
||||
animation: glitch-anim 5s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
.glitch::after {
|
||||
left: -2px;
|
||||
text-shadow:
|
||||
-2px 0 #00fff9,
|
||||
2px 2px #ff00c1;
|
||||
animation: glitch-anim2 1s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes glitch-anim {
|
||||
0% {
|
||||
clip: rect(31px, 9999px, 94px, 0);
|
||||
transform: skew(0.85deg);
|
||||
}
|
||||
5% {
|
||||
clip: rect(70px, 9999px, 71px, 0);
|
||||
transform: skew(0.17deg);
|
||||
}
|
||||
10% {
|
||||
clip: rect(9px, 9999px, 85px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
15% {
|
||||
clip: rect(47px, 9999px, 18px, 0);
|
||||
transform: skew(0.22deg);
|
||||
}
|
||||
20% {
|
||||
clip: rect(7px, 9999px, 78px, 0);
|
||||
transform: skew(0.96deg);
|
||||
}
|
||||
25% {
|
||||
clip: rect(53px, 9999px, 54px, 0);
|
||||
transform: skew(0.05deg);
|
||||
}
|
||||
30% {
|
||||
clip: rect(84px, 9999px, 52px, 0);
|
||||
transform: skew(0.94deg);
|
||||
}
|
||||
35% {
|
||||
clip: rect(46px, 9999px, 7px, 0);
|
||||
transform: skew(0.01deg);
|
||||
}
|
||||
40% {
|
||||
clip: rect(2px, 9999px, 66px, 0);
|
||||
transform: skew(0.66deg);
|
||||
}
|
||||
45% {
|
||||
clip: rect(34px, 9999px, 33px, 0);
|
||||
transform: skew(0.52deg);
|
||||
}
|
||||
50% {
|
||||
clip: rect(80px, 9999px, 73px, 0);
|
||||
transform: skew(0.9deg);
|
||||
}
|
||||
55% {
|
||||
clip: rect(8px, 9999px, 81px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
60% {
|
||||
clip: rect(10px, 9999px, 86px, 0);
|
||||
transform: skew(0.85deg);
|
||||
}
|
||||
65% {
|
||||
clip: rect(36px, 9999px, 25px, 0);
|
||||
transform: skew(0.28deg);
|
||||
}
|
||||
70% {
|
||||
clip: rect(75px, 9999px, 31px, 0);
|
||||
transform: skew(0.46deg);
|
||||
}
|
||||
75% {
|
||||
clip: rect(46px, 9999px, 87px, 0);
|
||||
transform: skew(0.44deg);
|
||||
}
|
||||
80% {
|
||||
clip: rect(19px, 9999px, 40px, 0);
|
||||
transform: skew(0.07deg);
|
||||
}
|
||||
85% {
|
||||
clip: rect(85px, 9999px, 88px, 0);
|
||||
transform: skew(0.71deg);
|
||||
}
|
||||
90% {
|
||||
clip: rect(1px, 9999px, 89px, 0);
|
||||
transform: skew(0.76deg);
|
||||
}
|
||||
95% {
|
||||
clip: rect(44px, 9999px, 25px, 0);
|
||||
transform: skew(0.58deg);
|
||||
}
|
||||
100% {
|
||||
clip: rect(31px, 9999px, 26px, 0);
|
||||
transform: skew(0.6deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-anim2 {
|
||||
0% {
|
||||
clip: rect(65px, 9999px, 65px, 0);
|
||||
transform: skew(0.16deg);
|
||||
}
|
||||
5% {
|
||||
clip: rect(8px, 9999px, 42px, 0);
|
||||
transform: skew(0.65deg);
|
||||
}
|
||||
10% {
|
||||
clip: rect(64px, 9999px, 30px, 0);
|
||||
transform: skew(0.42deg);
|
||||
}
|
||||
15% {
|
||||
clip: rect(29px, 9999px, 49px, 0);
|
||||
transform: skew(0.05deg);
|
||||
}
|
||||
20% {
|
||||
clip: rect(25px, 9999px, 56px, 0);
|
||||
transform: skew(0.09deg);
|
||||
}
|
||||
25% {
|
||||
clip: rect(76px, 9999px, 98px, 0);
|
||||
transform: skew(0.79deg);
|
||||
}
|
||||
30% {
|
||||
clip: rect(72px, 9999px, 3px, 0);
|
||||
transform: skew(0.12deg);
|
||||
}
|
||||
35% {
|
||||
clip: rect(20px, 9999px, 60px, 0);
|
||||
transform: skew(0.09deg);
|
||||
}
|
||||
40% {
|
||||
clip: rect(61px, 9999px, 47px, 0);
|
||||
transform: skew(0.45deg);
|
||||
}
|
||||
45% {
|
||||
clip: rect(29px, 9999px, 69px, 0);
|
||||
transform: skew(0.09deg);
|
||||
}
|
||||
50% {
|
||||
clip: rect(82px, 9999px, 96px, 0);
|
||||
transform: skew(0.05deg);
|
||||
}
|
||||
55% {
|
||||
clip: rect(33px, 9999px, 91px, 0);
|
||||
transform: skew(0.16deg);
|
||||
}
|
||||
60% {
|
||||
clip: rect(56px, 9999px, 23px, 0);
|
||||
transform: skew(0.01deg);
|
||||
}
|
||||
65% {
|
||||
clip: rect(46px, 9999px, 21px, 0);
|
||||
transform: skew(0.89deg);
|
||||
}
|
||||
70% {
|
||||
clip: rect(50px, 9999px, 1px, 0);
|
||||
transform: skew(0.85deg);
|
||||
}
|
||||
75% {
|
||||
clip: rect(82px, 9999px, 33px, 0);
|
||||
transform: skew(0.87deg);
|
||||
}
|
||||
80% {
|
||||
clip: rect(94px, 9999px, 46px, 0);
|
||||
transform: skew(0.64deg);
|
||||
}
|
||||
85% {
|
||||
clip: rect(48px, 9999px, 95px, 0);
|
||||
transform: skew(0.43deg);
|
||||
}
|
||||
90% {
|
||||
clip: rect(60px, 9999px, 10px, 0);
|
||||
transform: skew(0.29deg);
|
||||
}
|
||||
95% {
|
||||
clip: rect(85px, 9999px, 62px, 0);
|
||||
transform: skew(0.66deg);
|
||||
}
|
||||
100% {
|
||||
clip: rect(61px, 9999px, 58px, 0);
|
||||
transform: skew(0.74deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-skew {
|
||||
0% {
|
||||
transform: skew(-1deg);
|
||||
}
|
||||
10% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
30% {
|
||||
transform: skew(-0.5deg);
|
||||
}
|
||||
40% {
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
50% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: skew(-0.5deg);
|
||||
}
|
||||
70% {
|
||||
transform: skew(0.8deg);
|
||||
}
|
||||
80% {
|
||||
transform: skew(-0.2deg);
|
||||
}
|
||||
90% {
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
100% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user