alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 5 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

4
src/components/Background.astro
View File

@@ -55,13 +55,13 @@
/* Grid pattern for dots */
.bg-grid-pattern {
background-size: 24px 24px;
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Dark mode version */
:global(.dark) .bg-grid-pattern {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
}
/* Ambient glow animations */

12
src/components/Footer.astro
View File

@@ -10,8 +10,8 @@ const currentYear = new Date().getFullYear();
const navLinks = [
{ text: 'Home', href: '/' },
{ text: 'Blog', href: '/blog' },
{ text: 'Topics', href: '/topics' },
{ text: 'About', href: '/about' },
{ text: 'RSS', href: '/rss' },
];
const socialLinks = [
@@ -60,17 +60,14 @@ const socialLinks = [
<a href="/" class="group inline-block">
<div class="flex items-center">
<div
class="relative flex h-10 w-10 transform items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-600 shadow-lg transition-transform group-hover:scale-105 dark:from-zinc-200 dark:to-zinc-400"
class="relative flex h-10 w-10 transform items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-600 shadow-lg transition-transform dark:from-zinc-200 dark:to-zinc-400"
>
<span
class="theme-transition-all text-xl font-bold text-white transition-transform duration-300 group-hover:scale-110 dark:text-zinc-900"
class="theme-transition-all text-xl font-bold text-zinc-100 duration-300 dark:text-zinc-900"
>
{global.initals}
</span>
<div
class="absolute inset-0 bg-gradient-to-br from-zinc-700 to-zinc-900 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-300 dark:to-zinc-100"
>
</div>
<div class="absolute inset-0"></div>
</div>
<span
class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
@@ -129,7 +126,6 @@ const socialLinks = [
>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">{link.text}</span>
<span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
</span>
</a>
</li>

17
src/components/FormattedDate.astro
View File

@@ -10,7 +10,22 @@ const parsedDate = typeof date === 'string' ? new Date(date) : date;
{
parsedDate && (
<time datetime={parsedDate.toISOString()}>
<time datetime={parsedDate.toISOString()} class="z-10 flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-3.5 w-3.5 sm:h-4 sm:w-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0
A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
/>
</svg>
{parsedDate.toLocaleDateString('en-us', {
year: 'numeric',
month: 'long',

11
src/components/Navigation.astro
View File

@@ -5,12 +5,13 @@ import directus from '../../lib/directus';
import { readSingleton } from '@directus/sdk';
const global = await directus.request(readSingleton('global'));
const links = await directus.request(readSingleton('links'));
const navItems = [
{ text: 'Home', href: '/' },
{ text: 'Blog', href: '/blog' },
{ text: 'Topics', href: '/topics' },
{ text: 'About', href: '/about' },
{ text: 'Gitea', href: links.gitea },
{ text: 'RSS', href: 'rss.xml' },
];
@@ -36,8 +37,8 @@ const currentPath = pathname.slice(1);
href={item.href}
class={`text-sm font-medium ${
isActive
? 'text-zinc-900 dark:text-white'
: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
? 'text-zinc-900 dark:text-zinc-100'
: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
}`}
>
{item.text}
@@ -101,8 +102,8 @@ const currentPath = pathname.slice(1);
href={item.href}
class={`mobile-nav-item translate-y-4 text-lg font-medium opacity-0 ${
isActive
? 'text-zinc-900 dark:text-white'
: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
? 'text-zinc-900 dark:text-zinc-100'
: 'text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-100'
}`}
style={`transition-delay: ${index * 0.05}s;`}
>

17
src/components/TagList.astro
View File

@@ -8,16 +8,21 @@ const { tags = [], class: className = '' } = Astro.props;
---
{
tags.length > 0 && (
<div class={`mt-3 flex flex-wrap gap-2 ${className}`}>
{tags.map((tag) => (
tags && (
<div class={`mb-3 flex flex-wrap justify-center gap-2 sm:mb-0 sm:justify-start ${className}`}>
{tags.slice(0, 2).map((postTag) => (
<a
href={`/tag/${tag}`}
class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
href={`/tags/${postTag}`}
class={`inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700`}
>
{tag}
#{postTag}
</a>
))}
{tags.length > 2 && (
<span class="inline-flex items-center rounded-full bg-zinc-50 px-2 py-0.5 text-xs text-zinc-500 dark:bg-zinc-800/50 dark:text-zinc-400">
+{tags.length - 3}
</span>
)}
</div>
)
}