alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Activity

change layout and animations to be more common with each other

Browse Source
This commit is contained in:
Alex Lebens
2025-07-19 22:34:07 -05:00
parent bcb91972a1
commit 27b5e6a36b
14 changed files with 1124 additions and 1275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/404.astro
View File

@@ -7,22 +7,6 @@ import Layout from '../layouts/Layout.astro';
class="relative flex min-h-[80vh] flex-col items-center justify-center overflow-hidden px-4 py-20 text-center"
transition:animate="slide"
>
<!-- Animated background elements -->
<div class="absolute inset-0 overflow-hidden">
<div
class="animate-blob absolute -top-20 -left-20 h-64 w-64 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/50"
>
</div>
<div
class="animate-blob animation-delay-2000 absolute top-1/2 right-1/4 h-96 w-96 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30"
>
</div>
<div
class="animate-blob animation-delay-4000 absolute bottom-20 left-1/3 h-72 w-72 rounded-full bg-zinc-100 opacity-40 blur-3xl dark:bg-zinc-800/40"
>
</div>
</div>
<!-- Main content with animation -->
<div class="relative z-10 mx-auto max-w-xl">
<div class="glitch-wrapper">
@@ -135,34 +119,6 @@ import Layout from '../layouts/Layout.astro';
</script>
<style>
/* Animation for floating blobs */
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Glitch effect for 404 text */
.glitch-wrapper {
position: relative;