From 17afce6710639859e19184f9de2cd60d0fb11650 Mon Sep 17 00:00:00 2001 From: Alex Lebens Date: Mon, 21 Jul 2025 20:58:34 -0500 Subject: [PATCH] minor tweaks and polish --- src/components/TagList.astro | 2 +- src/pages/404.astro | 8 +- src/pages/about.astro | 98 +------ src/pages/blog/[...slug].astro | 46 +-- src/pages/blog/index.astro | 504 +-------------------------------- src/pages/index.astro | 201 +------------ src/pages/tags/[tag].astro | 67 +---- src/styles/global.css | 21 +- src/utils/DynamicIcon.tsx | 2 +- 9 files changed, 41 insertions(+), 908 deletions(-) diff --git a/src/components/TagList.astro b/src/components/TagList.astro index 721ba36..525a708 100644 --- a/src/components/TagList.astro +++ b/src/components/TagList.astro @@ -19,7 +19,7 @@ const { tags = [], class: className = '' } = Astro.props; ))} {tags.length > 2 && ( - + +{tags.length - 3} )} diff --git a/src/pages/404.astro b/src/pages/404.astro index 8493e35..6bd6d0e 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -29,12 +29,8 @@ import Layout from '../layouts/Layout.astro';
- - - +

- Hello, I'm {global.name} + Hello, I'm {global.name}

{about.background}

