init

2025-08-11 16:09:37 -05:00
parent 93d11dca17
commit a484feb7cd
92 changed files with 19935 additions and 0 deletions
--- a/site-profile-new/.dockerignore
+++ b/site-profile-new/.dockerignore
@@ -0,0 +1,5 @@
+.DS_Store
+.astro
+.vscode
+node_modules
+dist
--- a/site-profile-new/.gitea/workflows/release-image.yml
+++ b/site-profile-new/.gitea/workflows/release-image.yml
@@ -0,0 +1,98 @@
+name: release-image
+
+on:
+  push:
+    tags:
+      - 0.*
+
+  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-new
+
+      - 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 New 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 New 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-new/actions?workflow=release-image.yml", "clear": true}]'
+          image: true
--- a/site-profile-new/.gitea/workflows/renovate.yaml
+++ b/site-profile-new/.gitea/workflows/renovate.yaml
@@ -0,0 +1,32 @@
+name: renovate
+
+on:
+  schedule:
+    - cron: '@daily'
+
+  push:
+    branches:
+      - main
+
+  workflow_dispatch:
+
+jobs:
+  renovate:
+    runs-on: ubuntu-latest
+    container: ghcr.io/renovatebot/renovate:41
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Renovate
+        run: renovate
+        env:
+          RENOVATE_PLATFORM: gitea
+          RENOVATE_ENDPOINT: ${{ vars.INSTANCE_URL }}
+          RENOVATE_REPOSITORIES: alexlebens/site-profile-new
+          RENOVATE_GIT_AUTHOR: Renovate Bot <renovate-bot@alexlebens.net>
+          LOG_LEVEL: info
+          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 }}
--- a/site-profile-new/.gitea/workflows/test-build.yaml
+++ b/site-profile-new/.gitea/workflows/test-build.yaml
@@ -0,0 +1,37 @@
+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.18.0
+          cache: pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Lint Code
+        run: pnpm lint
+
+      - name: Build Project
+        run: pnpm build
--- a/site-profile-new/.gitignore
+++ b/site-profile-new/.gitignore
@@ -0,0 +1,25 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# ide
+.vscode/
+site-profile-new.code-workspace
--- a/site-profile-new/.npmrc
+++ b/site-profile-new/.npmrc
@@ -0,0 +1,3 @@
+registry=https://registry.npmjs.org/
+engine-strict=true
+save-exact=true
--- a/site-profile-new/.prettierignore
+++ b/site-profile-new/.prettierignore
@@ -0,0 +1 @@
+/src/components/ui/sections/Experience.astro
--- a/site-profile-new/Dockerfile
+++ b/site-profile-new/Dockerfile
@@ -0,0 +1,36 @@
+ARG REGISTRY=docker.io
+FROM ${REGISTRY}/node:22.18.0-alpine3.22 AS base
+
+LABEL version="0.0.1"
+LABEL description="Astro based personal website"
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml ./
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM prod-deps AS build-deps
+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
+COPY --from=build /app/dist /app/dist
+
+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"]
--- a/site-profile-new/LICENSE
+++ b/site-profile-new/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+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
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/site-profile-new/README.md
+++ b/site-profile-new/README.md
@@ -0,0 +1,31 @@
+# This is an open-source and simple blog built with Astro.
+
+Personal site used for information about myself and blog.
+
+## Features
+
+- 🐈 Simple And Beautiful
+- 🖥️️ Responsive And Light/Dark mode
+- 🐛 SiteMap & RSS Feed
+- 🐝 Category Support
+- 🐜 SEO and Responsiveness
+- 🪲 Markdown And MDX
+- 🏂🏾 Page Compression & Image Optimization
+
+### Development Commands
+
+With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
+
+- `pnpm run dev`: Starts a local development server with hot reloading enabled.
+- `pnpm run preview`: Serves your build output locally for preview before deployment.
+- `pnpm run build`: Bundles your site into static files for production.
+
+For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
+
+## Thanks
+
+Thanks https://github.com/mearashadowfax/ScrewFast, https://github.com/godruoyi/gblog/tree/gblog-template
+
+## License
+
+This project is released under the MIT License. Please read the [LICENSE](https://gitea.alexlebens.dev/alexlebens/site-profile/src/LICENSE.md) file for more details.
--- a/site-profile-new/astro.config.mjs
+++ b/site-profile-new/astro.config.mjs
@@ -0,0 +1,112 @@
+import { defineConfig, passthroughImageService, sharpImageService } from 'astro/config';
+
+import mdx from '@astrojs/mdx';
+import node from '@astrojs/node';
+import partytown from '@astrojs/partytown';
+import react from '@astrojs/react';
+import sitemap from '@astrojs/sitemap';
+
+import tailwindcss from '@tailwindcss/vite';
+import icon from 'astro-icon';
+import swup from '@swup/astro';
+import rehypePrettyCode from 'rehype-pretty-code';
+import { transformerCopyButton } from '@rehype-pretty/transformers';
+
+const getSiteURL = () => {
+  if (process.env.SITE_URL) {
+    return `https://${process.env.SITE_URL}`;
+  }
+  return 'http://localhost:4321';
+};
+
+export default defineConfig({
+  site: getSiteURL(),
+
+  image: {
+    service: {
+      entrypoint: 'astro/assets/services/sharp',
+    }
+  },
+
+  prefetch: true,
+
+  integrations: [
+    mdx(),
+    partytown(),
+    react(),
+    sitemap(),
+    icon({
+      include: {
+        mdi: ['*'],
+      },
+    }),
+    swup({
+      theme: 'fade',
+      native: true,
+      cache: true,
+      preload: true,
+      accessibility: true,
+      smoothScrolling: true,
+      morph: ['#nav'],
+    }),
+    (await import('@playform/compress')).default({
+      CSS: true,
+      JavaScript: true,
+      HTML: {
+        'html-minifier-terser': {
+          collapseWhitespace: true,
+          minifyCSS: false,
+          minifyJS: true,
+        },
+      },
+      Image: false,
+      SVG: true,
+      Logger: 2,
+    }),
+  ],
+
+  markdown: {
+    syntaxHighlight: false,
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: {
+            light: 'github-light',
+            dark: 'github-dark-dimmed',
+          },
+          keepBackground: false,
+          transformers: [
+            transformerCopyButton({
+              visibility: 'always',
+              feedbackDuration: 2500,
+            }),
+          ],
+        },
+      ],
+    ],
+  },
+
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+
+  vite: {
+    plugins: [tailwindcss()],
+  },
+
+  output: 'static',
+
+  adapter: node({
+    mode: 'standalone',
+  }),
+
+  build: {
+    // Specifies the directory in the build output where Astro-generated assets (bundled JS and CSS for example) should live.
+    // see https://docs.astro.build/en/reference/configuration-reference/#buildassets
+    assets: 'assets',
+    // see https://docs.astro.build/en/reference/configuration-reference/#buildassetsprefix
+    assetsPrefix:
+      !!import.meta.env.S3_ENABLE || !!process.env.S3_ENABLE ? 'https://digitalocean.com' : '',
+  },
+});
--- a/site-profile-new/eslint.config.mjs
+++ b/site-profile-new/eslint.config.mjs
@@ -0,0 +1,11 @@
+import eslintPluginAstro from 'eslint-plugin-astro';
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default [
+  ...eslintPluginAstro.configs.recommended,
+  eslintConfigPrettier,
+  {
+    rules: {
+    }
+  }
+];
--- a/site-profile-new/package.json
+++ b/site-profile-new/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "site-profile-new",
+  "type": "module",
+  "version": "1.0.0",
+  "homepage": "https://www.alexlebens.dev",
+  "bugs": {
+    "url": "https://gitea.alexlebens.dev/alexlebens/site-profile-new/issues",
+    "email": "alexander.lebens@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.alexlebens.dev/alexlebens/site-profile-new"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Alex Lebens",
+    "email": "alexander.lebens@gmail.com",
+    "url": "https://www.alexlebens.dev"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "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}\""
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.3.3",
+    "@astrojs/node": "^9.3.3",
+    "@astrojs/partytown": "^2.1.4",
+    "@astrojs/react": "^4.3.0",
+    "@astrojs/rss": "^4.0.12",
+    "@astrojs/sitemap": "^3.4.2",
+    "@giscus/react": "^3.1.0",
+    "@iconify-json/mdi": "^1.1.63",
+    "@iconify-json/pajamas": "^1.2.13",
+    "@iconify-json/simple-icons": "^1.2.47",
+    "@playform/compress": "^0.0.4",
+    "@rehype-pretty/transformers": "^0.13.2",
+    "@swup/astro": "1.7.0",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.8",
+    "@directus/sdk": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/unist": "^3.0.2",
+    "astro": "^5.12.8",
+    "astro-compressor": "^0.4.1",
+    "astro-icon": "^1.1.5",
+    "framer-motion": "^12.16.0",
+    "mdast-util-to-string": "^4.0.0",
+    "preline": "^3.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "reading-time": "^1.5.0",
+    "rehype-pretty-code": "^0.14.1",
+    "sharp": "^0.34.3",
+    "sharp-ico": "^0.1.5",
+    "shiki": "^3.2.2",
+    "tailwindcss": "^4.1.11",
+    "ultrahtml": "^1.5.3"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^1.52.3",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "astro-icon": "^1.1.5",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-format": "^1.0.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "timeago.js": "^4.0.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.38.0"
+  }
+}
--- a/site-profile-new/pnpm-lock.yaml
+++ b/site-profile-new/pnpm-lock.yaml
--- a/site-profile-new/pnpm-workspace.yaml
+++ b/site-profile-new/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - swup
--- a/site-profile-new/postcss.config.mjs
+++ b/site-profile-new/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+    },
+}
+
+export default config;
--- a/site-profile-new/prettier.config.mjs
+++ b/site-profile-new/prettier.config.mjs
@@ -0,0 +1,23 @@
+/** @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/site-profile-new/public/vendor/preline/collapse2.1.0.min.js
+++ b/site-profile-new/public/vendor/preline/collapse2.1.0.min.js
@@ -0,0 +1,352 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/@preline/collapse@2.1.0/index.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!(function (t, e) {
+  if ('object' == typeof exports && 'object' == typeof module) module.exports = e();
+  else if ('function' == typeof define && define.amd) define([], e);
+  else {
+    var n = e();
+    for (var o in n) ('object' == typeof exports ? exports : t)[o] = n[o];
+  }
+})(self, () =>
+  (() => {
+    'use strict';
+    var t = {
+        737: (t, e) => {
+          /*
+           * HSBasePlugin
+           * @version: 2.1.0
+           * @author: HTMLStream
+           * @license: Licensed under MIT (https://preline.co/docs/license.html)
+           * Copyright 2023 HTMLStream
+           */
+          Object.defineProperty(e, '__esModule', { value: !0 });
+          var n = (function () {
+            function t(t, e, n) {
+              ((this.el = t),
+                (this.options = e),
+                (this.events = n),
+                (this.el = t),
+                (this.options = e),
+                (this.events = {}));
+            }
+            return (
+              (t.prototype.createCollection = function (t, e) {
+                var n;
+                t.push({
+                  id:
+                    (null === (n = null == e ? void 0 : e.el) || void 0 === n ? void 0 : n.id) ||
+                    t.length + 1,
+                  element: e,
+                });
+              }),
+              (t.prototype.fireEvent = function (t, e) {
+                if ((void 0 === e && (e = null), this.events.hasOwnProperty(t)))
+                  return this.events[t](e);
+              }),
+              (t.prototype.on = function (t, e) {
+                this.events[t] = e;
+              }),
+              t
+            );
+          })();
+          e.default = n;
+        },
+        652: function (t, e, n) {
+          /*
+           * HSCollapse
+           * @version: 2.1.0
+           * @author: HTMLStream
+           * @license: Licensed under MIT (https://preline.co/docs/license.html)
+           * Copyright 2023 HTMLStream
+           */
+          var o,
+            i =
+              (this && this.__extends) ||
+              ((o = function (t, e) {
+                return (
+                  (o =
+                    Object.setPrototypeOf ||
+                    ({ __proto__: [] } instanceof Array &&
+                      function (t, e) {
+                        t.__proto__ = e;
+                      }) ||
+                    function (t, e) {
+                      for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
+                    }),
+                  o(t, e)
+                );
+              }),
+              function (t, e) {
+                if ('function' != typeof e && null !== e)
+                  throw new TypeError(
+                    'Class extends value ' + String(e) + ' is not a constructor or null'
+                  );
+                function n() {
+                  this.constructor = t;
+                }
+                (o(t, e),
+                  (t.prototype =
+                    null === e ? Object.create(e) : ((n.prototype = e.prototype), new n())));
+              });
+          Object.defineProperty(e, '__esModule', { value: !0 });
+          var s = n(969),
+            r = (function (t) {
+              function e(e, n, o) {
+                var i = t.call(this, e, n, o) || this;
+                return (
+                  (i.contentId = i.el.dataset.hsCollapse),
+                  (i.content = document.querySelector(i.contentId)),
+                  (i.animationInProcess = !1),
+                  i.content && i.init(),
+                  i
+                );
+              }
+              return (
+                i(e, t),
+                (e.prototype.init = function () {
+                  var t = this;
+                  (this.createCollection(window.$hsCollapseCollection, this),
+                    this.el.addEventListener('click', function () {
+                      t.content.classList.contains('open') ? t.hide() : t.show();
+                    }));
+                }),
+                (e.prototype.hideAllMegaMenuItems = function () {
+                  this.content
+                    .querySelectorAll('.hs-mega-menu-content.block')
+                    .forEach(function (t) {
+                      (t.classList.remove('block'), t.classList.add('hidden'));
+                    });
+                }),
+                (e.prototype.show = function () {
+                  var t = this;
+                  if (this.animationInProcess || this.el.classList.contains('open')) return !1;
+                  ((this.animationInProcess = !0),
+                    this.el.classList.add('open'),
+                    this.content.classList.add('open'),
+                    this.content.classList.remove('hidden'),
+                    (this.content.style.height = '0'),
+                    setTimeout(function () {
+                      ((t.content.style.height = ''.concat(t.content.scrollHeight, 'px')),
+                        t.fireEvent('beforeOpen', t.el),
+                        (0, s.dispatch)('beforeOpen.hs.collapse', t.el, t.el));
+                    }),
+                    (0, s.afterTransition)(this.content, function () {
+                      ((t.content.style.height = ''),
+                        t.fireEvent('open', t.el),
+                        (0, s.dispatch)('open.hs.collapse', t.el, t.el),
+                        (t.animationInProcess = !1));
+                    }));
+                }),
+                (e.prototype.hide = function () {
+                  var t = this;
+                  if (this.animationInProcess || !this.el.classList.contains('open')) return !1;
+                  ((this.animationInProcess = !0),
+                    this.el.classList.remove('open'),
+                    (this.content.style.height = ''.concat(this.content.scrollHeight, 'px')),
+                    setTimeout(function () {
+                      t.content.style.height = '0';
+                    }),
+                    this.content.classList.remove('open'),
+                    (0, s.afterTransition)(this.content, function () {
+                      (t.content.classList.add('hidden'),
+                        (t.content.style.height = ''),
+                        t.fireEvent('hide', t.el),
+                        (0, s.dispatch)('hide.hs.collapse', t.el, t.el),
+                        (t.animationInProcess = !1));
+                    }),
+                    this.content.querySelectorAll('.hs-mega-menu-content.block').length &&
+                      this.hideAllMegaMenuItems());
+                }),
+                (e.getInstance = function (t, e) {
+                  void 0 === e && (e = !1);
+                  var n = window.$hsCollapseCollection.find(function (e) {
+                    return e.element.el === ('string' == typeof t ? document.querySelector(t) : t);
+                  });
+                  return n ? (e ? n : n.element.el) : null;
+                }),
+                (e.autoInit = function () {
+                  (window.$hsCollapseCollection || (window.$hsCollapseCollection = []),
+                    document
+                      .querySelectorAll('.hs-collapse-toggle:not(.--prevent-on-load-init)')
+                      .forEach(function (t) {
+                        window.$hsCollapseCollection.find(function (e) {
+                          var n;
+                          return (
+                            (null === (n = null == e ? void 0 : e.element) || void 0 === n
+                              ? void 0
+                              : n.el) === t
+                          );
+                        }) || new e(t);
+                      }));
+                }),
+                (e.show = function (t) {
+                  var e = window.$hsCollapseCollection.find(function (e) {
+                    return e.element.el === ('string' == typeof t ? document.querySelector(t) : t);
+                  });
+                  e && e.element.content.classList.contains('hidden') && e.element.show();
+                }),
+                (e.hide = function (t) {
+                  var e = window.$hsCollapseCollection.find(function (e) {
+                    return e.element.el === ('string' == typeof t ? document.querySelector(t) : t);
+                  });
+                  e && !e.element.content.classList.contains('hidden') && e.element.hide();
+                }),
+                (e.on = function (t, e, n) {
+                  var o = window.$hsCollapseCollection.find(function (t) {
+                    return t.element.el === ('string' == typeof e ? document.querySelector(e) : e);
+                  });
+                  o && (o.element.events[t] = n);
+                }),
+                e
+              );
+            })(n(737).default);
+          (window.addEventListener('load', function () {
+            r.autoInit();
+          }),
+            'undefined' != typeof window && (window.HSCollapse = r),
+            (e.default = r));
+        },
+        969: function (t, e) {
+          var n = this;
+          (Object.defineProperty(e, '__esModule', { value: !0 }),
+            (e.menuSearchHistory =
+              e.classToClassList =
+              e.htmlToElement =
+              e.afterTransition =
+              e.dispatch =
+              e.debounce =
+              e.isFormElement =
+              e.isParentOrElementHidden =
+              e.isEnoughSpace =
+              e.isIpadOS =
+              e.isIOS =
+              e.getClassPropertyAlt =
+              e.getClassProperty =
+              e.stringToBoolean =
+                void 0));
+          e.stringToBoolean = function (t) {
+            return 'true' === t;
+          };
+          e.getClassProperty = function (t, e, n) {
+            return (
+              void 0 === n && (n = ''),
+              (window.getComputedStyle(t).getPropertyValue(e) || n).replace(' ', '')
+            );
+          };
+          e.getClassPropertyAlt = function (t, e, n) {
+            void 0 === n && (n = '');
+            var o = '';
+            return (
+              t.classList.forEach(function (t) {
+                t.includes(e) && (o = t);
+              }),
+              o.match(/:(.*)]/) ? o.match(/:(.*)]/)[1] : n
+            );
+          };
+          e.isIOS = function () {
+            return (
+              !!/iPad|iPhone|iPod/.test(navigator.platform) ||
+              (navigator.maxTouchPoints &&
+                navigator.maxTouchPoints > 2 &&
+                /MacIntel/.test(navigator.platform))
+            );
+          };
+          e.isIpadOS = function () {
+            return (
+              navigator.maxTouchPoints &&
+              navigator.maxTouchPoints > 2 &&
+              /MacIntel/.test(navigator.platform)
+            );
+          };
+          e.isEnoughSpace = function (t, e, n, o, i) {
+            (void 0 === n && (n = 'auto'), void 0 === o && (o = 10), void 0 === i && (i = null));
+            var s = e.getBoundingClientRect(),
+              r = i ? i.getBoundingClientRect() : null,
+              l = window.innerHeight,
+              c = r ? s.top - r.top : s.top,
+              a = (i ? r.bottom : l) - s.bottom,
+              u = t.clientHeight + o;
+            return 'bottom' === n ? a >= u : 'top' === n ? c >= u : c >= u || a >= u;
+          };
+          e.isFormElement = function (t) {
+            return (
+              t instanceof HTMLInputElement ||
+              t instanceof HTMLTextAreaElement ||
+              t instanceof HTMLSelectElement
+            );
+          };
+          var o = function (t) {
+            return !!t && ('none' === window.getComputedStyle(t).display || o(t.parentElement));
+          };
+          e.isParentOrElementHidden = o;
+          e.debounce = function (t, e) {
+            var o;
+            return (
+              void 0 === e && (e = 200),
+              function () {
+                for (var i = [], s = 0; s < arguments.length; s++) i[s] = arguments[s];
+                (clearTimeout(o),
+                  (o = setTimeout(function () {
+                    t.apply(n, i);
+                  }, e)));
+              }
+            );
+          };
+          e.dispatch = function (t, e, n) {
+            void 0 === n && (n = null);
+            var o = new CustomEvent(t, {
+              detail: { payload: n },
+              bubbles: !0,
+              cancelable: !0,
+              composed: !1,
+            });
+            e.dispatchEvent(o);
+          };
+          e.afterTransition = function (t, e) {
+            var n = function () {
+              (e(), t.removeEventListener('transitionend', n, !0));
+            };
+            window.getComputedStyle(t, null).getPropertyValue('transition') !==
+            (navigator.userAgent.includes('Firefox') ? 'all' : 'all 0s ease 0s')
+              ? t.addEventListener('transitionend', n, !0)
+              : e();
+          };
+          e.htmlToElement = function (t) {
+            var e = document.createElement('template');
+            return ((t = t.trim()), (e.innerHTML = t), e.content.firstChild);
+          };
+          e.classToClassList = function (t, e, n, o) {
+            (void 0 === n && (n = ' '),
+              void 0 === o && (o = 'add'),
+              t.split(n).forEach(function (t) {
+                return 'add' === o ? e.classList.add(t) : e.classList.remove(t);
+              }));
+          };
+          e.menuSearchHistory = {
+            historyIndex: -1,
+            addHistory: function (t) {
+              this.historyIndex = t;
+            },
+            existsInHistory: function (t) {
+              return t > this.historyIndex;
+            },
+            clearHistory: function () {
+              this.historyIndex = -1;
+            },
+          };
+        },
+      },
+      e = {};
+    var n = (function n(o) {
+      var i = e[o];
+      if (void 0 !== i) return i.exports;
+      var s = (e[o] = { exports: {} });
+      return (t[o].call(s.exports, s, s.exports, n), s.exports);
+    })(652);
+    return n;
+  })()
+);
--- a/site-profile-new/renovate.json
+++ b/site-profile-new/renovate.json
@@ -0,0 +1,40 @@
+{
+    "$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"
+        }
+    ]
+}
--- a/site-profile-new/src/components/BaseHead.astro
+++ b/site-profile-new/src/components/BaseHead.astro
@@ -0,0 +1,95 @@
+---
+import { getImage } from 'astro:assets';
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import brandSrc from '@images/brand_logo.png';
+import faviconSvgSrc from '@images/favicon_icon.svg';
+import faviconSrc from '@images/favicon_icon.png';
+import { SEO } from '@/config';
+
+interface Props {
+  title: string;
+  description: string;
+  ogImage?: any;
+  ogTitle?: string;
+  ogDescription?: string;
+  structuredData?: object;
+}
+
+const canonicalURL = Astro.url.href;
+let {
+  title,
+  description,
+  ogImage,
+  ogTitle = title,
+  ogDescription = description,
+  structuredData = SEO.structuredData,
+} = Astro.props;
+
+let card = 'summary_large_image';
+if (!ogImage) {
+  ogImage = brandSrc;
+  card = 'summary';
+}
+
+const global = await directus.request(readSingleton('site_global'));
+
+const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
+const appleTouchIcon = await getImage({ src: faviconSrc, width: 180, height: 180, format: 'png' });
+const socialImageRes = await getImage({ src: ogImage, width: 1200, height: 600 });
+
+let socialImage = socialImageRes.src;
+if (!socialImage.startsWith('http')) {
+  socialImage = Astro.url.origin + socialImageRes.src;
+}
+---
+
+<!-- Inject structured data https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data -->{
+  structuredData && <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
+}
+
+<!-- Global Metadata -->
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+<meta charset="utf-8" />
+<meta name="web_author" content={global.name} />
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"
+/>
+<meta name="generator" content={Astro.generator} />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="theme-color" content="#facc15" />
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:type" content="website" />
+<meta property="og:title" content={ogTitle} />
+<meta property="og:site_name" content={global.name} />
+<meta property="og:description" content={ogDescription} />
+<meta property="og:image" content={socialImage} />
+<meta content="1200" property="og:image:width" />
+<meta content="600" property="og:image:height" />
+<meta content="image/png" property="og:image:type" />
+
+<!-- Twitter -->
+<meta property="twitter:card" content={card} />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:domain" content={Astro.url} />
+<meta property="twitter:title" content={ogTitle} />
+<meta property="twitter:description" content={ogDescription} />
+<meta property="twitter:image" content={socialImage} />
+
+<!-- Links -->
+<link href={canonicalURL} rel="canonical" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<!--<link href="/manifest.json" rel="manifest" />-->
+<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon" />
+<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />
+<link href={appleTouchIcon.src} rel="apple-touch-icon" />
+<link href={appleTouchIcon.src} rel="shortcut icon" />
+<link rel="preconnect" href="https://461ZQ3AX3S-dsn.algolia.net" crossorigin />
--- a/site-profile-new/src/components/Footer.astro
+++ b/site-profile-new/src/components/Footer.astro
@@ -0,0 +1,144 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import BrandLogo from '@components/ui/logos/BrandLogo.astro';
+import Image from '@components/ui/images/Image.astro';
+import { NavigationLinks, FooterLinks } from '@/config';
+import footerImg from '@images/flowers.png';
+
+const global = await directus.request(readSingleton('site_global'));
+const currentYear = new Date().getFullYear();
+---
+
+<footer
+  class="w-full overflow-hidden bg-stone-300/40 dark:bg-stone-800/20"
+  transition:animate="none"
+>
+  <div class="relative px-4 pt-16 pb-12 sm:px-6">
+    <div class="mx-auto max-w-[85rem]">
+      <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">
+                <BrandLogo class="max-h-[40px] max-w-[40px] rounded-full" />
+              </div>
+
+              <span class="ml-3 text-xl font-bold text-neutral-800 dark:text-neutral-200">
+                Blog
+              </span>
+            </div>
+          </a>
+
+          <p class="mt-4 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+            A description of something.
+          </p>
+        </div>
+        <!-- Left links -->
+        <div class="col-span-1 md:col-span-2">
+          <h3
+            class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
+          >
+            Blog
+          </h3>
+          <ul class="mt-4 space-y-3">
+            {
+              NavigationLinks.map((link) => (
+                <li>
+                  <a
+                    href={link.url}
+                    class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
+                  >
+                    <span class="relative inline-block overflow-hidden">
+                      <span class="relative z-10">{link.name}</span>
+                    </span>
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+        <!-- Right links -->
+        <div class="col-span-1 md:col-span-3">
+          <h3
+            class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
+          >
+            Other
+          </h3>
+          <ul class="mt-4 space-y-3">
+            {
+              FooterLinks.map((link) => (
+                <li>
+                  <a
+                    href={link.url}
+                    class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
+                  >
+                    <span class="relative inline-block overflow-hidden">
+                      <span class="relative z-10">{link.name}</span>
+                    </span>
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+        <!-- Right image -->
+        <div class="col-span-3 mt-10 flex justify-center md:mt-0">
+          <div class="-mt-10 hidden max-h-[460px] max-w-[220px] scale-80 md:block">
+            <Image
+              src={footerImg}
+              alt={global.footer_image_alt}
+              class="h-full w-full object-cover object-center"
+              draggable="false"
+              loading="eager"
+              format="webp"
+              quality="low"
+              widths={[440]}
+              disableBlur={true}
+            />
+          </div>
+        </div>
+      </div>
+      <!-- Bottom section -->
+      <div class="mt-12 border-t border-neutral-400/30 pt-8 dark:border-neutral-600/50">
+        <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+          <p class="text-sm text-neutral-600 dark:text-neutral-400">
+            &copy; {currentYear} All rights reserved.
+          </p>
+
+          <div class="flex items-center space-x-2">
+            <span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span>
+            <a
+              href="https://astro.build"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+            >
+              <svg class="mr-1 h-4 w-4 text-[#FF5D01]" 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>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
--- a/site-profile-new/src/components/Header.astro
+++ b/site-profile-new/src/components/Header.astro
@@ -0,0 +1,100 @@
+---
+import BrandLogo from '@components/ui/logos/BrandLogo.astro';
+import ThemeToggle from '@components/ui/buttons/ThemeToggle.astro';
+import { NavigationLinks } from '@/config';
+
+const pathname = new URL(Astro.request.url).pathname;
+const currentPath = pathname.slice(1);
+---
+
+<header
+  id="nav"
+  class="sticky inset-x-0 top-4 z-50 flex w-full flex-wrap text-sm transition-none md:flex-nowrap md:justify-start"
+>
+  <nav
+    class="relative mx-2 w-full rounded-[36px] border border-neutral-100 bg-neutral-100 px-4 py-3 md:flex md:items-center md:justify-between md:px-6 lg:px-8 dark:border-neutral-700/40 dark:bg-neutral-800/80"
+    aria-label="Global"
+  >
+    <div class="flex items-center justify-between">
+      <a
+        class="h-[42px] flex-none rounded-lg text-xl font-bold ring-neutral-500 outline-none focus-visible:ring dark:ring-neutral-200 dark:focus:outline-none"
+        href="/"
+        aria-label="Brand"
+      >
+        <BrandLogo class="h-full w-auto rounded-full object-cover" />
+      </a>
+
+      <div class="ml-auto md:hidden">
+        <button
+          type="button"
+          class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
+          data-hs-collapse="#navbar-collapse-with-animation"
+          aria-controls="navbar-collapse-with-animation"
+          aria-label="Toggle navigation"
+        >
+          <svg
+            class="hs-collapse-open:hidden h-[1.25rem] w-[1.25rem] flex-shrink-0"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="3" x2="21" y1="6" y2="6"></line>
+            <line x1="3" x2="21" y1="12" y2="12"></line>
+            <line x1="3" x2="21" y1="18" y2="18"></line>
+          </svg>
+          <svg
+            class="hs-collapse-open:block hidden h-[1.25rem] w-[1.25rem] flex-shrink-0"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18"></path>
+            <path d="m6 6 12 12"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div
+      id="navbar-collapse-with-animation"
+      class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
+    >
+      <div
+        class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 md:gap-y-0 md:ps-7 lg:gap-x-7"
+      >
+        {
+          NavigationLinks.map((item) => {
+            const isActive = currentPath === (item.url === '/' ? '' : item.url.slice(1));
+            return (
+              <a
+                href={item.url}
+                class={`text-sm font-medium ${
+                  isActive
+                    ? 'text-orange-500 dark:text-orange-300'
+                    : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100'
+                }`}
+              >
+                {item.name}
+              </a>
+            );
+          })
+        }
+        <span class="md:inline-block">
+          <ThemeToggle />
+        </span>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>
--- a/site-profile-new/src/components/blog/BlogCard.astro
+++ b/site-profile-new/src/components/blog/BlogCard.astro
@@ -0,0 +1,61 @@
+---
+import { Icon } from 'astro-icon/components';
+
+import type { Post } from '@lib/directusTypes';
+
+import { getDirectusImageURL } from '@lib/directusFunctions';
+import Image from '@components/ui/images/Image.astro';
+import { formatDate } from '@support/time';
+
+interface Props {
+  post: Post;
+}
+
+const { post } = Astro.props;
+
+const baseClasses = 'group group-hover smooth-reveal-cards rounded-xl flex flex-col';
+const borderClasses = 'border border-stone-200/50 dark:border-stone-700/50';
+const bgColorClasses =
+  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
+const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
+---
+
+<div class={`${baseClasses}`}>
+  <a
+    class={`rounded-xl duration-300 transition-all ${borderClasses} ${shadowClasses} ${bgColorClasses}`}
+    href={`/blog/${post.slug}/`}
+    data-astro-prefetch
+  >
+    <div
+      class="relative w-full flex-shrink-0 overflow-hidden rounded-t-xl before:absolute before:inset-x-0 before:z-[1] before:size-full"
+    >
+      <Image
+        class="h-auto w-full rounded-t-xl"
+        src={getDirectusImageURL(post.image)}
+        alt={post.image_alt}
+        draggable="false"
+        loading="eager"
+        format="webp"
+        width="800"
+        height="460"
+      />
+    </div>
+    <div class="rounded-xl p-4 md:p-5">
+      <h3 class="text-xl font-bold text-neutral-600 dark:text-neutral-200">
+        {post.title}
+      </h3>
+      <div
+        class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center font-medium text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-400"
+      >
+        <span class="relative inline-block overflow-hidden"> Read more </span>
+        <Icon
+          name="mdi:keyboard-arrow-right"
+          class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
+        />
+        <p class="ml-auto text-sm text-neutral-600 dark:text-neutral-400">
+          {formatDate(post.published_date)}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>
--- a/site-profile-new/src/components/blog/BlogCategoryCard.astro
+++ b/site-profile-new/src/components/blog/BlogCategoryCard.astro
@@ -0,0 +1,82 @@
+---
+interface Props {
+  slug: string;
+  title: string;
+  description: string;
+  count: number;
+  publishDate: string;
+  layoutPattern?: {
+    smCol: number;
+    mdCol: number;
+    row: number;
+    index: number;
+  };
+}
+
+const { slug, layoutPattern, title, description, count, publishDate } = Astro.props;
+const isSingleItem =
+  layoutPattern &&
+  layoutPattern.row === 1 &&
+  (layoutPattern.smCol === 1 || layoutPattern.mdCol === 1);
+
+const formatedDescription = isSingleItem ? `No description available` : description;
+
+const baseClasses =
+  'group group-hover rounded-xl flex h-full min-h-[220px] cursor-pointer flex-col overflow-hidden';
+const bgColorClasses =
+  'bg-neutral-100/60 dark:bg-neutral-800/60 hover:bg-neutral-100 dark:hover:bg-neutral-800/90 ';
+---
+
+<a class={`rounded-xl`} href={`/categories/${slug}/`} data-astro-prefetch="false">
+  <div class={`${baseClasses}`}>
+    <div
+      class={`relative min-h-0 flex-grow overflow-hidden transition-all duration-300 ${bgColorClasses}`}
+    >
+      <div class="absolute inset-1 flex flex-col justify-end p-3 md:p-4 lg:p-5">
+        <h2
+          class="group-hover:text-steel dark:group-hover:text-bermuda transition-text mb-4 text-4xl font-extrabold tracking-tight text-balance text-neutral-800 duration-300 dark:text-neutral-200"
+        >
+          {title}
+        </h2>
+        <p
+          class=`mb-4 ${isSingleItem ? 'hidden lg:block' : ''} max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-lg`
+        >
+          {formatedDescription}
+        </p>
+        <div
+          class="mt-auto flex items-center justify-between pt-1 text-xs text-neutral-600 md:pt-2 dark:text-neutral-300"
+        >
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
+            </svg>
+            {count}
+          </span>
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+            {publishDate}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>
--- a/site-profile-new/src/components/blog/BlogFeaturedArticle.astro
+++ b/site-profile-new/src/components/blog/BlogFeaturedArticle.astro
@@ -0,0 +1,36 @@
+---
+import type { Post } from '@lib/directusTypes';
+import BlogCard from '@components/blog/BlogCard.astro';
+
+interface Props {
+  posts: Post[];
+}
+
+const { posts } = Astro.props;
+
+const description = 'Here are a few articles that I think are not bad, hope you like too.';
+---
+
+<section class="mx-auto mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
+  <div class="text-left">
+    <h2
+      id="selected-articel"
+      class="smooth-reveal-2 mb-4 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+    >
+      Posts
+    </h2>
+    <p
+      class="smooth-reveal-2 mb-8 max-w-prose font-light text-pretty text-neutral-600 sm:text-xl dark:text-neutral-400"
+    >
+      {description}
+    </p>
+  </div>
+
+  <div class="flex flex-col md:flex-row md:space-x-12 lg:space-x-16">
+    <div class="w-full">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {posts.map((b) => <BlogCard post={b} />)}
+      </div>
+    </div>
+  </div>
+</section>
--- a/site-profile-new/src/components/blog/BlogLeftSection.astro
+++ b/site-profile-new/src/components/blog/BlogLeftSection.astro
@@ -0,0 +1,44 @@
+---
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+import Image from '@components/ui/images/Image.astro';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  btnExists?: boolean;
+  btnTitle?: string;
+  btnURL?: string;
+  img: any;
+  imgAlt: any;
+}
+
+const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } = Astro.props;
+---
+
+<section
+  class="mx-auto max-w-[85rem] items-center gap-8 px-4 py-10 sm:px-6 sm:py-16 md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 xl:gap-16 2xl:max-w-full"
+>
+  <Image
+    class="h-full w-full rounded-xl object-cover sm:max-h-[320px] md:max-h-[360px]"
+    src={img}
+    alt={imgAlt}
+    draggable="false"
+    loading="lazy"
+    width="850"
+    height="420"
+  />
+
+  <div class="mt-4 md:mt-0">
+    <h2
+      class="mb-4 text-4xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+    >
+      {title}
+    </h2>
+    <p
+      class="mb-4 max-w-prose font-light text-pretty text-neutral-600 sm:text-lg dark:text-neutral-300"
+    >
+      {subTitle}
+    </p>
+    {btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
+  </div>
+</section>
--- a/site-profile-new/src/components/blog/BlogRecentCard.astro
+++ b/site-profile-new/src/components/blog/BlogRecentCard.astro
@@ -0,0 +1,45 @@
+---
+import type { Post } from '@lib/directusTypes';
+
+import { getDirectusImageURL } from '@lib/directusFunctions';
+import BlogLeftSection from '@components/blog/BlogLeftSection.astro';
+import BlogRightSection from '@components/blog/BlogRightSection.astro';
+
+interface Props {
+  posts: Post[];
+}
+
+const { posts } = Astro.props;
+const blogPosts = posts.slice(0, 5);
+---
+
+<section class="smooth-reveal">
+  {
+    blogPosts.map((b, index) =>
+      index % 2 === 0 ? (
+        <BlogLeftSection
+          title={b.title}
+          subTitle={b.description}
+          btnExists={true}
+          btnTitle="Read More"
+          btnURL={`/blog/${b.slug}`}
+          img={getDirectusImageURL(b.image)}
+          imgAlt={b.image_alt}
+        />
+      ) : (
+        <BlogRightSection
+          title={b.title}
+          subTitle={b.description}
+          btnExists={true}
+          btnTitle="Read More"
+          btnURL={`/blog/${b.slug}`}
+          single={!b.image_second}
+          imgOne={getDirectusImageURL(b.image)}
+          imgOneAlt={b.image_alt}
+          imgTwo={getDirectusImageURL(b?.image_second)}
+          imgTwoAlt={b?.image_second_alt}
+        />
+      )
+    )
+  }
+</section>
--- a/site-profile-new/src/components/blog/BlogRightSection.astro
+++ b/site-profile-new/src/components/blog/BlogRightSection.astro
@@ -0,0 +1,87 @@
+---
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+import Image from '@components/ui/images/Image.astro';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  btnExists?: boolean;
+  btnTitle?: string;
+  btnURL?: string;
+  single?: boolean;
+  imgOne?: any;
+  imgOneAlt?: any;
+  imgTwo?: any;
+  imgTwoAlt?: any;
+}
+
+const {
+  title,
+  subTitle,
+  btnExists,
+  btnTitle,
+  btnURL,
+  single,
+  imgOne,
+  imgOneAlt,
+  imgTwo,
+  imgTwoAlt,
+} = Astro.props;
+---
+
+<section
+  class="mx-auto max-w-[85rem] items-center gap-16 px-4 py-10 sm:px-6 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 2xl:max-w-full"
+>
+  <div>
+    <h2
+      class="mb-4 text-4xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+    >
+      {title}
+    </h2>
+    <p
+      class="mb-4 max-w-prose font-light text-pretty text-neutral-600 sm:text-lg dark:text-neutral-400"
+    >
+      {subTitle}
+    </p>
+    {btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
+  </div>
+
+  {
+    single ? (
+      <div class="mt-8">
+        <Image
+          class="w-full rounded-lg"
+          src={imgOne}
+          alt={imgOneAlt}
+          format="webp"
+          loading="lazy"
+          width="850"
+          height="420"
+        />
+      </div>
+    ) : (
+      <div class="mt-8 grid grid-cols-2 gap-4">
+        <Image
+          class="w-full rounded-xl"
+          src={imgOne}
+          alt={imgOneAlt}
+          draggable="false"
+          format="webp"
+          loading="lazy"
+          width="400"
+          height="230"
+        />
+        <Image
+          class="mt-4 w-full rounded-xl lg:mt-10"
+          src={imgTwo}
+          alt={imgTwoAlt}
+          draggable="false"
+          format="webp"
+          loading="lazy"
+          width="400"
+          height="230"
+        />
+      </div>
+    )
+  }
+</section>
--- a/site-profile-new/src/components/ui/buttons/Bookmark.astro
+++ b/site-profile-new/src/components/ui/buttons/Bookmark.astro
@@ -0,0 +1,85 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+---
+
+<button
+  type="button"
+  class="focus-visible:ring-secondary group inline-flex items-center rounded-lg p-2.5 text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700"
+  data-bookmark-button="bookmark-button"
+>
+  <Icon name="bookmark" />
+</button>
+
+<script>
+  class Bookmark {
+    private static readonly BOOKMARKS_KEY = 'bookmarks';
+    private bookmarkButton: Element | null;
+
+    constructor(private dataAttrValue: string) {
+      this.bookmarkButton = document.querySelector(`[data-bookmark-button="${dataAttrValue}"]`);
+    }
+
+    private getStoredBookmarks(): string[] {
+      const item = localStorage.getItem(Bookmark.BOOKMARKS_KEY);
+      return item ? JSON.parse(item) : [];
+    }
+
+    init(): void {
+      if (this.bookmarkButton && this.isStored()) {
+        this.markAsStored();
+      }
+
+      this.bookmarkButton?.addEventListener('click', () => this.toggleBookmark());
+    }
+
+    isStored(): boolean {
+      return this.getStoredBookmarks().includes(window.location.pathname);
+    }
+
+    markAsStored(): void {
+      if (this.bookmarkButton) {
+        this.bookmarkButton.classList.add('bookmarked');
+        const svgElement = this.bookmarkButton.querySelector('svg');
+        if (svgElement) {
+          svgElement.setAttribute('class', 'h-6 w-6 fill-red-500 dark:fill-red-500');
+        }
+        const pathElement = svgElement?.querySelector('path');
+        if (pathElement) {
+          pathElement.setAttribute('class', 'fill-current text-red-500 dark:text-red-500');
+        }
+      }
+    }
+
+    unmarkAsStored(): void {
+      if (this.bookmarkButton) {
+        this.bookmarkButton.classList.remove('bookmarked');
+        const svgElement = this.bookmarkButton.querySelector('svg');
+        if (svgElement) {
+          svgElement.setAttribute('class', 'h-6 w-6 fill-none');
+        }
+        const pathElement = svgElement?.querySelector('path');
+        if (pathElement) {
+          pathElement.setAttribute(
+            'class',
+            'fill-current text-neutral-500 group-hover:text-red-400 dark:text-neutral-500 group-hover:dark:text-red-400'
+          );
+        }
+      }
+    }
+
+    toggleBookmark(): void {
+      const storedBookmarks = this.getStoredBookmarks();
+      const index = storedBookmarks.indexOf(window.location.pathname);
+      if (index !== -1) {
+        storedBookmarks.splice(index, 1);
+        this.unmarkAsStored();
+      } else {
+        storedBookmarks.push(window.location.pathname);
+        this.markAsStored();
+      }
+      localStorage.setItem(Bookmark.BOOKMARKS_KEY, JSON.stringify(storedBookmarks));
+    }
+  }
+
+  new Bookmark('bookmark-button').init();
+</script>
--- a/site-profile-new/src/components/ui/buttons/GiteaBtn.astro
+++ b/site-profile-new/src/components/ui/buttons/GiteaBtn.astro
@@ -0,0 +1,32 @@
+---
+import { Icon } from 'astro-icon/components';
+
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+
+const baseClasses =
+  'group group-hover inline-flex items-center justify-center gap-x-3 rounded-full px-4 py-3 text-center text-sm font-medium text-neutral-200';
+const borderClasses = 'border border-transparent';
+const bgColorClasses =
+  'bg-gitea-primary hover:bg-gitea-secondary dark:bg-gitea-secondary dark:hover:bg-gitea-primary';
+const shadowClasses = 'shadow-sm';
+const fontSizeClasses = '2xl:text-base';
+---
+
+<a
+  class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${shadowClasses} ${fontSizeClasses} `}
+  href={url}
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  <Icon name="pajamas:gitea" class="h-4 w-4 md:h-6 md:w-6" />
+  {title}
+  <Icon
+    name="mdi:keyboard-arrow-right"
+    class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
+  />
+</a>
--- a/site-profile-new/src/components/ui/buttons/GoBack.astro
+++ b/site-profile-new/src/components/ui/buttons/GoBack.astro
@@ -0,0 +1,35 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+
+const { title, noArrow } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+  noArrow?: boolean;
+  addHome?: boolean;
+}
+
+const baseClasses =
+  'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-neutral-500 transition duration-300 focus-visible:ring outline-none';
+const borderClasses = 'border border-transparent';
+const bgColorClasses = 'bg-steel hover:bg-sky-800 active:bg-orange-500 dark:focus:outline-none';
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
+const fontSizeClasses = '2xl:text-base';
+const ringClasses = 'dark:ring-neutral-200';
+---
+
+<button
+  class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`}
+  id="back-button"
+  data-astro-prefetch
+>
+  {noArrow ? null : <Icon name="arrowLeft" />}
+  {title}
+</button>
+
+<script>
+  document.getElementById('back-button')?.addEventListener('click', () => {
+    window.history.back();
+  });
+</script>
--- a/site-profile-new/src/components/ui/buttons/PrimaryCTA.astro
+++ b/site-profile-new/src/components/ui/buttons/PrimaryCTA.astro
@@ -0,0 +1,45 @@
+---
+import { Icon } from 'astro-icon/components';
+
+const { title, url, noArrow, addHome, addClass } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+  noArrow?: boolean;
+  addHome?: boolean;
+  addClass?: string;
+}
+
+const baseClasses =
+  'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-100  transition duration-300 ';
+const borderClasses = 'border border-transparent';
+const bgColorClasses = 'bg-bermuda hover:bg-turquoise dark:bg-turquoise dark:hover:bg-bermuda';
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
+const fontSizeClasses = '2xl:text-base';
+const ringClasses = 'dark:ring-neutral-200';
+---
+
+<a
+  class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${addClass}`}
+  href={url}
+  data-astro-prefetch
+>
+  {
+    addHome ? (
+      <Icon
+        name="mdi:home-variant-outline"
+        class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
+      />
+    ) : null
+  }
+  {title}
+  {
+    noArrow ? null : (
+      <Icon
+        name="mdi:keyboard-arrow-right"
+        class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
+      />
+    )
+  }
+</a>
--- a/site-profile-new/src/components/ui/buttons/SecondaryCTA.astro
+++ b/site-profile-new/src/components/ui/buttons/SecondaryCTA.astro
@@ -0,0 +1,26 @@
+---
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+
+const baseClasses =
+  'inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-neutral-500 focus-visible:ring transition duration-300';
+const borderClasses = 'border border-neutral-200';
+const bgColorClasses = 'bg-neutral-300';
+const hoverClasses = 'hover:bg-neutral-400/50 hover:text-neutral-600 active:text-neutral-700';
+const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
+const fontSizeClasses = '2xl:text-base';
+const ringClasses = 'ring-neutral-500';
+const darkClasses =
+  'dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:ring-neutral-200 dark:hover:bg-neutral-600 dark:focus:outline-none';
+---
+
+<a
+  class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${darkClasses}`}
+  href={url}
+>
+  {title}
+</a>
--- a/site-profile-new/src/components/ui/buttons/SocialShare.astro
+++ b/site-profile-new/src/components/ui/buttons/SocialShare.astro
@@ -0,0 +1,150 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+
+const { pageTitle, title = 'Share' } = Astro.props;
+
+interface Props {
+  pageTitle: string;
+  title?: string;
+}
+
+type SocialPlatform = {
+  name: string;
+  url: string;
+  svg: string;
+};
+
+const socialPlatforms: SocialPlatform[] = [
+  {
+    name: 'Facebook',
+    url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
+    svg: 'facebook',
+  },
+  {
+    name: 'X',
+    url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
+    svg: 'x',
+  },
+  {
+    name: 'LinkedIn',
+    url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
+    svg: 'linkedIn',
+  },
+];
+---
+
+<div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-left]">
+  <button
+    id="hs-dropup"
+    type="button"
+    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
+  >
+    <Icon name="share" />
+
+    {title}
+  </button>
+
+  <div
+    class="hs-dropdown-menu duration hs-dropdown-open:opacity-100 z-10 hidden w-72 divide-y divide-neutral-200 rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
+    aria-labelledby="hs-dropup"
+  >
+    <div class="py-2 first:pt-0 last:pb-0">
+      {
+        socialPlatforms.map((platform) => (
+          <a
+            class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
+            href={platform.url}
+          >
+            <Icon name={platform.svg} />
+            Share on {platform.name}
+          </a>
+        ))
+      }
+    </div>
+    <div class="py-2 first:pt-0 last:pb-0">
+      <button
+        type="button"
+        class="js-clipboard hover:text-dark focus-visible:ring-secondary group inline-flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
+        data-clipboard-success-text="Copied"
+      >
+        <svg
+          class="js-clipboard-default h-4 w-4 transition group-hover:rotate-6"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+        </svg>
+
+        <svg
+          class="js-clipboard-success hidden h-4 w-4 text-neutral-700 dark:text-neutral-300"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+        <span class="js-clipboard-success-text">Copy link</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<!--Import the necessary Dropdown and Clipboard plugins-->
+<!--https://preline.co/plugins/html/dropdown.html-->
+<!--<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>-->
+
+<!-- https://clipboardjs.com/ -->
+<!--<script is:inline src="/scripts/vendor/clipboard.min.js"></script>-->
+
+<script is:inline>
+  (function () {
+    window.addEventListener('load', () => {
+      const $clipboards = document.querySelectorAll('.js-clipboard');
+      $clipboards.forEach((el) => {
+        const clipboard = new ClipboardJS(el, {
+          text: () => {
+            return window.location.href;
+          },
+        });
+        clipboard.on('success', () => {
+          const $default = el.querySelector('.js-clipboard-default');
+          const $success = el.querySelector('.js-clipboard-success');
+          const $successText = el.querySelector('.js-clipboard-success-text');
+          const successText = el.dataset.clipboardSuccessText || '';
+          let oldSuccessText;
+
+          if ($successText) {
+            oldSuccessText = $successText.textContent;
+            $successText.textContent = successText;
+          }
+          if ($default && $success) {
+            $default.style.display = 'none';
+            $success.style.display = 'block';
+          }
+
+          setTimeout(() => {
+            if ($successText && oldSuccessText) {
+              $successText.textContent = oldSuccessText;
+            }
+            if ($default && $success) {
+              $success.style.display = '';
+              $default.style.display = '';
+            }
+          }, 800);
+        });
+      });
+    });
+  })();
+</script>
--- a/site-profile-new/src/components/ui/buttons/ThemeToggle.astro
+++ b/site-profile-new/src/components/ui/buttons/ThemeToggle.astro
@@ -0,0 +1,279 @@
+---
+
+---
+
+<button
+  id="theme-toggle"
+  data-theme-toggle
+  class="group dark:hover:bg-steel/30 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-yellow-300/20 focus:outline-hidden 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-neutral-600 transition-all duration-500 dark:scale-0 dark:-rotate-90 dark:text-neutral-400"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5"></circle>
+      <path
+        d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+      ></path>
+    </svg>
+
+    <!-- Moon icon -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-dark absolute h-5 w-5 scale-0 rotate-90 text-neutral-600 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-neutral-400"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  </div>
+</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]');
+
+    // Create theme switch overlay element if it doesn't exist
+    if (!document.querySelector('.theme-switch-overlay')) {
+      const overlay = document.createElement('div');
+      overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
+      overlay.style.opacity = '0';
+      overlay.style.transition = 'opacity 0.3s ease-out';
+      document.body.appendChild(overlay);
+    }
+
+    // Toggle theme when any theme toggle button is clicked
+    themeToggles.forEach((toggle) => {
+      // Add event listeners for both click and touch events
+      ['click', 'touchend'].forEach((eventType) => {
+        toggle.addEventListener(
+          eventType,
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Get click/touch position for radial animation
+            let x, y;
+            if (e.type === 'touchend' && e.changedTouches && e.changedTouches[0]) {
+              const rect = toggle.getBoundingClientRect();
+              x = e.changedTouches[0].clientX - rect.left;
+              y = e.changedTouches[0].clientY - rect.top;
+            } else {
+              const rect = toggle.getBoundingClientRect();
+              x = e.clientX - rect.left;
+              y = e.clientY - rect.top;
+            }
+
+            // Set the position variables for the radial gradient
+            document.documentElement.style.setProperty('--x', `${x}px`);
+            document.documentElement.style.setProperty('--y', `${y}px`);
+
+            // Get the overlay element
+            const overlay = document.querySelector('.theme-switch-overlay');
+
+            // Determine the new theme
+            const isDark = document.documentElement.classList.contains('dark');
+            const newTheme = isDark ? 'light' : 'dark';
+
+            // Show overlay during transition
+            if (overlay) {
+              overlay.style.backgroundColor =
+                newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
+              overlay.style.opacity = '1';
+            }
+
+            // Add transition class
+            document.documentElement.classList.add('theme-switching');
+
+            // Force a reflow to ensure all elements update
+            document.body.offsetHeight;
+
+            // Toggle dark mode with a slight delay to allow overlay to appear
+            setTimeout(() => {
+              if (isDark) {
+                document.documentElement.classList.remove('dark');
+              } else {
+                document.documentElement.classList.add('dark');
+              }
+
+              // Store the preference
+              localStorage.setItem('theme', newTheme);
+
+              // Dispatch a custom event for other components to react to
+              document.dispatchEvent(
+                new CustomEvent('themeChanged', {
+                  detail: { isDark: newTheme === 'dark' },
+                })
+              );
+
+              // Force another reflow to ensure all elements update
+              document.body.offsetHeight;
+
+              // Hide overlay after theme has changed
+              setTimeout(() => {
+                if (overlay) {
+                  overlay.style.opacity = '0';
+                }
+
+                // Remove transition class after animation completes
+                document.documentElement.classList.remove('theme-switching');
+              }, 300);
+            }, 50);
+          },
+          { passive: false }
+        );
+      });
+
+      // Add touch feedback
+      toggle.addEventListener(
+        'touchstart',
+        () => {
+          toggle.classList.add('active-touch');
+        },
+        { passive: true }
+      );
+
+      toggle.addEventListener(
+        'touchend',
+        () => {
+          setTimeout(() => {
+            toggle.classList.remove('active-touch');
+          }, 150);
+        },
+        { passive: true }
+      );
+    });
+  }
+
+  // Run setup on load
+  document.addEventListener('astro:page-load', setupThemeToggle);
+
+  // Also run on page visibility change to ensure theme is consistent
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      const currentTheme = localStorage.getItem('theme');
+      if (currentTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else if (currentTheme === 'light') {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+  });
+
+  // Listen for system preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+    if (!localStorage.getItem('theme')) {
+      if (matches) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+  });
+</script>
+
+<style>
+  /* Smooth transition for the entire page when theme changes */
+  :global(body) {
+    transition:
+      background-color 0.5s ease,
+      color 0.5s ease;
+  }
+
+  /* Theme transition overlay */
+  :global(.theme-switch-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+    transition: opacity 0.3s ease-out;
+  }
+
+  /* Ensure theme transitions apply to all elements */
+  :global(.theme-switching *) {
+    transition-duration: 0.5s !important;
+    transition-property: background-color, border-color, color, fill, stroke !important;
+  }
+
+  /* Subtle hover animation */
+  #theme-toggle {
+    transform: translateY(0);
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent; /* Remove default mobile tap highlight */
+    min-height: 32px; /* Ensure minimum touch target size */
+    min-width: 32px; /* Ensure minimum touch target size */
+  }
+
+  /* Only apply hover effects on non-touch devices */
+  @media (hover: hover) {
+    #theme-toggle:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    #theme-toggle:hover .icon-light:not(.dark .icon-light) {
+      filter: drop-shadow-sm(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));
+      transform: scale(1.1) rotate(-15deg);
+    }
+  }
+
+  /* Touch feedback */
+  #theme-toggle.active-touch {
+    transform: scale(0.95);
+    transition: transform 0.15s ease-in-out;
+  }
+
+  /* Optimize animations for mobile */
+  @media (prefers-reduced-motion: reduce) {
+    .icon-light,
+    .icon-dark {
+      transition: all 0.2s ease-out !important;
+    }
+
+    #theme-toggle,
+    #theme-toggle:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  /* Adjust size for very small screens */
+  @media (max-width: 320px) {
+    #theme-toggle {
+      padding: 0.25rem !important;
+    }
+  }
+</style>
--- a/site-profile-new/src/components/ui/cards/FeaturesCard.astro
+++ b/site-profile-new/src/components/ui/cards/FeaturesCard.astro
@@ -0,0 +1,45 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  title?: string;
+  description?: string;
+  url?: string;
+  icon?: string;
+}
+
+const { title, description, url, icon } = Astro.props;
+
+const baseClasses = 'smooth-reveal-2 group group-hover flex flex-col';
+const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
+const bgColorClasses =
+  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
+const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
+---
+
+<div class={`${baseClasses}`}>
+  <a
+    class={`rounded-xl duration-300 transition-all ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
+    href={url}
+    data-astro-prefetch
+  >
+    <div class="p-4 md:p-5">
+      <div class="flex">
+        <Icon
+          name={icon}
+          class="group-hover:text-steel dark:group-hover:text-bermuda h-6 w-6 text-neutral-600 transition-all duration-300 md:h-8 md:w-8 dark:text-neutral-200"
+        />
+        <div class="ms-5 grow">
+          <span
+            class="group-hover:text-steel dark:group-hover:text-bermuda block text-lg font-bold text-neutral-600 transition-all duration-300 dark:text-neutral-300"
+          >
+            {title}
+          </span>
+          <span class="mt-1 block text-neutral-500 dark:text-neutral-400">
+            {description}
+          </span>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
--- a/site-profile-new/src/components/ui/icons/icon.astro
+++ b/site-profile-new/src/components/ui/icons/icon.astro
@@ -0,0 +1,39 @@
+---
+import { Icons } from './icons.ts';
+
+interface Path {
+  d: string;
+  class?: string;
+}
+
+const { name } = Astro.props;
+
+const icon = (Icons as any)[name] || {};
+const paths: Path[] = icon.paths || [];
+---
+
+{
+  icon ? (
+    <svg
+      class={icon.class}
+      height={icon.height}
+      viewBox={icon.viewBox}
+      width={icon.width}
+      fill={icon.fill}
+      clip-rule={icon.clipRule}
+      fill-rule={icon.fillRule}
+      stroke={icon.stroke}
+      stroke-width={icon.strokeWidth}
+      stroke-linecap={icon.strokeLinecap}
+      stroke-linejoin={icon.strokeLinejoin}
+    >
+      <title>{icon.title}</title>
+      <circle cx={icon.circleCx} cy={icon.circleCy} r={icon.circleR} />
+      {paths.map((path) => (
+        <path d={path.d} class={path.class || ''} />
+      ))}
+    </svg>
+  ) : (
+    'Icon not found'
+  )
+}
--- a/site-profile-new/src/components/ui/icons/icons.ts
+++ b/site-profile-new/src/components/ui/icons/icons.ts
@@ -0,0 +1,573 @@
+export const Icons = {
+  groups: {
+    paths: [
+      {
+        d: 'm150-400 82-80-82-82-80 82 80 80Zm573-10 87-140 88 140H723Zm-243-70q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-180Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17ZM480-600ZM0-240v-53q0-39.464 42-63.232T150.398-380q12.158 0 23.38.5T196-377.273q-8 17.273-12 34.842-4 17.57-4 37.431v65H0Zm240 0v-65q0-65 66.5-105T480-450q108 0 174 40t66 105v65H240Zm570-140q67.5 0 108.75 23.768T960-293v53H780v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5Zm-330.2-10Q400-390 350-366q-50 24-50 61v5h360v-6q0-36-49.5-60t-130.7-24Zm.2 90Z',
+      },
+    ],
+    class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  books: {
+    paths: [
+      {
+        d: 'M343-420h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z',
+      },
+    ],
+    class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  verified: {
+    paths: [
+      {
+        d: 'm346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z',
+      },
+    ],
+    class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  frame: {
+    paths: [
+      {
+        d: 'M480-480q-51 0-85.5-34.5T360-600q0-50 34.5-85t85.5-35q50 0 85 35t35 85q0 51-35 85.5T480-480Zm-.351-60Q505-540 522.5-557.149t17.5-42.5Q540-625 522.649-642.5t-43-17.5Q454-660 437-642.649t-17 43Q420-574 437.149-557t42.5 17ZM240-240v-76q0-27 17.5-47.5T300-397q42-22 86.943-32.5 44.942-10.5 93-10.5Q528-440 573-429.5t87 32.5q25 13 42.5 33.5T720-316v76H240Zm240-140q-47.546 0-92.773 13T300-328v28h360v-28q-42-26-87.227-39-45.227-13-92.773-13Zm0-220Zm0 300h180-360 180ZM140-80q-24 0-42-18t-18-42v-172h60v172h172v60H140ZM80-648v-172q0-24 18-42t42-18h172v60H140v172H80ZM648-80v-60h172v-172h60v172q0 24-18 42t-42 18H648Zm172-568v-172H648v-60h172q24 0 42 18t18 42v172h-60Z',
+      },
+    ],
+    class: 'mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  tools: {
+    paths: [
+      {
+        d: 'M764-80q-6 0-11-2t-10-7L501-331q-5-5-7-10t-2-11q0-6 2-11t7-10l85-85q5-5 10-7t11-2q6 0 11 2t10 7l242 242q5 5 7 10t2 11q0 6-2 11t-7 10l-85 85q-5 5-10 7t-11 2Zm0-72 43-43-200-200-43 43 200 200ZM195-80q-6 0-11.5-2T173-89l-84-84q-5-5-7-10.5T80-195q0-6 2-11t7-10l225-225h85l38-38-175-175h-57L80-779l99-99 125 125v57l175 175 130-130-67-67 56-56H485l-18-18 128-128 18 18v113l56-56 169 169q15 15 23.5 34.5T870-600q0 20-6.5 38.5T845-528l-85-85-56 56-52-52-211 211v84L216-89q-5 5-10 7t-11 2Zm0-72 200-200v-43h-43L152-195l43 43Zm0 0-43-43 22 21 21 22Zm569 0 43-43-43 43Z',
+      },
+    ],
+    class:
+      'mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  dashboard: {
+    paths: [
+      {
+        d: 'M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z',
+      },
+    ],
+    class:
+      'mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7',
+    width: 48,
+    height: 48,
+    viewBox: '0 -960 960 960',
+  },
+  house: {
+    paths: [
+      {
+        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',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 md:h-5 md:w-5',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  home: {
+    paths: [
+      {
+        d: 'M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819',
+      },
+    ],
+    class:
+      'h-6 w-6 flex-shrink-0 group-hover:text-steel dark:group-hover:text-steel transition-all duration-200 text-neutral-600 dark:text-neutral-300 md:h-7 md:w-7',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  arrowUp: {
+    paths: [
+      {
+        d: 'm5 12 7-7 7 7',
+      },
+      {
+        d: 'M12 19V5',
+      },
+    ],
+    class: 'h-5 w-5 flex-shrink-0 text-orange-400 dark:text-orange-300',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  checkCircle: {
+    paths: [
+      {
+        d: 'M10 18a8 8 0 100-16 8 8 0 000 16zM13.707 8.293a1 1 0 00-1.414-1.414L9 10.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z',
+      },
+    ],
+    class: 'h-5 w-5 shrink-0',
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+  },
+  bookmark: {
+    paths: [
+      {
+        d: 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z',
+        class:
+          'fill-current text-neutral-500 transition duration-300 group-hover:text-red-400 group-hover:dark:text-red-400',
+      },
+    ],
+    class: 'h-6 w-6 fill-none transition duration-300',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  arrowRight: {
+    paths: [
+      {
+        d: 'm9 18 6-6-6-6',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1',
+    width: 20,
+    height: 20,
+    viewBox: '0 0 22 22',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  arrowLeft: {
+    paths: [
+      {
+        d: 'm15 18-6-6 6-6',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 transition duration-300 group-hover:-translate-x-1',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  facebook: {
+    paths: [
+      {
+        d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
+      },
+    ],
+    class: 'size-4 flex-shrink-0 fill-current',
+    viewBox: '0 0 24 24',
+    stroke: 'currentColor',
+  },
+  x: {
+    paths: [
+      {
+        d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+      },
+    ],
+    class: 'size-4 flex-shrink-0 fill-current',
+    viewBox: '0 0 24 24',
+    stroke: 'currentColor',
+  },
+  linkedIn: {
+    paths: [
+      {
+        d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+      },
+    ],
+    class: 'size-4 flex-shrink-0 fill-current',
+    viewBox: '0 0 24 24',
+    stroke: 'currentColor',
+  },
+  share: {
+    paths: [
+      {
+        d: 'M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z',
+      },
+    ],
+    class: 'h-4 w-4 group-hover:text-neutral-700',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  github: {
+    paths: [
+      {
+        d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z',
+      },
+    ],
+    class: 'w-4.5 h-4.5 transition flex-shrink-0 text-neutral-700 duration-300',
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    fill: 'currentColor',
+  },
+  gitea: {
+    paths: [
+      {
+        d: 'M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z',
+      },
+    ],
+    class: 'w-6 h-6 transition flex-shrink-0 duration-300',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+  },
+  arrowRightStatic: {
+    paths: [
+      {
+        d: 'm9 18 6-6-6-6',
+      },
+    ],
+    class: 'size-4 flex-shrink-0',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  openInNew: {
+    paths: [
+      {
+        d: 'm4.5 19.5 15-15m0 0H8.25m11.25 0v11.25',
+      },
+    ],
+    class: 'ml-0.5 w-3 h-3 md:w-4 md:h-4 inline pb-0.5',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '3',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  accordionNotActive: {
+    paths: [
+      {
+        d: 'm6 9 6 6 6-6',
+      },
+    ],
+    class:
+      'block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  accordionActive: {
+    paths: [
+      {
+        d: 'm18 15-6-6-6 6',
+      },
+    ],
+    class:
+      'hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  xFooter: {
+    paths: [
+      {
+        d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    title: 'Twitter',
+  },
+  facebookFooter: {
+    paths: [
+      {
+        d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    title: 'Facebook',
+  },
+  githubFooter: {
+    paths: [
+      {
+        d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    title: 'GitHub',
+  },
+  googleFooter: {
+    paths: [
+      {
+        d: 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    title: 'Google',
+  },
+  slackFooter: {
+    paths: [
+      {
+        d: 'M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z',
+      },
+    ],
+    class: 'h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    title: 'Slack',
+  },
+  quotation: {
+    paths: [
+      {
+        d: 'M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z',
+      },
+    ],
+    class:
+      'absolute start-0 top-0 h-16 w-16 -translate-x-6 -translate-y-8 transform text-neutral-300 dark:text-neutral-700',
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    fill: 'currentColor',
+  },
+  question: {
+    paths: [
+      {
+        d: 'M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z',
+      },
+    ],
+    class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  chatBubble: {
+    paths: [
+      {
+        d: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
+      },
+    ],
+    class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  mapPin: {
+    paths: [
+      {
+        d: 'M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+      },
+      {
+        d: 'M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z',
+      },
+    ],
+    class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  envelopeOpen: {
+    paths: [
+      {
+        d: 'M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z',
+      },
+    ],
+    class: 'mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  earth: {
+    paths: [
+      {
+        d: 'm20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525',
+      },
+    ],
+    class: 'w-4 h-4 flex-shrink-0',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '1.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  party: {
+    paths: [
+      {
+        d: 'M5.8 11.3 2 22l10.7-3.79',
+      },
+      {
+        d: 'M4 3h.01',
+      },
+      {
+        d: 'M22 8h.01',
+      },
+      {
+        d: 'M15 2h.01',
+      },
+      {
+        d: 'M22 20h.01',
+      },
+      {
+        d: 'm22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10',
+      },
+      {
+        d: 'm22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17',
+      },
+      {
+        d: 'm11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7',
+      },
+      {
+        d: 'M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z',
+      },
+    ],
+    class:
+      'w-6 h-6 group-hover:text-steel dark:group-hover:text-steel transition-all duration-200 text-neutral-600 dark:text-neutral-300',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  email: {
+    paths: [
+      {
+        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',
+      },
+    ],
+    class:
+      'w-8 h-8 group-hover:text-steel dark:group-hover:text-steel transition-all duration-200 text-neutral-600 dark:text-neutral-300',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  sun: {
+    paths: [
+      {
+        d: 'M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
+      },
+    ],
+    circleCx: '12',
+    circleCy: '12',
+    circleR: '5',
+    class:
+      'icon-light absolute h-5 w-5 scale-100 rotate-0 text-neutral-800 transition-all duration-500 dark:scale-0 dark:-rotate-90 dark:text-neutral-200',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  moon: {
+    paths: [
+      {
+        d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',
+      },
+    ],
+    class:
+      'icon-dark absolute h-5 w-5 scale-0 rotate-90 text-neutral-800 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-neutral-200',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+  arrow: {
+    paths: [
+      {
+        d: 'M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z',
+      },
+    ],
+    class:
+      'icon-dark absolute h-5 w-5 scale-0 rotate-90 text-neutral-800 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-neutral-200',
+    width: 16,
+    height: 16,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    stroke: 'currentColor',
+  },
+};
--- a/site-profile-new/src/components/ui/images/Image.astro
+++ b/site-profile-new/src/components/ui/images/Image.astro
@@ -0,0 +1,17 @@
+---
+import { Image } from 'astro:assets';
+import { ImageMetadata } from 'astro';
+import { blurStyle } from '@support/image';
+
+interface FsPathImage extends ImageMetadata {
+  fsPath?: string;
+}
+
+const props = Astro.props;
+
+const image = props.src as FsPathImage;
+const showBlur = !props.disableBlur;
+const blurCSS = image.fsPath && showBlur ? await blurStyle(image.fsPath) : {};
+---
+
+<Image {...props} style={blurCSS} inferSize={true} />
--- a/site-profile-new/src/components/ui/logos/BrandLogo.astro
+++ b/site-profile-new/src/components/ui/logos/BrandLogo.astro
@@ -0,0 +1,11 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import Image from '@components/ui/images/Image.astro';
+import logo from '@images/brand_logo.png';
+import directus from '@lib/directus';
+
+const global = await directus.request(readSingleton('site_global'));
+---
+
+<Image src={logo} alt={global.name} {...Astro.props} draggable="false" loading="eager" />
--- a/site-profile-new/src/components/ui/sections/Education.astro
+++ b/site-profile-new/src/components/ui/sections/Education.astro
@@ -0,0 +1,129 @@
+---
+import { Icon } from 'astro-icon/components';
+import { readItems } from '@directus/sdk';
+
+import type { Education } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+
+const education = await directus.request(
+  readItems('site_education', {
+    fields: ['*'],
+    sort: ['-graduationDate'],
+  })
+);
+
+const certificate = await directus.request(
+  readItems('site_certificate', {
+    fields: ['*'],
+    sort: ['-issuerDate'],
+  })
+);
+
+const baseClasses = ' rounded-xl flex flex-col';
+const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
+const bgColorClasses =
+  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
+const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
+---
+
+<section class:list={['order-first flex flex-col gap-4', Astro.props.className]}>
+  <h3
+    class="smooth-reveal-1 relative flex w-full items-center gap-3 pb-5 text-5xl text-neutral-800 dark:text-neutral-200"
+  >
+    Education
+  </h3>
+  <div class="ml-8">
+    <h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
+      University
+    </h4>
+    <ul class="space-y-4 py-3">
+      {
+        education.map(({ institution, area, url }) => {
+          return (
+            <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
+              <div>
+                <div
+                  class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
+                >
+                  <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
+                    <Icon
+                      name="mdi:university-outline"
+                      class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
+                    />
+                    {institution}
+                  </h3>
+                  <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
+                    {area}
+                  </p>
+                  <div class="ml-6 flex">
+                    <a
+                      class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
+                      href={url}
+                    >
+                      <div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
+                        <span class="relative inline-block overflow-hidden"> Visit Page </span>
+                        <Icon
+                          name="mdi:keyboard-arrow-right"
+                          class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+                        />
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })
+      }
+    </ul>
+  </div>
+
+  {
+    certificate.length > 0 && (
+      <div class="ml-8">
+        <h4 class="smooth-reveal-1 pt-8 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
+          Certificates
+        </h4>
+        <ul class="space-y-4 py-3">
+          {certificate.map(({ name, issuer, url }) => {
+            return (
+              <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
+                <div>
+                  <div
+                    class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
+                  >
+                    <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
+                      <Icon
+                        name="mdi:script-text-outline"
+                        class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
+                      />
+                      {name}
+                    </h3>
+                    <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
+                      {issuer}
+                    </p>
+                    <div class="ml-6 flex">
+                      <a
+                        class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
+                        href={url}
+                      >
+                        <div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
+                          <span class="relative inline-block overflow-hidden"> Visit Page </span>
+                          <Icon
+                            name="mdi:keyboard-arrow-right"
+                            class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+                          />
+                        </div>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </ul>
+      </div>
+    )
+  }
+</section>
--- a/site-profile-new/src/components/ui/sections/Experience.astro
+++ b/site-profile-new/src/components/ui/sections/Experience.astro
@@ -0,0 +1,152 @@
+---
+import { Icon } from 'astro-icon/components';
+import { readItems } from '@directus/sdk';
+
+import type { Experience } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+
+const experiences = await directus.request(
+  readItems('site_experience', {
+    fields: ['*'],
+    sort: ['-endDate'],
+  })
+);
+---
+
+<section 
+  class:list={['flex flex-col gap-4', Astro.props.className]}
+
+>
+  <h3 class="relative smooth-reveal-1 flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3>
+  <ul class="ml-8 w-full flex flex-col">
+    {
+      experiences.map(
+        (experience: Experience) => {
+          const startYear = new Date(experience.startDate).getFullYear();
+          const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present';
+
+          return (
+            <li class="relative">
+              <div class="group smooth-reveal-2 relative grid pb-1 transition-all sm:grid-cols-18 sm:gap-8 md:gap-6 lg:hover:!opacity-100">
+                <header class="relative mt-1 text-lg font-semibold sm:col-span-3 text-neutral-800 dark:text-neutral-200">
+                  <time datetime={experience.startDate} data-title={experience.startDate}>
+                    {startYear}
+                  </time>{' '}
+                  -{' '}
+                  <time datetime={experience.endDate} data-title={experience.endDate}>
+                    {endYear}
+                  </time>
+                </header>
+                <div class="relative flex flex-col pb-6 before:absolute before:mt-8 before:-ml-6 before:h-full before:w-px before:bg-stone-400 sm:col-span-12">
+                  <div class="absolute mt-4 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-stone-400" />
+                  <h3>
+                    <div
+                      class="inline-flex items-center text-2xl leading-tight font-semibold"
+                      aria-label="{position} - {company}"
+                    >
+                      <span class="text-neutral-800 dark:text-neutral-200">
+                        {experience.position} <span>@</span>
+                        {experience.url ? (
+                          <a
+                            class="hover:text-steel dark:hover:text-bermuda"
+                            href={experience.url}
+                            title={`Ver ${experience.name}`}
+                            target="_blank"
+                          >
+                            {experience.name}
+                          </a>
+                        ) : (
+                          <span>{experience.name}</span>
+                        )}
+                      </span>
+                    </div>
+                  </h3>
+                  {(experience.location || experience.location_type) && (
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
+                      {experience.location} {experience.location && experience.location_type && '-'} {experience.location_type}
+                    </div>
+                  )}
+                  <div class="text-md mt-4 flex flex-col gap-4" x-data="{ expanded: false }">
+                    {experience.summary && (
+                      <div class="flex flex-col gap-1">
+                        <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Summary:</h4>
+                        <ul class="flex list-disc flex-col gap-2 text-neutral-700 dark:text-neutral-400 [&>li]:ml-4">
+                          {Array.isArray(experience.summary) ? (
+                            experience.summary.map((item) => ({ item }))
+                          ) : (
+                            <li class="marker:text-steel dark:marker:text-bermuda">{experience.summary}</li>
+                          )}
+                        </ul>
+                      </div>
+                    )}
+
+                    {(experience.responsibilities || experience.achievements) &&  (
+                      <div class="relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-neutral-200 dark:md:after:from-stone-700 md:after:content-[''] " :class="expanded ? 'after:hidden' : ''" x-show="expanded" x-collapse.min.50px>
+                      {experience.responsibilities && (
+                        <div class="flex flex-col gap-1">
+                          <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Responsibilities:</h4>
+                          <ul class="text-neutral-700 dark:text-neutral-400 [&>li]:ml-4 flex list-disc flex-col gap-2">
+                            {experience.responsibilities.map(responsibility => (
+                              <li class="marker:text-steel dark:marker:text-bermuda">{responsibility}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+
+                      {experience.achievements && (
+                        <div class="flex flex-col gap-1">
+                          <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Achievements:</h4>
+                          <ul class="text-neutral-700 dark:text-neutral-400 [&>li]:ml-4 flex list-disc flex-col gap-2">
+                            {experience.achievements.map(achievement => (
+                              <li class="marker:text-steel dark:marker:text-bermuda">{achievement}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      </div>
+                      
+                      <button @click="expanded = ! expanded" class="group/more w-fit cursor-pointer items-center justify-center gap-1.5 text-xs underline text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-400 transition-all flex">
+                        <span x-text="expanded ? 'Show less' : 'Show more'">Show more</span>
+                        <svg
+                          class="h-4 w-4 duration-200 ease-out group-hover/more:translate-y-0.5"
+                          :class="{ 'rotate-180': expanded }"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                      </button>
+
+                      <ul class="flex print:hidden flex-wrap gap-2" aria-label="Technologies used">
+                        {experience.skills && experience.skills.map(skill => {
+                          const iconName = skill.toLowerCase();
+                          return (
+                            <li class="bg-steel/20 border-steel/20 text-neutral-800 dark:bg-bermuda/20 dark:border-bermuda/20 dark:text-neutral-200 flex gap-1 items-center border-solid  border rounded-md px-2 py-0.5 text-xs">
+                              <Icon name={`mdi:${iconName}`} /> <span>{skill}</span>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        }
+      )
+    }
+  </ul>
+</section>
+
+<!-- Alpine Plugins -->
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+
+<!-- Alpine Core -->
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
--- a/site-profile-new/src/components/ui/sections/FeaturesSection.astro
+++ b/site-profile-new/src/components/ui/sections/FeaturesSection.astro
@@ -0,0 +1,37 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import FeaturesCard from '@components/ui/cards/FeaturesCard.astro';
+
+const global = await directus.request(readSingleton('site_global'));
+---
+
+<section class="mx-auto mb-20 max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
+  <div
+    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
+  >
+    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+      <div class="grid gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
+        <FeaturesCard
+          title="Cloud Engineer"
+          description="Full stack and multi cloud engineer"
+          url="#"
+          icon="mdi:cloud-outline"
+        />
+        <FeaturesCard
+          title="Homelab"
+          description="Tinkering, testing, deploying, etc, etc ..."
+          url="#"
+          icon="mdi:home-variant-outline"
+        />
+        <FeaturesCard
+          title="Email Me"
+          description={`Reach me at ${global.email}`}
+          url=`mailto:${global.email}`
+          icon="mdi:email-fast"
+        />
+      </div>
+    </div>
+  </div>
+</section>
--- a/site-profile-new/src/components/ui/sections/HeaderSection.astro
+++ b/site-profile-new/src/components/ui/sections/HeaderSection.astro
@@ -0,0 +1,35 @@
+---
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  btnExists?: boolean;
+  btnTitle?: string;
+  btnURL?: string;
+}
+
+const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
+---
+
+<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
+  <div class="flex-wrap md:flex md:items-center md:justify-between">
+    <div class="w-full md:w-auto">
+      <h1
+        class="smooth-reveal block text-4xl font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-6xl dark:text-neutral-200"
+      >
+        {title}
+      </h1>
+      <p class="smooth-reveal mt-4 text-lg text-pretty text-neutral-600 dark:text-neutral-400">
+        {subTitle}
+      </p>
+      {
+        btnExists ? (
+          <div class="smooth-reveal mt-4 md:mt-8">
+            <PrimaryCTA title={btnTitle} url={btnURL} />
+          </div>
+        ) : null
+      }
+    </div>
+  </div>
+</section>
--- a/site-profile-new/src/components/ui/sections/HeroSection.astro
+++ b/site-profile-new/src/components/ui/sections/HeroSection.astro
@@ -0,0 +1,63 @@
+---
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.astro';
+import Image from '@components/ui/images/Image.astro';
+
+const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } =
+  Astro.props;
+
+interface Props {
+  title: string;
+  subTitle?: string;
+  primaryBtn?: string;
+  primaryBtnURL?: string;
+  secondaryBtn?: string;
+  secondaryBtnURL?: string;
+  src?: any;
+  alt?: string;
+}
+---
+
+<section
+  class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
+>
+  <div>
+    <h1
+      class="smooth-reveal block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-7xl lg:leading-tight dark:text-neutral-200"
+    >
+      <Fragment set:html={title} />
+    </h1>
+    {
+      subTitle && (
+        <p class="smooth-reveal mt-6 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-300">
+          {subTitle}
+        </p>
+      )
+    }
+
+    <div class="smooth-reveal mt-7 grid w-full gap-3 sm:inline-flex">
+      {primaryBtn && <PrimaryCTA title={primaryBtn} url={primaryBtnURL} />}
+      {secondaryBtn && <SecondaryCTA title={secondaryBtn} url={secondaryBtnURL} />}
+    </div>
+  </div>
+
+  <div class="smooth-reveal-fade hidden w-full md:block">
+    <div class="top-12 flex w-full justify-center overflow-hidden md:ml-4">
+      {
+        src && alt && (
+          <Image
+            src={src}
+            alt={alt}
+            class="h-full w-[420px] scale-100 object-cover object-center"
+            draggable="false"
+            loading="eager"
+            format="webp"
+            quality="low"
+            widths={[840]}
+            disableBlur={true}
+          />
+        )
+      }
+    </div>
+  </div>
+</section>
--- a/site-profile-new/src/components/ui/sections/HeroSectionAlt.astro
+++ b/site-profile-new/src/components/ui/sections/HeroSectionAlt.astro
@@ -0,0 +1,164 @@
+---
+import GiteaBtn from '@components/ui/buttons/GiteaBtn.astro';
+
+const { title, subTitle, url } = Astro.props;
+const btnTitle = 'Continue to Gitea';
+
+interface Props {
+  title: string;
+  subTitle?: string;
+  url?: string;
+}
+---
+
+<section class="lg:px- relative mx-auto mb-20 max-w-[85rem] px-4 pt-30 pb-30 sm:px-6">
+  <div
+    class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
+  >
+    <svg
+      class="animate-hover animate-hover-1"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#ea580c"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="#ea580c"
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      ></path>
+      <path
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21 7.353v9.294a.6.6 0 0 1-.309.525l-8.4 4.666a.6.6 0 0 1-.582 0l-8.4-4.666A.6.6 0 0 1 3 16.647V7.353a.6.6 0 0 1 .309-.524l8.4-4.667a.6.6 0 0 1 .582 0l8.4 4.667a.6.6 0 0 1 .309.524Z"
+      ></path>
+      <path
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m3.528 7.294 8.18 4.544a.6.6 0 0 0 .583 0l8.209-4.56M12 21v-9"></path>
+    </svg>
+  </div>
+  <div class="smooth-reveal absolute top-0 left-[85%] scale-75">
+    <svg
+      class="animate-hover animate-hover-2"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#fbbf24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"></path>
+      <path
+        fill="#fbbf24"
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
+      <path stroke="#fbbf24" stroke-linecap="round" stroke-linejoin="round" d="M5 10.5V9M5 15v-1.5"
+      ></path>
+      <path
+        fill="#fbbf24"
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
+      <path
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.5 19H9M15 19h-1.5"></path>
+    </svg>
+  </div>
+  <div
+    class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
+  >
+    <svg
+      class="animate-hover animate-hover-3"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#a3a3a3"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#a3a3a3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5.164 17c.29-1.049.67-2.052 1.132-3M11.5 7.794A16.838 16.838 0 0 1 14 6.296M4.5 22a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+      <path
+        stroke="#a3a3a3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9.5 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM19.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+    </svg>
+  </div>
+  <!-- Hero Section Heading -->
+  <div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
+    <h2
+      class="block text-4xl leading-tight font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-5xl dark:text-neutral-200"
+    >
+      {title}
+    </h2>
+  </div>
+  <!-- Hero Section Sub-heading -->
+  <div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
+    {
+      subTitle && (
+        <p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
+      )
+    }
+  </div>
+  <!-- Github Button -->
+  {
+    url && (
+      <div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
+        <GiteaBtn url={url} title={btnTitle} />
+      </div>
+    )
+  }
+</section>
+
+<style>
+  @keyframes animate-hover {
+    from {
+      transform: translateY(15px);
+    }
+
+    to {
+      transform: translateY(-15px);
+    }
+  }
+
+  .animate-hover {
+    animation: animate-hover ease-in-out;
+
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  .animate-hover-1 {
+    animation-duration: 5s;
+  }
+
+  .animate-hover-2 {
+    animation-duration: 5.5s;
+  }
+
+  .animate-hover-3 {
+    animation-duration: 6s;
+  }
+</style>
--- a/site-profile-new/src/components/ui/sections/LatestPosts.astro
+++ b/site-profile-new/src/components/ui/sections/LatestPosts.astro
@@ -0,0 +1,34 @@
+---
+import { readItems } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import type { Post } from '@lib/directusTypes';
+import BlogCard from '@components/blog/BlogCard.astro';
+
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+
+const recentPosts = posts
+  .sort((a: Post, b: Post) => b.published_date.getTime() - a.published_date.getTime())
+  .slice(0, 3);
+---
+
+<section class="mx-auto mb-20 max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
+  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
+    <h1
+      class="smooth-reveal block text-4xl font-bold text-neutral-800 md:text-5xl md:leading-tight lg:text-5xl dark:text-neutral-200"
+    >
+      Latest Posts
+    </h1>
+    <p class="smooth-reveal mt-1 text-pretty text-neutral-600 dark:text-neutral-300">
+      More recent posts.
+    </p>
+  </div>
+  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    {recentPosts.map((b) => <BlogCard post={b} />)}
+  </div>
+</section>
--- a/site-profile-new/src/components/ui/sections/Projects.astro
+++ b/site-profile-new/src/components/ui/sections/Projects.astro
@@ -0,0 +1,75 @@
+---
+import { Icon } from 'astro-icon/components';
+import { readItems } from '@directus/sdk';
+
+import type { Project } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+
+const projects = await directus.request(
+  readItems('site_projects', {
+    fields: ['*'],
+    sort: ['-isActive'],
+  })
+);
+
+const baseClasses = 'smooth-reveal-cards rounded-xl flex flex-col';
+const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
+const bgColorClasses =
+  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
+const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
+---
+
+<section class:list={['flex flex-col gap-4', Astro.props.className]}>
+  <h3
+    class="relative flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200"
+  >
+    Projects
+  </h3>
+  <div class="ml-8 grid grid-cols-1 gap-3 md:grid-cols-2 print:flex print:flex-col">
+    {
+      projects.map((project: Project) => {
+        return (
+          <div class={`${baseClasses}`}>
+            <div
+              class={`rounded-xl transition-all duration-300 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
+            >
+              <div class="p-4 md:p-10">
+                <h3 class="text-lg font-bold text-gray-800 dark:text-white">{project.name}</h3>
+                <p class="mt-2 text-gray-500 dark:text-neutral-400">{project.description}</p>
+                <ul class="mt-1 flex list-disc flex-col gap-2 text-sm text-gray-500 dark:text-neutral-400 [&>li]:ml-4">
+                  {project.highlights.map((highlight) => {
+                    return <li class="marker:text-yellow-500">{highlight}</li>;
+                  })}
+                </ul>
+                <div class="flex">
+                  <a
+                    class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
+                    href={project.url}
+                  >
+                    <div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text text-md relative z-10 mx-auto flex min-h-[44px] items-center font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
+                      <span class="relative inline-block overflow-hidden"> Visit Page </span>
+                      <Icon
+                        name="mdi:keyboard-arrow-right"
+                        class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    class="group group-hover relative ml-auto inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
+                    href={project.source}
+                  >
+                    <div class="group-hover:text-gitea-primary dark:group-hover:text-gitea-primary transition-text text-md relative z-10 mx-auto flex min-h-[44px] items-center font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
+                      <span class="relative inline-block overflow-hidden"> Source </span>
+                      <Icon name="pajamas:gitea" class="ml-2 translate-y-0.5" />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })
+    }
+  </div>
+</section>
--- a/site-profile-new/src/components/ui/sections/Skills.astro
+++ b/site-profile-new/src/components/ui/sections/Skills.astro
@@ -0,0 +1,250 @@
+---
+import { Icon } from 'astro-icon/components';
+import { readItems } from '@directus/sdk';
+
+import type { Skill } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+
+const skills = await directus.request(
+  readItems('site_skills', {
+    fields: ['*'],
+    sort: ['-date_created'],
+  })
+);
+
+const baseClasses = 'mx-2 min-w-[220px] sm:mx-4 sm:min-w-[280px]';
+const borderClasses =
+  'border border-neutral-100 hover:border-neutral-200 dark:border-stone-500/20 dark:hover:border-neutral-800';
+const bgColorClasses = 'bg-neutral-100/80 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
+const hoverClasses = 'hover:-translate-y-2 hover:scale-105 ';
+const shadowClasses = 'shadow-xs hover:shadow-lg';
+---
+
+<section class:list={['flex flex-col gap-4', Astro.props.className]}>
+  <h3
+    class="relative flex w-full items-center gap-3 pb-4 text-5xl text-neutral-800 dark:text-neutral-200"
+  >
+    Skills
+  </h3>
+  <div class="">
+    <div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
+      <!-- Main slider container -->
+      <div class="slider-track animate-slide flex">
+        {
+          [...skills, ...skills, ...skills].map((skill: Skill) => {
+            return (
+              <div
+                class={`skill-card transform rounded-xl transition-all duration-300 ${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${shadowClasses}`}
+              >
+                <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="flex transform items-center justify-center rounded-lg text-neutral-800 transition-transform group-hover:rotate-12 dark:text-neutral-200">
+                        <Icon name={skill.icon} class="h-8 w-8 sm:h-12 sm:w-12" />
+                      </div>
+                      <h3 class="text-base font-semibold text-neutral-900 sm:text-xl dark:text-neutral-100">
+                        {skill.title}
+                      </h3>
+                    </div>
+                    <span class="rounded-full bg-neutral-200 px-2 py-0.5 font-mono text-xs text-neutral-700 sm:px-2.5 sm:py-1 sm:text-sm dark:bg-neutral-800 dark:text-neutral-300">
+                      {skill.level}%
+                    </span>
+                  </div>
+
+                  <div class="relative h-1.5 w-full overflow-hidden rounded-full bg-stone-500/20 sm:h-2 dark:bg-stone-500/20">
+                    <div
+                      class="progress-bar-animate from-steel via-bermuda to-steel absolute top-0 left-0 h-full rounded-full bg-gradient-to-r transition-all duration-1000"
+                      style={`width: ${skill.level}%`}
+                    />
+                  </div>
+
+                  <div class="mt-1 flex justify-between font-mono text-[10px] text-neutral-600 sm:mt-2 sm:text-xs dark:text-neutral-400">
+                    <span>Beginner</span>
+                    <span>Advanced</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        }
+      </div>
+
+      <!-- Gradient overlays for smooth fade effect -->
+      <div
+        class="absolute top-0 bottom-0 left-0 z-10 w-12 bg-gradient-to-r from-neutral-200 to-transparent sm:w-24 dark:from-stone-700"
+      >
+      </div>
+      <div
+        class="absolute top-0 right-0 bottom-0 z-10 w-12 bg-gradient-to-l from-neutral-200 to-transparent sm:w-24 dark:from-stone-700"
+      >
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    // 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>
+  /* Tech Stack Slider */
+  .slider-track {
+    width: fit-content;
+    animation: scroll 40s linear infinite;
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(calc(-220px * 6 - 16px * 6)); /* Card width + margin for mobile */
+    }
+  }
+
+  @media (min-width: 640px) {
+    .slider-track {
+      animation: scroll 80s linear infinite;
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(calc(-280px * 6 - 32px * 6)); /* Card width + margin for desktop */
+      }
+    }
+  }
+
+  .tech-stack-slider:hover .slider-track {
+    animation-play-state: paused;
+  }
+
+  .skill-card {
+    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skill-card:hover {
+    z-index: 10;
+  }
+
+  /* Reduce animation complexity on mobile */
+  @media (max-width: 640px) {
+    .skill-card {
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    }
+
+    .skill-card:hover {
+      transform: translateY(-5px) !important;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+
+  .skill-card:before {
+    content: '';
+    position: absolute;
+    top: -10%;
+    left: -10%;
+    width: 120%;
+    height: 120%;
+    background: radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0) 70%
+    );
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+  }
+
+  .skill-card:hover:before {
+    opacity: 1;
+  }
+
+  .progress-bar-animate {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .progress-bar-animate:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: progress-shine 2s infinite;
+  }
+
+  @keyframes progress-shine {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+</style>
--- a/site-profile-new/src/config.ts
+++ b/site-profile-new/src/config.ts
@@ -0,0 +1,66 @@
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+
+export interface NavigationLink {
+  name: string;
+  url: string;
+}
+
+const global = await directus.request(readSingleton('site_global'));
+
+export const WorkInformation = [
+  {
+    name: 'Tech Startup',
+    position: 'Junior Web Developer',
+    location_type: 'On site',
+    location: 'Auckland, New Zealand',
+    url: 'https://techstartup.com',
+    startDate: '2024-01-01',
+    endDate: null,
+    summary:
+      'Developing and maintaining web applications using JavaScript, HTML, and CSS. Collaborating with the team to implement new features and fix bugs.',
+    highlights: ['Improved website performance by optimizing code'],
+    responsibilities: [
+      'Collaborated with senior developers to design and implement web applications using modern JavaScript frameworks.',
+      'Assisted in debugging and optimizing front-end code to ensure smooth user experiences.',
+      'Participated in code reviews and contributed to improving coding standards within the team.',
+    ],
+    achievements: [
+      'Developing and maintaining web applications using JavaScript, HTML, and CSS. Collaborating with the team to implement new features and fix bugs.',
+    ],
+    skills: ['React', 'Tailwind', 'GitHub'],
+  },
+];
+
+export const NavigationLinks: NavigationLink[] = [
+  { name: 'Home', url: '/' },
+  { name: 'Blog', url: '/blog/' },
+  { name: 'Categories', url: '/categories/' },
+  { name: 'About Me', url: '/about/' },
+];
+
+export const FooterLinks: NavigationLink[] = [
+  { name: 'RSS', url: '/rss.xml' },
+  { name: 'Gitea', url: '/https://gitea.alexlebens.dev' },
+];
+
+export const SEO = {
+  title: global.name,
+  description: global.about,
+  structuredData: {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': global.site_url,
+    url: global.site_url,
+    name: global.name,
+    description: global.about,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  },
+};
--- a/site-profile-new/src/content/categories/books.md
+++ b/site-profile-new/src/content/categories/books.md
@@ -0,0 +1,4 @@
+---
+title: '二愣的小书屋 🔖'
+description: '生活总是这样，不能让人处处都满意但我们还要热情地活下去'
+---
--- a/site-profile-new/src/content/categories/golang.md
+++ b/site-profile-new/src/content/categories/golang.md
@@ -0,0 +1,4 @@
+---
+title: 'Golang 🚀'
+description: 'Go 语言的词法分析与语法分析及折腾下 Go 编译原理吗'
+---
--- a/site-profile-new/src/content/categories/kubernetes.md
+++ b/site-profile-new/src/content/categories/kubernetes.md
@@ -0,0 +1,4 @@
+---
+title: 'kubernetes 💩'
+description: 'Kubernetes 是一个开源系统，用于自动化部署、扩展和管理容器化应用程序。'
+---
--- a/site-profile-new/src/content/categories/laravel.md
+++ b/site-profile-new/src/content/categories/laravel.md
@@ -0,0 +1,4 @@
+---
+title: 'Laravel 🐛'
+description: '最优雅的 PHP 框架'
+---
--- a/site-profile-new/src/content/categories/life.md
+++ b/site-profile-new/src/content/categories/life.md
@@ -0,0 +1,4 @@
+---
+title: '生活 💃'
+description: '房贷要还的，水电费要交的，小孩学费也贵的，钱肯定要不够的呀。所以工作不敢扔，我大部分的快乐，都是来自于生活的夹缝。'
+---
--- a/site-profile-new/src/content/categories/mysql.md
+++ b/site-profile-new/src/content/categories/mysql.md
@@ -0,0 +1,4 @@
+---
+title: 'MySQL'
+description: 'MySQL is an open-source relational database management system (RDBMS).'
+---
--- a/site-profile-new/src/content/categories/nginx.md
+++ b/site-profile-new/src/content/categories/nginx.md
@@ -0,0 +1,4 @@
+---
+title: 'Nginx 🐕‍🦺'
+description: '高性能的 HTTP 和反向代理 Web 服务器，奈何反向代理的 PHP-FMP 服务太慢。'
+---
--- a/site-profile-new/src/content/categories/php.md
+++ b/site-profile-new/src/content/categories/php.md
@@ -0,0 +1,4 @@
+---
+title: 'PHP 🐘'
+description: 'PHP is a popular general-purpose scripting language that is especially suited to web development.'
+---
--- a/site-profile-new/src/content/categories/tool.md
+++ b/site-profile-new/src/content/categories/tool.md
@@ -0,0 +1,4 @@
+---
+title: 'Tool 🪜'
+description: '停止折腾就老了吧'
+---
--- a/site-profile-new/src/content/categories/whatis.md
+++ b/site-profile-new/src/content/categories/whatis.md
@@ -0,0 +1,4 @@
+---
+title: 'What Is?'
+description: '什么是快乐星球，什么是快乐星球，什么是快乐星球'
+---
--- a/site-profile-new/src/content/config.ts
+++ b/site-profile-new/src/content/config.ts
@@ -0,0 +1,12 @@
+import { defineCollection, z } from 'astro:content';
+
+const categoryCollection = defineCollection({
+  type: 'content',
+  schema: () =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+    }),
+});
+
+export const collections = { categories: categoryCollection };
--- a/site-profile-new/src/env.d.ts
+++ b/site-profile-new/src/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />
--- a/site-profile-new/src/images/autumn_bench.png
+++ b/site-profile-new/src/images/autumn_bench.png
--- a/site-profile-new/src/images/autumn_mountain.png
+++ b/site-profile-new/src/images/autumn_mountain.png
--- a/site-profile-new/src/images/autumn_tree.png
+++ b/site-profile-new/src/images/autumn_tree.png
--- a/site-profile-new/src/images/brand_logo.png
+++ b/site-profile-new/src/images/brand_logo.png
--- a/site-profile-new/src/images/favicon.svg
+++ b/site-profile-new/src/images/favicon.svg
--- a/site-profile-new/src/images/favicon_icon.png
+++ b/site-profile-new/src/images/favicon_icon.png
--- a/site-profile-new/src/images/favicon_icon.svg
+++ b/site-profile-new/src/images/favicon_icon.svg
--- a/site-profile-new/src/images/flowers.png
+++ b/site-profile-new/src/images/flowers.png
--- a/site-profile-new/src/images/portrait.avif
+++ b/site-profile-new/src/images/portrait.avif
--- a/site-profile-new/src/layouts/BaseLayout.astro
+++ b/site-profile-new/src/layouts/BaseLayout.astro
@@ -0,0 +1,93 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import BaseHead from '@components/BaseHead.astro';
+import Footer from '@components/Footer.astro';
+import Header from '@components/Header.astro';
+
+import '@styles/global.css';
+
+interface Props {
+  title?: string;
+  description?: string;
+  ogImage?: any;
+  lang?: string;
+  structuredData?: object;
+}
+
+const { title, description = 'Alex Lebens', ogImage, lang = 'en', structuredData } = Astro.props;
+
+const global = await directus.request(readSingleton('site_global'));
+const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
+---
+
+<html lang={lang}>
+  <head>
+    <title>{normalizeTitle}</title>
+    <BaseHead
+      title={normalizeTitle}
+      description={description}
+      ogImage={ogImage}
+      ogTitle={title === '' ? global.name : title}
+      ogDescription={description}
+      structuredData={structuredData}
+    />
+    <ClientRouter fallback="swap" />
+    <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>
+  </head>
+  <body class="bg-stone-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-stone-700">
+    <!--     <div class="fixed inset-0 -z-10">
+      <div
+        class="bg-grid-pattern absolute inset-0 [mask-image:radial-gradient(white,transparent_85%)] bg-[center_top_-1px]"
+      >
+      </div>
+    </div> -->
+    <div class="mx-auto w-full max-w-(--breakpoint-2xl) flex-grow px-4 sm:px-6 lg:px-8">
+      <Header />
+      <main class="min-h-screen">
+        <slot />
+      </main>
+    </div>
+    <Footer />
+    <style>
+      .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+      }
+      .scrollbar-hide {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+      }
+    </style>
+  </body>
+</html>
+
+<style>
+  .bg-grid-pattern {
+    background-size: 24px 24px;
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
+    transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
+  }
+
+  :global(.dark) .bg-grid-pattern {
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
+  }
+</style>
--- a/site-profile-new/src/lib/directus.ts
+++ b/site-profile-new/src/lib/directus.ts
@@ -0,0 +1,27 @@
+import { createDirectus, rest } from '@directus/sdk';
+
+import type {
+  Global,
+  Post,
+  Experience,
+  Education,
+  Certificate,
+  Project,
+  Skill,
+} from '@lib/directusTypes';
+
+import { getDirectusURL } from '@lib/directusFunctions';
+
+type Schema = {
+  site_global: Global;
+  posts: Post[];
+  site_experience: Experience;
+  site_education: Education;
+  site_certificate: Certificate;
+  site_projects: Project;
+  site_skills: Skill;
+};
+
+const directus = createDirectus<Schema>(getDirectusURL()).with(rest());
+
+export default directus;
--- a/site-profile-new/src/lib/directusFunctions.ts
+++ b/site-profile-new/src/lib/directusFunctions.ts
@@ -0,0 +1,12 @@
+const getDirectusURL = () => {
+  if (process.env.DIRECTUS_URL) {
+    return `https://${process.env.DIRECTUS_URL}`;
+  }
+  return 'https://directus.alexlebens.dev';
+};
+
+async function getDirectusImageURL(image: string) {
+  return `${getDirectusURL()}/assets/${image}`;
+}
+
+export { getDirectusURL, getDirectusImageURL };
--- a/site-profile-new/src/lib/directusTypes.ts
+++ b/site-profile-new/src/lib/directusTypes.ts
@@ -0,0 +1,87 @@
+export type Global = {
+  name: string;
+  about: string;
+  about_description: string;
+  initials: string;
+  email: string;
+  site_url: string;
+  logo: string;
+  portrait: string;
+  portrait_alt: string;
+  home_image: string;
+  home_image_alt: string;
+  categories_image: string;
+  categories_image_alt: string;
+  blog_image: string;
+  blog_image_alt: string;
+  footer_image: string;
+  footer_image_alt: string;
+};
+
+export type Post = {
+  slug: string;
+  title: string;
+  description: string;
+  tags: string[];
+  category: string;
+  selected: boolean;
+  content: string;
+  image: string;
+  image_alt: string;
+  image_second: string;
+  image_second_alt: string;
+  published_date: Date;
+  updated_date: Date;
+};
+
+export type Experience = {
+  id: string;
+  name: string;
+  location: string;
+  location_type: string;
+  url: string;
+  startDate: string;
+  endDate: string;
+  position: string;
+  summary: string;
+  responsibilities: string[];
+  highlights: string[];
+  achievements: string[];
+  skills: string[];
+};
+
+export type Education = {
+  id: string;
+  institution: string;
+  url: string;
+  area: string;
+  studyType: string;
+  graduationDate: string;
+};
+
+export type Certificate = {
+  id: string;
+  name: string;
+  issuer: string;
+  issuerDate: string;
+  url: string;
+};
+
+export type Project = {
+  id: string;
+  name: string;
+  isActive: boolean;
+  description: string;
+  highlights: string[];
+  url: string;
+  source: string;
+};
+
+export type Skill = {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  level: string;
+  date_created: string;
+};
--- a/site-profile-new/src/pages/404.astro
+++ b/site-profile-new/src/pages/404.astro
@@ -0,0 +1,357 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+import GoBack from '@/components/ui/buttons/GoBack.astro';
+
+const global = await directus.request(readSingleton('site_global'));
+---
+
+<BaseLayout
+  title="Page Not Found"
+  description="Page Not Found"
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `Page Not Found | ${global.name}`,
+    description: 'Page Not Found',
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <section class="mt-20 grid place-content-center">
+    <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+      <div class="mx-auto max-w-screen-sm text-center">
+        <div class="glitch-wrapper smooth-reveal">
+          <h1
+            class="glitch text-9xl leading-none font-bold text-neutral-900 sm:text-[12rem] dark:text-neutral-100"
+            data-text="404"
+          >
+            Not Found
+          </h1>
+        </div>
+
+        <h1
+          class="text-dark smooth-reveal mb-4 text-7xl font-extrabold text-yellow-500 lg:text-9xl dark:text-yellow-400"
+        >
+          {`Page Not Found - ${global.name}`}
+        </h1>
+        <div
+          class="smooth-reveal mx-auto mt-16 max-w-md rounded-xl bg-neutral-100 p-6 shadow-xs dark:border-neutral-700/50 dark:bg-stone-800"
+        >
+          <h3
+            class="text-sm font-medium tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
+          >
+            Did you know?
+          </h3>
+          <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-300" id="fun-fact">
+            The 404 error code originated when CERN's web server displayed room 404 (their server
+            room) as the error message when a file wasn't found.
+          </p>
+        </div>
+        <div
+          class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
+        >
+          <GoBack title="Go Back" />
+          <PrimaryCTA title="Return Home" url={global.site_url} noArrow addHome />
+        </div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>
+
+<script>
+  const funFacts = [
+    "The 404 error code originated when CERN's web server displayed room 404 (their server room) as the error message when a file wasn't found.",
+    "In internet slang, '404' has become shorthand for something that's missing or someone who's clueless.",
+    "Some websites turn their 404 pages into games, like Google's Pac-Man 404 page that once existed.",
+    'The first web server was a NeXT computer used by Tim Berners-Lee at CERN, where the 404 error was born.',
+    'Many companies use creative 404 pages as a way to showcase their brand personality and humor.',
+    "The HTTP 1.0 specification from 1996 officially defined the 404 error as 'Not Found'.",
+    'Studies show that well-designed 404 pages can reduce bounce rates by up to 30%.',
+    'The most common cause of 404 errors is mistyped URLs.',
+  ];
+
+  // Display a random fun fact
+  const funFactElement = document.getElementById('fun-fact');
+  if (funFactElement) {
+    const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
+    funFactElement.textContent = randomFact;
+  }
+
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          100 + index * 150
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
+
+<style>
+  /* Glitch effect for 404 text */
+  .glitch-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .glitch {
+    position: relative;
+    display: inline-block;
+    animation: glitch-skew 1s infinite linear alternate-reverse;
+  }
+
+  .glitch::before,
+  .glitch::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .glitch::before {
+    left: 2px;
+    text-shadow: -2px 0 #ff00c1;
+    clip: rect(44px, 450px, 56px, 0);
+    animation: glitch-anim 5s infinite linear alternate-reverse;
+  }
+
+  .glitch::after {
+    left: -2px;
+    text-shadow:
+      -2px 0 #00fff9,
+      2px 2px #ff00c1;
+    animation: glitch-anim2 1s infinite linear alternate-reverse;
+  }
+
+  @keyframes glitch-anim {
+    0% {
+      clip: rect(31px, 9999px, 94px, 0);
+      transform: skew(0.85deg);
+    }
+    5% {
+      clip: rect(70px, 9999px, 71px, 0);
+      transform: skew(0.17deg);
+    }
+    10% {
+      clip: rect(9px, 9999px, 85px, 0);
+      transform: skew(0.4deg);
+    }
+    15% {
+      clip: rect(47px, 9999px, 18px, 0);
+      transform: skew(0.22deg);
+    }
+    20% {
+      clip: rect(7px, 9999px, 78px, 0);
+      transform: skew(0.96deg);
+    }
+    25% {
+      clip: rect(53px, 9999px, 54px, 0);
+      transform: skew(0.05deg);
+    }
+    30% {
+      clip: rect(84px, 9999px, 52px, 0);
+      transform: skew(0.94deg);
+    }
+    35% {
+      clip: rect(46px, 9999px, 7px, 0);
+      transform: skew(0.01deg);
+    }
+    40% {
+      clip: rect(2px, 9999px, 66px, 0);
+      transform: skew(0.66deg);
+    }
+    45% {
+      clip: rect(34px, 9999px, 33px, 0);
+      transform: skew(0.52deg);
+    }
+    50% {
+      clip: rect(80px, 9999px, 73px, 0);
+      transform: skew(0.9deg);
+    }
+    55% {
+      clip: rect(8px, 9999px, 81px, 0);
+      transform: skew(0.3deg);
+    }
+    60% {
+      clip: rect(10px, 9999px, 86px, 0);
+      transform: skew(0.85deg);
+    }
+    65% {
+      clip: rect(36px, 9999px, 25px, 0);
+      transform: skew(0.28deg);
+    }
+    70% {
+      clip: rect(75px, 9999px, 31px, 0);
+      transform: skew(0.46deg);
+    }
+    75% {
+      clip: rect(46px, 9999px, 87px, 0);
+      transform: skew(0.44deg);
+    }
+    80% {
+      clip: rect(19px, 9999px, 40px, 0);
+      transform: skew(0.07deg);
+    }
+    85% {
+      clip: rect(85px, 9999px, 88px, 0);
+      transform: skew(0.71deg);
+    }
+    90% {
+      clip: rect(1px, 9999px, 89px, 0);
+      transform: skew(0.76deg);
+    }
+    95% {
+      clip: rect(44px, 9999px, 25px, 0);
+      transform: skew(0.58deg);
+    }
+    100% {
+      clip: rect(31px, 9999px, 26px, 0);
+      transform: skew(0.6deg);
+    }
+  }
+
+  @keyframes glitch-anim2 {
+    0% {
+      clip: rect(65px, 9999px, 65px, 0);
+      transform: skew(0.16deg);
+    }
+    5% {
+      clip: rect(8px, 9999px, 42px, 0);
+      transform: skew(0.65deg);
+    }
+    10% {
+      clip: rect(64px, 9999px, 30px, 0);
+      transform: skew(0.42deg);
+    }
+    15% {
+      clip: rect(29px, 9999px, 49px, 0);
+      transform: skew(0.05deg);
+    }
+    20% {
+      clip: rect(25px, 9999px, 56px, 0);
+      transform: skew(0.09deg);
+    }
+    25% {
+      clip: rect(76px, 9999px, 98px, 0);
+      transform: skew(0.79deg);
+    }
+    30% {
+      clip: rect(72px, 9999px, 3px, 0);
+      transform: skew(0.12deg);
+    }
+    35% {
+      clip: rect(20px, 9999px, 60px, 0);
+      transform: skew(0.09deg);
+    }
+    40% {
+      clip: rect(61px, 9999px, 47px, 0);
+      transform: skew(0.45deg);
+    }
+    45% {
+      clip: rect(29px, 9999px, 69px, 0);
+      transform: skew(0.09deg);
+    }
+    50% {
+      clip: rect(82px, 9999px, 96px, 0);
+      transform: skew(0.05deg);
+    }
+    55% {
+      clip: rect(33px, 9999px, 91px, 0);
+      transform: skew(0.16deg);
+    }
+    60% {
+      clip: rect(56px, 9999px, 23px, 0);
+      transform: skew(0.01deg);
+    }
+    65% {
+      clip: rect(46px, 9999px, 21px, 0);
+      transform: skew(0.89deg);
+    }
+    70% {
+      clip: rect(50px, 9999px, 1px, 0);
+      transform: skew(0.85deg);
+    }
+    75% {
+      clip: rect(82px, 9999px, 33px, 0);
+      transform: skew(0.87deg);
+    }
+    80% {
+      clip: rect(94px, 9999px, 46px, 0);
+      transform: skew(0.64deg);
+    }
+    85% {
+      clip: rect(48px, 9999px, 95px, 0);
+      transform: skew(0.43deg);
+    }
+    90% {
+      clip: rect(60px, 9999px, 10px, 0);
+      transform: skew(0.29deg);
+    }
+    95% {
+      clip: rect(85px, 9999px, 62px, 0);
+      transform: skew(0.66deg);
+    }
+    100% {
+      clip: rect(61px, 9999px, 58px, 0);
+      transform: skew(0.74deg);
+    }
+  }
+
+  @keyframes glitch-skew {
+    0% {
+      transform: skew(-1deg);
+    }
+    10% {
+      transform: skew(0deg);
+    }
+    20% {
+      transform: skew(0.5deg);
+    }
+    30% {
+      transform: skew(-0.5deg);
+    }
+    40% {
+      transform: skew(0.2deg);
+    }
+    50% {
+      transform: skew(0deg);
+    }
+    60% {
+      transform: skew(-0.5deg);
+    }
+    70% {
+      transform: skew(0.8deg);
+    }
+    80% {
+      transform: skew(-0.2deg);
+    }
+    90% {
+      transform: skew(0.5deg);
+    }
+    100% {
+      transform: skew(0deg);
+    }
+  }
+</style>
--- a/site-profile-new/src/pages/about.astro
+++ b/site-profile-new/src/pages/about.astro
@@ -0,0 +1,107 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import HeroSection from '@components/ui/sections/HeroSection.astro';
+import Experience from '@components/ui/sections/Experience.astro';
+import Projects from '@components/ui/sections/Projects.astro';
+import Skills from '@components/ui/sections/Skills.astro';
+import Education from '@components/ui/sections/Education.astro';
+import portraitImg from '@images/portrait.avif';
+
+const global = await directus.request(readSingleton('site_global'));
+
+const description = 'About me.';
+---
+
+<BaseLayout
+  title="About Me"
+  description={description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `About | ${global.name}`,
+    description: description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeroSection
+    title="About Me"
+    subTitle={global.about}
+    src={portraitImg}
+    alt={global.portrait_alt}
+  />
+
+  <section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+    <main class="relative grid max-w-7xl gap-12 p-8 max-sm:py-16 md:grid-cols-6 md:p-16 xl:gap-24">
+      <div class="space-y-12 md:col-span-8">
+        <Experience className="smooth-reveal-2" />
+        <Education className="smooth-reveal-2 mt-30" />
+        <Projects className="smooth-reveal-2 mt-30" />
+        <Skills className="smooth-reveal-2 mt-30" />
+      </div>
+    </main>
+  </section>
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          50 + index * 100
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 250
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          400 + index * 250
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
--- a/site-profile-new/src/pages/blog/[...slug].astro
+++ b/site-profile-new/src/pages/blog/[...slug].astro
@@ -0,0 +1,181 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import getReadingTime from 'reading-time';
+import { readItems, readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import { getDirectusImageURL } from '@lib/directusFunctions';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import Image from '@components/ui/images/Image.astro';
+import { formatDateTime } from '@support/time';
+
+export async function getStaticPaths() {
+  const posts = await directus.request(readItems('posts'));
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: post,
+  }));
+}
+const post = Astro.props;
+
+const global = await directus.request(readSingleton('site_global'));
+const category: CollectionEntry<'categories'> = (await getCollection('categories'))
+  .filter((c) => c.slug === post.category)
+  .pop() as CollectionEntry<'categories'>;
+const readingTime = getReadingTime(post.content);
+---
+
+<BaseLayout
+  title={post.title}
+  description={post.description}
+  ogImage={getDirectusImageURL(post.image)}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'NewsArticle',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    description: post.description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: `${global.site_url}/blog`,
+      name: global.name,
+      description: global.about,
+    },
+    image: [
+      // post.data.banner,
+    ],
+    headline: post.title,
+    datePublished: post.published_date,
+    dateModified: post.updated_date,
+    author: [
+      {
+        '@type': 'Person',
+        name: `${global.name}`,
+        url: `${global.site_url}`,
+      },
+    ],
+  }}
+>
+  <section class="mx-auto max-w-6xl px-4 pt-8 pb-12 sm:px-6 lg:px-8 lg:pt-12">
+    <div class="smooth-reveal relative w-full">
+      <div class="mt-4 rounded-2xl shadow-none sm:mt-0 sm:shadow-sm">
+        <Image
+          class="max-h-[600px] w-full rounded-t-2xl object-cover"
+          src={getDirectusImageURL(post.image)}
+          alt={post.image_alt}
+          draggable="false"
+          format="webp"
+          loading="lazy"
+          inferSize={true}
+        />
+        <div
+          class="rounded-b-2xl px-0 py-6 sm:bg-neutral-100 sm:px-6 md:px-10 lg:px-14 sm:dark:bg-neutral-900/30"
+        >
+          <div class="mb-16">
+            <h2
+              class="mb-6 block text-3xl font-bold tracking-tight text-balance text-neutral-800 md:text-4xl lg:text-5xl dark:text-neutral-300"
+            >
+              {post.title}
+            </h2>
+            <ol class="mt-8 flex items-center whitespace-nowrap">
+              <li class="inline-flex items-center">
+                <a
+                  class="flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+                  href=`/categories/${category.slug}`
+                >
+                  {category?.data?.title}
+                </a>
+                <svg
+                  class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
+                </svg>
+              </li>
+              <li
+                class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+              >
+                {formatDateTime(post.published_date)}
+                <svg
+                  class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
+                </svg>
+              </li>
+              <li
+                class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+                aria-current="page"
+              >
+                {readingTime.minutes.toPrecision(1)} minutes to read
+              </li>
+            </ol>
+          </div>
+
+          <article
+            class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-justify text-neutral-800 dark:text-neutral-200"
+          >
+            <div set:html={post.content} />
+          </article>
+
+          <div
+            class="mx-auto mt-10 grid max-w-screen-lg gap-y-5 sm:flex sm:items-center sm:justify-between sm:gap-y-0 md:mt-14"
+          >
+            <div class="flex flex-wrap gap-x-2 gap-y-1 sm:flex-nowrap sm:items-center sm:gap-y-0">
+              {
+                post.tags.map((tag: string) => (
+                  <span class="bg-steel/30 dark:bg-bermuda/60 inline-flex items-center gap-x-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-neutral-700 outline-none focus:outline-none focus-visible:ring focus-visible:outline-none dark:text-neutral-200">
+                    {tag}
+                  </span>
+                ))
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <style is:inline>
+    code[data-theme*=' '],
+    code[data-theme*=' '] span {
+      color: var(--shiki-light);
+    }
+
+    html.dark {
+      code[data-theme*=' '],
+      code[data-theme*=' '] span {
+        color: var(--shiki-dark);
+      }
+    }
+  </style>
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          100 + index * 100
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
--- a/site-profile-new/src/pages/blog/index.astro
+++ b/site-profile-new/src/pages/blog/index.astro
@@ -0,0 +1,102 @@
+---
+import { readItems, readSingleton } from '@directus/sdk';
+
+import type { Post } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogRecentCard from '@components/blog/BlogRecentCard.astro';
+import BlogFeaturedArticle from '@components/blog/BlogFeaturedArticle.astro';
+import HeroSection from '@components/ui/sections/HeroSection.astro';
+import blogImg from '@images/autumn_tree.png';
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+const selectedPosts: Post[] = posts.filter((p) => p.selected);
+
+const description =
+  'Here are some articles that Alex Lebens believes are not bad, hope you enjoy them.';
+---
+
+<BaseLayout
+  title="Blog"
+  description={description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `Blog | ${global.name}`,
+    description: description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeroSection title="Blog" subTitle={description} src={blogImg} alt={global.blog_image_alt} />
+
+  <BlogRecentCard posts={posts} />
+  <BlogFeaturedArticle posts={selectedPosts} />
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 300
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          1000 + index * 250
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
--- a/site-profile-new/src/pages/categories/[...slug].astro
+++ b/site-profile-new/src/pages/categories/[...slug].astro
@@ -0,0 +1,66 @@
+---
+import { getCollection } from 'astro:content';
+import { readItems, readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import type { Post } from '@lib/directusTypes';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogCard from '@components/blog/BlogCard.astro';
+import HeaderSection from '@components/ui/sections/HeaderSection.astro';
+
+export async function getStaticPaths() {
+  const categories = await getCollection('categories');
+  return categories.map((category) => ({
+    params: { slug: category.slug },
+    props: { category },
+  }));
+}
+
+const { category } = Astro.props;
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+const categoriesPosts = posts
+  .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
+  .filter((b) => {
+    return b.category === category.slug;
+  });
+---
+
+<BaseLayout
+  title={category.data.title}
+  description={category.data.description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `${category.data.title} | ${global.name}`,
+    description: category.data.description,
+    isPartOf: {
+      url: `${global.site_url}/categories`,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeaderSection
+    title={category.data.title}
+    subTitle={category.data.description}
+    btnExists
+    btnTitle="Back to Categories"
+    btnURL="/categories"
+  />
+
+  <section class="mx-auto mt-10 mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {categoriesPosts.map((b) => <BlogCard post={b} />)}
+    </div>
+  </section>
+</BaseLayout>
--- a/site-profile-new/src/pages/categories/index.astro
+++ b/site-profile-new/src/pages/categories/index.astro
@@ -0,0 +1,182 @@
+---
+import { getCollection } from 'astro:content';
+import { readItems, readSingleton } from '@directus/sdk';
+
+import type { Post } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogCategoryCard from '@components/blog/BlogCategoryCard.astro';
+import HeroSection from '@components/ui/sections/HeroSection.astro';
+import { timeago } from '@support/time';
+import categoryImg from '@images/autumn_bench.png';
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+
+const postMap: Map<string, Post[]> = posts
+  .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
+  .reduce((acc, obj) => {
+    let posts = acc.get(obj.category);
+    if (!posts) {
+      posts = [];
+    }
+    posts.push(obj);
+
+    acc.set(obj.category, posts);
+
+    return acc;
+  }, new Map<string, Post[]>());
+
+const layoutPattern = [
+  { col: 2, row: 2 },
+  { col: 2, row: 1 },
+  { col: 1, row: 1 },
+  { col: 1, row: 1 },
+  { col: 1, row: 2 },
+  { col: 2, row: 1 },
+  { col: 1, row: 1 },
+  { col: 1, row: 1 },
+  { col: 1, row: 1 },
+  { col: 1, row: 1 },
+];
+
+const categories = (await getCollection('categories'))
+  .sort((a, b) => {
+    const aCount = postMap.get(a.slug)?.length ?? 0;
+    const bCount = postMap.get(b.slug)?.length ?? 0;
+    return bCount - aCount;
+  })
+  .map((c, index) => {
+    const posts = postMap.get(c.slug);
+    const pattern = layoutPattern[index % layoutPattern.length];
+    const smColSpan = Math.min(pattern.col, 2);
+    const mdColSpan = Math.min(pattern.col, 4);
+    const rowSpan = pattern.row;
+    const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
+    const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} ${rowSpanClass} smooth-reveal-cards rounded-xl transition-all duration-300 shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg border border-stone-200/50 dark:border-stone-700/50`;
+    return {
+      ...c,
+      posts,
+      gridItemClass,
+      layoutPattern: {
+        smCol: smColSpan,
+        mdCol: mdColSpan,
+        row: rowSpan,
+        index,
+      },
+    };
+  });
+
+const description =
+  'Here are some categories that I am interested in, including Laravel, Golang, and my life.';
+---
+
+<BaseLayout
+  title="All Categories"
+  description={description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `All Categories | ${global.name}`,
+    description: description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeroSection
+    title="Categories"
+    subTitle={description}
+    src={categoryImg}
+    alt={global.categories_image_alt}
+  />
+
+  <section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
+    <div class="grid grid-flow-row-dense grid-cols-2 gap-4 md:grid-cols-4">
+      {
+        categories.map((category) => {
+          return (
+            <div
+              class={category.gridItemClass}
+              style={category.layoutPattern.row > 1 ? 'grid-row: span 2 / span 2;' : ''}
+            >
+              <BlogCategoryCard
+                slug={category.slug}
+                title={category.data.title}
+                description={category.data.description}
+                count={postMap.get(category.slug)?.length ?? 0}
+                publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
+                layoutPattern={category.layoutPattern}
+              />
+            </div>
+          );
+        })
+      }
+    </div>
+  </section>
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          50 + index * 100
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 150
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
--- a/site-profile-new/src/pages/favicon.ico.ts
+++ b/site-profile-new/src/pages/favicon.ico.ts
@@ -0,0 +1,24 @@
+import path from 'node:path';
+import type { APIRoute } from 'astro';
+import sharp from 'sharp';
+import ico from 'sharp-ico';
+
+const faviconSrc = path.resolve('src/images/favicon_icon.png');
+
+export const GET: APIRoute = async () => {
+  // Resize the image to multiple sizes
+  const sizes = [16, 32];
+
+  const buffers = await Promise.all(
+    sizes.map(async (size) => {
+      return await sharp(faviconSrc).resize(size).toFormat('png').toBuffer();
+    })
+  );
+
+  // Convert the image to an ICO file
+  const icoBuffer = ico.encode(buffers);
+
+  return new Response(icoBuffer, {
+    headers: { 'Content-Type': 'image/x-icon' },
+  });
+};
--- a/site-profile-new/src/pages/index.astro
+++ b/site-profile-new/src/pages/index.astro
@@ -0,0 +1,107 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import HeroSection from '@components/ui/sections/HeroSection.astro';
+import FeaturesSection from '@components/ui/sections/FeaturesSection.astro';
+import LatestPosts from '@components/ui/sections/LatestPosts.astro';
+import HeroSectionAlt from '@components/ui/sections/HeroSectionAlt.astro';
+import homeImg from '@images/autumn_mountain.png';
+
+const global = await directus.request(readSingleton('site_global'));
+
+const description = 'Writing on technology, selfhosting, and me.';
+---
+
+<BaseLayout
+  title="Home"
+  description={description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `Home | ${global.name}`,
+    description: description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeroSection
+    title={`Hello, I'm <span class="text-steel dark:text-steel">Alex Lebens</span>`}
+    subTitle={description}
+    primaryBtn="About Me"
+    primaryBtnURL="/about"
+    src={homeImg}
+    alt={global.home_image_alt}
+  />
+
+  <FeaturesSection />
+
+  <LatestPosts />
+
+  <HeroSectionAlt
+    title="Follow me on Gitea"
+    subTitle="I love open source and have my code availabile on my Gitea server."
+    url="https://gitea.alexlebens.dev"
+  />
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          50 + index * 100
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 250
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          400 + index * 250
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
--- a/site-profile-new/src/pages/robots.txt.ts
+++ b/site-profile-new/src/pages/robots.txt.ts
@@ -0,0 +1,31 @@
+// https://docs.astro.build/en/guides/integrations-guide/sitemap/#usage
+import type { APIRoute } from 'astro';
+
+const robotsTxt = `
+User-agent: Googlebot
+Disallow:
+Allow: /
+Crawl-delay: 10
+
+User-agent: Yandex
+Disallow:
+Allow: /
+Crawl-delay: 2
+
+User-agent: archive.org_bot
+Disallow:
+Allow: /
+Crawl-delay: 2
+
+User-agent: *
+Allow: /
+
+Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}`.trim();
+
+export const GET: APIRoute = () => {
+  return new Response(robotsTxt, {
+    headers: {
+      'Content-Type': 'text/plain; charset=utf-8',
+    },
+  });
+};
--- a/site-profile-new/src/pages/rss.xml.ts
+++ b/site-profile-new/src/pages/rss.xml.ts
@@ -0,0 +1,57 @@
+// copy from https://github.com/delucis/astro-blog-full-text-rss
+// see https://github.com/delucis/astro-blog-full-text-rss/blob/latest/src/pages/rss.xml.ts
+// get more context
+
+import { getContainerRenderer as getMDXRenderer } from '@astrojs/mdx';
+import rss, { type RSSFeedItem } from '@astrojs/rss';
+import type { APIContext } from 'astro';
+import { transform, walk } from 'ultrahtml';
+import sanitize from 'ultrahtml/transformers/sanitize';
+import { readItems, readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+
+const global = await directus.request(readSingleton('site_global'));
+
+export async function GET(context: APIContext) {
+  // Get the URL to prepend to relative site links. Based on `site` in `astro.config.mjs`.
+  let baseUrl = context.site?.href || global.site_url;
+  if (baseUrl.at(-1) === '/') {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  // Load the content collection entries to add to our RSS feed.
+  const posts = await directus.request(
+    readItems('posts', {
+      fields: ['*'],
+      sort: ['-published_date'],
+    })
+  );
+
+  const feedItems: RSSFeedItem[] = [];
+  for (const post of posts) {
+    const content = await transform(post.content.replace(/^<!DOCTYPE html>/, ''), [
+      async (node) => {
+        await walk(node, (node) => {
+          if (node.name === 'a' && node.attributes.href?.startsWith('/')) {
+            node.attributes.href = baseUrl + node.attributes.href;
+          }
+          if (node.name === 'img' && node.attributes.src?.startsWith('/')) {
+            node.attributes.src = baseUrl + node.attributes.src;
+          }
+        });
+        return node;
+      },
+      sanitize({ dropElements: ['script', 'style'] }),
+    ]);
+    feedItems.push({ ...post, link: `/blog/${post.slug}/`, content });
+  }
+
+  // Return our RSS feed XML response.
+  return rss({
+    title: global.name,
+    description: global.about,
+    site: baseUrl,
+    items: feedItems,
+  });
+}
--- a/site-profile-new/src/styles/global.css
+++ b/site-profile-new/src/styles/global.css
@@ -0,0 +1,92 @@
+@import 'tailwindcss';
+@import 'preline/variants.css';
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';
+
+/* Dark mode support for Tailwind CSS v4 */
+/* https://tailwindcss.com/docs/dark-mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Add custom colors */
+@theme {
+  --color-midnight: #0c354d;
+  --color-turquoise: #0da797;
+  --color-steel: #4682b4;
+  --color-bermuda: #7fbab4;
+  --color-desert: #f9deb2;
+  --color-bronze: #9e7f5e;
+  --color-gitea-primary: #609926;
+  --color-gitea-secondary: #4c7a33;
+}
+
+@layer base {
+  :root {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    --theme-transition: 0.3s ease;
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 5rem;
+    overflow-y: scroll;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    --swup-fade-theme-duration: 0.2s;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  body,
+  a,
+  button {
+    transition:
+      background-color var(--theme-transition),
+      color var(--theme-transition),
+      border-color var(--theme-transition);
+  }
+}
+
+/* Content reveal animations */
+.smooth-reveal,
+.smooth-reveal-2,
+.smooth-reveal-cards {
+  opacity: 0;
+  transform: translateY(20px);
+  transition:
+    opacity 0.8s ease,
+    transform 0.8s ease;
+}
+
+.animate-reveal {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+
+.smooth-reveal-fade {
+  opacity: 0;
+  transform: translateY(0px);
+  transition:
+    opacity 1.8s ease,
+    transform 0.8s ease;
+}
+
+.animate-reveal-fade {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
--- a/site-profile-new/src/support/animation.ts
+++ b/site-profile-new/src/support/animation.ts
@@ -0,0 +1,50 @@
+// Add smooth reveal animations for content after loading
+document.addEventListener('astro:page-load', () => {
+  const animateContent = () => {
+    // Animate group 1
+    const smoothReveal = document.querySelectorAll('.smooth-reveal');
+    smoothReveal.forEach((el, index) => {
+      setTimeout(
+        () => {
+          el.classList.add('animate-reveal');
+        },
+        50 + index * 100
+      );
+    });
+
+    // Animate group 2
+    const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+    smoothReveal2.forEach((el, index) => {
+      setTimeout(
+        () => {
+          el.classList.add('animate-reveal');
+        },
+        200 + index * 250
+      );
+    });
+
+    // Animate topic cards with staggered delay
+    const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+    smoothRevealCards.forEach((el, index) => {
+      setTimeout(
+        () => {
+          el.classList.add('animate-reveal');
+        },
+        400 + index * 250
+      );
+    });
+
+    // Animate with just fade in with staggered delay
+    const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+    smoothRevealFade.forEach((el, index) => {
+      setTimeout(
+        () => {
+          el.classList.add('animate-reveal-fade');
+        },
+        100 + index * 250
+      );
+    });
+  };
+
+  animateContent();
+});
--- a/site-profile-new/src/support/image.ts
+++ b/site-profile-new/src/support/image.ts
@@ -0,0 +1,66 @@
+import fs from 'node:fs/promises';
+
+export interface BlurImageMetadata {
+  /**
+   * The width of the origin image
+   */
+  width: number;
+  /**
+   * The height of the origin image
+   */
+  height: number;
+  /**
+   * blurDataURL of the image
+   */
+  blurDataURL: string;
+  /**
+   * blur image width
+   */
+  blurWidth: number;
+  /**
+   * blur image height
+   */
+  blurHeight: number;
+}
+
+export async function blurStyle(filePath: string) {
+  const image = await blurImageMetadata(filePath);
+  const svg = blurImageSVG(image);
+  return {
+    backgroundSize: 'cover',
+    backgroundPosition: '50% 50%',
+    backgroundRepeat: 'no-repeat',
+    backgroundImage: `url("data:image/svg+xml;charset=utf-8,${svg}")`,
+  };
+}
+
+function blurImageSVG(image: BlurImageMetadata): string {
+  const { blurDataURL, blurWidth, blurHeight, width, height } = image;
+
+  const std = 20;
+  const svgWidth = blurWidth ? blurWidth * 40 : width;
+  const svgHeight = blurHeight ? blurHeight * 40 : height;
+
+  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : '';
+
+  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='xMidYMid slice' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;
+}
+
+async function blurImageMetadata(filepath: string): Promise<BlurImageMetadata> {
+  const { default: sharp } = await import('sharp');
+  const buffer = await fs.readFile(filepath);
+
+  const img = sharp(buffer);
+  const { width, height } = await img.metadata();
+  if (width == null || height == null) {
+    throw new Error(`Invalid image path: ${filepath}`);
+  }
+
+  const aspectRatio = width / height;
+  const blurWidth = 8;
+  const blurHeight = Math.round(blurWidth / aspectRatio);
+  const blurImage = await img.resize(blurWidth, blurHeight).webp({ quality: 10 }).toBuffer();
+  const blurDataURL = `data:image/webp;base64,${blurImage.toString('base64')}`;
+
+  return { blurDataURL, blurHeight, blurWidth, width, height };
+}
--- a/site-profile-new/src/support/paths.ts
+++ b/site-profile-new/src/support/paths.ts
@@ -0,0 +1,19 @@
+import { join } from 'node:path';
+
+export function resolveFilePath(path: string) {
+  if (path.startsWith('/')) {
+    return resolveFilePathPublic(path);
+  }
+
+  return resolveFilePathInternal(path);
+}
+
+export function resolveFilePathPublic(path: string) {
+  return join(process.cwd(), path);
+}
+
+export function resolveFilePathInternal(path: string) {
+  const normalizePath = path.startsWith('@') ? path.replace('@', '') : path;
+
+  return join(process.cwd(), 'src/', normalizePath);
+}
--- a/site-profile-new/src/support/time.ts
+++ b/site-profile-new/src/support/time.ts
@@ -0,0 +1,49 @@
+import { format, register } from 'timeago.js';
+
+const TimeAgoConfiguration: string[][] = [
+  ['today', 'today'],
+  ['%s seconds ago', 'in %s seconds'],
+  ['1 minute ago', 'in 1 minute'],
+  ['%s minutes ago', 'in %s minutes'],
+  ['1 hour ago', 'in 1 hour'],
+  ['%s hours ago', 'in %s hours'],
+  ['1 day ago', 'in 1 day'],
+  ['%s days ago', 'in %s days'],
+  ['1 week ago', 'in 1 week'],
+  ['%s weeks ago', 'in %s weeks'],
+  ['1 month ago', 'in 1 month'],
+  ['%s months ago', 'in %s months'],
+  ['1 year ago', 'in 1 year'],
+  ['%s years ago', 'in %s years'],
+];
+
+function formatDate(date: Date): string {
+  const year = new Date(date).getFullYear();
+  const month = String(new Date(date).getMonth() + 1).padStart(2, '0');
+  const day = String(new Date(date).getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+function formatDateTime(date: Date): string {
+  const hours = String(new Date(date).getHours()).padStart(2, '0');
+  const minutes = String(new Date(date).getMinutes()).padStart(2, '0');
+
+  return `${formatDate(date)} ${hours}:${minutes}`;
+}
+
+function timeago(date?: Date): string {
+  if (!date) {
+    return 'today';
+  }
+
+  const localeFunc = (number: number, index: number, _?: number): [string, string] => {
+    return TimeAgoConfiguration[index] as [string, string];
+  };
+
+  register('timeago', localeFunc);
+
+  return format(date, 'timeago');
+}
+
+export { formatDate, timeago, formatDateTime };
--- a/site-profile-new/tailwind.config.js
+++ b/site-profile-new/tailwind.config.js
@@ -0,0 +1,64 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './node_modules/preline/preline.js',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      typography: ({ theme }) => ({
+        blog: {
+          css: {
+            '--tw-prose-body': theme('colors.neutral[700]'),
+            '--tw-prose-headings': theme('colors.neutral[900]'),
+            '--tw-prose-lead': theme('colors.neutral[700]'),
+            '--tw-prose-links': theme('colors.orange[300]'),
+            '--tw-prose-bold': theme('colors.neutral[900]'),
+            '--tw-prose-counters': theme('colors.neutral[600]'),
+            '--tw-prose-bullets': theme('colors.neutral[400]'),
+            '--tw-prose-hr': theme('colors.neutral[300]'),
+            '--tw-prose-quotes': theme('colors.neutral[500]'),
+            '--tw-prose-quote-borders': theme('colors.neutral[300]'),
+            '--tw-prose-captions': theme('colors.neutral[700]'),
+            '--tw-prose-code': theme('colors.neutral[700]'),
+            '--tw-prose-pre-code': theme('colors.neutral[900]'),
+            '--tw-prose-pre-bg': theme('colors.white'),
+            '--tw-prose-th-borders': theme('colors.neutral[300]'),
+            '--tw-prose-td-borders': theme('colors.neutral[200]'),
+
+            '--tw-prose-invert-body': theme('colors.neutral[400]'),
+            '--tw-prose-invert-headings': theme('colors.neutral[200]'),
+            '--tw-prose-invert-lead': theme('colors.neutral[300]'),
+            '--tw-prose-invert-links': theme('colors.orange[300]'),
+            '--tw-prose-invert-bold': theme('colors.neutral[300]'),
+            '--tw-prose-invert-counters': theme('colors.neutral[400]'),
+            '--tw-prose-invert-bullets': theme('colors.neutral[600]'),
+            '--tw-prose-invert-hr': theme('colors.neutral[700]'),
+            '--tw-prose-invert-quotes': theme('colors.neutral[500]'),
+            '--tw-prose-invert-quote-borders': theme('colors.neutral[500]'),
+            '--tw-prose-invert-captions': theme('colors.neutral[400]'),
+            '--tw-prose-invert-code': theme('colors.neutral[350]'),
+            '--tw-prose-invert-pre-code': theme('colors.neutral[300]'),
+            '--tw-prose-invert-th-borders': theme('colors.neutral[600]'),
+            '--tw-prose-invert-td-borders': theme('colors.neutral[700]'),
+          },
+        },
+        DEFAULT: {
+          css: {
+            blockquote: {
+              fontStyle: 'normal',
+              quotes: 'none',
+            },
+          },
+        },
+      }),
+    },
+  },
+  plugins: [
+    require('tailwindcss/nesting'),
+    require('preline/plugin'),
+    require('@tailwindcss/typography'),
+  ],
+};
--- a/site-profile-new/tsconfig.json
+++ b/site-profile-new/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "baseUrl": "src",
+    "jsx": "react-jsx",
+    "types": ["astro/client"],
+    "paths": {
+      "@/*": ["*"],
+      "@src/*": ["src/*"],
+      "@lib/*": ["lib/*"],
+      "@components/*": ["components/*"],
+      "@content/*": ["content/*"],
+      "@layouts/*": ["layouts/*"],
+      "@styles/*": ["styles/*"],
+      "@pages/*": ["pages/*"],
+      "@support/*": ["support/*"],
+      "@images/*": ["images/*"]
+    }
+  }
+}
				`@@ -0,0 +1 @@`
				`/src/components/ui/sections/Experience.astro`