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

add astro native SPA transition

Browse Source
This commit is contained in:
Alex Lebens
2025-07-15 21:56:33 -05:00
parent 22d5b50f73
commit e07210638e
11 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/404.astro
View File

@@ -5,6 +5,7 @@ import Layout from '../layouts/Layout.astro';
<Layout title="404 - Page Not Found">
<div
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">

7
src/pages/about.astro
View File

@@ -16,7 +16,10 @@ const skills = await directus.request(
---
<BaseLayout title="About Me" description={global.description}>
<div class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16">
<div
class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16"
transition:animate="slide"
>
<!-- Hero Section -->
<div class="relative mb-12 sm:mb-16 md:mb-20">
<!-- Decorative elements -->
@@ -366,7 +369,7 @@ const skills = await directus.request(
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('astro:page-load', () => {
const sliderTrack = document.querySelector('.slider-track');
// Create seamless infinite scrolling effect

3
src/pages/blog/[...slug].astro
View File

@@ -196,9 +196,6 @@ const { post, nextPost, prevPost } = Astro.props;
}
}
// Initialize on first load
document.addEventListener('DOMContentLoaded', initializeBlogPost);
// Re-initialize when content changes via Astro's view transitions
document.addEventListener('astro:page-load', initializeBlogPost);
</script>

4
src/pages/blog/index.astro
View File

@@ -25,7 +25,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
---
<BaseLayout title="Blog">
<div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16">
<div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16" transition:animate="slide">
<div class="relative mb-12 sm:mb-20">
<div
class="animate-blob absolute -top-10 -left-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl sm:-top-20 sm:-left-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
@@ -307,7 +307,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('astro:page-load', () => {
const backToTopButton = document.getElementById('back-to-top');
if (backToTopButton) {

7
src/pages/index.astro
View File

@@ -23,7 +23,10 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
<Layout title=`Home | ${global.name}`>
<!-- Hero Section with mobile responsiveness -->
<section class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20">
<section
class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20"
transition:animate="slide"
>
<div class="relative mx-auto max-w-2xl">
<!-- Adjusted blob positions and sizes for mobile appearance -->
<div
@@ -278,7 +281,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
<script>
// Add hover effect for cards on touch devices
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('astro:page-load', () => {
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouchDevice) {

7
src/pages/topics/index.astro
View File

@@ -30,7 +30,10 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
---
<BaseLayout title="Explore Tags">
<div class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16">
<div
class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16"
transition:animate="slide"
>
<div class="theme-transition-element relative mb-8 text-center sm:mb-12 md:mb-16">
<div
class="animate-blob theme-transition-bg absolute -top-16 -left-16 h-36 w-36 rounded-full bg-zinc-100 opacity-50 blur-3xl sm:h-48 sm:w-48 md:h-72 md:w-72 dark:bg-zinc-800/50"
@@ -145,7 +148,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
</BaseLayout>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('astro:page-load', () => {
const fixViewportWidth = () => {
// Force the viewport to be exactly the width of the device
const viewport = document.querySelector('meta[name="viewport"]');