Update dependency tailwindcss to v4

2025-06-08 21:54:06 +00:00
47 changed files with 4137 additions and 3373 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,5 +1,3 @@
 .DS_Store
-.astro
-.vscode
 node_modules
-dist
+dist
--- a/.gitea/workflows/process-repository.yaml
+++ b/.gitea/workflows/process-repository.yaml
@@ -1,40 +0,0 @@
-name: process-repository
-
-on:
-  schedule:
-    - cron: "@daily"
-
-jobs:
-  process-repository:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Python Script
-        uses: actions/checkout@v4
-        with:
-          repository: alexlebens/workflow-scripts
-          ref: main
-          token: ${{ secrets.BOT_TOKEN }}
-          path: workflow-scripts
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.13"
-
-      - name: Install dependencies
-        run: pip install requests immutabledict
-
-      - name: Run Script
-        env:
-          INSTANCE_URL: ${{ vars.INSTANCE_URL }}
-          OWNER: ${{ gitea.owner }}
-          REPOSITORY: ${{ gitea.repository }}
-          TOKEN: ${{ secrets.BOT_TOKEN }}
-          LOG_LEVEL: DEBUG
-          ISSUE_STALE_DAYS: 3
-          ISSUE_STALE_TAG: 23
-          ISSUE_EXCLUDE_TAG: 17
-          PULL_REQUEST_STALE_DAYS: 3
-          PULL_REQUEST_STALE_TAG: 23
-          PULL_REQUEST_REQUIRED_TAG: 22
-        run: python ./workflow-scripts/process-repository.py
--- a/.gitea/workflows/release-image-gitea.yml
+++ b/.gitea/workflows/release-image-gitea.yml
@@ -0,0 +1,67 @@
+name: release-image-gitea
+
+on:
+  push:
+    tags:
+      - 0.*
+
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Create Kubeconfig
+        run: |
+          mkdir $HOME/.kube
+          echo "${{ secrets.KUBECONFIG_BUILDX }}" > $HOME/.kube/config
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: kubernetes
+          driver-opts: |
+            namespace=gitea
+            qemu.install=true
+
+      - name: Available Platforms
+        run: echo ${{ steps.buildx.outputs.platforms }}
+
+      - name: Login to Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.REPOSITORY_HOST }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REPOSITORY_TOKEN }}
+
+      - name: Extract Metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+          images: ${{ vars.REPOSITORY_HOST }}/${{ gitea.repository }}
+
+      - name: Build and Push Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          file: ./Dockerfile
+
+      - name: Actions Ntfy
+        run: |
+          curl \
+            -H "Authorization: Bearer ${{ secrets.NTFY_CRED }}" \
+            -H "Title: Site-Profile Image Released to Gitea: ${{ steps.meta.outputs.tags }}" \
+            -H "Content-Type: text/plain" \
+            -d $'Repo: ${{ gitea.repository }}\nCommit: ${{ gitea.sha }}\nRef: ${{ gitea.ref }}\nStatus: ${{ job.status}}' \
+            ${{ secrets.NTFY_URL }}
--- a/.gitea/workflows/release-image-harbor.yml
+++ b/.gitea/workflows/release-image-harbor.yml
@@ -0,0 +1,67 @@
+name: release-image-harbor
+
+on:
+  push:
+    tags:
+      - 0.*
+
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Create Kubeconfig
+        run: |
+          mkdir $HOME/.kube
+          echo "${{ secrets.KUBECONFIG_BUILDX }}" > $HOME/.kube/config
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: kubernetes
+          driver-opts: |
+            namespace=gitea
+            qemu.install=true
+
+      - name: Available Platforms
+        run: echo ${{ steps.buildx.outputs.platforms }}
+
+      - name: Login to Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.REGISTRY_HOST }}
+          username: ${{ vars.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_SECRET }}
+
+      - name: Extract Metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+          images: ${{ vars.REGISTRY_HOST }}/images/site-profile
+
+      - name: Build and Push Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          file: ./Dockerfile
+
+      - name: Actions Ntfy
+        run: |
+          curl \
+            -H "Authorization: Bearer ${{ secrets.NTFY_CRED }}" \
+            -H "Title: Site-Profile Image Released to Gitea: ${{ steps.meta.outputs.tags }}" \
+            -H "Content-Type: text/plain" \
+            -d $'Repo: ${{ gitea.repository }}\nCommit: ${{ gitea.sha }}\nRef: ${{ gitea.ref }}\nStatus: ${{ job.status}}' \
+            ${{ secrets.NTFY_URL }}
--- a/.gitea/workflows/release-image.yml
+++ b/.gitea/workflows/release-image.yml
@@ -1,98 +0,0 @@
-name: release-image
-
-on:
-  push:
-    tags:
-      - 1.*
-
-  workflow_dispatch:
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Login to Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ vars.REPOSITORY_HOST }}
-          username: ${{ gitea.actor }}
-          password: ${{ secrets.REPOSITORY_TOKEN }}
-
-      - name: Login to Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ vars.REGISTRY_HOST }}
-          username: ${{ vars.REGISTRY_USER }}
-          password: ${{ secrets.REGISTRY_SECRET }}
-
-      - name: Create Kubeconfig
-        run: |
-          mkdir $HOME/.kube
-          echo "${{ secrets.KUBECONFIG_BUILDX }}" > $HOME/.kube/config
-
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: kubernetes
-          driver-opts: |
-            namespace=gitea
-            qemu.install=true
-          buildkitd-config-inline: |
-            [registry."docker.io"]
-              mirrors = ["harbor.alexlebens.net/proxy-hub.docker/"]
-
-      - name: Available Platforms
-        run: echo ${{ steps.buildx.outputs.platforms }}
-
-      - name: Extract Metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          tags: |
-            type=ref,event=branch
-            type=ref,event=tag
-          images: |
-            ${{ vars.REPOSITORY_HOST }}/${{ gitea.repository }}
-            ${{ vars.REGISTRY_HOST }}/images/site-profile
-
-      - name: Build and Push Image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          file: ./Dockerfile
-
-      - name: ntfy Success
-        uses: niniyas/ntfy-action@master
-        if: success()
-        with:
-          url: '${{ secrets.NTFY_URL }}'
-          topic: '${{ secrets.NTFY_TOPIC }}'
-          title: 'Gitea Action'
-          priority: 3
-          headers: '{"Authorization": "Bearer ${{ secrets.NTFY_CRED }}"}'
-          tags: action,successfully,completed
-          details: 'Site Profile build workflow has successfully completed!'
-          icon: 'https://cdn.jsdelivr.net/gh/selfhst/icons/png/gitea.png'
-
-      - name: ntfy Failed
-        uses: niniyas/ntfy-action@master
-        if: failure()
-        with:
-          url: '${{ secrets.NTFY_URL }}'
-          topic: '${{ secrets.NTFY_TOPIC }}'
-          title: 'Gitea Action'
-          priority: 4
-          headers: '{"Authorization": "Bearer ${{ secrets.NTFY_CRED }}"}'
-          tags: action,failed
-          details: 'Site Profile build workflow has failed!'
-          icon: 'https://cdn.jsdelivr.net/gh/selfhst/icons/png/gitea.png'
-          actions: '[{"action": "view", "label": "Open Gitea", "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/actions?workflow=release-image.yml", "clear": true}]'
-          image: true
--- a/.gitea/workflows/renovate.yaml
+++ b/.gitea/workflows/renovate.yaml
@@ -13,20 +13,18 @@ on:
 jobs:
  renovate:
    runs-on: ubuntu-latest
-    container: ghcr.io/renovatebot/renovate:41
+    container: ghcr.io/renovatebot/renovate:40
    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Renovate
-        run: renovate
+      - uses: actions/checkout@v4
+      - run: renovate
        env:
          RENOVATE_PLATFORM: gitea
-          RENOVATE_ENDPOINT: ${{ vars.INSTANCE_URL }}
-          RENOVATE_REPOSITORIES: alexlebens/site-profile
+          RENOVATE_AUTODISCOVER: true
+          RENOVATE_ONBOARDING: true
+          RENOVATE_ENDPOINT: http://gitea-http.gitea:3000
          RENOVATE_GIT_AUTHOR: Renovate Bot <renovate-bot@alexlebens.net>
-          LOG_LEVEL: info
+          LOG_LEVEL: debug
          RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
          RENOVATE_GIT_PRIVATE_KEY: ${{ secrets.RENOVATE_GIT_PRIVATE_KEY }}
          RENOVATE_GITHUB_COM_TOKEN: ${{ secrets.RENOVATE_GITHUB_COM_TOKEN }}
-          RENOVATE_REDIS_URL: ${{ vars.RENOVATE_REDIS_URL }}
+          RENOVATE_REDIS_URL: redis://gitea-renovate-valkey-primary.gitea:6379
--- a/.gitea/workflows/test-build.yaml
+++ b/.gitea/workflows/test-build.yaml
@@ -1,37 +0,0 @@
-name: test-build
-
-on:
-  push:
-    branches:
-      - main
-
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.x
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.17.1
-          cache: pnpm
-
-      - name: Install Dependencies
-        run: pnpm install
-
-      - name: Lint Code
-        run: pnpm lint
-
-      - name: Build Project
-        run: pnpm build
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ pnpm-debug.log*
 # ide
 .vscode/
 site-profile.code-workspace
+.pre-commit-config.yaml
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
 engine-strict=true
 save-exact=true
+
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,17 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/11
+++ b/11
@@ -1,8 +1,7 @@
-ARG REGISTRY=docker.io
-FROM ${REGISTRY}/node:22.17.1-alpine3.22 AS base
+FROM node:22.16.0-alpine3.22 AS base

-LABEL version="1.0.1"
-LABEL description="Astro based personal website"
+LABEL version="0.7.0"
+LABEL description="Astro based website to use as a personal site"

 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
@@ -21,7 +20,6 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 FROM build-deps AS build
 COPY . .
 RUN pnpm run build
-RUN pnpm prune --prod

 FROM base AS runtime
 COPY --from=prod-deps /app/node_modules /app/node_modules
@@ -31,6 +29,5 @@ ENV HOST=0.0.0.0
 ENV SITE_URL=https://www.alexlebens.dev
 ENV DIRECTUS_URL=https://directus.alexlebens.dev
 ENV PORT=4321
-
 EXPOSE $PORT
-CMD ["node", "./dist/server/entry.mjs"]
+CMD node ./dist/server/entry.mjs
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -2,8 +2,6 @@

 Copyright (c) 2025 Lê Vĩnh Khang

-Copyright (c) 2025 Alex Lebens
-
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Personal site used for information about myself and blog.

 ### Requirements

- Node.js 22+ and pnpm
+- Node.js 16+ and pnpm/yarn

 ### Installation

@@ -30,18 +30,22 @@ Personal site used for information about myself and blog.
 git clone https://gitea.alexlebens.dev/alexlebens/site-profile

 # Navigate to project directory
-cd site-profile
+cd astro-blog

 # Install dependencies
 pnpm install

+# Create .env file from template
+cp .env.example .env
+
+# Edit .env with your information
 ```

 ### Development

 ```bash
 # Start development server
-pnpm dev
+pnpm run dev

 # Open browser at http://localhost:4321
 ```
@@ -50,10 +54,10 @@ pnpm dev

 ```bash
 # Create production build
-pnpm build
+pnpm run build

 # Preview production build
-pnpm preview
+pnpm run preview
 ```

 ## Project Structure
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,9 +1,7 @@
 import { defineConfig } from 'astro/config';
-import tailwindcss from '@tailwindcss/vite';
+import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';

-import node from '@astrojs/node';
-
 const getSiteURL = () => {
  if (process.env.SITE_URL) {
    return `https://${process.env.SITE_URL}`;