- -
@@ -61,7 +51,7 @@ const skills = await directus.request(
- +

{ [...skills, ...skills, ...skills].map((skill, index) => ( -
+
@@ -158,6 +145,7 @@ const skills = await directus.request(
+

= 640) { - sliderTrack.style.animation = 'scroll 60s linear infinite'; - } else { - sliderTrack.style.animation = 'scroll 40s linear infinite'; - } - } - - updateScrollAnimation(); - window.addEventListener('resize', updateScrollAnimation); } setupInfiniteScroll(); - // Pause animation on hover/touch - sliderTrack?.addEventListener('mouseenter', () => { - sliderTrack.style.animationPlayState = 'paused'; - }); - - sliderTrack?.addEventListener('touchstart', () => { - sliderTrack.style.animationPlayState = 'paused'; - }); - - sliderTrack?.addEventListener('mouseleave', () => { - sliderTrack.style.animationPlayState = 'running'; - }); - - sliderTrack?.addEventListener('touchend', () => { - setTimeout(() => { - sliderTrack.style.animationPlayState = 'running'; - }, 1000); // Delay resuming animation after touch - }); - // Add hover effects to cards - only on non-touch devices const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const cards = document.querySelectorAll('.skill-card'); @@ -308,18 +264,6 @@ const skills = await directus.request( }); }); } - - // Handle theme transition - document.addEventListener('themeChange', () => { - cards.forEach((card, index) => { - setTimeout(() => { - card.classList.add('theme-changing'); - setTimeout(() => { - card.classList.remove('theme-changing'); - }, 600); - }, index * 50); - }); - }); }); @@ -442,36 +386,4 @@ const skills = await directus.request( min-height: 44px; } } - - /* Content reveal animations */ - .hero-text h1, - .hero-text span, - .hero-text p, - .hero-text ~ div { - opacity: 0; - transform: translateY(20px); - transition: - opacity 0.8s ease, - transform 0.8s ease; - } - - .animate-reveal { - opacity: 1 !important; - transform: translateY(0) !important; - } - - /* Theme transition effect */ - :global(.theme-switching) .theme-transition-element { - animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1); - } - - /* Smooth card transition during theme switch */ - .skill-card.theme-transition-element { - transition: - background-color var(--theme-transition), - border-color var(--theme-transition), - color var(--theme-transition), - box-shadow var(--theme-transition), - transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index e6ed800..6eb102c 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -117,32 +117,6 @@ const { post, nextPost, prevPost } = Astro.props; diff --git a/src/pages/index.astro b/src/pages/index.astro index 68b51aa..46d320a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,7 +7,6 @@ import directus from '../../lib/directus'; import { readItems, readSingleton } from '@directus/sdk'; const global = await directus.request(readSingleton('global')); - const posts = await directus.request( readItems('posts', { fields: ['*'], @@ -18,11 +17,11 @@ const posts = await directus.request( const recentPosts = posts .sort((a, b) => b.published_date.getTime() - a.published_date.getTime()) .slice(0, 3); - const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0, 5); --- +
post.tags || []))].slice(0, > More about me post.tags || []))].slice(0,
post.tags || []))].slice(0,

View all posts @@ -111,12 +110,12 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
- +
{ recentPosts.map((post, index) => ( -
-
+
+
{post.image && (
@@ -180,16 +179,16 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
- + { allTags.length > 0 && ( -
+

Popular Tags

-
+
{allTags.map((tag) => { const tagCount = posts.filter((post) => post.tags && post.tags.includes(tag)).length; return ( @@ -201,7 +200,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0, #{tag} - + {tagCount} {tagCount === 1 ? 'post' : 'posts'}
@@ -219,135 +218,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0, - - diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro index f82ad15..285db41 100644 --- a/src/pages/tags/[tag].astro +++ b/src/pages/tags/[tag].astro @@ -32,13 +32,10 @@ export async function getStaticPaths() { const { tag } = Astro.params as { tag: string }; const { posts = [] } = Astro.props; -console.log(`Tag: ${tag}, Number of posts: ${posts.length}`); - const sortedPosts = posts && posts.length > 0 ? [...posts].sort((a, b) => b.published_date.valueOf() - a.published_date.valueOf()) : []; -console.log(`Sorted posts length: ${sortedPosts.length}`); const relatedTags = [ ...new Set(sortedPosts.flatMap((post) => post.tags || []).filter((t) => t !== tag)), @@ -308,7 +305,7 @@ const relatedTags = [ ); }); - // Animate posts with staggered delay + // Animate posts const articles = document.querySelectorAll('article.group'); articles.forEach((article, index) => { setTimeout( @@ -321,52 +318,10 @@ const relatedTags = [ }; animateContent(); - - // Add hover effect for cards on touch devices - const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0; - - if (isTouchDevice) { - const cards = document.querySelectorAll('.hover-3d'); - - cards.forEach((card) => { - card.addEventListener('touchstart', () => { - card.classList.add('is-touched'); - }); - - card.addEventListener('touchend', () => { - setTimeout(() => { - card.classList.remove('is-touched'); - }, 300); - }); - }); - - // Disable hover animations on touch devices - document.documentElement.classList.add('touch-device'); - } }); diff --git a/src/styles/global.css b/src/styles/global.css index 9f34380..aa7eca3 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -132,7 +132,22 @@ button { transition: all 0.5s ease; } -a.hover:hover, -button:hover { - transform: translateY(-2px); +/* Content reveal animations */ +.hero-text h1, +.hero-text span, +.hero-text p, +.hero-text + p, +.hero-text ~ div, +article.group, +a.group.flex.flex-col { + opacity: 0; + transform: translateY(20px); + transition: + opacity 0.8s ease, + transform 0.8s ease; +} + +.animate-reveal { + opacity: 1 !important; + transform: translateY(0) !important; } diff --git a/src/utils/DynamicIcon.tsx b/src/utils/DynamicIcon.tsx index 5e0500c..c1b6bbd 100644 --- a/src/utils/DynamicIcon.tsx +++ b/src/utils/DynamicIcon.tsx @@ -23,7 +23,7 @@ const iconSets = { si: SiIcons, }; -const DynamicIcon = ({ name, set = 'fa' }: { name: string; set: string }) => { +const DynamicIcon = ({ name, set = 'fa' }: { name: string; set?: string }) => { let IconComponent = FaIcons.FaAlignCenter; if (name.startsWith('Fa')) {