@@ -13,17 +11,5 @@ const getSiteURL = () => {

 export default defineConfig({
  site: getSiteURL(),
-  integrations: [tailwindcss(), react()],
-
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-
-  vite: {
-    plugins: [tailwindcss()],
-  },
-
-  adapter: node({
-    mode: 'standalone',
-  }),
+  integrations: [tailwind(), react()],
 });
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,11 +0,0 @@
-import eslintPluginAstro from 'eslint-plugin-astro';
-import eslintConfigPrettier from "eslint-config-prettier/flat";
-
-export default [
-  ...eslintPluginAstro.configs.recommended,
-  eslintConfigPrettier,
-  {
-    rules: {
-    }
-  }
-];
--- a/lib/directus.ts
+++ b/lib/directus.ts
@@ -9,7 +9,6 @@ type Global = {
  email: string;
  portrait: string;
  portrait_alt: string;
-  logo: string;
  about: string;
 };

@@ -23,7 +22,6 @@ type About = {
 type Links = {
  github: string;
  linkedin: string;
-  gitea: string;
 };

 type Skill = {
--- a/package.json
+++ b/package.json
@@ -1,15 +1,13 @@
 {
  "name": "site-profile",
  "type": "module",
-  "version": "1.0.1",
+  "version": "0.7.0",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
-    "format": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\"",
-    "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,astro}\"",
-    "lint:fix": "eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"",
+    "format": "prettier . --write",
    "astro": "astro"
  },
  "dependencies": {
@@ -17,27 +15,23 @@
    "@astrojs/node": "^9.2.2",
    "@astrojs/react": "^4.3.0",
    "@astrojs/rss": "^4.0.12",
-    "@directus/sdk": "^20.0.0",
-    "@tailwindcss/postcss": "^4.1.8",
-    "@tailwindcss/vite": "^4.1.8",
-    "astro": "^5.10.1",
+    "@astrojs/sitemap": "^3.4.1",
+    "@astrojs/tailwind": "^6.0.2",
+    "@directus/sdk": "^19.1.0",
+    "astro": "^5.9.1",
    "framer-motion": "^12.16.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-hotkeys-hook": "^5.1.0",
    "react-icons": "^5.5.0",
+    "reading-time": "^1.5.0",
    "sanitize-html": "^2.17.0",
-    "tailwindcss": "^4.1.8"
+    "tailwindcss": "^4.0.0"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.16",
-    "@typescript-eslint/parser": "8.38.0",
-    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-astro": "1.3.1",
    "prettier": "^3.5.3",
-    "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.12",
-    "typescript-eslint": "8.38.0"
+    "prettier-plugin-astro": "^0.14.0",
+    "prettier-plugin-tailwindcss": "^0.6.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,13 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-preset-env': {
+      features: {
+        'nesting-rules': false,
+      },
+    },
  },
 };

--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -1,23 +0,0 @@
-/** @type {import("prettier").Config} */
-const config = {
-  printWidth: 100,
-  semi: true,
-  singleQuote: true,
-  tabWidth: 2,
-  trailingComma: 'es5',
-  useTabs: false,
-  plugins: [
-    'prettier-plugin-astro',
-    'prettier-plugin-tailwindcss',
-  ],
-  overrides: [
-    {
-      files: '*.astro',
-      options: {
-        parser: 'astro',
-      },
-    },
-  ],
-};
-
-export default config;
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/renovate.json
+++ b/renovate.json
@@ -1,40 +1,10 @@
 {
-    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-    "extends": [
-        "config:recommended",
-        "mergeConfidence:all-badges",
-        ":rebaseStalePrs"
-    ],
-    "timezone": "US/Central",
-    "labels": [],
-    "prHourlyLimit": 0,
-    "prConcurrentLimit": 0,
-    "packageRules": [
-        {
-            "description": "Label dependency",
-            "matchDatasources": [
-                "npm"
-            ],
-            "addLabels": [
-                "dependency"
-            ],
-            "automerge": false,
-            "minimumReleaseAge": "1 days"
-        },
-        {
-            "description": "Automerge dependency patch",
-            "matchDatasources": [
-                "npm"
-            ],
-            "matchUpdateTypes": [
-                "patch"
-            ],
-            "addLabels": [
-                "dependency",
-                "automerge"
-            ],
-            "automerge": true,
-            "minimumReleaseAge": "1 days"
-        }
-    ]
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended", "mergeConfidence:all-badges", ":rebaseStalePrs"],
+  "timezone": "US/Central",
+  "schedule": ["* */1 * * *"],
+  "labels": [],
+  "prHourlyLimit": 0,
+  "prConcurrentLimit": 0,
+  "packageRules": []
 }
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -1,21 +1,21 @@
 ---
-
+// Background.astro - Dot pattern and ambient glow background with smooth theme transitions
 ---

 <div class="theme-transition-all fixed inset-0 -z-10 overflow-hidden">
  <!-- Dot pattern background -->
  <div
-    class="bg-grid-pattern theme-transition-bg absolute inset-0 [mask-image:radial-gradient(white,transparent_85%)] bg-[center_top_-1px]"
+    class="bg-grid-pattern theme-transition-bg absolute inset-0 bg-[center_top_-1px] [mask-image:radial-gradient(white,transparent_85%)]"
  >
  </div>

  <!-- Ambient glow effects -->
  <div
-    class="animate-glow theme-transition-bg absolute top-1/4 left-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
+    class="animate-glow theme-transition-bg absolute left-1/4 top-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
  >
  </div>
  <div
-    class="animate-glow animation-delay-1000 theme-transition-bg absolute right-1/4 bottom-1/3 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
+    class="animate-glow animation-delay-1000 theme-transition-bg absolute bottom-1/3 right-1/4 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
  >
  </div>

@@ -29,19 +29,24 @@

 <script>
  // Theme transition script
-  document.addEventListener('astro:page-load', () => {
+  document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.querySelector('[data-theme-toggle]');
    const overlay = document.getElementById('theme-transition-overlay');

    if (themeToggle && overlay) {
      themeToggle.addEventListener('click', () => {
+        // Add transitioning class to optimize performance
        document.documentElement.classList.add('theme-transitioning');

+        // Fade in overlay
        overlay.style.opacity = '0.15';
        overlay.style.transition = 'opacity 0.3s ease';

        setTimeout(() => {
+          // Fade out overlay
          overlay.style.opacity = '0';
+
+          // Remove transitioning class after animation completes
          setTimeout(() => {
            document.documentElement.classList.remove('theme-transitioning');
          }, 700);
@@ -55,13 +60,13 @@
  /* Grid pattern for dots */
  .bg-grid-pattern {
    background-size: 24px 24px;
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 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.15) 1px, transparent 1px);
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  }

  /* Ambient glow animations */
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,10 +8,10 @@ const links = await directus.request(readSingleton('links'));
 const currentYear = new Date().getFullYear();

 const navLinks = [
-  { text: 'Home', href: '/' },
-  { text: 'Blog', href: '/blog' },
  { text: 'About', href: '/about' },
-  { text: 'RSS', href: '/rss' },
+  { text: 'Blog', href: '/blog' },
+  { text: 'Topics', href: '/topics' },
+  { text: 'RSS', href: '/rss.xml' },
 ];

 const socialLinks = [
@@ -20,11 +20,6 @@ const socialLinks = [
    href: links.github,
    icon: `<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>`,
  },
-  {
-    name: 'Gitea',
-    href: links.gitea,
-    icon: `<path d="M7 5C7 3.89543 7.89543 3 9 3C10.1046 3 11 3.89543 11 5C11 5.34168 10.9143 5.66336 10.7633 5.9447H11.3438C13.5529 5.9447 15.3438 7.73556 15.3438 9.9447V11.2244C15.9301 11.5731 16.323 12.213 16.323 12.9447C16.323 14.0493 15.4276 14.9447 14.323 14.9447C13.2184 14.9447 12.323 14.0493 12.323 12.9447C12.323 12.1959 12.7345 11.5432 13.3438 11.2004V9.9447C13.3438 8.84013 12.4483 7.9447 11.3438 7.9447H10V17.2676C10.5978 17.6134 11 18.2597 11 19C11 20.1046 10.1046 21 9 21C7.89543 21 7 20.1046 7 19C7 18.2597 7.4022 17.6134 8 17.2676V6.73244C7.4022 6.38663 7 5.74028 7 5Z" fill="currentColor"/>`,
-  },
  {
    name: 'LinkedIn',
    href: links.linkedin,
@@ -35,11 +30,10 @@ const socialLinks = [

 <footer
  class="theme-transition-all relative mt-20 overflow-hidden border-t border-zinc-100 dark:border-zinc-800"
-  transition:animate="none"
 >
  <div class="pointer-events-none absolute inset-0 overflow-hidden">
    <div
-      class="theme-transition-all animate-float-slow absolute -top-40 -right-40 h-80 w-80 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/30"
+      class="theme-transition-all animate-float-slow absolute -right-40 -top-40 h-80 w-80 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/30"
    >
    </div>
    <div
@@ -47,32 +41,35 @@ const socialLinks = [
    >
    </div>
    <div
-      class="theme-transition-all animate-float-slow animation-delay-1000 absolute top-20 left-1/4 h-40 w-40 rounded-full bg-zinc-200/50 opacity-30 blur-2xl dark:bg-zinc-700/20"
+      class="theme-transition-all animate-float-slow animation-delay-1000 absolute left-1/4 top-20 h-40 w-40 rounded-full bg-zinc-200/50 opacity-30 blur-2xl dark:bg-zinc-700/20"
    >
    </div>
  </div>

-  <div class="relative px-4 pt-16 pb-12 sm:px-6">
+  <div class="relative px-4 pb-12 pt-16 sm:px-6">
    <div class="mx-auto max-w-4xl">
+      <!-- Main footer content -->
      <div class="grid grid-cols-1 gap-10 md:grid-cols-12">
        <!-- Brand section -->
        <div class="col-span-1 md:col-span-3">
          <a href="/" class="group inline-block">
            <div class="flex items-center">
-              <div class="mx-auto aspect-square overflow-hidden rounded-lg">
-                <img
-                  src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
-                  alt="logo"
-                  class="max-h-[40px] max-w-[40px] object-cover"
-                  loading="eager"
-                />
+              <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"
+              >
+                <span
+                  class="theme-transition-all text-xl font-bold text-white transition-transform duration-300 group-hover:scale-110 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>
-
              <span
                class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
+                >Blog</span
              >
-                Blog
-              </span>
            </div>
          </a>

@@ -90,7 +87,7 @@ const socialLinks = [
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
-                  class="hover group relative flex h-10 w-10 transform items-center justify-center rounded-full bg-zinc-100 text-zinc-500 transition-all duration-300 hover:-translate-y-1 hover:text-zinc-900 hover:ring-2 hover:ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-100 dark:hover:ring-zinc-700"
+                  class="group relative flex h-10 w-10 transform items-center justify-center rounded-full bg-zinc-100 text-zinc-500 transition-all duration-300 hover:-translate-y-1 hover:text-zinc-900 hover:ring-2 hover:ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-100 dark:hover:ring-zinc-700"
                  aria-label={social.name}
                >
                  <span class="absolute inset-0 rounded-full bg-gradient-to-br from-zinc-200 to-zinc-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-700 dark:to-zinc-600" />
@@ -111,7 +108,7 @@ const socialLinks = [
        <!-- Quick links -->
        <div class="col-span-1 md:col-span-3">
          <h3
-            class="theme-transition-color after:bg-turquoise dark:after:bg-turquoise relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-zinc-100"
+            class="theme-transition-color relative inline-block pb-2 text-sm font-semibold uppercase tracking-wider text-zinc-900 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
          >
            Navigation
          </h3>
@@ -125,6 +122,7 @@ 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>
@@ -132,116 +130,115 @@ const socialLinks = [
            }
          </ul>
        </div>
-      </div>

-      <!-- Bottom section -->
-      <div class="theme-transition-all mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800">
-        <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
-          <p class="theme-transition-color text-sm text-zinc-600 dark:text-zinc-400">
-            &copy; {currentYear} All rights reserved.
-          </p>
+        <!-- Bottom section -->
+        <div class="theme-transition-all mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800">
+          <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+            <p class="theme-transition-color text-sm text-zinc-600 dark:text-zinc-400">
+              &copy; {currentYear} All rights reserved.
+            </p>

-          <div class="flex items-center space-x-2">
-            <span class="theme-transition-color text-xs text-zinc-500 dark:text-zinc-400"
-              >Built with
-            </span>
-            <a
-              href="https://astro.build"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="group inline-flex items-center text-xs text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-            >
-              <svg
-                class="mr-1 h-4 w-4 text-[#FF5D01] group-hover:animate-pulse"
-                viewBox="0 0 36 36"
-                fill="none"
+            <div class="flex items-center space-x-2">
+              <span class="theme-transition-color text-xs text-zinc-500 dark:text-zinc-400"
+                >Built with</span
              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
-                  fill="currentColor"></path>
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
-                  fill="currentColor"></path>
-              </svg>
-              <span class="relative">
-                Astro
-                <span
-                  class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
+              <a
+                href="https://astro.build"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="group inline-flex items-center text-xs text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+              >
+                <svg
+                  class="mr-1 h-4 w-4 text-[#FF5D01] group-hover:animate-pulse"
+                  viewBox="0 0 36 36"
+                  fill="none"
                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
+                    fill="currentColor"></path>
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
+                    fill="currentColor"></path>
+                </svg>
+                <span class="relative">
+                  Astro
+                  <span
+                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
+                  ></span>
                </span>
-              </span>
-            </a>
+              </a>
+            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
+
+  <style>
+    .theme-transition-all {
+      transition-property: background-color, border-color, color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 300ms;
+    }
+
+    .theme-transition-color {
+      transition-property: color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 300ms;
+    }
+
+    .theme-transition-bg {
+      transition-property: background-color;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 300ms;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.7;
+        transform: scale(1.2);
+      }
+    }
+
+    @keyframes float-slow {
+      0%,
+      100% {
+        transform: translateY(0) translateX(0);
+      }
+      25% {
+        transform: translateY(-10px) translateX(10px);
+      }
+      50% {
+        transform: translateY(-5px) translateX(-5px);
+      }
+      75% {
+        transform: translateY(10px) translateX(5px);
+      }
+    }
+
+    .animate-pulse {
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .animate-float-slow {
+      animation: float-slow 20s ease-in-out infinite;
+    }
+
+    .animation-delay-1000 {
+      animation-delay: 1s;
+    }
+
+    .animation-delay-2000 {
+      animation-delay: 2s;
+    }
+  </style>
 </footer>
-
-<style>
-  .theme-transition-all {
-    transition-property: background-color, border-color, color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-  }
-
-  .theme-transition-color {
-    transition-property: color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-  }
-
-  .theme-transition-bg {
-    transition-property: background-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-  }
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.7;
-      transform: scale(1.2);
-    }
-  }
-
-  @keyframes float-slow {
-    0%,
-    100% {
-      transform: translateY(0) translateX(0);
-    }
-    25% {
-      transform: translateY(-10px) translateX(10px);
-    }
-    50% {
-      transform: translateY(-5px) translateX(-5px);
-    }
-    75% {
-      transform: translateY(10px) translateX(5px);
-    }
-  }
-
-  .animate-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  .animate-float-slow {
-    animation: float-slow 20s ease-in-out infinite;
-  }
-
-  .animation-delay-1000 {
-    animation-delay: 1s;
-  }
-
-  .animation-delay-2000 {
-    animation-delay: 2s;
-  }
-</style>
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -10,22 +10,7 @@ const parsedDate = typeof date === 'string' ? new Date(date) : date;

 {
  parsedDate && (
-    <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>
+    <time datetime={parsedDate.toISOString()}>
      {parsedDate.toLocaleDateString('en-us', {
        year: 'numeric',
        month: 'long',
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -5,13 +5,12 @@ 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' },
 ];

@@ -20,24 +19,11 @@ const currentPath = pathname.slice(1);
 ---

 <header
-  class="fixed top-0 right-0 left-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
-  transition:animate="none"
+  class="fixed left-0 right-0 top-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
 >
  <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
    <!-- Logo -->
-    <a
-      href="/"
-      class="from-midnight to-turquoise relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br text-xl shadow-lg transition-transform"
-    >
-      <div class="mx-auto aspect-square overflow-hidden rounded-lg">
-        <img
-          src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
-          alt="logo"
-          class="max-h-[40px] max-w-[40px] object-cover"
-          loading="eager"
-        />
-      </div>
-    </a>
+    <a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">{global.initals}</a>

    <!-- Desktop navigation -->
    <nav class="hidden items-center space-x-6 sm:flex">
@@ -49,8 +35,8 @@ const currentPath = pathname.slice(1);
              href={item.href}
              class={`text-sm font-medium ${
                isActive
-                  ? 'text-zinc-900 dark:text-zinc-100'
-                  : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
+                  ? 'text-zinc-900 dark:text-white'
+                  : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
              }`}
            >
              {item.text}
@@ -86,7 +72,7 @@ const currentPath = pathname.slice(1);
  class="pointer-events-none fixed inset-0 z-50 flex flex-col bg-white opacity-0 transition-all duration-300 ease-in-out dark:bg-zinc-900"
 >
  <div class="flex items-center justify-between border-b border-zinc-100 p-4 dark:border-zinc-800">
-    <a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">{global.initals}</a>
+    <a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">JD</a>
    <button
      id="close-menu-button"
      class="rounded-md p-2 text-zinc-900 transition-colors hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800"
@@ -114,8 +100,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-zinc-100'
-                : 'text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-100'
+                ? 'text-zinc-900 dark:text-white'
+                : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
            }`}
            style={`transition-delay: ${index * 0.05}s;`}
          >
@@ -135,7 +121,7 @@ const currentPath = pathname.slice(1);

 <script>
  // Mobile menu toggle with animations
-  document.addEventListener('astro:page-load', () => {
+  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const closeMenuButton = document.getElementById('close-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
@@ -214,9 +200,9 @@ const currentPath = pathname.slice(1);

      // Add shadow on scroll
      if (currentScrollY > 10) {
-        header.classList.add('shadow-xs');
+        header.classList.add('shadow-sm');
      } else {
-        header.classList.remove('shadow-xs');
+        header.classList.remove('shadow-sm');
      }

      // Update last scroll position
@@ -254,6 +240,6 @@ const currentPath = pathname.slice(1);
  /* Mobile menu transition */
  #mobile-menu {
    transition: opacity 0.3s ease;
-    backdrop-filter: blur-sm(4px);
+    backdrop-filter: blur(4px);
  }
 </style>
--- a/src/components/ShareButtons.astro
+++ b/src/components/ShareButtons.astro
@@ -17,7 +17,7 @@ const encodedUrl = encodeURIComponent(url);
      href={`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
      target="_blank"
      rel="noopener noreferrer"
-      class="hover rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on Twitter"
    >
      <svg
@@ -29,18 +29,16 @@ const encodedUrl = encodeURIComponent(url);
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
-      >
-        <path
+        ><path
          d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
-        >
-        </path>
-      </svg>
+        ></path></svg
+      >
    </a>
    <a
      href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
      target="_blank"
      rel="noopener noreferrer"
-      class="hover rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on Facebook"
    >
      <svg
@@ -52,15 +50,14 @@ const encodedUrl = encodeURIComponent(url);
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
+        ><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg
      >
-        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"> </path>
-      </svg>
    </a>
    <a
      href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`}
      target="_blank"
      rel="noopener noreferrer"
-      class="hover rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on LinkedIn"
    >
      <svg
@@ -72,12 +69,10 @@ const encodedUrl = encodeURIComponent(url);
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
+        ><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
+        ></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"
+        ></circle></svg
      >
-        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
-        </path>
-        <rect x="2" y="9" width="4" height="12"></rect>
-        <circle cx="4" cy="4" r="2"></circle>
-      </svg>
    </a>
    <button
      id="copy-link-button"
@@ -94,16 +89,87 @@ const encodedUrl = encodeURIComponent(url);
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
+        ><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
+          d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg
      >
-        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"> </path>
-        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"> </path>
-      </svg>
      <span
        id="copy-tooltip"
-        class="absolute -top-8 left-1/2 -translate-x-1/2 transform rounded-sm bg-zinc-800 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
+        class="absolute -top-8 left-1/2 -translate-x-1/2 transform whitespace-nowrap rounded bg-zinc-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
      >
        Copied!
      </span>
    </button>
  </div>
 </div>
+
+<script>
+  // Function to handle copy link button
+  function setupCopyLinkButton() {
+    const copyButtons = document.querySelectorAll('#copy-link-button');
+
+    copyButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        // Get the current URL
+        const url = window.location.href;
+
+        // Copy to clipboard
+        navigator.clipboard
+          .writeText(url)
+          .then(() => {
+            // Show tooltip
+            const tooltip = button.querySelector('#copy-tooltip');
+            if (tooltip) {
+              tooltip.classList.add('opacity-100');
+
+              // Hide tooltip after 2 seconds
+              setTimeout(() => {
+                tooltip.classList.remove('opacity-100');
+              }, 2000);
+            }
+          })
+          .catch((err) => {
+            console.error('Failed to copy: ', err);
+          });
+      });
+    });
+  }
+
+  // Set up the copy link button when the DOM is loaded
+  document.addEventListener('DOMContentLoaded', setupCopyLinkButton);
+
+  // Also set up when the page content is updated via SPA navigation
+  document.addEventListener('astro:page-load', setupCopyLinkButton);
+
+  // For compatibility with the custom page transition system
+  document.addEventListener('page-transition-complete', setupCopyLinkButton);
+
+  // Handle SPA transitions for share links
+  function setupSpaTransitions() {
+    // Get all share links
+    const shareLinks = document.querySelectorAll('a[target="_blank"][rel="noopener noreferrer"]');
+
+    // Make sure external share links don't trigger page transitions
+    shareLinks.forEach((link) => {
+      link.setAttribute('data-spa-external', 'true');
+    });
+  }
+
+  // Initialize SPA transitions
+  document.addEventListener('DOMContentLoaded', setupSpaTransitions);
+  document.addEventListener('astro:page-load', setupSpaTransitions);
+  document.addEventListener('page-transition-complete', setupSpaTransitions);
+
+  // Dispatch custom event when share action is completed
+  function notifyShareComplete() {
+    document.dispatchEvent(new CustomEvent('share-action-complete'));
+  }
+
+  // Add analytics tracking for share actions if needed
+  function trackShareAction(platform) {
+    // You can implement analytics tracking here
+    console.log(`Shared on ${platform}`);
+
+    // Notify other components that share action is complete
+    notifyShareComplete();
+  }
+</script>
--- a/src/components/TagList.astro
+++ b/src/components/TagList.astro
@@ -8,21 +8,16 @@ const { tags = [], class: className = '' } = Astro.props;
 ---

 {
-  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) => (
+  tags.length > 0 && (
+    <div class={`mt-3 flex flex-wrap gap-2 ${className}`}>
+      {tags.map((tag) => (
        <a
-          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`}
+          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"
        >
-          #{postTag}
+          {tag}
        </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-900 dark:text-zinc-400">
-          +{tags.length - 2}
-        </span>
-      )}
    </div>
  )
 }
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -5,14 +5,14 @@
 <button
  id="theme-toggle"
  data-theme-toggle
-  class="group hover:bg-desert/50 dark:hover:bg-midnight/50 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:focus:ring-zinc-700"
+  class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-300 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700 sm:p-2"
  aria-label="Toggle dark mode"
 >
  <div class="relative z-10 flex h-5 w-5 items-center justify-center">
    <!-- Sun icon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
-      class="icon-light absolute h-5 w-5 scale-100 rotate-0 text-zinc-800 transition-all duration-500 dark:scale-0 dark:-rotate-90 dark:text-zinc-200"
+      class="icon-light absolute h-5 w-5 rotate-0 scale-100 text-zinc-800 transition-all duration-500 dark:-rotate-90 dark:scale-0 dark:text-zinc-200"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
@@ -29,7 +29,7 @@
    <!-- Moon icon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
-      class="icon-dark absolute h-5 w-5 scale-0 rotate-90 text-zinc-800 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-zinc-200"
+      class="icon-dark absolute h-5 w-5 rotate-90 scale-0 text-zinc-800 transition-all duration-500 dark:rotate-0 dark:scale-100 dark:text-zinc-200"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
@@ -47,25 +47,24 @@
  ></span>
 </button>

-<script is:inline>
-  // Use a function to persist theme when using SPA transitions
-  // https://docs.astro.build/en/guides/view-transitions/#script-re-execution
-  function applyTheme() {
-    localStorage.theme === 'dark'
-      ? document.documentElement.classList.add('dark')
-      : document.documentElement.classList.remove('dark');
-  }
-
-  document.addEventListener('astro:after-swap', applyTheme);
-
-  applyTheme();
-</script>
-
 <script>
  // Use a function to handle theme toggle to ensure it can be called from anywhere
  function setupThemeToggle() {
    const themeToggles = document.querySelectorAll('[data-theme-toggle]');

+    // Check for dark mode preference at the system level
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    // Check for saved theme preference or use the system preference
+    const currentTheme = localStorage.getItem('theme') || (prefersDarkMode ? 'dark' : 'light');
+
+    // Apply the theme on initial load
+    if (currentTheme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+
    // Create theme switch overlay element if it doesn't exist
    if (!document.querySelector('.theme-switch-overlay')) {
      const overlay = document.createElement('div');
@@ -185,7 +184,7 @@
  }

  // Run setup on load
-  document.addEventListener('astro:page-load', setupThemeToggle);
+  document.addEventListener('DOMContentLoaded', setupThemeToggle);

  // Also run on page visibility change to ensure theme is consistent
  document.addEventListener('visibilitychange', () => {
@@ -275,12 +274,12 @@
    }

    #theme-toggle:hover .icon-light:not(.dark .icon-light) {
-      filter: drop-shadow-sm(0 0 2px rgba(251, 191, 36, 0.6));
+      filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.6));
      transform: scale(1.1) rotate(15deg);
    }

    #theme-toggle:hover .icon-dark:not(:not(.dark) .icon-dark) {
-      filter: drop-shadow-sm(0 0 2px rgba(129, 140, 248, 0.6));
+      filter: drop-shadow(0 0 2px rgba(129, 140, 248, 0.6));
      transform: scale(1.1) rotate(-15deg);
    }
  }
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -0,0 +1,17 @@
+---
+import Layout from './Layout.astro';
+
+import directus from '../../lib/directus';
+import { readSingleton } from '@directus/sdk';
+
+const global = await directus.request(readSingleton('global'));
+
+export interface Props {
+  title: string;
+  description?: string;
+}
+---
+
+<Layout title={global.title} description={global.description}>
+  <slot />
+</Layout>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -12,6 +12,48 @@ export interface Props {
 }
 ---

-<Layout title={global.title} description={global.title}>
+<Layout title={global.title} description={global.description}>
  <slot />
 </Layout>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (themeToggle) {
+      themeToggle.addEventListener('click', () => {
+        document.documentElement.classList.add('theme-switching');
+
+        const rippleElements = document.querySelectorAll('.theme-ripple');
+        rippleElements.forEach((el) => {
+          el.classList.add('ripple-active');
+          setTimeout(() => {
+            el.classList.remove('ripple-active');
+          }, 600);
+        });
+
+        const event = new CustomEvent('themeChange', {
+          detail: {
+            theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
+          },
+        });
+        document.dispatchEvent(event);
+
+        setTimeout(() => {
+          document.documentElement.classList.remove('theme-switching');
+        }, 600);
+      });
+    }
+
+    const socialLinks = document.querySelectorAll('.social-link');
+    socialLinks.forEach((link) => {
+      link.addEventListener('mouseenter', () => {
+        link.classList.add('hover-active');
+      });
+
+      link.addEventListener('mouseleave', () => {
+        link.classList.remove('hover-active');
+      });
+    });
+  });
+</script>
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -18,6 +18,7 @@ export async function getStaticPaths() {
 }

 const post = Astro.props;
+const published_date: string = post.published_date.toLocaleString();

 let canonicalURL;
 try {
@@ -29,31 +30,19 @@ try {
 ---

 <Layout title={post.title} description={post.description}>
-  <article class="prose prose-zinc dark:prose-invert lg:prose-lg mx-auto max-w-4xl">
-    <div class="hero-text mb-12">
+  <article class="prose prose-zinc mx-auto max-w-4xl dark:prose-invert lg:prose-lg">
+    <div class="mb-12">
      <h1
-        class="mb-4 text-4xl font-bold tracking-tight text-zinc-900 sm:text-5xl dark:text-zinc-100"
+        class="mb-4 text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl"
      >
        {post.title}
      </h1>

-      <p
-        class="mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400"
-      >
-        <!-- {post.description} -->
-      </p>
-
-      <div
-        class="hero-text mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400"
-      >
-        <FormattedDate date={post.published_date} />
+      <div class="mb-6 flex items-center gap-x-4 text-sm text-zinc-500 dark:text-zinc-400">
+        <FormattedDate date={published_date} />
      </div>

-      <div
-        class="hero-text mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400"
-      >
-        <TagList tags={post.tags} />
-      </div>
+      <TagList tags={post.tags} class="mt-2" />
    </div>

    <!-- Hero image -->
@@ -81,12 +70,13 @@ try {
    <div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800">
      <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
        <ShareButtons url={canonicalURL.toString()} title={post.title} />
+        <!-- Convert URL to string -->
      </div>
    </div>

    {
      post.updated_date && (
-        <div class="mt-8 text-sm text-zinc-500 italic dark:text-zinc-400">
+        <div class="mt-8 text-sm italic text-zinc-500 dark:text-zinc-400">
          Last updated on <FormattedDate date={post.updated_date} />
        </div>
      )
@@ -97,60 +87,285 @@ try {
 </Layout>

 <script>
-  document.addEventListener('astro:page-load', () => {
-    // Add smooth reveal animations for content after loading
-    const animateContent = () => {
-      // Animate hero section
-      const heroElements = document.querySelectorAll(
-        '.hero-text div, .hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p, .hero-text + a'
+  //  Blog post SPA transitions
+  function setupBlogPostTransitions() {
+    // Animate article entrance
+    const article = document.querySelector('article');
+    if (article) {
+      article.classList.add('article-entering');
+
+      // Remove class after animation completes
+      setTimeout(() => {
+        article.classList.remove('article-entering');
+      }, 1000);
+    }
+
+    // Ensure consistent code block styling
+    function updateCodeBlockStyles() {
+      document.querySelectorAll('pre').forEach((pre) => {
+        // Force the background color with !important for both light and dark mode
+        pre.setAttribute('style', 'background-color: #1e293b !important');
+
+        // Also apply to any nested code elements
+        const codeElements = pre.querySelectorAll('code');
+        codeElements.forEach((code) => {
+          code.setAttribute(
+            'style',
+            'background-color: transparent !important; color: #e5e7eb !important;'
+          );
+        });
+      });
+    }
+
+    // Initial application
+    updateCodeBlockStyles();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(() => {
+      updateCodeBlockStyles();
+    });
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+    // Also run on any content changes that might add new code blocks
+    const contentObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.addedNodes.length) {
+          updateCodeBlockStyles();
+          break;
+        }
+      }
+    });
+
+    contentObserver.observe(document.body, { childList: true, subtree: true });
+
+    // Clean up observers when navigating away
+    document.addEventListener('spa-navigation-start', () => {
+      observer.disconnect();
+      contentObserver.disconnect();
+    });
+
+    // Remove the parallax effect for hero image
+
+    // Handle prev/next navigation links
+    const navLinks = document.querySelectorAll('.blog-nav-link');
+    navLinks.forEach((link) => {
+      if (!link.hasAttribute('data-spa-handled')) {
+        link.setAttribute('data-spa-handled', 'true');
+
+        link.addEventListener('mouseenter', () => {
+          link.classList.add('nav-link-hover');
+        });
+
+        link.addEventListener('mouseleave', () => {
+          link.classList.remove('nav-link-hover');
+        });
+      }
+    });
+
+    // Animate headings when they enter the viewport
+    const animateHeadings = () => {
+      const headings = document.querySelectorAll('article h2, article h3');
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              entry.target.classList.add('heading-visible');
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        {
+          threshold: 0.2,
+          rootMargin: '0px 0px -100px 0px',
+        }
      );
-      heroElements.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
+
+      headings.forEach((heading) => {
+        heading.classList.add('heading-animated');
+        observer.observe(heading);
      });

-      // Animate posts with staggered delay
-      const articles = document.querySelectorAll('article.group');
-      articles.forEach((article, index) => {
-        setTimeout(
-          () => {
-            article.classList.add('animate-reveal');
-          },
-          500 + index * 150
-        );
-      });
+      return observer;
    };

-    animateContent();
-  });
+    // Initialize heading animations
+    const headingObserver = animateHeadings();
+
+    // Enhance code blocks with syntax highlighting and copy button
+    function enhanceCodeBlocks() {
+      const codeBlocks = document.querySelectorAll('pre code');
+
+      codeBlocks.forEach((codeBlock) => {
+        // Skip if already processed
+        if (codeBlock.parentElement.classList.contains('enhanced')) return;
+
+        // Mark as enhanced
+        codeBlock.parentElement.classList.add('enhanced');
+
+        // Create copy button
+        const copyButton = document.createElement('button');
+        copyButton.className = 'copy-code-button';
+        copyButton.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+          </svg>
+        `;
+
+        // Add copy functionality
+        copyButton.addEventListener('click', () => {
+          const code = codeBlock.textContent;
+          navigator.clipboard.writeText(code);
+
+          // Show copied feedback
+          copyButton.innerHTML = `
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          `;
+
+          setTimeout(() => {
+            copyButton.innerHTML = `
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+              </svg>
+            `;
+          }, 2000);
+        });
+
+        // Add copy button to pre element
+        codeBlock.parentElement.appendChild(copyButton);
+
+        // Fix line numbers implementation
+        const codeText = codeBlock.textContent;
+        const lines = codeText.split('\n');
+
+        const lineNumbers = document.createElement('div');
+        lineNumbers.className = 'line-numbers';
+
+        // Always include all lines, including empty ones
+        for (let i = 0; i < lines.length; i++) {
+          const lineNumber = document.createElement('span');
+          lineNumber.textContent = i + 1;
+          lineNumbers.appendChild(lineNumber);
+        }
+
+        codeBlock.parentElement.classList.add('with-line-numbers');
+        codeBlock.parentElement.insertBefore(lineNumbers, codeBlock);
+
+        // Fix language label detection and display
+        const className = codeBlock.className;
+        const languageMatch = className.match(/language-(\w+)/);
+
+        if (languageMatch && languageMatch[1]) {
+          const language = languageMatch[1];
+
+          // Add language label at top right
+          const languageLabel = document.createElement('div');
+          languageLabel.className = 'language-label';
+          languageLabel.textContent = language;
+          codeBlock.parentElement.appendChild(languageLabel);
+
+          // Add language badge at bottom right with markdown syntax
+          const languageBadge = document.createElement('div');
+          languageBadge.className = 'language-badge';
+          languageBadge.textContent = `\`\`\`${language}`;
+          languageBadge.style.position = 'absolute';
+          languageBadge.style.bottom = '0.5rem';
+          languageBadge.style.right = '0.5rem';
+          languageBadge.style.fontSize = '0.7rem';
+          languageBadge.style.padding = '0.1rem 0.3rem';
+          languageBadge.style.backgroundColor = 'rgba(75, 85, 99, 0.7)';
+          languageBadge.style.color = '#e5e7eb';
+          languageBadge.style.borderRadius = '0.25rem';
+          languageBadge.style.fontFamily =
+            'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+          languageBadge.style.zIndex = '10';
+          codeBlock.parentElement.appendChild(languageBadge);
+        }
+      });
+    }
+
+    // Enhance tables with better styling
+    function enhanceTables() {
+      const tables = document.querySelectorAll('.markdown-content table');
+
+      tables.forEach((table) => {
+        if (table.classList.contains('enhanced-table')) return;
+
+        table.classList.add('enhanced-table');
+
+        // Wrap table in responsive container
+        const wrapper = document.createElement('div');
+        wrapper.className = 'table-container';
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+
+        // Add zebra striping to rows
+        const rows = table.querySelectorAll('tbody tr');
+        rows.forEach((row, index) => {
+          if (index % 2 === 0) {
+            row.classList.add('even-row');
+          } else {
+            row.classList.add('odd-row');
+          }
+        });
+      });
+    }
+
+    // Enhance blockquotes with icons
+    function enhanceBlockquotes() {
+      const blockquotes = document.querySelectorAll('.markdown-content blockquote');
+
+      blockquotes.forEach((blockquote) => {
+        if (blockquote.classList.contains('enhanced-quote')) return;
+
+        blockquote.classList.add('enhanced-quote');
+
+        // Add quote icon
+        const icon = document.createElement('div');
+        icon.className = 'quote-icon';
+        icon.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+          </svg>
+        `;
+
+        blockquote.insertBefore(icon, blockquote.firstChild);
+      });
+    }
+
+    // Run all enhancements
+    enhanceCodeBlocks();
+    enhanceTables();
+    enhanceBlockquotes();
+
+    // Clean up observers when navigating away
+    document.addEventListener('spa-navigation-start', () => {
+      if (headingObserver) {
+        headingObserver.disconnect();
+      }
+    });
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupBlogPostTransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupBlogPostTransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupBlogPostTransitions);
+
+  // Also initialize when SPA navigation completes
+  document.addEventListener('spa-navigation-complete', setupBlogPostTransitions);
 </script>

 <style>
-  /* Content reveal animations */
-  .hero-text h1,
-  .hero-text div,
-  .hero-text ~ div,
-  .hero-text span,
-  .hero-text p,
-  .hero-text + a,
-  article.group {
-    opacity: 0;
-    transform: translateY(20px);
-    transition:
-      opacity 0.8s ease,
-      transform 0.8s ease;
-  }
-
-  .animate-reveal {
-    opacity: 1 !important;
-    transform: translateY(0) !important;
-  }
-
-  /* Hero image styling */
+  /* Enhanced hero image styling */
  article img:first-of-type {
    border-radius: 1rem;
    box-shadow:
@@ -162,4 +377,22 @@ try {
  article img:first-of-type:hover {
    transform: scale(1.01);
  }
+
+  /* Article entrance animation */
+  .article-entering {
+    animation: article-fade-in 0.8s ease-out forwards;
+  }
+
+  @keyframes article-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Rest of the styles remain unchanged... */
 </style>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,10 +1,7 @@
 ---
-import { ClientRouter } from 'astro:transitions';
-
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import Background from '../components/Background.astro';
-
 import '../styles/global.css';

 interface Props {
@@ -30,43 +27,284 @@ const { title, description } = Astro.props;
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
-    <!-- Load theme early to prevent flashes between light and dark modes -->
-    <script is:inline>
-      const theme = (() => {
-        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-          return localStorage.getItem('theme');
-        }
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          return 'dark';
-        }
-        return 'light';
-      })();
-
-      if (theme === 'light') {
-        document.documentElement.classList.remove('dark');
-      } else {
-        document.documentElement.classList.add('dark');
-      }
-      window.localStorage.setItem('theme', theme);
-    </script>
-    <ClientRouter />
  </head>
  <body
    class="flex min-h-screen flex-col bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
  >
+    <!-- Page transition overlay - for smooth transitions between pages -->
+    <div
+      id="page-transition"
+      class="pointer-events-none fixed inset-0 z-40 flex items-center justify-center bg-white opacity-0 transition-opacity duration-300 dark:bg-zinc-900"
+    >
+      <div class="transition-spinner"></div>
+    </div>
+
+    <!-- Background component with dot pattern and ambient glow -->
    <Background />

-    <div class="mx-auto w-full max-w-3xl grow px-4 sm:px-6">
+    <div class="mx-auto w-full max-w-3xl flex-grow px-4 sm:px-6">
      <Navigation />
      <main class="py-12">
        <slot />
      </main>
    </div>
    <Footer />
+
+    <script>
+      // SPA transition system with history API
+      document.addEventListener('DOMContentLoaded', () => {
+        const pageTransition = document.getElementById('page-transition');
+        const mainContent = document.querySelector('main');
+
+        // Initialize content with entrance animation
+        if (mainContent) {
+          mainContent.classList.add('content-entering');
+          setTimeout(() => {
+            mainContent.classList.remove('content-entering');
+          }, 800);
+        }
+
+        // Function to load content via fetch
+        async function loadContent(url) {
+          try {
+            // Show transition overlay
+            if (pageTransition) {
+              pageTransition.classList.remove('opacity-0', 'pointer-events-none');
+              pageTransition.classList.add('opacity-100');
+            }
+
+            // Fade out current content
+            if (mainContent) {
+              mainContent.style.opacity = '0';
+              mainContent.style.transform = 'translateY(10px)';
+            }
+
+            // Fetch the new page content
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`Failed to fetch ${url}`);
+            const html = await response.text();
+
+            // Create a temporary element to parse the HTML
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+
+            // Extract the main content
+            const newContent = doc.querySelector('main');
+            if (!newContent) throw new Error('Could not find main content in the fetched page');
+
+            // Extract the title
+            const newTitle = doc.querySelector('title');
+            if (newTitle) {
+              document.title = newTitle.textContent;
+            }
+
+            // Extract meta description
+            const newDescription = doc.querySelector('meta[name="description"]');
+            if (newDescription) {
+              const currentDescription = document.querySelector('meta[name="description"]');
+              if (currentDescription) {
+                currentDescription.setAttribute(
+                  'content',
+                  newDescription.getAttribute('content') || ''
+                );
+              }
+            }
+
+            // Wait a bit for transition effect
+            await new Promise((resolve) => setTimeout(resolve, 300));
+
+            // Replace the content
+            if (mainContent && newContent) {
+              mainContent.innerHTML = newContent.innerHTML;
+
+              // Run scripts in the new content
+              Array.from(newContent.querySelectorAll('script')).forEach((oldScript) => {
+                const newScript = document.createElement('script');
+                Array.from(oldScript.attributes).forEach((attr) => {
+                  newScript.setAttribute(attr.name, attr.value);
+                });
+                newScript.textContent = oldScript.textContent;
+                if (oldScript.parentNode) {
+                  mainContent.appendChild(newScript);
+                }
+              });
+            }
+
+            // Fade in new content with animation
+            if (mainContent) {
+              mainContent.style.opacity = '0';
+              mainContent.style.transform = 'translateY(10px)';
+
+              setTimeout(() => {
+                mainContent.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+                mainContent.style.opacity = '1';
+                mainContent.style.transform = 'translateY(0)';
+
+                // Add entrance animation class
+                mainContent.classList.add('content-entering');
+                setTimeout(() => {
+                  mainContent.classList.remove('content-entering');
+                }, 800);
+              }, 50);
+            }
+
+            // Hide transition overlay
+            if (pageTransition) {
+              setTimeout(() => {
+                pageTransition.classList.add('opacity-0', 'pointer-events-none');
+                pageTransition.classList.remove('opacity-100');
+              }, 200);
+            }
+
+            // Dispatch custom event for content loaded
+            document.dispatchEvent(
+              new CustomEvent('spa-content-loaded', {
+                detail: { url },
+              })
+            );
+
+            // Scroll to top or to saved position
+            window.scrollTo(0, 0);
+
+            // Re-attach event listeners to new content
+            attachLinkListeners();
+          } catch (error) {
+            console.error('Error loading content:', error);
+
+            // Fallback to traditional navigation on error
+            window.location.href = url;
+          }
+        }
+
+        // Function to attach event listeners to all links
+        function attachLinkListeners() {
+          document.querySelectorAll('a').forEach((link) => {
+            // Skip links that are already handled, anchor links, external links, or have special attributes
+            if (
+              link.hasAttribute('data-spa-handled') ||
+              !link.href.startsWith(window.location.origin) ||
+              link.href.includes('#') ||
+              link.hasAttribute('target') ||
+              link.hasAttribute('download') ||
+              link.getAttribute('rel') === 'external' ||
+              link.getAttribute('rel') === 'nofollow'
+            ) {
+              return;
+            }
+
+            // Mark as handled to avoid duplicate listeners
+            link.setAttribute('data-spa-handled', 'true');
+
+            link.addEventListener('click', (e) => {
+              // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+              if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+                return;
+              }
+
+              e.preventDefault();
+              const targetHref = link.href;
+
+              // Don't transition if clicking the current page
+              if (targetHref === window.location.href) {
+                return;
+              }
+
+              // Update browser history
+              window.history.pushState({ path: targetHref }, '', targetHref);
+
+              // Load the new content
+              loadContent(targetHref);
+            });
+          });
+        }
+
+        // Initial attachment of link listeners
+        attachLinkListeners();
+
+        // Handle browser back/forward navigation
+        window.addEventListener('popstate', (e) => {
+          if (e.state && e.state.path) {
+            loadContent(e.state.path);
+          } else {
+            loadContent(window.location.href);
+          }
+        });
+
+        // Check RSS feed availability
+        const checkAndGenerateRSS = async () => {
+          try {
+            const response = await fetch('/rss.xml');
+            if (!response.ok) {
+              console.warn('RSS feed not found. Please generate it using an RSS plugin for Astro.');
+            }
+          } catch (error) {
+            console.warn('Could not check RSS feed status.');
+          }
+        };
+
+        // Check RSS feed availability
+        checkAndGenerateRSS();
+      });
+
+      // Theme handling with transition effects
+      function setupThemeHandling() {
+        // Apply theme from localStorage or system preference
+        const theme = localStorage.getItem('theme');
+        if (
+          theme === 'dark' ||
+          (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+
+        // Listen for theme changes
+        document.addEventListener('themeChanged', () => {
+          // Add transition class to body
+          document.body.classList.add('theme-transitioning');
+
+          // Remove class after transition completes
+          setTimeout(() => {
+            document.body.classList.remove('theme-transitioning');
+          }, 500);
+        });
+      }
+
+      // Initialize theme handling
+      document.addEventListener('DOMContentLoaded', setupThemeHandling);
+    </script>
  </body>
 </html>

 <style>
+  /* Page transition effects */
+  #page-transition {
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(4px);
+  }
+
+  /* Transition spinner animation */
+  .transition-spinner {
+    width: 30px;
+    height: 30px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #3b82f6;
+    animation: spin 0.7s linear infinite;
+  }
+
+  :global(.dark) .transition-spinner {
+    border-color: rgba(255, 255, 255, 0.1);
+    border-top-color: #60a5fa;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
  /* Content entrance animation */
  main {
    opacity: 1;
--- a/src/layouts/TransitionLayout.astro
+++ b/src/layouts/TransitionLayout.astro
@@ -0,0 +1,25 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+import BaseLayout from './BaseLayout.astro';
+
+const { title, description } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <ViewTransitions fallback="swap" />
+
+  <div transition:animate="slide">
+    <slot />
+  </div>
+</BaseLayout>
+
+<style>
+  /* Custom transition styles */
+  ::view-transition-old(root) {
+    animation: 0.5s cubic-bezier(0.76, 0, 0.24, 1) both slide-to-left;
+  }
+
+  ::view-transition-new(root) {
+    animation: 0.5s cubic-bezier(0.76, 0, 0.24, 1) both slide-from-right;
+  }
+</style>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -5,20 +5,35 @@ 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">
+      <div
+        class="animate-blob absolute -left-20 -top-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 right-1/4 top-1/2 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">
        <h1
-          class="glitch text-9xl leading-none font-bold text-zinc-900 sm:text-[12rem] dark:text-zinc-100"
+          class="glitch text-9xl font-bold leading-none text-zinc-900 dark:text-zinc-100 sm:text-[12rem]"
          data-text="404"
        >
          404
        </h1>
      </div>

-      <h2 class="mt-6 text-2xl font-bold text-zinc-800 sm:text-3xl dark:text-zinc-200">
+      <h2 class="mt-6 text-2xl font-bold text-zinc-800 dark:text-zinc-200 sm:text-3xl">
        Page Not Found
      </h2>

@@ -29,8 +44,11 @@ import Layout from '../layouts/Layout.astro';
      <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
        <a
          href="/"
-          class="relative inline-flex items-center gap-2 overflow-hidden rounded-lg bg-zinc-900 px-6 py-3 text-zinc-100 shadow-lg transition-all duration-300 hover:bg-bg-turquoise hover:text-zinc-100 hover:shadow-xl dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-turquoise"
+          class="group relative inline-flex items-center gap-2 overflow-hidden rounded-lg bg-zinc-900 px-6 py-3 text-zinc-100 shadow-lg transition-all duration-300 hover:bg-zinc-800 hover:shadow-xl dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
        >
+          <span
+            class="absolute inset-0 z-0 bg-gradient-to-r from-zinc-700 to-zinc-900 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-300 dark:to-zinc-100"
+          ></span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
@@ -43,15 +61,14 @@ import Layout from '../layouts/Layout.astro';
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-            >
-            </path>
+            ></path>
          </svg>
          <span class="relative z-10 font-medium">Return Home</span>
        </a>

        <button
          id="back-button"
-          class="group inline-flex translate-y-0 items-center gap-2 rounded-lg border border-zinc-300 px-6 py-3 text-zinc-700 shadow-xs transition-all duration-300 hover:bg-zinc-100 hover:shadow-md dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+          class="group inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-6 py-3 text-zinc-700 shadow-sm transition-all duration-300 hover:bg-zinc-100 hover:shadow-md dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
@@ -64,9 +81,7 @@ import Layout from '../layouts/Layout.astro';
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
-              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-            >
-            </path>
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
          </svg>
          <span class="font-medium">Go Back</span>
        </button>
@@ -74,9 +89,9 @@ import Layout from '../layouts/Layout.astro';

      <!-- Random fun fact -->
      <div
-        class="mx-auto mt-16 max-w-md rounded-xl border border-zinc-100 bg-zinc-50 p-6 shadow-xs backdrop-blur-xs dark:border-zinc-700/50 dark:bg-zinc-800/50"
+        class="mx-auto mt-16 max-w-md rounded-xl border border-zinc-100 bg-zinc-50 p-6 shadow-sm backdrop-blur-sm dark:border-zinc-700/50 dark:bg-zinc-800/50"
      >
-        <h3 class="text-sm font-medium tracking-wider text-zinc-500 uppercase dark:text-zinc-400">
+        <h3 class="text-sm font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
          Did you know?
        </h3>
        <p class="mt-2 text-sm text-zinc-700 dark:text-zinc-300" id="fun-fact">
@@ -112,9 +127,97 @@ import Layout from '../layouts/Layout.astro';
    const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
    funFactElement.textContent = randomFact;
  }
+
+  // Handle SPA transitions for 404 page
+  function setupSPATransitions() {
+    // Handle all internal links for SPA transitions
+    document.querySelectorAll('a[href^="/"]').forEach((link) => {
+      // Skip links that are anchor links, external links, or already processed
+      if (
+        link.getAttribute('href').includes('#') ||
+        link.getAttribute('target') === '_blank' ||
+        link.hasAttribute('data-spa-handled')
+      ) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+
+    // Re-initialize back button after SPA navigation
+    const backButton = document.getElementById('back-button');
+    if (backButton) {
+      backButton.addEventListener('click', () => {
+        window.history.back();
+      });
+    }
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
 </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;
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,12 +1,14 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import DynamicIcon from '../utils/DynamicIcon.tsx';
+import { FaJs, FaReact, FaNodeJs, FaPython } from 'react-icons/fa';
+import { SiTypescript, SiAstro } from 'react-icons/si';

 import directus from '../../lib/directus';
 import { readSingleton, readItems } from '@directus/sdk';

 const global = await directus.request(readSingleton('global'));
 const about = await directus.request(readSingleton('about'));
+
 const skills = await directus.request(
  readItems('skills', {
    fields: ['*'],
@@ -15,30 +17,46 @@ 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"
-    transition:animate="slide"
-  >
-    <!-- Introduction Section -->
+  <div class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16">
+    <!-- Hero Section -->
    <div class="relative mb-12 sm:mb-16 md:mb-20">
+      <!-- Decorative elements -->
+      <div
+        class="animate-blob theme-transition-bg absolute -left-10 -top-10 h-36 w-36 rounded-full bg-zinc-100 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:-left-20 sm:-top-20 sm:h-48 sm:w-48 md:h-72 md:w-72"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-2000 theme-transition-bg absolute -bottom-10 -right-10 h-36 w-36 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:-bottom-20 sm:-right-20 sm:h-48 sm:w-48 md:h-72 md:w-72"
+      >
+      </div>
+
      <div class="relative grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-12">
-        <div class="hero-text order-2 text-center md:order-1 md:text-left">
+        <div class="order-2 text-center md:order-1 md:text-left">
          <h1
-            class="theme-transition-color hero-text mb-4 text-3xl font-bold tracking-tight text-zinc-900 sm:mb-6 sm:text-4xl md:text-5xl dark:text-zinc-100"
+            class="theme-transition-color mb-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:mb-6 sm:text-4xl md:text-5xl"
          >
-            Hello, I'm <span class="theme-transition-all bg-clip-text">{global.name}</span>
+            Hello, I'm <span
+              class="theme-transition-all bg-gradient-to-r from-zinc-500 to-zinc-900 bg-clip-text text-transparent dark:from-zinc-300 dark:to-zinc-100"
+              >{global.name}</span
+            >
          </h1>

          <p
-            class="theme-transition-color hero-text mb-6 text-lg leading-relaxed text-zinc-600 sm:mb-8 sm:text-xl dark:text-zinc-400"
+            class="theme-transition-color mb-6 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 sm:mb-8 sm:text-xl"
          >
            {about.background}
          </p>
+
+          <div
+            class="social-links-container theme-transition-children flex flex-wrap justify-center gap-4 md:justify-start"
+          >
+            <!-- Social links remain the same -->
+          </div>
        </div>

        <div class="relative order-1 md:order-2">
          <div
-            class="theme-transition-all mx-auto aspect-square w-full max-w-[280px] overflow-hidden rounded-3xl border-4 border-white shadow-xl sm:max-w-[320px] sm:border-8 sm:shadow-2xl md:max-w-md dark:border-zinc-800"
+            class="theme-transition-all mx-auto aspect-square w-full max-w-[280px] overflow-hidden rounded-3xl border-4 border-white shadow-xl dark:border-zinc-800 sm:max-w-[320px] sm:border-8 sm:shadow-2xl md:max-w-md"
          >
            <img
              src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.portrait}`
@@ -47,39 +65,42 @@ const skills = await directus.request(
              loading="eager"
            />
          </div>
+
+          <!-- Decorative elements -->
+          <div
+            class="theme-transition-all absolute -bottom-4 -right-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-white bg-zinc-100 shadow-lg dark:border-zinc-900 dark:bg-zinc-800 sm:-bottom-6 sm:-right-6 sm:h-20 sm:w-20 sm:border-4 md:h-24 md:w-24"
+          >
+            <span class="text-2xl sm:text-3xl">👋</span>
+          </div>
        </div>
      </div>
    </div>

-    <!-- About Me section -->
+    <!-- About Section -->
    <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
      <div class="mx-auto max-w-3xl">
        <h2
-          class="theme-transition-color mb-6 flex items-center justify-center text-2xl font-bold text-zinc-900 sm:mb-8 sm:text-3xl md:justify-start dark:text-zinc-100"
+          class="theme-transition-color mb-6 flex items-center justify-center text-2xl font-bold text-zinc-900 dark:text-zinc-100 sm:mb-8 sm:text-3xl md:justify-start"
        >
-          <span class="theme-transition-bg bg-turquoise mr-4 hidden h-1 w-8 sm:inline-block sm:w-12"
+          <span
+            class="theme-transition-bg mr-4 hidden h-1 w-8 bg-zinc-300 dark:bg-zinc-700 sm:inline-block sm:w-12"
          ></span>
          About Me
-          <span class="theme-transition-bg bg-turquoise ml-4 hidden h-1 w-8 sm:inline-block sm:w-12"
+          <span
+            class="theme-transition-bg ml-4 hidden h-1 w-8 bg-zinc-300 dark:bg-zinc-700 sm:inline-block sm:w-12"
          ></span>
        </h2>

-        <div class="theme-transition-all hero-text prose prose-zinc dark:prose-invert max-w-none">
-          <p
-            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
-          >
+        <div class="theme-transition-all prose prose-zinc max-w-none dark:prose-invert">
+          <p class="theme-transition-color mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg">
            {about.experience}
          </p>

-          <p
-            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
-          >
+          <p class="theme-transition-color mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg">
            {about.education}
          </p>

-          <p
-            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
-          >
+          <p class="theme-transition-color mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg">
            {about.certifications}
          </p>
        </div>
@@ -89,7 +110,7 @@ const skills = await directus.request(
    <!-- Skills Section -->
    <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
      <h2
-        class="theme-transition-color mb-8 text-center text-2xl font-bold text-zinc-900 sm:mb-12 sm:text-3xl dark:text-zinc-100"
+        class="theme-transition-color mb-8 text-center text-2xl font-bold text-zinc-900 dark:text-zinc-100 sm:mb-12 sm:text-3xl"
      >
        Tech Stack
      </h2>
@@ -98,31 +119,37 @@ const skills = await directus.request(
        <!-- Main slider container -->
        <div class="slider-track animate-slide flex">
          {
-            [...skills, ...skills, ...skills].map((skill, index) => (
-              <div class="skill-card theme-transition-element Ztransition-all mx-2 min-w-[220px] transform rounded-xl border border-zinc-300 bg-white duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-200 hover:shadow-xl sm:mx-4 sm:min-w-[280px] dark:border-zinc-700 dark:bg-zinc-900 dark:hover:border-zinc-800 dark:hover:bg-zinc-900">
+            skills.map((skill, index) => (
+              <div
+                key={`${skill.title}-${index}`}
+                class="skill-card theme-transition-element mx-2 min-w-[220px] transform rounded-xl border border-zinc-200 bg-white transition-all duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-300 hover:shadow-xl dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 sm:mx-4 sm:min-w-[280px]"
+              >
                <div class="p-4 sm:p-6">
                  <div class="mb-4 flex items-center justify-between sm:mb-6">
                    <div class="flex items-center gap-2 sm:gap-4">
-                      <div class="theme-transition-bg theme-transition-color flex h-8 w-8 transform items-center justify-center rounded-lg bg-zinc-100 text-zinc-800 transition-transform group-hover:rotate-12 sm:h-12 sm:w-12 dark:bg-zinc-800 dark:text-zinc-200">
-                        <DynamicIcon name={skill.icon} />
+                      <div class="theme-transition-bg theme-transition-color flex h-8 w-8 transform items-center justify-center rounded-lg bg-zinc-100 text-zinc-800 transition-transform group-hover:rotate-12 dark:bg-zinc-800 dark:text-zinc-200 sm:h-12 sm:w-12">
+                        <skill.icon
+                          size={20}
+                          className="sm:text-2xl transform transition-all hover:scale-125"
+                        />
                      </div>
-                      <h3 class="theme-transition-color text-base font-semibold text-zinc-900 sm:text-xl dark:text-zinc-100">
+                      <h3 class="theme-transition-color text-base font-semibold text-zinc-900 dark:text-zinc-100 sm:text-xl">
                        {skill.title}
                      </h3>
                    </div>
-                    <span class="theme-transition-all rounded-full bg-zinc-100 px-2 py-0.5 font-mono text-xs text-zinc-600 sm:px-2.5 sm:py-1 sm:text-sm dark:bg-zinc-800 dark:text-zinc-400">
+                    <span class="theme-transition-all rounded-full bg-zinc-100 px-2 py-0.5 font-mono text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400 sm:px-2.5 sm:py-1 sm:text-sm">
                      {skill.level}%
                    </span>
                  </div>

-                  <div class="theme-transition-bg relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 sm:h-2 dark:bg-zinc-700">
+                  <div class="theme-transition-bg relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-700 sm:h-2">
                    <div
-                      class="progress-bar-animate theme-transition-bg from-turquoise via-bermuda to-turquoise absolute top-0 left-0 h-full rounded-full bg-gradient-to-r transition-all duration-1000"
+                      class="progress-bar-animate theme-transition-bg absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-800 transition-all duration-1000 dark:from-zinc-300 dark:via-zinc-400 dark:to-zinc-200"
                      style={`width: ${skill.level}%`}
                    />
                  </div>

-                  <div class="theme-transition-color mt-1 flex justify-between font-mono text-[10px] text-zinc-400 sm:mt-2 sm:text-xs dark:text-zinc-500">
+                  <div class="theme-transition-color mt-1 flex justify-between font-mono text-[10px] text-zinc-400 dark:text-zinc-500 sm:mt-2 sm:text-xs">
                    <span>Beginner</span>
                    <span>Advanced</span>
                  </div>
@@ -134,11 +161,11 @@ const skills = await directus.request(

        <!-- Gradient overlays for smooth fade effect -->
        <div
-          class="theme-transition-bg absolute top-0 bottom-0 left-0 z-10 w-12 bg-gradient-to-r from-white to-transparent sm:w-24 dark:from-zinc-900"
+          class="theme-transition-bg absolute bottom-0 left-0 top-0 z-10 w-12 bg-gradient-to-r from-white to-transparent dark:from-zinc-900 sm:w-24"
        >
        </div>
        <div
-          class="theme-transition-bg absolute top-0 right-0 bottom-0 z-10 w-12 bg-gradient-to-l from-white to-transparent sm:w-24 dark:from-zinc-900"
+          class="theme-transition-bg absolute bottom-0 right-0 top-0 z-10 w-12 bg-gradient-to-l from-white to-transparent dark:from-zinc-900 sm:w-24"
        >
        </div>
      </div>
@@ -147,122 +174,67 @@ const skills = await directus.request(
    <!-- Contact Section -->
    <div class="theme-transition-all mx-auto max-w-3xl text-center">
      <h2
-        class="theme-transition-color mb-4 text-2xl font-bold text-zinc-900 sm:mb-6 sm:text-3xl dark:text-zinc-100"
+        class="theme-transition-color mb-4 text-2xl font-bold text-zinc-900 dark:text-zinc-100 sm:mb-6 sm:text-3xl"
      >
        Get in Touch
      </h2>
      <p
-        class="theme-transition-color mb-6 text-base text-zinc-600 sm:mb-8 sm:text-lg dark:text-zinc-400"
+        class="theme-transition-color mb-6 text-base text-zinc-600 dark:text-zinc-400 sm:mb-8 sm:text-lg"
      >
        I'm always open to new opportunities and collaborations. If you'd like to work together or
        just say hello, feel free to reach out.
      </p>
-      <div class="group">
-        <a
-          href=`mailto:${global.email}`
-          class="theme-transition-all group-hover:bg-turquoise inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors duration-300 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:text-zinc-100"
+
+      <a
+        href=`mailto:${global.email}`
+        class="theme-transition-all inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300 sm:px-8 sm:py-4 sm:text-lg"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="mr-2 h-4 w-4 sm:h-5 sm:w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="mr-2 h-4 w-4 sm:h-5 sm:w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-            ></path>
-          </svg>
-          <span class="relative inline-block overflow-hidden">
-            <span class="relative z-10">Send Email</span>
-          </span>
-        </a>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          ></path>
+        </svg>
+        Say Hello
+      </a>
    </div>
  </div>
 </BaseLayout>

-<script>
-  document.addEventListener('astro:page-load', () => {
-    // Add smooth reveal animations for content after loading
-    const animateContent = () => {
-      const heroElements = document.querySelectorAll(
-        '.hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p'
-      );
-      heroElements.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-
-    // Create seamless infinite scrolling effect
-    function setupInfiniteScroll() {
-      const cards = document.querySelectorAll('.skill-card');
-      if (!cards.length) return;
-    }
-
-    setupInfiniteScroll();
-
-    // Add hover effects to cards - only on non-touch devices
-    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    const cards = document.querySelectorAll('.skill-card');
-
-    if (!isTouchDevice) {
-      cards.forEach((card) => {
-        card.addEventListener('mousemove', (e) => {
-          const rect = card.getBoundingClientRect();
-          const x = e.clientX - rect.left;
-          const y = e.clientY - rect.top;
-
-          const centerX = rect.width / 2;
-          const centerY = rect.height / 2;
-
-          const angleX = (y - centerY) / 15;
-          const angleY = (centerX - x) / 15;
-
-          card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`;
-
-          // Dynamic shadow based on tilt
-          const shadowX = (x - centerX) / 25;
-          const shadowY = (y - centerY) / 25;
-          card.style.boxShadow = `
-            ${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
-            0 10px 20px rgba(0, 0, 0, 0.05)
-          `;
-        });
-
-        card.addEventListener('mouseleave', () => {
-          card.style.transform = '';
-          card.style.boxShadow = '';
-        });
-      });
-    } else {
-      // Simpler effects for touch devices
-      cards.forEach((card) => {
-        card.addEventListener('touchstart', () => {
-          card.classList.add('is-touched');
-        });
-
-        card.addEventListener('touchend', () => {
-          setTimeout(() => {
-            card.classList.remove('is-touched');
-          }, 300);
-        });
-      });
-    }
-  });
-</script>
-
 <style>
+  /* Blob animation */
+  .animate-blob {
+    animation: blob-bounce 8s infinite ease;
+  }
+
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+
+  @keyframes blob-bounce {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      transform: translate(5%, 5%) scale(1.05);
+    }
+    50% {
+      transform: translate(0, 10%) scale(1);
+    }
+    75% {
+      transform: translate(-5%, 5%) scale(0.95);
+    }
+  }
+
  /* Tech Stack Slider */
  .slider-track {
    width: fit-content;
@@ -307,7 +279,7 @@ const skills = await directus.request(
    z-index: 10;
  }

-  /* Reduce animation complexity on mobile */
+  /* Reduce animation complexity on mobile for better performance */
  @media (max-width: 640px) {
    .skill-card {
      transition:
@@ -367,7 +339,7 @@ const skills = await directus.request(
    }
  }

-  /* Touch targets for mobile */
+  /* Improved touch targets for mobile */
  @media (max-width: 640px) {
    a,
    button {
@@ -381,4 +353,231 @@ const skills = await directus.request(
      min-height: 44px;
    }
  }
+
+  /* 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);
+  }
 </style>
+
+<script>
+  // Wait for the DOM to be fully loaded
+  document.addEventListener('DOMContentLoaded', () => {
+    const sliderTrack = document.querySelector('.slider-track');
+
+    // Create seamless infinite scrolling effect
+    function setupInfiniteScroll() {
+      const cards = document.querySelectorAll('.skill-card');
+      if (!cards.length) return;
+
+      // Clone the first set of cards and append to create seamless loop
+      const firstSetCount = cards.length / 3; // We have 3 sets in the markup
+
+      // Set proper animation based on screen size
+      function updateScrollAnimation() {
+        if (window.innerWidth >= 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');
+
+    if (!isTouchDevice) {
+      cards.forEach((card) => {
+        card.addEventListener('mousemove', (e) => {
+          const rect = card.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+
+          const centerX = rect.width / 2;
+          const centerY = rect.height / 2;
+
+          const angleX = (y - centerY) / 15;
+          const angleY = (centerX - x) / 15;
+
+          card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`;
+
+          // Dynamic shadow based on tilt
+          const shadowX = (x - centerX) / 25;
+          const shadowY = (y - centerY) / 25;
+          card.style.boxShadow = `
+            ${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
+            0 10px 20px rgba(0, 0, 0, 0.05)
+          `;
+        });
+
+        card.addEventListener('mouseleave', () => {
+          card.style.transform = '';
+          card.style.boxShadow = '';
+        });
+      });
+    } else {
+      // Simpler effects for touch devices
+      cards.forEach((card) => {
+        card.addEventListener('touchstart', () => {
+          card.classList.add('is-touched');
+        });
+
+        card.addEventListener('touchend', () => {
+          setTimeout(() => {
+            card.classList.remove('is-touched');
+          }, 300);
+        });
+      });
+    }
+
+    // Handle theme transition
+    document.addEventListener('themeChange', () => {
+      // Add special effects during theme transition
+      cards.forEach((card, index) => {
+        // Add staggered animation delay
+        setTimeout(() => {
+          card.classList.add('theme-changing');
+          setTimeout(() => {
+            card.classList.remove('theme-changing');
+          }, 600);
+        }, index * 50);
+      });
+    });
+  });
+</script>
+
+<script>
+  // Handle SPA transitions for about page
+  function setupSPATransitions() {
+    // Handle all internal links for SPA transitions
+    document.querySelectorAll('a[href^="/"]').forEach((link) => {
+      // Skip links that are anchor links, external links, or already processed
+      if (
+        link.getAttribute('href').includes('#') ||
+        link.getAttribute('target') === '_blank' ||
+        link.hasAttribute('data-spa-handled')
+      ) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+
+    // Initialize animations for about page
+    function animateAboutContent() {
+      // Animate hero section elements
+      const heroElements = document.querySelectorAll('h1, .order-2 p, .social-links-container');
+      heroElements.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          100 + index * 150
+        );
+      });
+
+      // Animate profile image
+      const profileImage = document.querySelector('.aspect-square');
+      if (profileImage) {
+        setTimeout(() => {
+          profileImage.classList.add('animate-reveal');
+        }, 200);
+      }
+
+      // Animate skill bars with staggered delay
+      const skillBars = document.querySelectorAll('.skill-bar');
+      skillBars.forEach((bar, index) => {
+        setTimeout(
+          () => {
+            bar.classList.add('animate-skill');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate sections with staggered delay
+      const sections = document.querySelectorAll('section');
+      sections.forEach((section, index) => {
+        setTimeout(
+          () => {
+            section.classList.add('animate-reveal');
+          },
+          300 + index * 200
+        );
+      });
+    }
+
+    // Run animations
+    animateAboutContent();
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
+</script>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -41,25 +41,25 @@ const { post, nextPost, prevPost } = Astro.props;
  updated_date={post.updated_date}
  tags={post.tags}
 >
-  <!-- Main Content -->
+  <!-- Main Content - Enhanced with better typography and spacing -->
  <div
-    class="hero-text prose prose-sm prose-zinc dark:prose-invert sm:prose-base prose-headings:scroll-mt-24 prose-headings:font-semibold prose-a:font-medium prose-a:text-zinc-800 prose-a:underline-offset-4 hover:prose-a:text-zinc-600 prose-img:rounded-xl dark:prose-a:text-zinc-300 dark:hover:prose-a:text-zinc-100 max-w-none"
+    class="prose prose-sm prose-zinc max-w-none dark:prose-invert sm:prose-base prose-headings:scroll-mt-24 prose-headings:font-semibold prose-a:font-medium prose-a:text-zinc-800 prose-a:underline-offset-4 hover:prose-a:text-zinc-600 prose-img:rounded-xl dark:prose-a:text-zinc-300 dark:hover:prose-a:text-zinc-100"
  >
    <div set:html={post.content} />
  </div>

-  <!-- Next/Previous Navigation -->
+  <!-- Next/Previous Navigation - Improved responsive design -->
  <div
-    class="mt-12 grid grid-cols-1 gap-4 border-t border-zinc-200 pt-8 sm:mt-16 sm:gap-6 sm:pt-12 md:grid-cols-2 dark:border-zinc-800"
+    class="mt-12 grid grid-cols-1 gap-4 border-t border-zinc-200 pt-8 dark:border-zinc-800 sm:mt-16 sm:gap-6 sm:pt-12 md:grid-cols-2"
  >
    {
      prevPost && (
        <a
          href={`/blog/${prevPost.slug}`}
-          class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 p-4 transition-all duration-300 hover:-translate-y-1 hover:bg-zinc-50 sm:p-6 dark:border-zinc-800 dark:hover:bg-zinc-800/50"
+          class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 p-4 transition-all duration-300 hover:-translate-y-1 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 sm:p-6"
        >
          <div class="absolute inset-0 bg-gradient-to-r from-zinc-100 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-800 dark:to-transparent" />
-          <span class="relative z-10 mb-1 flex items-center gap-1 text-xs font-medium text-zinc-500 sm:mb-2 sm:gap-2 sm:text-sm dark:text-zinc-400">
+          <span class="relative z-10 mb-1 flex items-center gap-1 text-xs font-medium text-zinc-500 dark:text-zinc-400 sm:mb-2 sm:gap-2 sm:text-sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
@@ -76,7 +76,7 @@ const { post, nextPost, prevPost } = Astro.props;
            </svg>
            Previous Article
          </span>
-          <h3 class="line-clamp-2 text-base font-medium text-zinc-900 transition-colors group-hover:text-zinc-700 sm:text-lg dark:text-white dark:group-hover:text-zinc-300">
+          <h3 class="line-clamp-2 text-base font-medium text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-white dark:group-hover:text-zinc-300 sm:text-lg">
            {prevPost.title}
          </h3>
        </a>
@@ -86,10 +86,10 @@ const { post, nextPost, prevPost } = Astro.props;
      nextPost && (
        <a
          href={`/blog/${nextPost.slug}`}
-          class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 p-4 transition-all duration-300 hover:-translate-y-1 hover:bg-zinc-50 sm:p-6 md:text-right dark:border-zinc-800 dark:hover:bg-zinc-800/50"
+          class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 p-4 transition-all duration-300 hover:-translate-y-1 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 sm:p-6 md:text-right"
        >
          <div class="absolute inset-0 bg-gradient-to-l from-zinc-100 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-800 dark:to-transparent" />
-          <span class="relative z-10 mb-1 flex items-center gap-1 text-xs font-medium text-zinc-500 sm:mb-2 sm:gap-2 sm:text-sm md:justify-end dark:text-zinc-400">
+          <span class="relative z-10 mb-1 flex items-center gap-1 text-xs font-medium text-zinc-500 dark:text-zinc-400 sm:mb-2 sm:gap-2 sm:text-sm md:justify-end">
            Next Article
            <svg
              xmlns="http://www.w3.org/2000/svg"
@@ -106,7 +106,7 @@ const { post, nextPost, prevPost } = Astro.props;
              <path d="m9 18 6-6-6-6" />
            </svg>
          </span>
-          <h3 class="line-clamp-2 text-base font-medium text-zinc-900 transition-colors group-hover:text-zinc-700 sm:text-lg dark:text-white dark:group-hover:text-zinc-300">
+          <h3 class="line-clamp-2 text-base font-medium text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-white dark:group-hover:text-zinc-300 sm:text-lg">
            {nextPost.title}
          </h3>
        </a>
@@ -116,36 +116,7 @@ const { post, nextPost, prevPost } = Astro.props;
 </BlogPost>

 <script>
-  document.addEventListener('astro:page-load', () => {
-    // Add smooth reveal animations for content after loading
-    const animateContent = () => {
-      // Animate hero section
-      const heroElements = document.querySelectorAll(
-        '.hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p'
-      );
-      heroElements.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-
-      // Animate posts with staggered delay
-      const articles = document.querySelectorAll('article.group');
-      articles.forEach((article, index) => {
-        setTimeout(
-          () => {
-            article.classList.add('animate-reveal');
-          },
-          500 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-  });
+  // Removing TOC-related functions

  // Add copy buttons to code blocks
  function initializeCodeCopyButtons() {
@@ -212,9 +183,50 @@ const { post, nextPost, prevPost } = Astro.props;
    });
  }

+  // Handle SPA transitions for blog post navigation
+  function setupSPATransitions() {
+    // Handle prev/next navigation links
+    document.querySelectorAll('a[href^="/blog/"]').forEach((link) => {
+      // Skip links that are anchor links or already processed
+      if (link.getAttribute('href').includes('#') || link.hasAttribute('data-spa-handled')) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+  }
+
  // Main initialization function
  function initializeBlogPost() {
+    // Initialize remaining components
    initializeCodeCopyButtons();
+    setupSPATransitions();

    // Scroll to hash if present in URL
    if (window.location.hash) {
@@ -227,11 +239,19 @@ 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);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', initializeBlogPost);
 </script>

 <style>
+  /* Removing TOC-related styles */
+
  /* Language badge styling */
  .language-badge {
    font-family:
@@ -252,69 +272,69 @@ const { post, nextPost, prevPost } = Astro.props;
    }
  }

-  /* Typography for blog content  */
+  /* Enhanced typography for blog content - Responsive adjustments */
  .prose {
-    @reference text-zinc-800 dark:text-zinc-200;
+    @apply text-zinc-800 dark:text-zinc-200;
  }

  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4 {
-    @reference font-semibold text-zinc-900 dark:text-zinc-100;
+    @apply font-semibold text-zinc-900 dark:text-zinc-100;
  }

  .prose h1 {
-    @reference text-2xl sm:text-3xl md:text-4xl;
+    @apply text-2xl sm:text-3xl md:text-4xl;
  }

  .prose h2 {
-    @reference mb-3 mt-8 border-b border-zinc-200 pb-2 text-xl dark:border-zinc-800 sm:mb-4 sm:mt-12 sm:text-2xl;
+    @apply mb-3 mt-8 border-b border-zinc-200 pb-2 text-xl dark:border-zinc-800 sm:mb-4 sm:mt-12 sm:text-2xl;
  }

  .prose h3 {
-    @reference mb-2 mt-6 text-lg sm:mb-3 sm:mt-8 sm:text-xl;
+    @apply mb-2 mt-6 text-lg sm:mb-3 sm:mt-8 sm:text-xl;
  }

  .prose p {
-    @reference mb-4 text-sm leading-relaxed sm:mb-6 sm:text-base;
+    @apply mb-4 text-sm leading-relaxed sm:mb-6 sm:text-base;
  }

  .prose a {
-    @reference font-medium text-zinc-800 underline decoration-zinc-400 underline-offset-2 transition-colors hover:text-zinc-600 hover:decoration-zinc-600 dark:text-zinc-300 dark:decoration-zinc-600 dark:hover:text-zinc-100 dark:hover:decoration-zinc-400;
+    @apply font-medium text-zinc-800 underline decoration-zinc-400 underline-offset-2 transition-colors hover:text-zinc-600 hover:decoration-zinc-600 dark:text-zinc-300 dark:decoration-zinc-600 dark:hover:text-zinc-100 dark:hover:decoration-zinc-400;
  }

  .prose blockquote {
-    @reference my-4 border-l-4 border-zinc-300 pl-4 italic text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 sm:my-6;
+    @apply my-4 border-l-4 border-zinc-300 pl-4 italic text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 sm:my-6;
  }

  .prose code {
-    @reference rounded-sm bg-zinc-100 px-1.5 py-0.5 text-sm font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200;
+    @apply rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200;
  }

  .prose pre {
-    @reference my-4 overflow-x-auto rounded-lg bg-[#1e293b] p-3 text-xs text-zinc-200 shadow-md dark:bg-[#1e293b] sm:my-6 sm:p-4 sm:text-sm !important;
+    @apply my-4 overflow-x-auto rounded-lg bg-[#1e293b] p-3 text-xs text-zinc-200 shadow-md dark:bg-[#1e293b] sm:my-6 sm:p-4 sm:text-sm !important;
  }

  .prose pre code {
-    @reference bg-transparent p-0 text-zinc-200 dark:text-zinc-200 !important;
+    @apply bg-transparent p-0 text-zinc-200 dark:text-zinc-200 !important;
  }

  .prose img {
-    @reference mx-auto my-6 h-auto max-w-full rounded-lg shadow-md sm:my-8;
+    @apply mx-auto my-6 h-auto max-w-full rounded-lg shadow-md sm:my-8;
  }

  .prose ul,
  .prose ol {
-    @reference my-4 pl-5 sm:my-6 sm:pl-6;
+    @apply my-4 pl-5 sm:my-6 sm:pl-6;
  }

  .prose li {
-    @reference mb-1 text-sm sm:mb-2 sm:text-base;
+    @apply mb-1 text-sm sm:mb-2 sm:text-base;
  }

  .prose hr {
-    @reference my-8 border-zinc-200 dark:border-zinc-800 sm:my-10;
+    @apply my-8 border-zinc-200 dark:border-zinc-800 sm:my-10;
  }

  /* Line clamp for truncating text */
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,7 +1,5 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import FormattedDate from '../../components/FormattedDate.astro';
-import TagList from '../../components/TagList.astro';

 import directus from '../../../lib/directus';
 import { readItems } from '@directus/sdk';
@@ -13,57 +11,89 @@ const posts = await directus.request(
  })
 );

-// Group posts by year for timeline effect
 const sortedPosts = posts.sort((a, b) => b.published_date.valueOf() - a.published_date.valueOf());
+
+// Group posts by year for timeline effect
 const postsByYear = sortedPosts.reduce((acc, post) => {
  const year = new Date(post.published_date).getFullYear();
  if (!acc[year]) acc[year] = [];
  acc[year].push(post);
  return acc;
 }, {});
+
 const years = Object.keys(postsByYear).sort((a, b) => b - a);
+
+// Get total post count
+const totalPosts = sortedPosts.length;
+
+// Get unique tags for search suggestions
+const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 ---

 <BaseLayout title="Blog">
-  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16" transition:animate="slide">
+  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16">
+    <!-- Header with search  -->
    <div class="relative mb-12 sm:mb-20">
-      <div class="hero-text relative text-center">
+      <!-- Decorative elements -->
+      <div
+        class="animate-blob absolute -left-10 -top-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:-left-20 sm:-top-20 sm:h-72 sm:w-72"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-2000 absolute -bottom-10 -right-10 h-48 w-48 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:-bottom-20 sm:-right-20 sm:h-72 sm:w-72"
+      >
+      </div>
+
+      <div class="relative text-center">
        <h1
-          class="hero-text mb-4 text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl md:text-5xl dark:text-zinc-100"
+          class="mb-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-4xl md:text-5xl"
        >
          Blog
        </h1>

        <p
-          class="hero-text mx-auto mb-6 max-w-2xl text-sm text-zinc-600 sm:mb-10 sm:text-base dark:text-zinc-400"
+          class="mx-auto mb-6 max-w-2xl text-sm text-zinc-600 dark:text-zinc-400 sm:mb-10 sm:text-base"
        >
-          A couple thoughts, a few ideas, and some guides on technology, development, and selfhosting.
+          Thoughts, ideas, and explorations on technology and selfhosting.
        </p>
      </div>
    </div>

-    <!-- Featured post -->
+    <!-- Grid layout for mobile experience -->
    <div class="grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-12">
+      <!-- Featured post (if exists) -->
      {
        sortedPosts.length > 0 && (
          <div class="mb-8 sm:mb-12 md:col-span-12">
-            <article class="hover-3d theme-transition-element group relative mx-auto flex max-w-2xl flex-col p-5 sm:mx-0 sm:p-8">
-              <div class="absolute inset-0 rounded-2xl border border-zinc-200 bg-white/50 transition-all duration-300 group-hover:bg-zinc-50 hover:bg-zinc-50/80 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:group-hover:bg-zinc-800/70 dark:hover:bg-zinc-900/50" />
-
-              <div class="flex flex-col gap-5 sm:flex-row sm:gap-6">
+            <article class="group relative overflow-hidden rounded-none border-b border-zinc-200 pb-6 dark:border-zinc-800 sm:pb-8">
+              <div class="flex h-full flex-col gap-6 sm:gap-8 md:flex-row">
                {sortedPosts[0].image && (
-                  <div class="z-10 mx-auto h-60 w-full max-w-full overflow-hidden sm:h-80 sm:max-w-md md:mx-0 md:h-96 md:w-1/2">
+                  <div class="mx-auto h-60 w-full max-w-full overflow-hidden sm:h-80 sm:max-w-md md:mx-0 md:h-96 md:w-1/2">
                    <img
-                      src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${sortedPosts[0].image}?width=500`}
-                      alt={sortedPosts[0].image_alt}
-                      class="h-full w-full object-cover"
+                      src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${sortedPosts[0].image}`}
+                      alt={sortedPosts[0].title}
+                      class="h-full w-full object-cover grayscale transition-all duration-700 hover:grayscale-0 group-hover:scale-105"
                      loading="eager"
                    />
                  </div>
                )}

-                <div class="z-10 flex-1">
-                  <h2 class="mb-2 text-center text-xl font-semibold text-zinc-900 sm:mb-3 sm:text-left sm:text-2xl dark:text-zinc-100">
+                <div class="flex flex-1 flex-col justify-center">
+                  <div class="mb-3 flex items-center justify-center gap-2 text-xs text-zinc-500 dark:text-zinc-400 sm:text-sm md:justify-start">
+                    <span class="font-medium uppercase tracking-wider">Featured</span>
+                    <span class="h-px w-6 bg-zinc-300 dark:bg-zinc-700 sm:w-8" />
+                    {sortedPosts[0].published_date && (
+                      <time datetime={sortedPosts[0].published_date.toLocaleString()}>
+                        {sortedPosts[0].published_date.toLocaleString('en-US', {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                      </time>
+                    )}
+                  </div>
+
+                  <h2 class="mb-3 text-center text-2xl font-bold text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300 sm:mb-4 sm:text-3xl md:text-left">
                    <a
                      href={`/blog/${sortedPosts[0].slug}/`}
                      class="before:absolute before:inset-0"
@@ -72,58 +102,38 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                    </a>
                  </h2>

-                  <p class="mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400">
-                    {/* {sortedPosts[0].description} */}
+                  <p class="mb-4 line-clamp-3 text-center text-sm text-zinc-600 dark:text-zinc-400 sm:mb-6 sm:text-base md:text-left">
+                    {sortedPosts[0].description}
                  </p>

-                  <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
-                    <FormattedDate date={sortedPosts[0].published_date} />
+                  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:justify-start">
+                    {sortedPosts[0].tags && (
+                      <div class="flex flex-wrap justify-center gap-2 md:justify-start">
+                        {sortedPosts[0].tags.slice(0, 2).map((tag) => (
+                          <span class="border border-zinc-200 px-2 py-1 text-xs uppercase tracking-wider text-zinc-600 dark:border-zinc-800 dark:text-zinc-400 sm:px-3">
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
                  </div>
                </div>
              </div>
-
-              <div class="z-10 mt-4 flex flex-wrap items-end justify-center border-t border-zinc-100 pt-4 sm:justify-between dark:border-zinc-800">
-                <TagList tags={sortedPosts[0].tags} />
-
-                <div class="mx-auto sm:mr-0 sm:ml-auto">
-                  <a
-                    href={`/blog/${sortedPosts[0].slug}`}
-                    class="theme-transition-color relative z-10 mx-auto mt-3 flex min-h-[44px] items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 sm:mx-0 sm:mt-4 dark:text-zinc-300 dark:group-hover:text-zinc-100"
-                  >
-                    <span class="relative inline-block overflow-hidden">
-                      <span class="relative z-10">Read article</span>
-                      <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
-                    </span>
-                    <svg
-                      viewBox="0 0 16 16"
-                      fill="none"
-                      aria-hidden="true"
-                      class="ml-1 h-4 w-4 stroke-current transition-transform duration-300"
-                    >
-                      <path
-                        d="M6.75 5.75 9.25 8l-2.5 2.25"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </a>
-                </div>
-              </div>
            </article>
          </div>
        )
      }

-      <!-- Sidebar for mobile -->
+      <!-- Improved sidebar for mobile -->
      <div class="relative md:col-span-3">
        <div class="mb-8 space-y-4 md:sticky md:top-24 md:mb-0">
          <h3
-            class="mb-4 text-center text-lg font-medium tracking-wider text-zinc-900 uppercase md:text-left dark:text-zinc-100"
+            class="mb-4 text-center text-lg font-medium uppercase tracking-wider text-zinc-900 dark:text-zinc-100 md:text-left"
          >
-            History
+            Archive
          </h3>

+          <!-- Horizontal scrollable archive on mobile, vertical on desktop -->
          <div
            class="hide-scrollbar flex overflow-x-auto pb-4 md:flex-col md:overflow-visible md:pb-0"
          >
@@ -131,12 +141,12 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
              years.map((year, index) => (
                <a
                  href={`#year-${year}`}
-                  class={`mr-3 flex items-center rounded-xl border border-zinc-300 bg-white/50 px-4 py-2 whitespace-nowrap transition-all duration-300 hover:bg-zinc-50 sm:rounded-2xl md:mr-0 md:w-full md:px-0 md:py-3 md:whitespace-normal dark:border-zinc-800 dark:hover:bg-zinc-800/70 ${index === 0 ? 'bg-white/50 dark:bg-zinc-900/50' : ''}`}
+                  class={`mr-3 flex items-center whitespace-nowrap rounded-full border-b border-zinc-100 px-4 py-2 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-900 md:mr-0 md:w-full md:whitespace-normal md:rounded-none md:px-0 md:py-3 ${index === 0 ? 'bg-zinc-50 dark:bg-zinc-800/50' : ''}`}
                >
-                  <span class="mr-3 ml-3 text-base font-medium text-zinc-900 md:text-lg dark:text-zinc-100">
+                  <span class="text-base font-medium text-zinc-900 dark:text-zinc-100 md:text-lg">
                    {year}
                  </span>
-                  <span class="mr-3 text-xs text-zinc-500 md:ml-auto md:text-sm dark:text-zinc-400">
+                  <span class="ml-2 text-xs text-zinc-500 dark:text-zinc-400 md:ml-auto md:text-sm">
                    {postsByYear[year].length} post{postsByYear[year].length !== 1 ? 's' : ''}
                  </span>
                </a>
@@ -146,35 +156,33 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
        </div>
      </div>

-      <!-- Post grid -->
+      <!-- Improved post grid for mobile -->
      <div class="md:col-span-9">
        {
          years.map((year) => (
            <div id={`year-${year}`} class="mb-12 scroll-mt-16 sm:mb-20">
-              <h2 class="mb-6 border-b border-zinc-200 pb-3 text-center text-xl font-bold text-zinc-900 sm:mb-8 sm:pb-4 sm:text-2xl md:text-left dark:border-zinc-800 dark:text-zinc-100">
+              <h2 class="mb-6 border-b border-zinc-200 pb-3 text-center text-xl font-bold text-zinc-900 dark:border-zinc-800 dark:text-zinc-100 sm:mb-8 sm:pb-4 sm:text-2xl md:text-left">
                {year}
              </h2>

              <div
                class={`grid grid-cols-1 ${postsByYear[year].length >= 2 ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-8 sm:gap-12`}
              >
-                {postsByYear[year].map((post) => (
-                  <article class="hover-3d theme-transition-element group relative mx-auto flex max-w-2xl flex-col p-5 sm:mx-0 sm:p-8">
-                    <div class="absolute inset-0 rounded-2xl border border-zinc-200 bg-white/50 transition-all duration-300 group-hover:bg-zinc-50 hover:bg-zinc-50/80 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:group-hover:bg-zinc-800/70 dark:hover:bg-zinc-900/50" />
-
+                {postsByYear[year].map((post, index) => (
+                  <article class="group relative mx-auto flex h-full w-full max-w-sm flex-col sm:max-w-md md:mx-0">
                    {post.image && (
-                      <div class="relative z-10 mb-4 aspect-video w-full overflow-hidden rounded-lg">
+                      <div class="mb-4 h-48 overflow-hidden rounded-lg sm:h-56">
                        <img
                          src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${post.image}`}
                          alt={post.title}
-                          class="h-full w-full object-cover"
+                          class="h-full w-full object-cover grayscale transition-all duration-700 hover:grayscale-0 group-hover:scale-105"
                          loading="lazy"
                        />
                      </div>
                    )}

                    <div class="flex flex-1 flex-col">
-                      <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:gap-4 sm:text-sm md:justify-start dark:text-zinc-400">
+                      <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 dark:text-zinc-400 sm:mb-3 sm:gap-4 sm:text-sm md:justify-start">
                        {post.pubDate && (
                          <time
                            datetime={post.published_date.toLocaleString()}
@@ -188,48 +196,30 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                        )}
                      </div>

-                      <h3 class="z-10 mb-2 text-center text-lg font-semibold text-zinc-900 transition-colors group-hover:text-zinc-700 sm:mb-3 sm:text-xl md:text-left dark:text-zinc-100 dark:group-hover:text-zinc-300">
+                      <h3 class="mb-2 text-center text-lg font-semibold text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300 sm:mb-3 sm:text-xl md:text-left">
                        <a href={`/blog/${post.slug}/`} class="before:absolute before:inset-0">
                          {post.title}
                        </a>
                      </h3>

-                      <p class="z-10 mb-4 line-clamp-2 grow text-center text-sm text-zinc-600 md:text-left dark:text-zinc-400">
-                        {/* {post.description} */}
+                      <p class="mb-4 line-clamp-2 flex-grow text-center text-sm text-zinc-600 dark:text-zinc-400 md:text-left">
+                        {post.description}
                      </p>

-                      <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
-                        <FormattedDate date={post.published_date} />
-                      </div>
-
-                      <div class="z-10 mt-4 flex flex-wrap items-end justify-center border-t border-zinc-100 pt-4 sm:justify-between dark:border-zinc-800">
-                        <TagList tags={post.tags} />
-
-                        <div class="mx-auto sm:mr-0 sm:ml-auto">
-                          <a
-                            href={`/blog/${post.slug}`}
-                            class="theme-transition-color relative z-10 mx-auto mt-3 flex min-h-[44px] items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 sm:mx-0 sm:mt-4 dark:text-zinc-300 dark:group-hover:text-zinc-100"
-                          >
-                            <span class="relative inline-block overflow-hidden">
-                              <span class="relative z-10">Read article</span>
-                              <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                      {post.tags && (
+                        <div class="mt-auto flex flex-wrap justify-center gap-2 md:justify-start">
+                          {post.tags.slice(0, 2).map((tag) => (
+                            <span class="border border-zinc-200 px-2 py-1 text-xs uppercase tracking-wider text-zinc-600 dark:border-zinc-800 dark:text-zinc-400 sm:px-3">
+                              {tag}
                            </span>
-                            <svg
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              aria-hidden="true"
-                              class="ml-1 h-4 w-4 stroke-current transition-transform duration-300"
-                            >
-                              <path
-                                d="M6.75 5.75 9.25 8l-2.5 2.25"
-                                stroke-width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              />
-                            </svg>
-                          </a>
+                          ))}
+                          {post.tags.length > 2 && (
+                            <span class="border border-zinc-200 px-2 py-1 text-xs uppercase tracking-wider text-zinc-600 dark:border-zinc-800 dark:text-zinc-400 sm:px-3">
+                              +{post.tags.length - 2}
+                            </span>
+                          )}
                        </div>
-                      </div>
+                      )}
                    </div>
                  </article>
                ))}
@@ -242,40 +232,62 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
  </div>
 </BaseLayout>

-<script>
-  document.addEventListener('astro:page-load', () => {
-    // Add smooth reveal animations for content after loading
-    const animateContent = () => {
-      // Animate hero section
-      const heroElements = document.querySelectorAll(
-        '.hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p'
-      );
-      heroElements.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-
-      // Animate posts with staggered delay
-      const articles = document.querySelectorAll('article.group');
-      articles.forEach((article, index) => {
-        setTimeout(
-          () => {
-            article.classList.add('animate-reveal');
-          },
-          500 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>
-
 <style>
+  /* Blob animation */
+  .animate-blob {
+    animation: blob-bounce 8s infinite ease;
+  }
+
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+
+  @keyframes blob-bounce {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      transform: translate(5%, 5%) scale(1.05);
+    }
+    50% {
+      transform: translate(0, 10%) scale(1);
+    }
+    75% {
+      transform: translate(-5%, 5%) scale(0.95);
+    }
+  }
+
+  /* Search container hover effect */
+  .search-container:hover .search-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  /* Input focus animation */
+  input:focus + div .search-pulse {
+    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* Hide scrollbar but keep functionality */
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
  /* Line clamp for descriptions */
  .line-clamp-2 {
    display: -webkit-box;
@@ -291,39 +303,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
    overflow: hidden;
  }

-  /* Prevent layout shifts */
-  .grow {
-    grow: 1;
-  }
-
-  .min-w-0 {
-    min-width: 0;
-  }
-
-  /* Ensure container doesn't overflow */
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  /* Ensure text doesn't overflow on small screens */
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-  }
-
-  /* Ensure proper word breaking for long tag names */
-  .break-words {
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-
-  .hyphens-auto {
-    hyphens: auto;
-  }
-
-  /* Touch targets for mobile */
+  /* Improved touch targets for mobile */
  @media (max-width: 640px) {
    a,
    button {
@@ -332,12 +312,127 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
      align-items: center;
    }
  }
-
-  .touch-active {
-    transform: scale(0.97) !important;
-    opacity: 0.9;
-    transition:
-      transform 0.15s ease-in-out,
-      opacity 0.15s ease-in-out !important;
-  }
 </style>
+
+<script>
+  // Script không thay đổi - giữ nguyên chức năng
+  document.addEventListener('DOMContentLoaded', () => {
+    const backToTopButton = document.getElementById('back-to-top');
+
+    if (backToTopButton) {
+      // Show button when scrolled down
+      const toggleBackToTopButton = () => {
+        if (window.scrollY > 300) {
+          backToTopButton.classList.remove('opacity-0', 'invisible');
+          backToTopButton.classList.add('opacity-100', 'visible');
+        } else {
+          backToTopButton.classList.remove('opacity-100', 'visible');
+          backToTopButton.classList.add('opacity-0', 'invisible');
+        }
+      };
+
+      // Scroll to top when clicked
+      backToTopButton.addEventListener('click', () => {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        });
+      });
+
+      // Check scroll position
+      window.addEventListener('scroll', toggleBackToTopButton);
+      toggleBackToTopButton(); // Initial check
+    }
+
+    // Add smooth scrolling to year links
+    document.querySelectorAll('a[href^="#year-"]').forEach((anchor) => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href');
+        const targetElement = document.querySelector(targetId);
+
+        if (targetElement) {
+          window.scrollTo({
+            top: targetElement.offsetTop - 100,
+            behavior: 'smooth',
+          });
+
+          // Update URL hash without jumping
+          history.pushState(null, null, targetId);
+        }
+      });
+    });
+
+    // Add touch support for hover effects
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+    if (isTouchDevice) {
+      const articles = document.querySelectorAll('article');
+
+      articles.forEach((article) => {
+        article.addEventListener('touchstart', () => {
+          article.classList.add('is-touched');
+        });
+
+        article.addEventListener('touchend', () => {
+          setTimeout(() => {
+            article.classList.remove('is-touched');
+          }, 300);
+        });
+      });
+    }
+  });
+
+  // SPA transition handling
+  function setupSPATransitions() {
+    // Handle all blog post links for SPA transitions
+    document.querySelectorAll('a[href^="/blog/"]').forEach((link) => {
+      // Skip links that are anchor links or already processed
+      if (link.getAttribute('href').includes('#') || link.hasAttribute('data-spa-handled')) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+
+    // Handle year anchor links specially
+    document.querySelectorAll('a[href^="#year-"]').forEach((anchor) => {
+      anchor.setAttribute('data-spa-internal', 'true');
+    });
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
+</script>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import FormattedDate from '../components/FormattedDate.astro';
-import TagList from '../components/TagList.astro';

 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: ['*'],
@@ -17,19 +17,27 @@ 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);
 ---

 <Layout title=`Home | ${global.name}`>
-  <!-- Header section -->
-  <section
-    class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20"
-    transition:animate="slide"
-  >
+  <!-- Hero Section with improved mobile responsiveness -->
+  <section class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20">
    <div class="relative mx-auto max-w-2xl">
+      <!-- Adjusted blob positions and sizes for better mobile appearance -->
+      <div
+        class="animate-blob theme-transition-bg absolute -left-10 -top-10 h-40 w-40 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/50 sm:-left-20 sm:-top-20 sm:h-64 sm:w-64"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-2000 theme-transition-bg absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:-bottom-20 sm:-right-20 sm:h-64 sm:w-64"
+      >
+      </div>
+
      <div class="relative text-center sm:text-left">
        <h1
-          class="theme-transition-color hero-text text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl md:text-5xl lg:text-6xl dark:text-zinc-100"
+          class="theme-transition-color hero-text text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-4xl md:text-5xl lg:text-6xl"
        >
          <span class="block">Writing on technology,</span>
          <span class="mt-1 block">development, and</span>
@@ -37,13 +45,13 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
            <span class="relative inline-block">
              selfhosting.
              <span
-                class="theme-transition-bg bg-turquoise absolute -bottom-1 left-0 h-1 w-full origin-left transform"
+                class="theme-transition-bg absolute -bottom-1 left-0 h-1 w-full origin-left transform bg-zinc-800 dark:bg-zinc-200"
              ></span>
            </span>
          </span>
        </h1>
        <p
-          class="theme-transition-color mx-auto mt-4 max-w-lg text-base leading-relaxed text-zinc-600 sm:mx-0 sm:mt-6 sm:text-lg md:mt-8 dark:text-zinc-400"
+          class="theme-transition-color mx-auto mt-4 max-w-lg text-base leading-relaxed text-zinc-600 dark:text-zinc-400 sm:mx-0 sm:mt-6 sm:text-lg md:mt-8"
        >
          {global.about}
        </p>
@@ -52,7 +60,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
        >
          <a
            href="/about"
-            class="theme-transition-color group relative inline-flex min-h-[44px] items-center gap-2 text-sm font-medium text-zinc-600 transition-all duration-300 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+            class="theme-transition-color group relative inline-flex min-h-[44px] items-center gap-2 text-sm font-medium text-zinc-900 transition-all duration-300 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
          >
            <span>More about me</span>
            <svg
@@ -68,28 +76,31 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
                stroke-linejoin="round"
                d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
            </svg>
+            <span
+              class="theme-transition-bg absolute -bottom-1 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200"
+            ></span>
          </a>
        </div>
      </div>
    </div>
  </section>

-  <!-- Featured post section -->
+  <!-- Featured Post Section - Improved for mobile -->
  <section
-    class="theme-transition-all border-t border-zinc-200 px-4 py-10 sm:px-6 sm:py-12 md:py-16 dark:border-zinc-800"
+    class="theme-transition-all border-t border-zinc-100 px-4 py-10 dark:border-zinc-800 sm:px-6 sm:py-12 md:py-16"
  >
    <div class="mx-auto max-w-3xl">
      <div
        class="mb-6 flex flex-col justify-between gap-4 sm:mb-8 sm:flex-row sm:items-center md:mb-12"
      >
        <h2
-          class="theme-transition-color text-center text-xl font-bold tracking-tight text-zinc-900 sm:text-left sm:text-2xl md:text-3xl dark:text-zinc-100"
+          class="theme-transition-color text-center text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-left sm:text-2xl md:text-3xl"
        >
          Recent Posts
        </h2>
        <a
          href="/blog"
-          class="theme-transition-color group relative flex min-h-[44px] items-center justify-center self-center text-sm font-medium text-zinc-600 transition-all duration-300 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+          class="theme-transition-color group relative flex min-h-[44px] items-center justify-center self-center text-sm font-medium text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300 sm:self-auto"
        >
          <span class="flex items-center gap-1">
            View all posts
@@ -107,22 +118,25 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
                d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
            </svg>
          </span>
+          <span
+            class="theme-transition-bg absolute -bottom-1 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200"
+          ></span>
        </a>
      </div>

-      <!-- Post grid -->
+      <!-- Improved grid for better mobile layout -->
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3">
        {
          recentPosts.map((post, index) => (
-            <article class="theme-transition-element group relative mx-auto flex w-full max-w-sm flex-col items-start sm:mx-0">
-              <div class="theme-transition-all absolute -inset-x-4 -inset-y-6 z-0 border border-zinc-300 bg-white/50 transition-all duration-300 group-hover:bg-zinc-50 sm:-inset-x-6 sm:rounded-2xl dark:border-zinc-800 dark:bg-zinc-900/50 dark:group-hover:bg-zinc-800/70" />
+            <article class="hover-3d theme-transition-element group relative mx-auto flex w-full max-w-sm flex-col items-start sm:mx-0">
+              <div class="theme-transition-bg absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />

              {post.image && (
                <div class="relative z-10 mb-4 aspect-video w-full overflow-hidden rounded-lg">
                  <img
                    src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${post.image}`}
                    alt={post.title}
-                    class="h-full w-full object-cover"
+                    class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                    loading={index === 0 ? 'eager' : 'lazy'}
                    width="400"
                    height="225"
@@ -130,7 +144,13 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
                </div>
              )}

-              <h3 class="theme-transition-color relative z-10 mt-3 w-full text-center text-lg font-semibold tracking-tight text-zinc-900 transition-colors group-hover:text-zinc-700 sm:text-left sm:text-xl dark:text-zinc-100 dark:group-hover:text-zinc-300">
+              <div class="theme-transition-color relative z-10 flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-2 text-xs text-zinc-500 dark:text-zinc-400 sm:justify-start sm:gap-x-4">
+                <time datetime={post.published_date.toLocaleString()} class="font-medium">
+                  <FormattedDate date={post.published_date} />
+                </time>
+              </div>
+
+              <h3 class="theme-transition-color relative z-10 mt-3 w-full text-center text-lg font-semibold tracking-tight text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300 sm:text-left sm:text-xl">
                <a
                  href={`/blog/${post.slug}`}
                  class="flex min-h-[44px] items-center justify-center sm:justify-start"
@@ -140,29 +160,45 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
                </a>
              </h3>

-              <p class="z-10 mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400">
-                {/* {post.description} */}
+              <p class="theme-transition-color relative z-10 mt-2 line-clamp-3 w-full text-center text-sm text-zinc-600 dark:text-zinc-400 sm:mt-3 sm:text-left">
+                {post.description}
              </p>

-              <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
-                <FormattedDate date={post.published_date} />
-              </div>
-
-              <TagList tags={post.tags} class="z-10" />
+              {post.tags && post.tags.length > 0 && (
+                <div class="relative z-10 mt-3 flex w-full flex-wrap justify-center gap-2 sm:mt-4 sm:justify-start">
+                  {post.tags.slice(0, 3).map((tag) => (
+                    <a
+                      href={`/topics/${tag}`}
+                      class="theme-transition-all inline-flex min-h-[28px] items-center rounded-full bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-800 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 sm:px-3"
+                    >
+                      #{tag}
+                    </a>
+                  ))}
+                  {post.tags.length > 3 && (
+                    <span class="theme-transition-all inline-flex min-h-[28px] items-center rounded-full bg-zinc-50 px-2 py-1 text-xs font-medium text-zinc-500 dark:bg-zinc-800/50 dark:text-zinc-400">
+                      +{post.tags.length - 3} more
+                    </span>
+                  )}
+                </div>
+              )}

              <a
                href={`/blog/${post.slug}`}
-                class="theme-transition-color relative z-10 mx-auto mt-3 flex min-h-[44px] items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 sm:mx-0 sm:mt-4 dark:text-zinc-300 dark:group-hover:text-zinc-100"
+                class="theme-transition-color relative z-10 mx-auto mt-3 flex min-h-[44px] items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 dark:text-zinc-300 dark:group-hover:text-zinc-100 sm:mx-0 sm:mt-4"
              >
                <span class="relative inline-block overflow-hidden">
-                  <span class="relative z-10">Read article</span>
-                  <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                  <span class="block transition-transform duration-300 group-hover:-translate-y-full">
+                    Read article
+                  </span>
+                  <span class="absolute left-0 top-0 translate-y-full whitespace-nowrap transition-transform duration-300 group-hover:translate-y-0">
+                    Explore now
+                  </span>
                </span>
                <svg
                  viewBox="0 0 16 16"
                  fill="none"
                  aria-hidden="true"
-                  class="ml-1 h-4 w-4 stroke-current transition-transform duration-300"
+                  class="ml-1 h-4 w-4 stroke-current transition-transform duration-300 group-hover:translate-x-1"
                >
                  <path
                    d="M6.75 5.75 9.25 8l-2.5 2.25"
@@ -179,13 +215,13 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
    </div>
  </section>

-  <!-- Tags section -->
+  <!-- Topics/Tags Section - Improved for mobile -->
  {
    allTags.length > 0 && (
-      <section class="theme-transition-all border-t border-zinc-200 px-4 py-10 sm:px-6 sm:py-12 md:py-16 dark:border-zinc-800">
+      <section class="theme-transition-all border-t border-zinc-100 px-4 py-10 dark:border-zinc-800 sm:px-6 sm:py-12 md:py-16">
        <div class="mx-auto max-w-3xl">
-          <h2 class="theme-transition-color mb-6 text-center text-xl font-bold tracking-tight text-zinc-900 sm:mb-8 sm:text-left sm:text-2xl md:text-3xl dark:text-zinc-100">
-            Popular Tags
+          <h2 class="theme-transition-color mb-6 text-center text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:mb-8 sm:text-left sm:text-2xl md:text-3xl">
+            Explore Topics
          </h2>

          <div class="mx-auto grid max-w-xs grid-cols-1 gap-3 sm:max-w-none sm:grid-cols-2 sm:gap-4 md:grid-cols-3">
@@ -193,14 +229,14 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
              const tagCount = posts.filter((post) => post.tags && post.tags.includes(tag)).length;
              return (
                <a
-                  href={`/tags/${tag}`}
-                  class="theme-transition-all flex min-h-[80px] flex-col rounded-xl border border-zinc-300 bg-white/50 p-3 transition-all duration-300 hover:bg-zinc-50 sm:min-h-[90px] sm:p-4 md:p-6 dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:bg-zinc-800/70"
+                  href={`/topics/${tag}`}
+                  class="theme-transition-all group flex min-h-[80px] flex-col rounded-xl border border-zinc-200 p-3 transition-all duration-300 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/70 sm:min-h-[90px] sm:p-4 md:p-6"
                >
                  <div class="mb-2 flex items-start justify-between">
                    <span class="theme-transition-color mr-2 text-sm font-medium text-zinc-900 dark:text-zinc-100">
                      #{tag}
                    </span>
-                    <span class="theme-transition-all shrink-0 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">
+                    <span class="theme-transition-all flex-shrink-0 rounded-full bg-zinc-100 px-2 py-0.5 text-xs text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                      {tagCount} {tagCount === 1 ? 'post' : 'posts'}
                    </span>
                  </div>
@@ -211,6 +247,29 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
              );
            })}
          </div>
+
+          <div class="mt-6 text-center sm:mt-8">
+            <a
+              href="/tags"
+              class="theme-transition-color inline-flex min-h-[44px] items-center text-sm font-medium text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
+            >
+              <span>View all topics</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="ml-1 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                />
+              </svg>
+            </a>
+          </div>
        </div>
      </section>
    )
@@ -218,7 +277,136 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
 </Layout>

 <script>
-  document.addEventListener('astro:page-load', () => {
+  // Add hover effect for cards on touch devices
+  document.addEventListener('DOMContentLoaded', () => {
+    // Check if it's a touch device
+    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 for better performance
+      document.documentElement.classList.add('touch-device');
+    }
+
+    // Improved viewport height fix for mobile browsers
+    const setVh = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    // Set initial value
+    setVh();
+
+    // Update on resize and scroll to prevent content shifting
+    window.addEventListener('resize', setVh);
+
+    // Use a debounced scroll handler to prevent performance issues
+    let scrollTimeout;
+    window.addEventListener('scroll', () => {
+      if (scrollTimeout) {
+        window.cancelAnimationFrame(scrollTimeout);
+      }
+
+      scrollTimeout = window.requestAnimationFrame(() => {
+        // Lock width during scroll
+        document.body.style.width = '100%';
+        document.body.style.overflowX = 'hidden';
+      });
+    });
+
+    // Fix for iOS Safari address bar height changes
+    if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+      // Force the layout to use the initial viewport size
+      document.documentElement.style.setProperty('--initial-vh', `${window.innerHeight * 0.01}px`);
+
+      // Apply fixed height to sections to prevent resizing
+      const sections = document.querySelectorAll('section');
+      sections.forEach((section) => {
+        section.style.width = '100%';
+      });
+    }
+
+    // Improved theme change handler that preserves scroll position and provides smoother transitions
+    document.addEventListener('themeChanged', () => {
+      // Store current scroll position
+      const scrollPosition = window.scrollY;
+
+      // Create a temporary overlay for smoother transition
+      const overlay = document.createElement('div');
+      overlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        background-color: ${document.documentElement.classList.contains('dark') ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
+        z-index: 9999;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      `;
+      document.body.appendChild(overlay);
+
+      // Fade in overlay
+      requestAnimationFrame(() => {
+        overlay.style.opacity = '0.5';
+
+        // Update theme-transition elements without forcing reflow of entire page
+        requestAnimationFrame(() => {
+          document
+            .querySelectorAll(
+              '.theme-transition-all, .theme-transition-bg, .theme-transition-color'
+            )
+            .forEach((el) => {
+              // Apply a subtle animation instead of a hard reset
+              el.style.transition = 'all 0.5s ease';
+            });
+
+          // Fade out overlay after transition completes
+          setTimeout(() => {
+            overlay.style.opacity = '0';
+            setTimeout(() => {
+              overlay.remove();
+            }, 300);
+          }, 300);
+        });
+      });
+
+      // Restore scroll position (prevents jumping to top)
+      if (scrollPosition > 0) {
+        setTimeout(() => {
+          window.scrollTo({
+            top: scrollPosition,
+            behavior: 'auto', // Use 'auto' to prevent animation
+          });
+        }, 10);
+      }
+    });
+
+    // Fix theme inconsistency issues by checking theme on visibility change
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        const storedTheme = localStorage.getItem('theme');
+        const currentThemeIsDark = document.documentElement.classList.contains('dark');
+
+        if (storedTheme === 'dark' && !currentThemeIsDark) {
+          document.documentElement.classList.add('dark');
+        } else if (storedTheme === 'light' && currentThemeIsDark) {
+          document.documentElement.classList.remove('dark');
+        }
+      }
+    });
+
    // Add smooth reveal animations for content after loading
    const animateContent = () => {
      // Animate hero section
@@ -257,6 +445,147 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
      });
    };

-    animateContent();
+    // Run animations after the loading screen is hidden
+    const loadingScreen = document.getElementById('loading-screen');
+    if (loadingScreen) {
+      // Check if loading screen is already hidden (page refresh)
+      if (loadingScreen.style.display === 'none') {
+        animateContent();
+      } else {
+        // Wait for loading screen to hide
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (
+              mutation.target === loadingScreen &&
+              mutation.type === 'attributes' &&
+              mutation.attributeName === 'style' &&
+              loadingScreen.style.display === 'none'
+            ) {
+              animateContent();
+              observer.disconnect();
+            }
+          });
+        });
+
+        observer.observe(loadingScreen, { attributes: true });
+
+        // Fallback
+        setTimeout(animateContent, 3500);
+      }
+    } else {
+      // If loading screen doesn't exist for some reason
+      animateContent();
+    }
  });
+
+  // SPA transition handling for homepage
+  function setupSPATransitions() {
+    // Handle all internal links for SPA transitions
+    document.querySelectorAll('a[href^="/"]').forEach((link) => {
+      // Skip links that are anchor links, external links, or already processed
+      if (
+        link.getAttribute('href').includes('#') ||
+        link.getAttribute('target') === '_blank' ||
+        link.hasAttribute('data-spa-handled')
+      ) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
 </script>
+
+<style>
+  /* Fix for theme transition issues */
+  :global(:root) {
+    --theme-transition-duration: 0.5s;
+    --theme-transition-timing: ease;
+  }
+
+  :global(html),
+  :global(body) {
+    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing);
+  }
+
+  :global(.theme-transition-all) {
+    transition: all var(--theme-transition-duration) var(--theme-transition-timing);
+  }
+
+  :global(.theme-transition-bg) {
+    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing);
+  }
+
+  :global(.theme-transition-color) {
+    transition: color var(--theme-transition-duration) var(--theme-transition-timing);
+  }
+
+  /* Ensure transitions apply to all theme-related properties */
+  :global(*) {
+    transition-property: background-color, border-color, color, fill, stroke, opacity;
+    transition-duration: var(--theme-transition-duration);
+    transition-timing-function: var(--theme-transition-timing);
+  }
+
+  /* Remove the forced transition disabling which causes flickering */
+  :global(.theme-switching),
+  :global(.theme-switching *) {
+    /* Use a subtle transition instead of none */
+    transition-duration: 0.3s !important;
+  }
+
+  /* Content reveal animations */
+  .hero-text span,
+  .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;
+  }
+
+  /* Rest of your existing styles... */
+</style>
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -1,358 +0,0 @@
---
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import FormattedDate from '../../components/FormattedDate.astro';
-
-import directus from '../../../lib/directus';
-import { readItems } from '@directus/sdk';
-
-export const prerender = true;
-
-export async function getStaticPaths() {
-  const posts = await directus.request(
-    readItems('posts', {
-      fields: ['*'],
-    })
-  );
-
-  const uniqueTags = [...new Set(posts.flatMap((post) => post.tags || []))];
-
-  // Create a path for each tag
-  return uniqueTags.map((tag) => {
-    // Make tag matching case-insensitive
-    const filteredPosts = posts.filter(
-      (post) => post.tags?.some((t) => t.toLowerCase() === (tag as string).toLowerCase()) // Explicitly cast tag to string
-    );
-    return {
-      params: { tag },
-      props: { posts: filteredPosts },
-    };
-  });
-}
-
-const { tag } = Astro.params as { tag: string };
-const { posts = [] } = Astro.props;
-
-const sortedPosts =
-  posts && posts.length > 0
-    ? [...posts].sort((a, b) => b.published_date.valueOf() - a.published_date.valueOf())
-    : [];
-
-const relatedTags = [
-  ...new Set(sortedPosts.flatMap((post) => post.tags || []).filter((t) => t !== tag)),
-].slice(0, 5);
---
-
-<BaseLayout title={`Posts tagged with "${tag}"`}>
-  <div class="mx-auto max-w-5xl px-4 py-10 sm:py-16" transition:animate="slide">
-    <div class="relative mb-10 sm:mb-16">
-      <div class="relative text-center sm:text-left">
-        <a
-          href="/blog#topics"
-          class="group mb-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-1"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-            >
-            </path>
-          </svg>
-          <span>Back to blog</span>
-          <span
-            class="block h-0.5 max-w-0 bg-zinc-300 transition-all duration-300 group-hover:max-w-full dark:bg-zinc-700"
-          ></span>
-        </a>
-
-        <div
-          class="mb-2 flex flex-col justify-center gap-4 sm:flex-row sm:items-center sm:justify-start"
-        >
-          <div
-            class="tag-icon mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100 shadow-xs sm:mx-0 dark:bg-zinc-800"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-6 w-6 text-zinc-700 dark:text-zinc-300"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
-              >
-              </path>
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"> </path>
-            </svg>
-          </div>
-
-          <h1
-            class="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-zinc-100"
-          >
-            <span class="relative">
-              #{tag}
-              <span class="absolute -bottom-1 left-0 h-1 w-full bg-zinc-200 dark:bg-zinc-700"
-              ></span>
-              <span
-                class="animate-expand bg-turquoise absolute -bottom-1 left-0 h-1 w-full opacity-70"
-              ></span>
-            </span>
-          </h1>
-        </div>
-
-        <p
-          class="mx-auto mt-4 max-w-2xl text-base text-zinc-600 sm:mx-0 sm:text-lg dark:text-zinc-400"
-        >
-          Exploring <span class="font-medium text-zinc-900 dark:text-zinc-100"
-            >{sortedPosts.length}</span
-          > articles tagged with <span class="font-medium text-zinc-900 dark:text-zinc-100"
-            >"{tag}"</span
-          >
-        </p>
-      </div>
-    </div>
-
-    <!-- Related tags section -->
-    {
-      relatedTags.length > 0 && (
-        <div class="hero-text hide-scrollbar mb-8 overflow-x-auto pb-4 sm:mb-12">
-          <h2 class="mb-3 text-center text-lg font-medium text-zinc-900 sm:text-left dark:text-zinc-100">
-            Related topics
-          </h2>
-          <div class="flex flex-nowrap justify-center gap-2 sm:justify-start">
-            {relatedTags.map((relatedTag) => (
-              <a
-                href={`/tags/${relatedTag}`}
-                class="inline-flex shrink-0 items-center rounded-full bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
-              >
-                #{relatedTag}
-              </a>
-            ))}
-          </div>
-        </div>
-      )
-    }
-
-    <!-- Posts list -->
-    <div class="relative">
-      <div
-        class="hero-text bg-grid-pattern pointer-events-none absolute inset-0 opacity-5 dark:opacity-10"
-      >
-      </div>
-
-      <div class="relative space-y-6 sm:space-y-8">
-        {
-          sortedPosts.map((post) => (
-            <article class="hover-3d theme-transition-element group relative mx-auto flex max-w-2xl flex-col p-5 sm:mx-0 sm:p-8">
-              <div class="absolute inset-0 rounded-2xl border border-zinc-200 bg-white/50 transition-all duration-300 group-hover:bg-zinc-50 hover:bg-zinc-50/80 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:group-hover:bg-zinc-800/70 dark:hover:bg-zinc-900/50" />
-
-              <div class="flex flex-col gap-5 sm:flex-row sm:gap-6">
-                {post.image && (
-                  <div class="z-10 mx-auto h-40 w-full shrink-0 overflow-hidden rounded-xl sm:mx-0 sm:w-56">
-                    <img
-                      src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${post.image}?width=500`}
-                      alt={post.image_alt}
-                      class="h-full w-full object-cover"
-                      loading="lazy"
-                    />
-                  </div>
-                )}
-
-                <div class="z-10 flex-1">
-                  <h2 class="mb-2 text-center text-xl font-semibold text-zinc-900 sm:mb-3 sm:text-left sm:text-2xl dark:text-zinc-100">
-                    <a href={`/blog/${post.slug}/`} class="before:absolute before:inset-0">
-                      {post.title}
-                    </a>
-                  </h2>
-
-                  <p class="mb-4 line-clamp-2 text-center text-sm text-zinc-600 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400">
-                    {post.description}
-                  </p>
-
-                  <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
-                    <FormattedDate date={post.published_date} />
-                  </div>
-                </div>
-              </div>
-
-              <div class="z-10 mt-4 flex flex-wrap items-end justify-center border-t border-zinc-100 pt-4 sm:justify-between dark:border-zinc-800">
-                {post.tags && post.tags.length > 0 && (
-                  <div class="mb-3 flex flex-wrap justify-center gap-2 sm:mb-0 sm:justify-start">
-                    {post.tags.slice(0, 3).map((postTag) => (
-                      <a
-                        href={`/blog/${postTag}`}
-                        class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${
-                          postTag === tag
-                            ? 'bg-zinc-900/10 text-zinc-900 dark:bg-zinc-100/20 dark:text-zinc-100'
-                            : 'bg-zinc-100 text-zinc-600 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700'
-                        }`}
-                      >
-                        #{postTag}
-                      </a>
-                    ))}
-                    {post.tags.length > 3 && (
-                      <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">
-                        +{post.tags.length - 3}
-                      </span>
-                    )}
-                  </div>
-                )}
-
-                <div class="mx-auto sm:mr-0 sm:ml-auto">
-                  <a
-                    href={`/blog/${post.slug}`}
-                    class="theme-transition-color relative z-10 mx-auto mt-3 flex min-h-[44px] items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 sm:mx-0 sm:mt-4 dark:text-zinc-300 dark:group-hover:text-zinc-100"
-                  >
-                    <span class="relative inline-block overflow-hidden">
-                      <span class="relative z-10">Read article</span>
-                      <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
-                    </span>
-                    <svg
-                      viewBox="0 0 16 16"
-                      fill="none"
-                      aria-hidden="true"
-                      class="ml-1 h-4 w-4 stroke-current transition-transform duration-300"
-                    >
-                      <path
-                        d="M6.75 5.75 9.25 8l-2.5 2.25"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </a>
-                </div>
-              </div>
-            </article>
-          ))
-        }
-      </div>
-    </div>
-
-    <!-- Empty state -->
-    {
-      sortedPosts.length === 0 && (
-        <div class="py-12 text-center sm:py-20">
-          <div class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-zinc-100 sm:mb-6 sm:h-20 sm:w-20 dark:bg-zinc-800">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-8 w-8 text-zinc-500 sm:h-10 sm:w-10 dark:text-zinc-400"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-              />
-            </svg>
-          </div>
-          <h2 class="mb-2 text-xl font-semibold text-zinc-900 sm:text-2xl dark:text-zinc-100">
-            No posts found
-          </h2>
-          <p class="text-zinc-600 dark:text-zinc-400">There are no posts with this tag yet.</p>
-          <a
-            href="/blog"
-            class="mt-6 inline-flex items-center gap-2 rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-800 transition-all duration-300 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-4 w-4"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"
-              />
-            </svg>
-            <span>Browse all articles</span>
-          </a>
-        </div>
-      )
-    }
-  </div>
-</BaseLayout>
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    // Add smooth reveal animations for content after loading
-    const animateContent = () => {
-      // Animate hero section
-      const heroElements = document.querySelectorAll(
-        '.hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p'
-      );
-      heroElements.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-
-      // Animate posts
-      const articles = document.querySelectorAll('article.group');
-      articles.forEach((article, index) => {
-        setTimeout(
-          () => {
-            article.classList.add('animate-reveal');
-          },
-          500 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>
-
-<style>
-  /* Animated underline */
-  @keyframes expand {
-    from {
-      width: 0;
-    }
-    to {
-      width: 100%;
-    }
-  }
-
-  .animate-expand {
-    animation: expand 1s ease-out forwards;
-  }
-
-  .animate-reveal {
-    opacity: 1 !important;
-    transform: translateY(0) !important;
-  }
-
-  /* Line clamp for descriptions */
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>
--- a/src/pages/topics/[tag].astro
+++ b/src/pages/topics/[tag].astro
@@ -0,0 +1,520 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import FormattedDate from '../../components/FormattedDate.astro';
+
+import directus from '../../../lib/directus';
+import { readItems } from '@directus/sdk';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  const posts = await directus.request(
+    readItems('posts', {
+      fields: ['*'],
+    })
+  );
+
+  // Get all unique tags
+  const uniqueTags = [...new Set(posts.flatMap((post) => post.tags || []))];
+
+  // Create a path for each tag
+  return uniqueTags.map((tag) => {
+    // Make tag matching case-insensitive
+    const filteredPosts = posts.filter(
+      (post) => post.tags?.some((t) => t.toLowerCase() === (tag as string).toLowerCase()) // Explicitly cast tag to string
+    );
+    return {
+      params: { tag },
+      props: { posts: filteredPosts },
+    };
+  });
+}
+
+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 tagHue = Math.abs(tag.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % 360);
+const relatedTags = [
+  ...new Set(sortedPosts.flatMap((post) => post.tags || []).filter((t) => t !== tag)),
+].slice(0, 5);
+---
+
+<BaseLayout title={`Posts tagged with "${tag}"`}>
+  <div class="mx-auto max-w-5xl px-4 py-10 sm:py-16">
+    <!-- Header section -->
+    <div class="relative mb-10 sm:mb-16">
+      <div
+        class="animate-blob absolute -left-20 -top-20 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl dark:bg-zinc-900/30 sm:h-64 sm:w-64"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-2000 absolute -bottom-10 -right-10 h-36 w-36 rounded-full bg-zinc-200 opacity-20 blur-2xl dark:bg-zinc-900/20 sm:h-48 sm:w-48"
+      >
+      </div>
+
+      <div class="relative text-center sm:text-left">
+        <a
+          href="/tags"
+          class="group mb-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-1"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+          </svg>
+          <span>Back to all topics</span>
+          <span
+            class="block h-0.5 max-w-0 bg-zinc-300 transition-all duration-300 group-hover:max-w-full dark:bg-zinc-700"
+          ></span>
+        </a>
+
+        <div
+          class="mb-2 flex flex-col justify-center gap-4 sm:flex-row sm:items-center sm:justify-start"
+        >
+          <div
+            class="tag-icon mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100 shadow-sm dark:bg-zinc-800 sm:mx-0"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="h-6 w-6 text-zinc-700 dark:text-zinc-300"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+              ></path>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"></path>
+            </svg>
+          </div>
+
+          <h1
+            class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-4xl"
+          >
+            <span class="relative">
+              #{tag}
+              <span class="absolute -bottom-1 left-0 h-1 w-full bg-zinc-200 dark:bg-zinc-700"
+              ></span>
+              <span
+                class="animate-expand absolute -bottom-1 left-0 h-1 w-1/2 bg-zinc-900 opacity-70 dark:bg-zinc-100"
+              ></span>
+            </span>
+          </h1>
+        </div>
+
+        <p
+          class="mx-auto mt-4 max-w-2xl text-base text-zinc-600 dark:text-zinc-400 sm:mx-0 sm:text-lg"
+        >
+          Exploring <span class="font-medium text-zinc-900 dark:text-zinc-100"
+            >{sortedPosts.length}</span
+          > articles tagged with <span class="font-medium text-zinc-900 dark:text-zinc-100"
+            >"{tag}"</span
+          >
+        </p>
+      </div>
+    </div>
+
+    <!-- Related tags section -->
+    {
+      relatedTags.length > 0 && (
+        <div class="hide-scrollbar mb-8 overflow-x-auto pb-4 sm:mb-12">
+          <h2 class="mb-3 text-center text-lg font-medium text-zinc-900 dark:text-zinc-100 sm:text-left">
+            Related topics
+          </h2>
+          <div class="flex flex-nowrap justify-center gap-2 sm:justify-start">
+            {relatedTags.map((relatedTag) => (
+              <a
+                href={`/topics/${relatedTag}`}
+                class="inline-flex flex-shrink-0 items-center rounded-full bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+              >
+                #{relatedTag}
+              </a>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    <!-- Posts list -->
+    <div class="relative">
+      <div class="bg-grid-pattern pointer-events-none absolute inset-0 opacity-5 dark:opacity-10">
+      </div>
+
+      <div class="relative space-y-6 sm:space-y-8">
+        {
+          sortedPosts.map((post) => (
+            <article class="hover-card group relative mx-auto flex max-w-2xl flex-col rounded-2xl border border-zinc-200 p-5 transition-all duration-300 hover:bg-zinc-50/80 hover:shadow-md dark:border-zinc-800 dark:hover:bg-zinc-900/50 sm:mx-0 sm:p-8">
+              <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-zinc-50/0 to-zinc-100/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-zinc-900/0 dark:to-zinc-800/0" />
+
+              <div class="flex flex-col gap-5 sm:flex-row sm:gap-6">
+                {post.image && (
+                  <div class="mx-auto h-40 w-full flex-shrink-0 overflow-hidden rounded-xl shadow-sm transition-all duration-300 group-hover:shadow-md sm:mx-0 sm:w-56">
+                    <img
+                      src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${post.image}?width=500`}
+                      alt={post.image_alt}
+                      class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      loading="lazy"
+                    />
+                  </div>
+                )}
+
+                <div class="flex-1">
+                  <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 dark:text-zinc-400 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm">
+                    {post.published_date && (
+                      <time
+                        datetime={post.published_date.toLocaleString()}
+                        class="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>
+                        <FormattedDate date={post.published_date} />
+                      </time>
+                    )}
+                  </div>
+
+                  <h2 class="mb-2 text-center text-xl font-semibold text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300 sm:mb-3 sm:text-left sm:text-2xl">
+                    <a href={`/blog/${post.slug}/`} class="before:absolute before:inset-0">
+                      {post.title}
+                    </a>
+                  </h2>
+
+                  <p class="mb-4 line-clamp-2 text-center text-sm text-zinc-600 dark:text-zinc-400 sm:line-clamp-3 sm:text-left sm:text-base">
+                    {post.description}
+                  </p>
+                </div>
+              </div>
+
+              <div class="mt-4 flex flex-wrap items-end justify-center border-t border-zinc-100 pt-4 dark:border-zinc-800 sm:justify-between">
+                {post.tags && post.tags.length > 0 && (
+                  <div class="mb-3 flex flex-wrap justify-center gap-2 sm:mb-0 sm:justify-start">
+                    {post.tags.slice(0, 3).map((postTag) => (
+                      <a
+                        href={`/topics/${postTag}`}
+                        class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${
+                          postTag === tag
+                            ? 'bg-zinc-900/10 text-zinc-900 dark:bg-zinc-100/20 dark:text-zinc-100'
+                            : 'bg-zinc-100 text-zinc-600 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700'
+                        }`}
+                      >
+                        #{postTag}
+                      </a>
+                    ))}
+                    {post.tags.length > 3 && (
+                      <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">
+                        +{post.tags.length - 3}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                <div class="mx-auto sm:ml-auto sm:mr-0">
+                  <a
+                    href={`/blog/${post.slug}/`}
+                    class="inline-flex items-center text-sm font-medium text-zinc-700 transition-colors group-hover:text-zinc-900 dark:text-zinc-300 dark:group-hover:text-zinc-100"
+                    aria-hidden="true"
+                    tabindex="-1"
+                  >
+                    <span class="relative inline-block overflow-hidden">
+                      <span class="block transition-transform duration-300 group-hover:-translate-y-full">
+                        Read article
+                      </span>
+                      <span class="absolute left-0 top-0 translate-y-full whitespace-nowrap transition-transform duration-300 group-hover:translate-y-0">
+                        Explore now
+                      </span>
+                    </span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="ml-1 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </article>
+          ))
+        }
+      </div>
+    </div>
+
+    <!-- Empty state với màu zinc -->
+    {
+      sortedPosts.length === 0 && (
+        <div class="py-12 text-center sm:py-20">
+          <div class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 sm:mb-6 sm:h-20 sm:w-20">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="h-8 w-8 text-zinc-500 dark:text-zinc-400 sm:h-10 sm:w-10"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
+            </svg>
+          </div>
+          <h2 class="mb-2 text-xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-2xl">
+            No posts found
+          </h2>
+          <p class="text-zinc-600 dark:text-zinc-400">There are no posts with this tag yet.</p>
+          <a
+            href="/blog"
+            class="mt-6 inline-flex items-center gap-2 rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-800 transition-all duration-300 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="h-4 w-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"
+              />
+            </svg>
+            <span>Browse all articles</span>
+          </a>
+        </div>
+      )
+    }
+  </div>
+</BaseLayout>
+
+<style>
+  /* Grid pattern background */
+  .bg-grid-pattern {
+    background-size: 30px 30px;
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+  }
+
+  :global(.dark) .bg-grid-pattern {
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  }
+
+  /* Hide scrollbar but keep functionality */
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Animated underline */
+  @keyframes expand {
+    from {
+      width: 0;
+    }
+    to {
+      width: 50%;
+    }
+  }
+
+  .animate-expand {
+    animation: expand 1s ease-out forwards;
+  }
+
+  /* Blob animation */
+  .animate-blob {
+    animation: blob 7s infinite;
+  }
+
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+
+  @keyframes blob {
+    0% {
+      transform: translate(0px, 0px) scale(1);
+    }
+    33% {
+      transform: translate(20px, -20px) scale(1.1);
+    }
+    66% {
+      transform: translate(-20px, 20px) scale(0.9);
+    }
+    100% {
+      transform: translate(0px, 0px) scale(1);
+    }
+  }
+
+  /* Hover card effect */
+  .hover-card {
+    transform: translateY(0);
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease,
+      background-color 0.3s ease;
+  }
+
+  @media (hover: hover) {
+    .hover-card:hover {
+      transform: translateY(-2px);
+    }
+  }
+
+  /* Line clamp for descriptions */
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .animate-blob {
+      animation-duration: 10s;
+    }
+  }
+</style>
+
+<script>
+  // Handle SPA transitions for tag pages
+  function setupSPATransitions() {
+    // Handle all internal links for SPA transitions
+    document.querySelectorAll('a[href^="/"]').forEach((link) => {
+      // Skip links that are anchor links, external links, or already processed
+      if (
+        link.getAttribute('href').includes('#') ||
+        link.getAttribute('target') === '_blank' ||
+        link.hasAttribute('data-spa-handled')
+      ) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+
+    // Initialize animations for tag page
+    function animateTagContent() {
+      // Animate header elements
+      const headerElements = document.querySelectorAll('h1, .tag-icon, .tag-description');
+      headerElements.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          100 + index * 150
+        );
+      });
+
+      // Animate posts with staggered delay
+      const articles = document.querySelectorAll('article');
+      articles.forEach((article, index) => {
+        setTimeout(
+          () => {
+            article.classList.add('animate-reveal');
+          },
+          400 + index * 100
+        );
+      });
+
+      // Animate related tags
+      const relatedTags = document.querySelectorAll('.related-tags a');
+      relatedTags.forEach((tag, index) => {
+        setTimeout(
+          () => {
+            tag.classList.add('animate-reveal');
+          },
+          600 + index * 50
+        );
+      });
+    }
+
+    // Run animations
+    animateTagContent();
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
+</script>
+
+<!-- Add this at the end of your page -->
--- a/src/pages/topics/index.astro
+++ b/src/pages/topics/index.astro
@@ -0,0 +1,714 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+import directus from '../../../lib/directus';
+import { readItems } from '@directus/sdk';
+
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+
+const tags = [...new Set(posts.flatMap((post) => post.tags || []))].sort();
+
+// Count posts for each tag and create tag objects with additional data
+const tagObjects = tags.map((tag) => {
+  const count = posts.filter((post) => post.tags?.includes(tag)).length;
+  // Generate a consistent but random-looking hue for each tag
+  const hue = Math.abs(tag.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % 360);
+  return {
+    name: tag,
+    count,
+    size: Math.max(1, Math.min(3, Math.floor(count / 2) + 1)), // Size 1-3 based on count
+    hue,
+  };
+});
+
+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">
+    <!-- Enhanced header section with animated elements - improved for mobile -->
+    <div class="theme-transition-element relative mb-8 text-center sm:mb-12 md:mb-16">
+      <div
+        class="animate-blob theme-transition-bg absolute -left-16 -top-16 h-36 w-36 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/50 sm:h-48 sm:w-48 md:h-72 md:w-72"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-2000 theme-transition-bg absolute -bottom-16 -right-16 h-36 w-36 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30 sm:h-48 sm:w-48 md:h-72 md:w-72"
+      >
+      </div>
+      <div
+        class="animate-blob animation-delay-4000 theme-transition-bg absolute right-8 top-8 h-24 w-24 rounded-full bg-zinc-100/30 opacity-40 blur-2xl dark:bg-zinc-700/20 sm:h-32 sm:w-32 md:h-40 md:w-40"
+      >
+      </div>
+
+      <h1
+        class="theme-transition-color relative mb-3 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:mb-4 sm:text-4xl md:mb-6 md:text-5xl lg:text-6xl"
+      >
+        <span class="relative inline-block">
+          <span class="relative inline-block">
+            <span
+              class="theme-transition-bg absolute -inset-1 rounded-lg bg-gradient-to-r from-zinc-200/50 to-zinc-300/50 blur-sm dark:from-zinc-800/50 dark:to-zinc-700/50"
+            ></span>
+            <span class="relative">Explore</span>
+          </span>
+          {' '}
+          <span class="relative inline-block">
+            Topics
+            <span
+              class="animate-underline theme-transition-bg absolute -bottom-1 left-0 h-0.5 w-full origin-left transform bg-gradient-to-r from-zinc-400 to-zinc-600 dark:from-zinc-600 dark:to-zinc-400 sm:-bottom-2 sm:h-1"
+            ></span>
+          </span>
+        </span>
+      </h1>
+      <p
+        class="theme-transition-color relative mx-auto max-w-2xl text-sm text-zinc-600 dark:text-zinc-400 sm:text-base md:text-lg lg:text-xl"
+      >
+        Discover content organized by your interests
+      </p>
+    </div>
+
+    {
+      tags.length === 0 ? (
+        <div class="theme-transition-element py-8 text-center sm:py-12 md:py-16">
+          <div class="theme-transition-bg mb-3 inline-flex h-16 w-16 items-center justify-center rounded-full bg-zinc-100 shadow-inner dark:bg-zinc-800 sm:mb-4 sm:h-20 sm:w-20 md:mb-6 md:h-24 md:w-24">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="theme-transition-color h-8 w-8 text-zinc-500 dark:text-zinc-400 sm:h-10 sm:w-10 md:h-12 md:w-12"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+              />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+            </svg>
+          </div>
+          <p class="theme-transition-color text-lg font-medium text-zinc-800 dark:text-zinc-200 sm:text-xl md:text-2xl">
+            No tags found yet.
+          </p>
+          <p class="theme-transition-color mt-2 text-xs text-zinc-500 dark:text-zinc-500 sm:text-sm md:text-base">
+            Check back later for categorized content.
+          </p>
+        </div>
+      ) : (
+        <div class="flex w-full justify-center">
+          <div class="tag-cloud hover-3d glass theme-transition-all relative w-full rounded-lg border border-zinc-100 bg-white/50 p-3 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-900/50 sm:rounded-xl sm:p-4 md:rounded-2xl md:p-6 lg:rounded-3xl lg:p-8">
+            <div class="bg-grid-pattern theme-transition-bg absolute inset-0 opacity-5 dark:opacity-10" />
+            <div class="theme-transition-bg absolute -right-8 -top-8 h-20 w-20 rounded-full bg-gradient-to-br from-zinc-200/30 to-zinc-300/20 blur-xl dark:from-zinc-700/20 dark:to-zinc-800/10 sm:h-24 sm:w-24 md:h-32 md:w-32 lg:h-40 lg:w-40" />
+            <div class="theme-transition-bg absolute -bottom-8 -left-8 h-20 w-20 rounded-full bg-gradient-to-tl from-zinc-200/30 to-zinc-300/20 blur-xl dark:from-zinc-700/20 dark:to-zinc-800/10 sm:h-24 sm:w-24 md:h-32 md:w-32 lg:h-40 lg:w-40" />
+
+            <h2 class="theme-transition-color mb-3 text-center text-lg font-bold text-zinc-900 dark:text-zinc-100 sm:mb-4 sm:text-xl md:mb-6 md:text-2xl lg:mb-8 lg:text-3xl">
+              Popular Topics
+            </h2>
+
+            <div class="xxxs:grid-cols-2 xxs:grid-cols-2 xs:grid-cols-3 xxxs:gap-2 xxs:gap-2 xs:gap-2 grid w-full grid-cols-2 gap-1.5 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 md:gap-4 lg:grid-cols-5">
+              {sortedTags.map((tag) => (
+                <a
+                  href={`/topics/${tag.name}`}
+                  class="theme-transition-element theme-ripple group relative min-w-0 flex-grow overflow-hidden rounded-md border border-zinc-200 transition-all duration-300 hover:scale-[1.03] hover:border-zinc-300 hover:shadow-md active:scale-95 dark:border-zinc-800 dark:hover:border-zinc-700 sm:rounded-lg sm:hover:shadow-lg md:rounded-xl"
+                  style={`--tag-hue: ${tag.hue};`}
+                >
+                  <div class="theme-transition-bg absolute inset-0 bg-gradient-to-br from-zinc-50/90 to-zinc-100/90 opacity-100 transition-opacity group-hover:opacity-95 dark:from-zinc-800/90 dark:to-zinc-900/90" />
+
+                  <div class="xxxs:px-2 xxs:px-2 xs:px-2 xxxs:py-2 xxs:py-2 xs:py-2 xxs:gap-2 relative flex w-full items-center gap-1.5 px-1.5 py-1.5 sm:px-3 sm:py-3 md:px-4 md:py-4">
+                    <div class="xxxs:w-6 xxxs:h-6 xxs:w-6 xxs:h-6 xs:w-7 xs:h-7 group-hover:bg-accent/20 dark:group-hover:bg-accent/20 group-hover:text-accent-dark dark:group-hover:text-accent-light theme-transition-all flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 text-zinc-700 shadow-sm transition-all duration-300 dark:bg-zinc-800 dark:text-zinc-300 sm:h-8 sm:w-8 md:h-10 md:w-10">
+                      <span class="xxxs:text-xs xxs:text-xs xs:text-sm text-xs font-semibold sm:text-base md:text-lg">
+                        #
+                      </span>
+                    </div>
+
+                    <div class="min-w-0 flex-1 overflow-hidden">
+                      <h3 class="xxxs:text-xs xxs:text-xs xs:text-xs theme-transition-color truncate hyphens-auto break-words text-[10px] font-bold text-zinc-900 transition-colors group-hover:text-zinc-700 dark:text-zinc-100 dark:group-hover:text-zinc-300 sm:text-sm md:text-base">
+                        {tag.name}
+                      </h3>
+                      <p class="xxxs:text-[9px] xxs:text-[9px] xs:text-[10px] theme-transition-color truncate text-[8px] text-zinc-500 dark:text-zinc-400 sm:text-xs md:text-xs">
+                        {tag.count} article{tag.count !== 1 ? 's' : ''}
+                      </p>
+                    </div>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      )
+    }
+  </div>
+</BaseLayout>
+
+<script>
+  // Ultra-reliable responsiveness handling
+  document.addEventListener('DOMContentLoaded', () => {
+    // Fix viewport width issues on mobile
+    const fixViewportWidth = () => {
+      // Force the viewport to be exactly the width of the device
+      const viewport = document.querySelector('meta[name="viewport"]');
+      if (!viewport) {
+        const meta = document.createElement('meta');
+        meta.name = 'viewport';
+        meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
+        document.getElementsByTagName('head')[0].appendChild(meta);
+      } else {
+        viewport.setAttribute(
+          'content',
+          'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
+        );
+      }
+
+      // Fix for horizontal overflow
+      document.body.style.overflowX = 'hidden';
+      document.documentElement.style.overflowX = 'hidden';
+      document.documentElement.style.width = '100%';
+      document.body.style.width = '100%';
+    };
+
+    fixViewportWidth();
+
+    // Adjust tag items based on screen size with extreme precision
+    const adjustTagItems = () => {
+      const tagItems = document.querySelectorAll('.theme-ripple');
+      const width =
+        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      const isVerySmall = width < 360;
+      const isExtremelySmall = width < 280;
+      const isMicroScreen = width < 240;
+
+      // Fix container width to match viewport exactly
+      const container = document.querySelector('.tag-cloud');
+      if (container) {
+        container.style.maxWidth = '100vw';
+        container.style.width = '100%';
+        container.style.boxSizing = 'border-box';
+
+        // Remove any margins that might cause overflow
+        container.style.marginLeft = '0';
+        container.style.marginRight = '0';
+      }
+
+      // Fix grid width
+      const grid = document.querySelector('.grid');
+      if (grid) {
+        grid.style.width = '100%';
+        grid.style.maxWidth = '100%';
+      }
+
+      tagItems.forEach((item) => {
+        // Set appropriate classes based on screen size
+        if (isMicroScreen) {
+          item.classList.add('micro-screen');
+          item.classList.remove('extremely-small-screen', 'very-small-screen');
+        } else if (isExtremelySmall) {
+          item.classList.add('extremely-small-screen');
+          item.classList.remove('very-small-screen', 'micro-screen');
+        } else if (isVerySmall) {
+          item.classList.add('very-small-screen');
+          item.classList.remove('extremely-small-screen', 'micro-screen');
+        } else {
+          item.classList.remove('very-small-screen', 'extremely-small-screen', 'micro-screen');
+        }
+
+        // Ensure text doesn't overflow on small screens
+        const tagName = item.querySelector('h3');
+        const tagCount = item.querySelector('p');
+
+        if (tagName) {
+          // Set title for accessibility
+          tagName.title = tagName.textContent.trim();
+
+          // Adjust text length based on screen size
+          if (isMicroScreen && tagName.textContent.length > 6) {
+            tagName.dataset.fullText = tagName.textContent;
+            tagName.textContent = tagName.textContent.substring(0, 6) + '...';
+          } else if (isExtremelySmall && tagName.textContent.length > 8) {
+            tagName.dataset.fullText = tagName.textContent;
+            tagName.textContent = tagName.textContent.substring(0, 8) + '...';
+          } else if (isVerySmall && tagName.textContent.length > 12) {
+            tagName.dataset.fullText = tagName.textContent;
+            tagName.textContent = tagName.textContent.substring(0, 12) + '...';
+          } else if (tagName.dataset.fullText) {
+            tagName.textContent = tagName.dataset.fullText;
+            delete tagName.dataset.fullText;
+          }
+        }
+
+        // Set the tag hue for hover effects
+        const hue = item.style.getPropertyValue('--tag-hue');
+        item.style.setProperty('--hover-hue', hue);
+      });
+    };
+
+    // Run on load
+    adjustTagItems();
+
+    // Run on resize with optimized debounce
+    let resizeTimer;
+    const handleResize = () => {
+      if (resizeTimer) {
+        window.cancelAnimationFrame(resizeTimer);
+      }
+
+      resizeTimer = window.requestAnimationFrame(() => {
+        fixViewportWidth();
+        adjustTagItems();
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+
+    // Ensure layout is recalculated after page is fully loaded
+    window.addEventListener('load', () => {
+      fixViewportWidth();
+      adjustTagItems();
+      // Force recalculation after images and fonts are loaded
+      setTimeout(() => {
+        fixViewportWidth();
+        adjustTagItems();
+      }, 500);
+    });
+
+    // Fix for iOS Safari and other mobile browsers
+    if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
+      document.documentElement.style.setProperty(
+        '--safe-area-inset-bottom',
+        'env(safe-area-inset-bottom)'
+      );
+
+      // Fix for mobile viewport height issues
+      const setVh = () => {
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+      };
+
+      setVh();
+      window.addEventListener('resize', setVh);
+      window.addEventListener('orientationchange', () => {
+        // Wait for orientation change to complete
+        setTimeout(() => {
+          setVh();
+          fixViewportWidth();
+        }, 100);
+      });
+    }
+
+    // Add touch support for mobile devices
+    const addTouchSupport = () => {
+      const tagItems = document.querySelectorAll('.theme-ripple');
+
+      tagItems.forEach((item) => {
+        item.addEventListener(
+          'touchstart',
+          () => {
+            item.classList.add('touch-active');
+          },
+          { passive: true }
+        );
+
+        item.addEventListener(
+          'touchend',
+          () => {
+            setTimeout(() => {
+              item.classList.remove('touch-active');
+            }, 150);
+          },
+          { passive: true }
+        );
+
+        // Cancel active state if touch moves away
+        item.addEventListener(
+          'touchmove',
+          (e) => {
+            const touch = e.touches[0];
+            const rect = item.getBoundingClientRect();
+
+            if (
+              touch.clientX < rect.left ||
+              touch.clientX > rect.right ||
+              touch.clientY < rect.top ||
+              touch.clientY > rect.bottom
+            ) {
+              item.classList.remove('touch-active');
+            }
+          },
+          { passive: true }
+        );
+      });
+    };
+
+    addTouchSupport();
+  });
+</script>
+
+<style>
+  /* Base styles */
+  .tag-cloud {
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.03),
+      0 2px 4px rgba(0, 0, 0, 0.03),
+      0 4px 8px rgba(0, 0, 0, 0.05);
+    transform-style: preserve-3d;
+    perspective: 1000px;
+    transition: all var(--theme-transition);
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  /* Fix for horizontal overflow */
+  :global(html),
+  :global(body) {
+    overflow-x: hidden;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  :global(.max-w-6xl) {
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+
+  /* Ultra-responsive breakpoints for extreme reliability */
+  /* Micro screens (below 240px) */
+  @media (max-width: 239px) {
+    .tag-cloud {
+      padding: 0.5rem !important;
+      margin: 0 !important;
+      border-radius: 0.25rem !important;
+      width: 100% !important;
+    }
+
+    .tag-cloud h2 {
+      font-size: 0.875rem !important;
+      margin-bottom: 0.375rem !important;
+    }
+
+    .grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+      gap: 0.375rem !important;
+      width: 100% !important;
+    }
+
+    .micro-screen .flex {
+      padding: 0.25rem !important;
+    }
+
+    .micro-screen h3 {
+      font-size: 0.625rem !important;
+    }
+
+    .micro-screen p {
+      font-size: 0.5rem !important;
+    }
+  }
+
+  /* Extra extra extra small screens (240px-279px) */
+  @media (min-width: 240px) and (max-width: 279px) {
+    .xxxs\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .xxxs\:px-2 {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    .xxxs\:py-2 {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .xxxs\:w-6 {
+      width: 1.5rem;
+    }
+
+    .xxxs\:h-6 {
+      height: 1.5rem;
+    }
+
+    .xxxs\:text-xs {
+      font-size: 0.75rem;
+    }
+
+    .xxxs\:gap-2 {
+      gap: 0.5rem;
+    }
+
+    .xxxs\:text-\[9px\] {
+      font-size: 9px;
+    }
+  }
+
+  /* Extra extra small screens (280px-359px) */
+  @media (min-width: 280px) {
+    .xxs\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .xxs\:px-2 {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    .xxs\:py-2 {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .xxs\:w-6 {
+      width: 1.5rem;
+    }
+
+    .xxs\:h-6 {
+      height: 1.5rem;
+    }
+
+    .xxs\:text-xs {
+      font-size: 0.75rem;
+    }
+
+    .xxs\:gap-2 {
+      gap: 0.5rem;
+    }
+
+    .xxs\:text-\[9px\] {
+      font-size: 9px;
+    }
+  }
+
+  /* Extra small screens (360px-639px) */
+  @media (min-width: 360px) {
+    .xs\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .xs\:px-2 {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    .xs\:py-2 {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .xs\:w-7 {
+      width: 1.75rem;
+    }
+
+    .xs\:h-7 {
+      height: 1.75rem;
+    }
+
+    .xs\:text-xs {
+      font-size: 0.75rem;
+    }
+
+    .xs\:text-sm {
+      font-size: 0.875rem;
+    }
+
+    .xs\:gap-2 {
+      gap: 0.5rem;
+    }
+
+    .xs\:text-\[10px\] {
+      font-size: 10px;
+    }
+  }
+
+  /* Ensure text doesn't overflow on small screens */
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  /* Ensure proper word breaking for long tag names */
+  .break-words {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .hyphens-auto {
+    hyphens: auto;
+  }
+
+  /* Improved shadow for dark mode */
+  :global(.dark) .tag-cloud {
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.05),
+      0 2px 4px rgba(0, 0, 0, 0.1),
+      0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Prevent layout shifts */
+  .flex-grow {
+    flex-grow: 1;
+  }
+
+  .min-w-0 {
+    min-width: 0;
+  }
+
+  /* Ensure container doesn't overflow */
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  /* Touch support for mobile */
+  .touch-active {
+    transform: scale(0.97) !important;
+    opacity: 0.9;
+    transition:
+      transform 0.15s ease-in-out,
+      opacity 0.15s ease-in-out !important;
+  }
+
+  /* Animation for blob */
+  @keyframes blob {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      transform: translate(10px, -10px) scale(1.05);
+    }
+    50% {
+      transform: translate(0, 20px) scale(0.95);
+    }
+    75% {
+      transform: translate(-10px, -10px) scale(1.05);
+    }
+  }
+
+  .animate-blob {
+    animation: blob 20s infinite ease-in-out;
+  }
+
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+
+  .animation-delay-4000 {
+    animation-delay: 4s;
+  }
+
+  /* Animation for underline */
+  @keyframes underline {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  .animate-underline {
+    animation: underline 1.5s ease-out forwards;
+  }
+
+  /* Fix for iOS Safari notch */
+  @supports (padding: max(0px)) {
+    .tag-cloud {
+      padding-left: max(0.75rem, env(safe-area-inset-left));
+      padding-right: max(0.75rem, env(safe-area-inset-right));
+      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+    }
+  }
+</style>
+
+<script>
+  // Handle SPA transitions for tags index page
+  function setupSPATransitions() {
+    // Handle all internal links for SPA transitions
+    document.querySelectorAll('a[href^="/"]').forEach((link) => {
+      // Skip links that are anchor links, external links, or already processed
+      if (
+        link.getAttribute('href').includes('#') ||
+        link.getAttribute('target') === '_blank' ||
+        link.hasAttribute('data-spa-handled')
+      ) {
+        return;
+      }
+
+      // Mark as handled to avoid duplicate listeners
+      link.setAttribute('data-spa-handled', 'true');
+
+      link.addEventListener('click', (e) => {
+        // Don't handle if modifier keys are pressed (for opening in new tab, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+
+        e.preventDefault();
+        const targetHref = link.getAttribute('href');
+
+        // Trigger page transition animation
+        const pageTransition = document.getElementById('page-transition');
+        if (pageTransition) {
+          pageTransition.classList.remove('opacity-0');
+          pageTransition.classList.add('opacity-100');
+
+          // Navigate after transition effect
+          setTimeout(() => {
+            window.location.href = targetHref;
+          }, 300);
+        } else {
+          // Fallback if transition element doesn't exist
+          window.location.href = targetHref;
+        }
+      });
+    });
+
+    // Add hover effect for tag cards on touch devices
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+    if (isTouchDevice) {
+      const tagCards = document.querySelectorAll('.tag-cloud a');
+
+      tagCards.forEach((card) => {
+        card.addEventListener('touchstart', () => {
+          card.classList.add('is-touched');
+        });
+
+        card.addEventListener('touchend', () => {
+          setTimeout(() => {
+            card.classList.remove('is-touched');
+          }, 300);
+        });
+      });
+    }
+
+    // Animate tag cards with staggered delay
+    const tagCards = document.querySelectorAll('.tag-cloud a');
+    tagCards.forEach((card, index) => {
+      setTimeout(
+        () => {
+          card.classList.add('animate-reveal');
+        },
+        100 + index * 50
+      );
+    });
+  }
+
+  // Initialize on first load
+  document.addEventListener('DOMContentLoaded', setupSPATransitions);
+
+  // Re-initialize when content changes via Astro's view transitions
+  document.addEventListener('astro:page-load', setupSPATransitions);
+
+  // For compatibility with custom transition system
+  document.addEventListener('page-transition-complete', setupSPATransitions);
+</script>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,17 +1,7 @@
-@import 'tailwindcss';
-
-/* Dark mode support for Tailwind CSS v4 */
-/* https://tailwindcss.com/docs/dark-mode */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Add custom color palette */
-@theme {
-  --color-midnight: #0c354d;
-  --color-turquoise: #0da797;
-  --color-bermuda: #7fbab4;
-  --color-desert: #f9deb2;
-  --color-bronze: #9e7f5e;
-}
+/* Remove all the complex mobile menu styles and keep only what's necessary */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

@layer base {
  :root {
@@ -24,7 +14,6 @@
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
-    overflow-y: scroll;
  }

  body {
@@ -51,7 +40,7 @@
    scroll-padding-top: 4rem;
  }

-  /* Touch targets on mobile */
+  /* Better touch targets on mobile */
  button,
  a {
    @apply min-h-[44px];
@@ -138,25 +127,27 @@
 /* Smooth hover transitions */
 a,
 button {
-  transition: all 0.5s ease;
+  transition: all 0.2s ease;
 }

-/* 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);
+a:hover,
+button:hover {
+  transform: translateY(-1px);
+}
+
+/* Smooth page transitions */
+.page-transition {
  transition:
-    opacity 0.8s ease,
-    transform 0.8s ease;
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }

-.animate-reveal {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
+.page-entering {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-entered {
+  opacity: 1;
+  transform: translateY(0);
 }
--- a/src/utils/DynamicIcon.tsx
+++ b/src/utils/DynamicIcon.tsx
@@ -1,40 +0,0 @@
-import React from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as MdIcons from 'react-icons/md';
-import * as AiIcons from 'react-icons/ai';
-import * as GiIcons from 'react-icons/gi';
-import * as IoIcons from 'react-icons/io';
-import * as CiIcons from 'react-icons/ci';
-import * as FiIcons from 'react-icons/fi';
-import * as LuIcons from 'react-icons/lu';
-import * as SiIcons from 'react-icons/si';
-
-// Load React Icon library dynamically from attributes in Directus
-
-const iconSets = {
-  fa: FaIcons,
-  md: MdIcons,
-  ai: AiIcons,
-  gi: GiIcons,
-  io: IoIcons,
-  ci: CiIcons,
-  fi: FiIcons,
-  lu: LuIcons,
-  si: SiIcons,
-};
-
-const DynamicIcon = ({ name, set = 'fa' }: { name: string; set?: string }) => {
-  let IconComponent = FaIcons.FaAlignCenter;
-
-  if (name.startsWith('Fa')) {
-    IconComponent = iconSets['fa'][name];
-  } else if (name.startsWith('Si')) {
-    IconComponent = iconSets['si'][name];
-  } else {
-    IconComponent = iconSets[set][name];
-  }
-
-  return <IconComponent />;
-};
-
-export default DynamicIcon;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,6 @@
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
-    "allowImportingTsExtensions": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,