feat: Initial Linkat Directory overhaul

This commit represents a complete overhaul of the project, transforming it from a generic website template into the dedicated Linkat Directory. Key changes include:

- **Project Restructuring:** Significant reorganisation of files and directories to align with the Linkat Directory's purpose.
- **Core Functionality:** Implementation of features specific to displaying and managing Linkat (Bluesky) user profiles and their associated links.
- **Component Refactoring:** Introduction of new components like `UserDirectory.svelte`, `DirectoryHeader.svelte`, `DynamicHead.svelte`, and `MultiUserLinks.svelte`.
- **Dependency Updates:** Modifications to `package.json` and `package-lock.json` to reflect new and updated dependencies.
- **Configuration:** Addition of `.env.example` and `src/lib/config/linkat-users.ts` for user configuration.
- **Styling:** Updates to `src/lib/css/app.css` and `src/lib/css/variables.css` for the new design.
- **Route Definitions:** Creation of new routes for user profiles (`src/routes/user/[did]/+layout.ts`, `src/routes/user/[did]/+page.svelte`).
- **Asset Management:** Inclusion of `static/logo.ico` and `static/logo.png`.

This change establishes the foundational structure and core features for the Linkat Directory application.

.env.example

···
+# Linkat Directory Configuration
+# Copy this file to .env and update with your values
+
+# Primary user DID (required if no users configured)
+DIRECTORY_OWNER=did:plc:your-did-here
+
+# Multiple users (comma-separated, optional)
+# These users will be displayed alongside DIRECTORY_OWNER
+PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2,did:plc:user3
+
+# Example DIDs:
+# DIRECTORY_OWNER=did:plc:abc123def456ghi789jkl012mno345pqr678stu
+# PUBLIC_LINKAT_USERS=did:plc:user1,did:plc:user2,did:plc:user3,did:plc:user4

README.md

···
-# Website Template
+# Linkat Directory
 
 [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)
 
-This repository provides a versatile frontend template, primarily designed for [WhiteWind](https://whtwnd.com/), a Markdown blog service utilising [ATProto](https://atproto.com/). It is built upon a customised version of [WhiteBreeze](https://github.com/hugeblank/whitebreeze), specifically derived from commit [ff402f3](https://github.com/ewanc26/website/commit/ff402f3460d86c40ead13294ae1ff5d8605f741c) of [my website](https://github.com/ewanc26/website).
+<img src="./static/logo.png" alt="Linkat Directory" width="100"/>
 
-This template offers a pre-configured starting point with a robust structure, ready for customisation across various frontend projects, though its core focus remains WhiteWind compatibility.
+## Project Purpose
+
+Linkat Directory is a SvelteKit application designed to serve as a curated directory of links, primarily focusing on Bluesky profiles and content. It allows for the display of user profiles, including their Decentralised Identifiers (DIDs), handles, display names, avatars, and descriptions. The application is built with a focus on responsiveness and ease of use, providing a clean interface for discovering links.
 
 ## Installation
 
-To commence using this template, ensure Node.js and npm are installed on your system.
+To set up the Linkat Directory locally, follow these steps:
 
-### Prerequisites
+1.  **Clone the repository:**
+    ```bash
+    git clone [e-mail]:ewanc26/linkat-directory.git
+    cd linkat-directory
+    ```
 
-- Node.js (LTS version recommended)
-- npm (comes with Node.js)
-- Docker and Docker Compose (for Dockerised deployment)
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
 
-### Environment Variables
-
-Prior to running the application, configure the following environment variables within a `.env` file located in the project root:
-
-```ini
-PUBLIC_ATPROTOCOL_USER="myhandle.bsky.social" # Your handle, or DID
-```
-#### Note
-
-You should also add your DID to the `.static/.well-known/atproto-did` file if you want to use your domain as your AT Protocol handle.
-
-#### Optional Environment Variables
-
-- `PUBLIC_LASTFM_USERNAME`: Required for the Now Playing (Last.fm) feature in `src/lib/components/profile/Status.svelte`.
-- `PUBLIC_ACTIVITYPUB_USER=@[e-mail]`: Enables ActivityPub compatibility for improved content sharing and discoverability.
+3.  **Configure environment variables:**
+    Create a `.env` file in the project root based on `.env.example`. At a minimum, you should define `DIRECTORY_OWNER` or `PUBLIC_LINKAT_USERS`.
+    
+    Example for a single directory owner:
+    ```
+    DIRECTORY_OWNER=did:plc:your-did-here
+    ```
+    
+    Example for multiple users:
+    ```
+    PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2
+    ```
 
-#### Embed Images
-
-While the `./static/embed/` directory is currently empty, it is intended for social media embed images. By default, the system will look for `blog.png` or `main.png` within this directory. For optimal display, these images should have dimensions of 630x1200 pixels.
+4.  **Run the development server:**
+    ```bash
+    npm run dev
+    ```
+    The application will be accessible at `http://localhost:5173`.
 
 ## Usage
 
-### Development
-
-To run the project in development mode:
-
-```sh
-npm install
-npm run dev
-```
-
-### Production
-
-For optimal production deployment, the following record types are required in your [AT Protocol repository](https://atproto.com/specs/repository):
-
-#### Required Records
+Once the application is running, you can:
 
-- `app.bsky.actor.profile`: Your profile.
-- `com.whtwnd.blog.entry`: Your blog posts.
-- `blue.linkat.board`: Your links.
-
-### Deployment
+-   Browse the main directory page to see configured users.
+-   View individual user profiles by navigating to `/user/[did]`, where `[did]` is the user's Decentralised Identifier.
+-   The application dynamically generates Open Graph and Twitter metadata for improved social sharing.
 
-#### Standalone
+## Project Structure
 
-To build and run the project as a standalone application:
+Key directories and files:
 
-```sh
-npm install
-npm run build
-node index.js
-```
+-   `src/routes/`: Contains SvelteKit routes, including the main page (`+page.svelte`) and user profile pages (`user/[did]/+page.svelte`).
+-   `src/lib/components/`: Reusable Svelte components, such as `DynamicHead.svelte` for managing dynamic `<head>` content, and profile-related components.
+-   `src/lib/css/`: Global CSS styles, including `app.css` (for general styling) and `variables.css` (for CSS variables).
+-   `src/lib/utils/`: Utility functions, such as caching mechanisms.
+-   `src/lib/profile/profile.ts`: Logic for fetching and processing user profile data from Bluesky.
 
-Environment variables can be set before the last command, and the port can be configured with the `PORT` variable.
+## Contributing
 
-#### Dockerised
+Contributions are welcome! Please ensure your code adheres to the project's coding standards, including British English for comments and documentation, and responsive design principles.
 
-To deploy using Docker:
+## Credits
 
-1. Modify `compose.yaml` to change the host port if necessary.
-2. Run the following command:
+This project utilises data and concepts from:
 
-```sh
-docker compose up -d
-```
+-   [linkat.blue](https://linkat.blue) by [mkizka.dev](https://bsky.app/profile/did:plc:4gow62pk3vqpuwiwaslcwisa)
+-   [atproto.com](https://atproto.com) by [Bluesky](https://bsky.social)
 
-## Licensing
+## License
 
-This project is a template based on WhiteBreeze. For comprehensive licensing details, please consult the `LICENSE` file within this repository.
+This project is licensed under the [GNU Affero General Public License Version 3](LICENSE).

package-lock.json

···
         "unified": "^11.0.5"
       },
       "devDependencies": {
-        "@sveltejs/adapter-vercel": "^5.7.0",
+        "@sveltejs/adapter-vercel": "^5.8.1",
         "@sveltejs/kit": "^2.24.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
         "@tailwindcss/forms": "^0.5.9",
···
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.8.tgz",
+      "integrity": "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.8.tgz",
+      "integrity": "sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.8.tgz",
+      "integrity": "sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.8.tgz",
+      "integrity": "sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/darwin-arm64": {
       "version": "0.21.5",
       "cpu": [
···
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.8.tgz",
+      "integrity": "sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.8.tgz",
+      "integrity": "sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.8.tgz",
+      "integrity": "sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.8.tgz",
+      "integrity": "sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.8.tgz",
+      "integrity": "sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.8.tgz",
+      "integrity": "sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.8.tgz",
+      "integrity": "sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.8.tgz",
+      "integrity": "sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.8.tgz",
+      "integrity": "sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.8.tgz",
+      "integrity": "sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.8.tgz",
+      "integrity": "sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.8.tgz",
+      "integrity": "sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.8.tgz",
+      "integrity": "sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.8.tgz",
+      "integrity": "sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.8.tgz",
+      "integrity": "sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.8.tgz",
+      "integrity": "sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.8.tgz",
+      "integrity": "sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.8.tgz",
+      "integrity": "sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.8.tgz",
+      "integrity": "sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.8.tgz",
+      "integrity": "sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.8.tgz",
+      "integrity": "sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "dev": true,
···
     },
     "node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
···
     },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.0.tgz",
+      "integrity": "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
···
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.3",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+      "integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
       }
     },
     "node_modules/@sveltejs/adapter-vercel": {
-      "version": "5.7.0",
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-5.8.1.tgz",
+      "integrity": "sha512-5G4+KEWHXU2FC2sRWtauJPgDTC1vRuhnK6wi6+cKX96G7nBXM/mDG1cO7joJS1PbDEUQ9kXIgZ2XgsimOLn+qQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vercel/nft": "^0.29.2",
-        "esbuild": "^0.24.0"
+        "@vercel/nft": "^0.30.0",
+        "esbuild": "^0.25.4"
       },
       "peerDependencies": {
         "@sveltejs/kit": "^2.4.0"
       }
     },
     "node_modules/@sveltejs/adapter-vercel/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.24.2",
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.8.tgz",
+      "integrity": "sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw==",
       "cpu": [
         "arm64"
       ],
···
       }
     },
     "node_modules/@sveltejs/adapter-vercel/node_modules/esbuild": {
-      "version": "0.24.2",
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
+      "integrity": "sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
···
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.24.2",
-        "@esbuild/android-arm": "0.24.2",
-        "@esbuild/android-arm64": "0.24.2",
-        "@esbuild/android-x64": "0.24.2",
-        "@esbuild/darwin-arm64": "0.24.2",
-        "@esbuild/darwin-x64": "0.24.2",
-        "@esbuild/freebsd-arm64": "0.24.2",
-        "@esbuild/freebsd-x64": "0.24.2",
-        "@esbuild/linux-arm": "0.24.2",
-        "@esbuild/linux-arm64": "0.24.2",
-        "@esbuild/linux-ia32": "0.24.2",
-        "@esbuild/linux-loong64": "0.24.2",
-        "@esbuild/linux-mips64el": "0.24.2",
-        "@esbuild/linux-ppc64": "0.24.2",
-        "@esbuild/linux-riscv64": "0.24.2",
-        "@esbuild/linux-s390x": "0.24.2",
-        "@esbuild/linux-x64": "0.24.2",
-        "@esbuild/netbsd-arm64": "0.24.2",
-        "@esbuild/netbsd-x64": "0.24.2",
-        "@esbuild/openbsd-arm64": "0.24.2",
-        "@esbuild/openbsd-x64": "0.24.2",
-        "@esbuild/sunos-x64": "0.24.2",
-        "@esbuild/win32-arm64": "0.24.2",
-        "@esbuild/win32-ia32": "0.24.2",
-        "@esbuild/win32-x64": "0.24.2"
+        "@esbuild/aix-ppc64": "0.25.8",
+        "@esbuild/android-arm": "0.25.8",
+        "@esbuild/android-arm64": "0.25.8",
+        "@esbuild/android-x64": "0.25.8",
+        "@esbuild/darwin-arm64": "0.25.8",
+        "@esbuild/darwin-x64": "0.25.8",
+        "@esbuild/freebsd-arm64": "0.25.8",
+        "@esbuild/freebsd-x64": "0.25.8",
+        "@esbuild/linux-arm": "0.25.8",
+        "@esbuild/linux-arm64": "0.25.8",
+        "@esbuild/linux-ia32": "0.25.8",
+        "@esbuild/linux-loong64": "0.25.8",
+        "@esbuild/linux-mips64el": "0.25.8",
+        "@esbuild/linux-ppc64": "0.25.8",
+        "@esbuild/linux-riscv64": "0.25.8",
+        "@esbuild/linux-s390x": "0.25.8",
+        "@esbuild/linux-x64": "0.25.8",
+        "@esbuild/netbsd-arm64": "0.25.8",
+        "@esbuild/netbsd-x64": "0.25.8",
+        "@esbuild/openbsd-arm64": "0.25.8",
+        "@esbuild/openbsd-x64": "0.25.8",
+        "@esbuild/openharmony-arm64": "0.25.8",
+        "@esbuild/sunos-x64": "0.25.8",
+        "@esbuild/win32-arm64": "0.25.8",
+        "@esbuild/win32-ia32": "0.25.8",
+        "@esbuild/win32-x64": "0.25.8"
       }
     },
     "node_modules/@sveltejs/kit": {
···
       "license": "ISC"
     },
     "node_modules/@vercel/nft": {
-      "version": "0.29.2",
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.30.0.tgz",
+      "integrity": "sha512-xVye7Z0riD9czsMuEJYpFqm2FR33r3euYaFzuEPCoUtYuDwmus3rJfKtcFU7Df+pgj8p4zs78x5lOWYoLNr+7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/@vercel/nft/node_modules/resolve-from": {
       "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true,
       "license": "MIT",
       "engines": {
···
       }
     },
     "node_modules/abbrev": {
-      "version": "3.0.0",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
       "dev": true,
       "license": "ISC",
       "engines": {
···
     },
     "node_modules/acorn-import-attributes": {
       "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
···
       }
     },
     "node_modules/agent-base": {
-      "version": "7.1.3",
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
···
     },
     "node_modules/async-sema": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+      "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "dev": true,
       "license": "MIT"
     },
···
     },
     "node_modules/bindings": {
       "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/chownr": {
       "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
···
     },
     "node_modules/consola": {
       "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
···
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
···
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/esbuild/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "dev": true,
···
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true,
       "license": "MIT"
     },
···
     },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
       "dev": true,
       "license": "MIT"
     },
···
     },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true,
       "license": "ISC"
     },
···
     },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/minizlib": {
       "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/mkdirp": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
       "dev": true,
       "license": "MIT",
       "bin": {
···
     },
     "node_modules/node-fetch": {
       "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/node-gyp-build": {
       "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
···
     },
     "node_modules/nopt": {
       "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
···
     },
     "node_modules/tar": {
       "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
···
     },
     "node_modules/tr46": {
       "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true,
       "license": "MIT"
     },
···
     },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
       "dev": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
···
     },
     "node_modules/yallist": {
       "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {

package.json

···
     "lint": "eslint ."
   },
   "devDependencies": {
-
-    "@sveltejs/adapter-vercel": "^5.7.0",
+    "@sveltejs/adapter-vercel": "^5.8.1",
     "@sveltejs/kit": "^2.24.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@tailwindcss/forms": "^0.5.9",

src/app.html

···
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="msapplication-TileColor" content="#000000" />
-    <meta
-      name="msapplication-TileImage"
-      content="%sveltekit.assets%/favicon/ms-icon-144x144.png"
-    />
-
-    <!-- THEME LOADER - MUST BE FIRST SCRIPT -->
-    <script src="%sveltekit.assets%/scripts/themeLoader.js"></script>
+    <link rel="icon" href="/logo.ico" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

src/lib/components/archive/ArchiveCard.svelte

···
 <script lang="ts">
-  import { fly, fade } from "svelte/transition";
-  import { quintOut } from "svelte/easing";
-  import { formatDate, formatNumber } from "$utils/formatters";
-  import { getMilestone } from "$utils/milestones";
-  import DocumentIcon from "$components/icons/utility/DocumentIcon.svelte";
-  import LinkExternalIcon from "$components/icons/utility/LinkExternalIcon.svelte";
-  import CoffeeIcon from "$components/icons/utility/CoffeeIcon.svelte";
-  import ClockIcon from "$components/icons/utility/ClockIcon.svelte";
-  import BookIcon from "$components/icons/utility/BookIcon.svelte";
-  import BooksIcon from "$components/icons/utility/BooksIcon.svelte";
-
-  export let type: 'post' | 'link';
-  export let post: any = {}; // For post type
-  export let title: string = ""; // For link type or post title
-  export let url: string = ""; // For link type
-  export let value: string = ""; // For link type
-  export let monthIndex: number = 0;
-  export let postIndex: number = 0;
-  export let localeLoaded: boolean = false;
-  export let postNumber: number | null = null; // New prop for milestone calculation
-
-  // Reactive variable to store the display date string for posts
-  let displayDate: string;
-
-  // Update displayDate whenever post.createdAt or localeLoaded changes for posts
-  $: {
-    if (type === 'post' && localeLoaded && post?.createdAt) {
-      const postDate = new Date(post.createdAt);
-      displayDate = formatDate(postDate);
-    } else if (type === 'post') {
-      displayDate = "Loading...";
-    }
-  }
-
-  // Calculate milestone information
-  $: milestone = type === 'post' && postNumber ? getMilestone(postNumber) : null;
-
-  // Determine the title to display based on type
-  $: displayTitle = type === 'post' ? post?.title : title;
-  $: href = type === 'post' ? `/blog/${post.rkey}` : url;
-  
-  // Calculate reading time category for visual styling
-  $: readingTime = type === 'post' ? Math.ceil(post.wordCount / 200) : 0;
-  $: isLongRead = readingTime > 10;
-  $: isMediumRead = readingTime > 5 && readingTime <= 10;
-  $: isQuickRead = readingTime <= 2;
-  
-  // Get appropriate icon based on reading time
-  $: getReadingTimeIcon = (time: number) => {
-    if (time <= 2) return 'quick'; // Coffee cup for quick reads
-    if (time <= 5) return 'short'; // Clock for short reads  
-    if (time <= 10) return 'medium'; // Book for medium reads
-    return 'long'; // Stack of books for long reads
-  };
+  export let type: 'link' | 'user';
+  export let url: string;
+  export let title: string;
+  export let value: string | undefined = undefined;
 </script>
 
-<div
-  class="archive-card group"
-  class:long-read={type === 'post' && isLongRead}
-  class:medium-read={type === 'post' && isMediumRead}
-  class:has-milestone={milestone}
-  in:fly={{
-    y: 15,
-    x: 0,
-    delay: 150 + monthIndex * 30 + postIndex * 50,
-    duration: 300,
-    easing: quintOut,
-  }}
->
-  <a {href} class="card-link">
-    <article class="card-content">
-      <!-- Milestone banner (appears at top if present) -->
-      {#if milestone}
-        <div 
-          class="milestone-banner" 
-          class:special={milestone.type === 'special'}
-          class:major={milestone.type === 'major'}
-          class:minor={milestone.type === 'minor'}
-          in:fade={{ delay: 300, duration: 400 }}
-        >
-          <span class="milestone-emoji" role="img" aria-label="milestone">{milestone.emoji}</span>
-          <span class="milestone-text">{milestone.text}</span>
-        </div>
-      {/if}
-
-      <!-- Header section with title and type indicator -->
-      <header class="card-header">
-        {#if type === 'post'}
-          <div class="type-indicator post-indicator">
-            <DocumentIcon size="14" />
-            <span class="sr-only">Blog post</span>
-          </div>
-        {:else}
-          <div class="type-indicator link-indicator">
-            <LinkExternalIcon size="14" />
-            <span class="sr-only">External link</span>
-          </div>
-        {/if}
-        
-        <h3 class="card-title" title={displayTitle}>
-          {displayTitle}
-        </h3>
-      </header>
-
-      <!-- Main content area -->
-      <div class="card-body">
-        {#if type === 'post'}
-          <!-- Reading stats with visual emphasis -->
-          <div class="reading-stats">
-            <div class="stat-item words">
-              <span class="stat-number">{formatNumber(post.wordCount) || '0'}</span>
-              <span class="stat-label">words</span>
-            </div>
-            <div class="stat-divider">•</div>
-            <div class="stat-item time" class:highlight={isLongRead}>
-              <div class="reading-time-icon" class:quick={isQuickRead} class:medium={isMediumRead} class:long={isLongRead}>
-                {#if getReadingTimeIcon(readingTime) === 'quick'}
-                  <CoffeeIcon size="14" />
-                {:else if getReadingTimeIcon(readingTime) === 'short'}
-                  <ClockIcon size="14" />
-                {:else if getReadingTimeIcon(readingTime) === 'medium'}
-                  <BookIcon size="14" />
-                {:else}
-                  <BooksIcon size="14" />
-                {/if}
-              </div>
-              <span class="stat-number">{Math.ceil(post.wordCount / 200)}</span>
-              <span class="stat-label">min read</span>
-            </div>
-          </div>
-        {:else if type === 'link'}
-          <p class="link-value">{value}</p>
-        {/if}
-      </div>
-
-      <!-- Footer with metadata -->
-      <footer class="card-footer">
-        {#if type === 'post'}
-          <div class="date-section">
-            <span class="date-label">Last Updated</span>
-            <div class="date-value">
-              {#if localeLoaded && displayDate !== "Loading..."}
-                <span transition:fade>{displayDate}</span>
-              {:else}
-                <span class="loading">Loading...</span>
-              {/if}
-            </div>
-          </div>
-        {:else if type === 'link'}
-          <div class="link-domain">
-            {url?.replace(/^https?:\/\//, "").split("/")[0]}
-          </div>
-        {/if}
-      </footer>
-    </article>
+{#if type === 'link'}
+  <a 
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="block p-4 rounded-lg border hover:shadow-lg transition-shadow"
+    style="background: var(--card-bg); border-color: var(--border-color);"
+  >
+    {#if value}
+      <div class="text-2xl mb-2">{value}</div>
+    {/if}
+    <h3 class="font-semibold text-lg mb-1">{title}</h3>
+    <p class="text-sm text-link opacity-75 truncate">{url}</p>
   </a>
-</div>
-
-<style>
-  .archive-card {
-    backface-visibility: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-
-  .card-link {
-    display: block;
-    text-decoration: none;
-    height: 100%;
-  }
-
-  .card-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 140px;
-    padding: 20px;
-    border: 1px solid transparent;
-    border-radius: 0px;
-    background: var(--header-footer-bg);
-    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-
-  .card-content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: var(--link-color);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-    transform-origin: left;
-  }
-
-  .group:hover .card-content {
-    border-color: var(--button-bg);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-  }
-
-  .group:hover .card-content::before {
-    transform: scaleX(1);
-  }
-
-  /* Disable line animation for milestone cards */
-  .has-milestone .card-content::before {
-    display: none;
-  }
-
-  /* Milestone Banner Styles */
-  .milestone-banner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 8px 12px;
-    margin: -20px -20px 16px -20px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .milestone-banner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    animation: shimmer 2s infinite;
-  }
-
-  @keyframes shimmer {
-    0% { left: -100%; }
-    100% { left: 100%; }
-  }
-
-  .milestone-banner.special {
-    background: linear-gradient(135deg, var(--button-bg), var(--button-hover-bg));
-    color: white;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  .milestone-banner.major {
-    background: linear-gradient(135deg, var(--button-bg), var(--text-color));
-    color: var(--header-footer-bg);
-  }
-
-  .milestone-banner.minor {
-    background: var(--button-bg);
-    color: var(--text-color);
-    opacity: 0.9;
-  }
-
-  .milestone-emoji {
-    font-size: 1rem;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-  }
-
-  .milestone-text {
-    letter-spacing: 0.02em;
-  }
-
-  /* Adjust card content when milestone is present */
-  .has-milestone .card-header {
-    margin-bottom: 12px;
-  }
-
-  .has-milestone .card-content {
-    min-height: 160px;
-  }
-
-  /* Header Styles */
-  .card-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .type-indicator {
-    flex-shrink: 0;
-    padding: 6px;
-    border-radius: 0px;
-    margin-top: 2px;
-    transition: all 0.3s ease;
-  }
-
-  .post-indicator, .link-indicator {
-    background: var(--button-bg);
-    color: var(--text-color);
-    opacity: 0.8;
-  }
-
-  .group:hover .type-indicator {
-    transform: scale(1.1);
-  }
-
-  .card-title {
-    flex: 1;
-    margin: 0;
-    font-size: 1.1rem;
-    font-weight: 600;
-    line-height: 1.4;
-    color: var(--link-color);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    word-break: break-word;
-    transition: color 0.3s ease;
-  }
-
-  .group:hover .card-title {
-    color: var(--link-hover-color);
-  }
-
-  /* Body Styles */
-  .card-body {
-    flex: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  .reading-stats {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 0.95rem;
-  }
-
-  .stat-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .reading-time-icon {
-    display: flex;
-    align-items: center;
-    color: var(--text-color);
-    opacity: 0.7;
-    transition: all 0.3s ease;
-  }
-
-  .stat-number {
-    font-weight: 600;
-    color: var(--text-color);
-  }
-
-  .stat-label {
-    font-size: 0.85rem;
-    color: var(--text-color);
-    opacity: 0.7;
-  }
-
-  .stat-item.highlight .stat-number {
-    color: var(--link-color);
-    font-weight: 700;
-  }
-
-  .stat-divider {
-    color: var(--text-color);
-    opacity: 0.4;
-  }
-
-  .link-value {
-    color: var(--text-color);
-    font-size: 0.9rem;
-    line-height: 1.4;
-    margin: 0;
-  }
-
-  /* Footer Styles */
-  .card-footer {
-    margin-top: auto;
-    padding-top: 16px;
-  }
-
-  .date-section {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .date-label {
-    font-size: 0.75rem;
-    color: var(--text-color);
-    opacity: 0.6;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 500;
-  }
-
-  .date-value {
-    font-size: 0.9rem;
-    color: var(--text-color);
-    font-weight: 500;
-  }
-
-  .loading {
-    opacity: 0.5;
-    font-style: italic;
-  }
-
-  .link-domain {
-    font-size: 0.8rem;
-    color: var(--text-color);
-    opacity: 0.7;
-    font-family: monospace;
-    background: var(--button-bg);
-    padding: 4px 8px;
-    border-radius: 0px;
-    display: inline-block;
-  }
-
-  /* Adaptive sizing based on content */
-  .long-read .card-content {
-    min-height: 160px;
-  }
-
-  .medium-read .card-content {
-    min-height: 150px;
-  }
-
-  .long-read .card-content::before {
-    height: 4px;
-    background: var(--link-color);
-  }
-
-  /* Screen reader only content */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .card-content {
-      padding: 16px;
-      min-height: 120px;
-    }
-    
-    .card-title {
-      font-size: 1rem;
-    }
-    
-    .reading-stats {
-      font-size: 0.85rem;
-    }
-
-    .milestone-banner {
-      margin: -16px -16px 12px -16px;
-      font-size: 0.8rem;
-    }
-  }
-</style>
+{:else if type === 'user'}
+  <a 
+    href={url}
+    class="block p-4 rounded-lg border hover:shadow-lg transition-shadow"
+    style="background: var(--card-bg); border-color: var(--border-color);"
+  >
+    <h3 class="font-semibold text-lg mb-1">{title}</h3>
+    <p class="text-sm text-link opacity-75 truncate">{url}</p>
+  </a>
+{/if}

src/lib/components/archive/MonthSection.svelte

···
-<script lang="ts">
-  import { slide } from "svelte/transition";
-
-  import { quintOut } from "svelte/easing";
-  import { ArchiveCard } from "./index";
-  import StatsDisplay from "./StatsDisplay.svelte";
-
-  export let monthName: string;
-  export let postsInMonth: any[];
-  export let monthIndex: number;
-  export let localeLoaded: boolean;
-  import { calculateTotalReadTime, calculateTotalWordCount, formatReadTime } from "$utils/tally";
-
-  $: rawTotalReadTime = calculateTotalReadTime(postsInMonth);
-  $: totalReadTime = formatReadTime(rawTotalReadTime);
-  $: totalWordCount = calculateTotalWordCount(postsInMonth);
-
-  // Calculate the number of posts
-  let postCount = postsInMonth.length;
-</script>
-
-<div
-  class="mb-12 ml-4"
-  in:slide={{ delay: 100 + monthIndex * 50, duration: 300, easing: quintOut }}
->
-  <h2 class="text-2xl font-bold mb-1 ml-2">{monthName}</h2>
-  <StatsDisplay {totalReadTime} {totalWordCount} {postCount} />
-  <div
-    class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr)_)] gap-x-6 gap-y-6 mx-4 my-8"
-  >
-    {#each postsInMonth as post, postIndex (post.rkey)}
-      <ArchiveCard type="post" {post} {monthIndex} {postIndex} {localeLoaded} postNumber={post.postNumber} />
-    {/each}
-  </div>
-</div>

src/lib/components/archive/UserDirectory.svelte

···
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import type { User } from "$lib/components/shared/interfaces";
+
+  export let users: User[];
+
+  let loading = true;
+  let userProfiles: any[] = [];
+
+  onMount(async () => {
+    if (users && users.length > 0) {
+      // Fetch profile data for each user
+      const profiles = await Promise.all(
+        users.map(async (user) => {
+          try {
+            const response = await fetch(
+              `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${user.did}`
+            );
+            if (response.ok) {
+              const profile = await response.json();
+              return {
+                did: user.did,
+                handle: profile.handle || user.handle,
+                displayName: profile.displayName || user.displayName,
+                avatar: profile.avatar,
+                description: profile.description,
+                banner: profile.banner
+              };
+            }
+          } catch (error) {
+            console.error(`Error fetching profile for ${user.did}:`, error);
+          }
+          return user; // Return original if fetch fails
+        })
+      );
+      userProfiles = profiles.filter(Boolean);
+    }
+    loading = false;
+  });
+
+  function navigateToUser(did: string) {
+    goto(`/user/${encodeURIComponent(did)}`);
+  }
+</script>
+
+<div class="user-directory">
+  <h1 class="text-3xl font-bold mb-8 text-center">Users</h1>
+  {#if loading}
+    <div class="text-center py-8">
+      <p class="text-lg opacity-75">Loading user profiles...</p>
+    </div>
+  {:else if userProfiles.length === 0}
+    <div class="text-center py-8">
+      <p class="text-lg opacity-75">No users configured. Add users in the configuration file.</p>
+    </div>
+  {:else}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {#each userProfiles as user (user.did)}
+        <button 
+          class="user-card cursor-pointer rounded-lg p-6 transition-transform hover:scale-105 text-left w-full"
+          style="background: var(--card-bg); border: 1px solid var(--border-color);"
+          onclick={() => navigateToUser(user.did)}
+        >
+          {#if user.banner}
+            <div 
+              class="w-full h-32 rounded-t-lg mb-4 bg-cover bg-center"
+              style="background-image: url({user.banner});"
+            ></div>
+          {/if}
+          
+          <div class="flex items-start gap-4">
+            {#if user.avatar}
+              <img 
+                src={user.avatar} 
+                alt={user.displayName || user.handle}
+                class="w-16 h-16 rounded-full object-cover"
+              />
+            {:else}
+              <div class="w-16 h-16 rounded-full bg-[var(--muted-bg)] flex items-center justify-center">
+                <span class="text-2xl font-bold text-[var(--text-color)]">
+                  {(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
+                </span>
+              </div>
+            {/if}
+            
+            <div class="flex-1 min-w-0">
+              <h3 class="font-bold text-lg truncate">
+                {user.displayName || user.handle || 'Unknown User'}
+              </h3>
+              <p class="text-sm opacity-75 truncate">
+                @{user.handle || user.did}
+              </p>
+              {#if user.description}
+                <p class="text-sm mt-2 line-clamp-2 opacity-90">
+                  {user.description}
+                </p>
+              {/if}
+            </div>
+          </div>
+          
+          <div class="mt-4 text-center">
+            <span class="text-sm text-link hover:text-link-hover">
+              View links →
+            </span>
+          </div>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

src/lib/components/icons/index.ts

···
-export { default as BlueskyIcon } from "./social/BlueskyIcon.svelte";
-export { default as FacebookIcon } from "./social/FacebookIcon.svelte";
-export { default as MastodonIcon } from './social/MastodonIcon.svelte';
-export { default as RedditIcon } from './social/RedditIcon.svelte';
-export { default as RssIcon } from './social/RssIcon.svelte';
-export { default as ShareIcons } from './social/ShareIcons.svelte';
-export { default as BookOpenIcon } from './utility/BookOpenIcon.svelte';
 export { default as CopyLinkIcon } from './utility/CopyLinkIcon.svelte';
 export { default as HomeIcon } from './utility/HomeIcon.svelte';
-export { default as LinkIcon } from './utility/LinkIcon.svelte';
 export { default as MoonIcon } from './utility/MoonIcon.svelte';
-export { default as PostIcon } from './utility/PostIcon.svelte';
 export { default as SunIcon } from './utility/SunIcon.svelte';
-export { default as DocumentIcon } from "./utility/DocumentIcon.svelte";
-export { default as LinkExternalIcon } from "./utility/LinkExternalIcon.svelte";
-export { default as CoffeeIcon } from "./utility/CoffeeIcon.svelte";
-export { default as ClockIcon } from "./utility/ClockIcon.svelte";
-export { default as BookIcon } from "./utility/BookIcon.svelte";
-export { default as BooksIcon } from "./utility/BooksIcon.svelte";
 export { default as EditIcon } from "./utility/EditIcon.svelte";

src/lib/components/icons/social/BlueskyIcon.svelte

···
-<script>
-  export let size = "18";
-  export let fill = "currentColor";
-</script>
-
-<svg
-  role="img"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  {fill}
->
-  <path
-    d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
-  />
-</svg>

src/lib/components/icons/social/FacebookIcon.svelte

···
-<script>
-  export let size = "18";
-  export let fill = "currentColor";
-</script>
-
-<svg
-  role="img"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  {fill}
->
-  <path
-    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"
-  />
-</svg>

src/lib/components/icons/social/MastodonIcon.svelte

···
-<script>
-  export let size = "18";
-  export let fill = "currentColor";
-</script>
-
-<svg
-  role="img"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  {fill}
->
-  <path
-    d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"
-  />
-</svg>

src/lib/components/icons/social/RedditIcon.svelte

···
-<script>
-  export let size = "18";
-  export let fill = "currentColor";
-</script>
-
-<svg
-  role="img"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  {fill}
->
-  <path
-    d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"
-  />
-</svg>

src/lib/components/icons/social/RssIcon.svelte

···
-<script>
-  export let size = "24";
-  export let stroke = "currentColor";
-  export let fill = "none";
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M4 11a9 9 0 0 1 9 9" />
-  <path d="M4 4a16 16 0 0 1 16 16" />
-  <circle cx="5" cy="19" r="1" />
-</svg>

src/lib/components/icons/social/ShareIcons.svelte

···
-<script lang="ts">
-  import { getStores } from "$app/stores";
-  const { page } = getStores();
-  import { env } from '$env/dynamic/public';
-
-  // Icons
-  import { BlueskyIcon, FacebookIcon, RedditIcon, MastodonIcon, CopyLinkIcon } from "$components/icons";
-
-  // Props
-  export let title: string;
-  export let showInHeader: boolean = false;
-  export let profile: { handle: string; displayName?: string };
-  export let mastodonInstance: string = "mastodon.social";
-  // Add fediverseCreator prop for Mastodon tagging
-  let fediverseCreator: string | undefined = env.PUBLIC_ACTIVITYPUB_USER;
-
-  $: mastodonUserTag =
-    fediverseCreator &&
-    (fediverseCreator.startsWith("http://") ||
-      fediverseCreator.startsWith("https://"))
-      ? fediverseCreator
-      : fediverseCreator && fediverseCreator.startsWith("@")
-        ? fediverseCreator
-        : `@${fediverseCreator}`;
-
-  // Define specific share texts for each platform
-  $: blueskyShareText = `${title} by @${profile?.handle} - ${$page.url.href}`;
-  $: mastodonShareText =
-    mastodonUserTag
-      ? mastodonUserTag.startsWith("http://") ||
-        mastodonUserTag.startsWith("https://")
-        ? `${title} by ${mastodonUserTag} - ${$page.url.href}`
-        : `${title} by ${mastodonUserTag} - ${$page.url.href}`
-      : `${title} - ${$page.url.href}`;
-  $: facebookShareText = `${title} - ${$page.url.href}`;
-  $: redditShareText = `${title} - ${$page.url.href}`;
-
-  // Truncate for character limits
-  $: truncatedBlueskyText =
-    blueskyShareText.length > 300
-      ? blueskyShareText.substring(0, 297) + "..."
-      : blueskyShareText;
-  $: truncatedMastodonText =
-    mastodonShareText &&
-    (mastodonShareText.length > 500
-      ? mastodonShareText.substring(0, 497) + "..."
-      : mastodonShareText);
-  $: truncatedFacebookText =
-    facebookShareText.length > 280
-      ? facebookShareText.substring(0, 277) + "..."
-      : facebookShareText;
-  $: truncatedRedditText =
-    redditShareText.length > 300
-      ? redditShareText.substring(0, 297) + "..."
-      : redditShareText;
-
-  // Encode the share texts for use in URLs
-  $: encodedBlueskyText = encodeURIComponent(truncatedBlueskyText);
-  $: encodedMastodonText =
-    mastodonShareText && encodeURIComponent(truncatedMastodonText);
-  $: encodedFacebookText = encodeURIComponent(truncatedFacebookText);
-  $: encodedRedditText = encodeURIComponent(truncatedRedditText);
-
-  // Construct the Bluesky share URL
-  $: blueskyShareUrl = `https://bsky.app/intent/compose?text=${encodedBlueskyText}`;
-
-  // Construct the Reddit share URL
-  $: redditShareUrl = `https://www.reddit.com/submit?url=${encodeURIComponent($page.url.href)}&title=${encodedRedditText}`;
-
-  // Construct the Facebook share URL
-  $: facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent($page.url.href)}&quote=${encodedFacebookText}`;
-
-  // Construct the Mastodon share URL
-  $: mastodonShareUrl =
-    mastodonShareText &&
-    `https://${mastodonInstance}/share?text=${encodedMastodonText}`;
-
-  // Reactive statement to open Mastodon share URL when mastodonInstance changes
-  let mastodonShareTrigger = false;
-  $: if (mastodonShareTrigger && mastodonInstance && mastodonShareUrl) {
-    window.open(mastodonShareUrl, "_blank", "noopener,noreferrer");
-    mastodonShareTrigger = false; // Reset trigger
-  }
-
-  // Copy Link
-  let copyLinkText = "Copy Link";
-  let showCopyFeedback = false;
-
-  const copyLink = async () => {
-    try {
-      await navigator.clipboard.writeText($page.url.href);
-      copyLinkText = "Copied!";
-      showCopyFeedback = true;
-      setTimeout(() => {
-        showCopyFeedback = false;
-        copyLinkText = "Copy Link";
-      }, 2000);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-      copyLinkText = "Failed!";
-      showCopyFeedback = true;
-      setTimeout(() => {
-        showCopyFeedback = false;
-        copyLinkText = "Copy Link";
-      }, 2000);
-    }
-  };
-</script>
-
-<div
-  class={`share-icons flex items-center gap-2 ${showInHeader ? "ml-auto mr-2" : "justify-center my-4"}`}
->
-  <!-- Bluesky Share Button -->
-  <a
-    href={blueskyShareUrl}
-    target="_blank"
-    rel="noopener noreferrer"
-    class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-    style="background-color: var(--card-bg);"
-    aria-label="Share on Bluesky"
-    title="Share on Bluesky"
-  >
-    <BlueskyIcon />
-  </a>
-
-  <!-- Facebook Share Button -->
-  <a
-    href={facebookShareUrl}
-    target="_blank"
-    rel="noopener noreferrer"
-    class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-    style="background-color: var(--card-bg);"
-    aria-label="Share on Facebook"
-    title="Share on Facebook"
-  >
-    <FacebookIcon />
-  </a>
-
-  <!-- Reddit Share Button -->
-  <a
-    href={redditShareUrl}
-    target="_blank"
-    rel="noopener noreferrer"
-    class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-    style="background-color: var(--card-bg);"
-    aria-label="Share on Reddit"
-    title="Share on Reddit"
-  >
-    <RedditIcon />
-  </a>
-
-  {#if env.PUBLIC_ACTIVITYPUB_USER && env.PUBLIC_ACTIVITYPUB_USER.length > 0}
-    <button
-      on:click|preventDefault={() => {
-        const instance = prompt(
-          "Enter your Mastodon instance (e.g. mastodon.social):",
-          mastodonInstance
-        );
-        if (instance) {
-          mastodonInstance = instance;
-          mastodonShareTrigger = true;
-        }
-      }}
-      on:keydown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          const instance = prompt(
-            "Enter your Mastodon instance (e.g. mastodon.social):",
-            mastodonInstance
-          );
-          if (instance) {
-            mastodonInstance = instance;
-            mastodonShareTrigger = true;
-          }
-        }
-      }}
-      class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-      style="background-color: var(--card-bg);"
-      aria-label="Share on Mastodon"
-      title="Share on Mastodon"
-      tabindex="0"
-    >
-      <MastodonIcon />
-    </button>
-  {/if}
-
-  <!-- Copy Link Button -->
-  <div class="relative flex items-center">
-    <button
-      on:click={copyLink}
-      class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-      style="background-color: var(--card-bg);"
-      aria-label="Copy Link"
-      title="Copy Link"
-    >
-      <CopyLinkIcon />
-    </button>
-    {#if showCopyFeedback}
-      <span
-        class="copy-feedback absolute left-full ml-2 text-sm font-medium"
-        class:copied={copyLinkText === 'Copied!'}
-        class:failed={copyLinkText === 'Failed!'}
-      >
-        {copyLinkText}
-      </span>
-    {/if}
-  </div>
-</div>
-
-<style>
-  /* Common icon styling - this will match ThemeToggle.svelte */
-  .icon-button {
-    color: var(--text-color);
-  }
-
-  .icon-button:hover {
-    background-color: var(--button-hover-bg) !important;
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .share-icons {
-      gap: 0.5rem;
-    }
-    
-    /* Hide copy feedback text on mobile */
-    .copy-feedback {
-      display: none;
-    }
-  }
-
-  .copy-feedback {
-    opacity: 0;
-    animation: fade-in-out 2s forwards;
-  }
-
-  .copy-feedback.copied {
-    color: var(--accent-color);
-  }
-
-  .copy-feedback.failed {
-    color: var(--error-color);
-  }
-
-  @keyframes fade-in-out {
-    0% {
-      opacity: 0;
-      transform: translateX(-10px);
-    }
-    20% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    80% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    100% {
-      opacity: 0;
-      transform: translateX(10px);
-    }
-  }
-</style>

src/lib/components/icons/utility/BookIcon.svelte

···
-<script>
-  export let size = "14";
-  export let fill = "none";
-  export let stroke = "currentColor";
-  export let strokeWidth = "2";
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width={strokeWidth}
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
-</svg>

src/lib/components/icons/utility/BookOpenIcon.svelte

···
-<script>
-  export let size = "24";
-  export let stroke = "currentColor";
-  export let fill = "none";
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class="feather feather-book-open"
->
-  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-</svg>

src/lib/components/icons/utility/BooksIcon.svelte

···
-<script>
-  export let size = "14";
-  export let fill = "none";
-  export let stroke = "currentColor";
-  export let strokeWidth = "2";
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width={strokeWidth}
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-</svg>

src/lib/components/icons/utility/ClockIcon.svelte

···
-<script>
-  export let size = "14";
-  export let fill = "none";
-  export let stroke = "currentColor";
-  export let strokeWidth = "2";
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width={strokeWidth}
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="12" cy="12" r="10" />
-  <polyline points="12,6 12,12 16,14" />
-</svg>

src/lib/components/icons/utility/CoffeeIcon.svelte

···
-<script>
-  export let size = "14";
-  export let fill = "none";
-  export let stroke = "currentColor";
-  export let strokeWidth = "2";
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width={strokeWidth}
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M17 8h1a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4h-1" />
-  <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8Z" />
-  <line x1="6" y1="2" x2="6" y2="4" />
-  <line x1="10" y1="2" x2="10" y2="4" />
-  <line x1="14" y1="2" x2="14" y2="4" />
-</svg>

src/lib/components/icons/utility/DocumentIcon.svelte

···
-<script>
-  export let size = "14";
-  export let fill = "none";
-  export let stroke = "currentColor";
-  export let strokeWidth = "2";
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  {fill}
-  {stroke}
-  stroke-width={strokeWidth}
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-  <polyline points="14,2 14,8 20,8" />
-  <line x1="16" y1="13" x2="8" y2="13" />
-  <line x1="16" y1="17" x2="8" y2="17" />
-  <line x1="10" y1="9" x2="8" y2="9" />
-</svg>

src/lib/components/icons/utility/LinkIcon.svelte

···
-<script lang="ts">
-  export let size: string = "14";
-  export let colour: string = "currentColor";
-</script>
-
-<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={colour} stroke-width="2">
-  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
-  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
-</svg>

src/lib/components/icons/utility/PostIcon.svelte

···
-<script lang="ts">
-  export let size: string = "14";
-  export let colour: string = "currentColor";
-</script>
-
-<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={colour} stroke-width="2">
-  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-  <polyline points="14,2 14,8 20,8"/>
-  <line x1="16" y1="13" x2="8" y2="13"/>
-  <line x1="16" y1="17" x2="8" y2="17"/>
-  <line x1="10" y1="9" x2="8" y2="9"/>
-</svg>

src/lib/components/layout/DirectoryHeader.svelte

···
+<script lang="ts">
+  import { env } from "$env/dynamic/public";
+  import { page } from "$app/stores";
+  import { getProfile } from "$components/profile/profile";
+  
+  let isUserPage = $derived($page.route.id === '/user/[did]');
+  
+  let profile = $state<{ displayName?: string; handle?: string } | null>(null);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  
+  $effect(() => {
+    if (env.DIRECTORY_OWNER) {
+      loading = true;
+      getProfile(fetch)
+        .then((p) => {
+          profile = p;
+          error = null;
+        })
+        .catch((err) => {
+          console.error('Failed to load profile:', err);
+          error = err.message;
+          profile = null;
+        })
+        .finally(() => {
+          loading = false;
+        });
+    } else {
+      loading = false;
+    }
+  });
+</script>
+
+<header class="py-4 px-4 sm:px-8 mb-6">
+  <div class="max-w-[1000px] mx-auto">
+    <div class="flex justify-between items-center mb-4">
+      <h1 class="text-lg font-semibold text-[var(--text-color)]">
+        {env.DIRECTORY_OWNER ? (
+          loading ? 'Loading...' : (
+            profile ? 
+              `${profile.displayName || profile.handle || env.DIRECTORY_OWNER}'s Linkat Directory` : 
+              `${env.DIRECTORY_OWNER}'s Linkat Directory`
+          )
+        ) : 'Linkat Directory'}
+      </h1>
+      
+      {#if isUserPage}
+        <a 
+          href="/" 
+          class="text-sm text-link hover:text-link-hover transition-colors"
+        >
+          ← Home
+        </a>
+      {/if}
+    </div>
+  </div>
+</header>

src/lib/components/layout/DynamicHead.svelte

···
+<script lang="ts">
+  import { getStores } from '$app/stores';
+  const { page } = getStores();
+
+  import type { DynamicHeadProps } from '$lib/components/shared/interfaces';
+
+  // Define props for dynamic head content
+  let { 
+    title,
+    description,
+    keywords,
+    ogUrl = $page.url.origin + $page.url.pathname,
+    ogTitle,
+    ogDescription,
+    ogImage,
+    ogImageWidth = '1200',
+    ogImageHeight = '630',
+    twitterCard = 'summary_large_image',
+    twitterUrl = $page.url.origin + $page.url.pathname,
+    twitterTitle,
+    twitterDescription,
+    twitterImage
+  }: DynamicHeadProps = $props();
+
+  // Fallback for Open Graph and Twitter titles/descriptions if not provided
+  ogTitle = ogTitle || title;
+  ogDescription = ogDescription || description;
+  twitterTitle = twitterTitle || title;
+  twitterDescription = twitterDescription || description;
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  {#if description}
+    <meta name="description" content={description} />
+  {/if}
+  {#if keywords}
+    <meta name="keywords" content={keywords} />
+  {/if}
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content={ogUrl} />
+  <meta property="og:title" content={ogTitle} />
+  <meta property="og:description" content={ogDescription} />
+  <meta property="og:site_name" content="Linkat Directory" />
+  {#if ogImage}
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content={ogImageWidth} />
+    <meta property="og:image:height" content={ogImageHeight} />
+  {/if}
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content={twitterCard} />
+  <meta name="twitter:url" content={twitterUrl} />
+  <meta name="twitter:title" content={twitterTitle} />
+  <meta name="twitter:description" content={twitterDescription} />
+  {#if twitterImage}
+    <meta name="twitter:image" content={twitterImage} />
+  {/if}
+</svelte:head>

src/lib/components/layout/Navigation.svelte

···
 <script lang="ts">
   import { getStores } from "$app/stores";
   const { page } = getStores();
-  import ThemeToggle from "./ThemeToggle.svelte";
-  import { HomeIcon, RssIcon, BookOpenIcon } from "$components/icons";
-
-  export const isHomePage: boolean = false;
-  export let isBlogIndex: boolean = false;
+  import { HomeIcon } from "$components/icons";
 
-  // Reactive statement to get the origin without http:// or https://
-  $: cleanOrigin = $page.url.origin.replace(/^https?:\/\//, '');
+  let {} = $props();
 </script>
 
 <nav class="flex items-center box-border my-6">
···
         <HomeIcon />
       </a>
     {/if}
-    {#if isBlogIndex}
-      <!-- RSS Feed Link -->
-      <a
-        href="{$page.url.origin}/blog/rss"
-        class="font-medium text-[large] hover:text-[var(--link-hover-color)]"
-        aria-label="RSS Feed"
-        download="{cleanOrigin}_Blog.rss"
-      >
-        <RssIcon />
-      </a>
-    {/if}
-    {#if $page.url.pathname.startsWith("/blog/") && $page.url.pathname !== "/blog/"}
-      <a
-        href="/blog"
-        class="flex items-center gap-2 text-sm text-[var(--text-color)] hover:text-[var(--link-hover-color)]"
-        aria-label="Back to blog"
-      >
-        <BookOpenIcon />
-      </a>
-    {/if}
   </div>
-  <div class="ml-auto"></div>
-  <ThemeToggle />
 </nav>

src/lib/components/layout/ThemeToggle.svelte

···
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { SunIcon, MoonIcon } from "$components/icons";
-  import EditIcon from "$components/icons/utility/EditIcon.svelte";
-  import { 
-    THEMES,
-    applyTheme, 
-    getThemePreferences, 
-    saveThemePreferences,
-    updateThemeColorMeta,
-    dispatchThemeChangeEvent,
-    setupSystemThemeListener
-  } from "../../themeLoader";
-
-  let isDarkMode: boolean = true;
-  let currentTheme: string = "default";
-  let isDropdownOpen: boolean = false;
-
-  onMount(() => {
-    // Retrieve current theme preferences (already applied by theme-loader)
-    const preferences = getThemePreferences();
-    isDarkMode = preferences.isDarkMode;
-    currentTheme = preferences.themeId;
-
-    // Update meta tag and dispatch a theme change event
-    updateThemeColorMeta();
-    dispatchThemeChangeEvent(isDarkMode, currentTheme);
-
-    // Set up system theme listener
-    setupSystemThemeListener();
-
-    // Close dropdown when clicking outside the theme controls
-    document.addEventListener("click", (e: MouseEvent) => {
-      const themeControls = document.querySelector(".theme-controls");
-      if (
-        isDropdownOpen &&
-        themeControls &&
-        !e.composedPath().includes(themeControls)
-      ) {
-        isDropdownOpen = false;
-      }
-    });
-  });
-
-  function toggleTheme(): void {
-    isDarkMode = !isDarkMode;
-    applyTheme(isDarkMode, currentTheme);
-    saveThemePreferences(isDarkMode, currentTheme);
-    updateThemeColorMeta();
-    dispatchThemeChangeEvent(isDarkMode, currentTheme);
-  }
-
-  // Change the colour theme
-  function changeColorTheme(themeId: string): void {
-    currentTheme = themeId;
-    applyTheme(isDarkMode, currentTheme);
-    saveThemePreferences(isDarkMode, currentTheme);
-    updateThemeColorMeta();
-    dispatchThemeChangeEvent(isDarkMode, currentTheme);
-    isDropdownOpen = false;
-  }
-
-  // Toggle the dropdown for theme selection
-  function toggleDropdown(e: MouseEvent): void {
-    e.stopPropagation();
-    isDropdownOpen = !isDropdownOpen;
-  }
-</script>
-
-<div class="theme-controls relative">
-  <div class="flex items-center gap-2">
-    <button
-      onclick={toggleDropdown}
-      class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-      style="background-color: var(--card-bg);"
-      aria-label="Change theme"
-      aria-expanded={isDropdownOpen}
-    >
-      <EditIcon size="20" stroke="var(--text-color)" />
-    </button>
-
-    <button
-      onclick={toggleTheme}
-      class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110"
-      style="background-color: var(--card-bg);"
-      aria-label={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
-    >
-      {#if isDarkMode}
-        <!-- Sun icon for switching to light mode -->
-        <SunIcon stroke="var(--text-color)" />
-      {:else}
-        <!-- Moon icon for switching to dark mode -->
-        <MoonIcon stroke="var(--text-color)" />
-      {/if}
-    </button>
-  </div>
-
-  {#if isDropdownOpen}
-    <div
-      class="theme-dropdown absolute right-0 mt-2 py-2 w-48 rounded shadow-lg z-10"
-      style="background-color: var(--card-bg); border: 1px solid var(--button-bg);"
-    >
-      <div class="max-h-80 overflow-y-auto">
-        {#each THEMES as theme}
-          <button
-            class="theme-option w-full text-left px-4 py-2 transition-colors duration-200"
-            class:active={currentTheme === theme.id}
-            onclick={() => changeColorTheme(theme.id)}
-          >
-            {theme.name}
-          </button>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  /* Common icon styling */
-  .icon-button {
-    color: var(--text-color);
-  }
-
-  .icon-button:hover {
-    background-color: var(--button-hover-bg) !important;
-  }
-
-  .theme-option {
-    color: var(--text-color);
-  }
-
-  .theme-option:hover {
-    background-color: var(--button-bg);
-  }
-
-  .theme-option.active {
-    background-color: var(--button-hover-bg);
-    font-weight: 500;
-  }
-
-  .theme-dropdown {
-    max-height: 80vh;
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .theme-dropdown {
-      width: 12rem;
-      right: 0;
-    }
-  }
-</style>

src/lib/components/layout/footer/Main.svelte

···
   });
 </script>
 
-<footer class="text-center py-4 text-primary text-sm opacity-60">
-  <div class="flex flex-col justify-center items-center gap-2">
-    <div>
+<footer class="text-center py-8 text-primary text-sm opacity-60">
+  <div class="max-w-2xl mx-auto px-4">
+    <!-- Main attribution line -->
+    <div class="mb-4">
       <span>&copy; <span id="copyright-year"></span></span>
-
-      <span class="mx-1"></span>
-
+      <span class="mx-2">•</span>
       {#if profile?.handle}
         <a
           href="https://bsky.app/profile/{profile.did}"
-          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)]"
+          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)] transition-colors"
         >
           @{profile.handle}
         </a>
       {:else}
         <span>{profile?.displayName || profile?.did}</span>
       {/if}
-
-      {#if env.PUBLIC_ACTIVITYPUB_USER && env.PUBLIC_ACTIVITYPUB_USER.length > 0 && profile?.handle}
-        <span class="mx-1"></span>
-      {/if}
-
-      {#if env.PUBLIC_ACTIVITYPUB_USER && env.PUBLIC_ACTIVITYPUB_USER.length > 0}
+      <span class="mx-2">•</span>
+      <span>powered by 
         <a
-          rel="me"
-          href={`https://${env.PUBLIC_ACTIVITYPUB_USER.split("@")[2]}/@${env.PUBLIC_ACTIVITYPUB_USER.split("@")[1]}`}
-          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)]"
+          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)] transition-colors"
+          href="https://atproto.com/guides/glossary#at-protocol"
         >
-          @{env.PUBLIC_ACTIVITYPUB_USER.split(
-            "@",
-          )[1]}@{env.PUBLIC_ACTIVITYPUB_USER.split("@")[2]}
+          atproto
         </a>
-      {/if}
-    </div>
-
-    <div>
-      <span
-        >powered by <a
-          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)]"
-          href="https://atproto.com/guides/glossary#at-protocol">atproto</a
-        ></span
-      >
+      </span>
     </div>
 
-    <div>
-      <span>template made by <a
-        class="text-[var(--link-color)] hover:text-[var(--link-hover-color)]"
-        href="https://bsky.app/profile/did:plc:ofrbh253gwicbkc5nktqepol">ewan</a
-      ></span>
+    <!-- Project info -->
+    <div class="mb-4 text-xs opacity-75 leading-relaxed">
+      <div class="mb-2">
+        Linkat Directory made by 
+        <a
+          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)] transition-colors"
+          href="https://bsky.app/profile/did:plc:ofrbh253gwicbkc5nktqepol"
+        >
+          ewan
+        </a>
+      </div>
+      <div>
+        <a 
+          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)] transition-colors" 
+          href="https://github.com/ewanc26/linkat-directory"
+        >
+          Open source
+        </a> 
+        and free to use. Not affiliated with 
+        <a 
+          class="text-[var(--link-color)] hover:text-[var(--link-hover-color)] transition-colors" 
+          href="https://linkat.blue"
+        >
+          Linkat
+        </a>
+      </div>
     </div>
 
-    <div>
-      <span class="mx-1"></span>
-      <TidClock />
-    </div>
+    <!-- Clock -->
+    <TidClock />
   </div>
-</footer>
+</footer>

src/lib/components/layout/index.ts

···
 export { default as Navigation } from "./Navigation.svelte";
 export { default as Footer } from "./footer/Main.svelte";
-export { default as ThemeToggle } from "./ThemeToggle.svelte";

src/lib/components/layout/main/DynamicLinks.svelte

···
 <script lang="ts">
-  import { ArchiveCard } from "$components/archive";
+  import ArchiveCard from "$lib/components/archive/ArchiveCard.svelte";
   import type { LinkBoard } from "$components/shared";
 
   // Export the data prop that will receive the fetched links
···
       class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-6 gap-y-6 my-6"
     >
       {#each data.cards as link}
-        <ArchiveCard type="link" url={link.url} title={link.text} value={link.emoji} />
+        <ArchiveCard 
+          type="link"
+          url={link.url}
+          title={link.text}
+          value={link.emoji}
+        />
       {/each}
     </div>
   </div>

src/lib/components/layout/main/LatestBlogPost.svelte

···
-<script lang="ts">
-  import { slide } from "svelte/transition";
-  import { quintOut } from "svelte/easing";
-  import { ArchiveCard } from "$components/archive";
-  import type { Post } from "$components/shared";
-
-  export let posts: Post[] = [];
-  export let localeLoaded: boolean = false;
-
-  // Get the latest post with proper validation
-  $: latestPost = posts && posts.length > 0 ? posts[0] : null;
-  
-  // Additional validation to ensure the post has valid data
-  $: isValidPost = latestPost && 
-    latestPost.title && 
-    latestPost.createdAt instanceof Date && 
-    !isNaN(latestPost.createdAt.getTime()) &&
-    latestPost.content;
-
-  // Use the postNumber from the latestPost object
-  $: postNumber = latestPost ? latestPost.postNumber : null;
-</script>
-
-{#if isValidPost}
-  <section 
-    class="latest-blog-post"
-    in:slide={{ delay: 200, duration: 400, easing: quintOut }}
-  >
-    <div class="section-header">
-      <h2 class="section-title">Latest Blog Post</h2>
-    </div>
-    
-    <div class="latest-post-container">
-      <ArchiveCard 
-        type="post" 
-        post={latestPost} 
-        monthIndex={0}
-        postIndex={0}
-        postNumber={postNumber}
-        {localeLoaded} 
-      />
-    </div>
-  </section>
-{/if}
-
-<style>
-  .latest-blog-post {
-    margin-bottom: 3rem;
-  }
-
-  .section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
-    padding: 0;
-  }
-
-  .section-title {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--text-color);
-    position: relative;
-  }
-
-  .section-title::after {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    width: 3rem;
-    height: 3px;
-    background: var(--link-color);
-    border-radius: 0px;
-  }
-
-  .latest-post-container {
-    display: grid;
-    grid-template-columns: 1fr;
-    max-width: 400px;
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .section-header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 1rem;
-    }
-
-    .section-title {
-      font-size: 1.5rem;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .latest-post-container {
-      max-width: 420px;
-    }
-  }
-</style>

src/lib/components/layout/main/MultiUserLinks.svelte

···
+<script lang="ts">
+  import ArchiveCard from "$lib/components/archive/ArchiveCard.svelte";
+  import type { LinkBoard } from "$components/shared";
+
+  // Props that will receive the fetched links for multiple users
+  let { userLinkBoards = {}, profile }: { 
+    userLinkBoards?: { [did: string]: LinkBoard | undefined }, 
+    profile: any 
+  } = $props();
+
+  // Filter out undefined boards and create a clean array
+  let validBoards = $derived(Object.entries(userLinkBoards)
+    .filter(([, board]) => board && board.cards && board.cards.length > 0)
+    .map(([did, board]) => ({ did, board: board! })));
+
+  // Helper function to format user display name
+  function getUserDisplayName(did: string): string {
+    if (did === profile.did) {
+      return profile.displayName || "My Links";
+    }
+    // For now, use shortened DID for other users
+    // In a future enhancement, we could fetch their profile info
+    return `User ${did.slice(-8)}`;
+  }
+</script>
+
+{#if validBoards.length > 0}
+  <div class="space-y-8">
+    {#each validBoards as { did, board } (did)}
+      <div class="user-links-section">
+        {#if validBoards.length > 1}
+          <!-- Show user header only when there are multiple users -->
+          <div class="flex items-center mb-4">
+            <h3 class="text-lg font-semibold text-[var(--text-color)]">
+              {getUserDisplayName(did)}
+            </h3>
+            <span class="ml-2 text-sm text-[var(--text-color-secondary)]">
+              ({board.cards.length} link{board.cards.length !== 1 ? 's' : ''})
+            </span>
+          </div>
+        {:else}
+          <!-- Single user - add some top margin for spacing -->
+          <div class="mb-4"></div>
+        {/if}
+        
+        <div
+          class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-6 gap-y-6"
+        >
+          {#each board.cards as link}
+            <ArchiveCard type="link" url={link.url} title={link.text} value={link.emoji} />
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else}
+  <!-- Placeholder for blue.linkat.board -->
+  <div class="mb-12 ml-4 text-center text-sm italic opacity-75">
+    create <code>blue.linkat.board</code> records at <a href="https://linkat.blue/" class="text-link hover:text-link-hover">https://linkat.blue/</a>
+  </div>
+{/if}

src/lib/components/layout/main/index.ts

···
-export { default as DynamicLinks } from "./DynamicLinks.svelte";
-export { default as LatestBlogPost } from "./LatestBlogPost.svelte";
+export { default as DynamicLinks } from "./DynamicLinks.svelte";

src/lib/components/profile/Profile.svelte

···
-<script lang="ts">
-  // The profile object is passed as a prop to this component.
-  export let profile: any;
-  import { Status } from ".";
-</script>
-
-<!-- Profile Banner: Displays the user's banner image. -->
-<div
-  class="profile-banner p-4 relative rounded-none mx-2 mb-2"
-  style="background-image: url({profile?.banner}); background-size: cover; background-position: center; min-height: 150px;"
-></div>
-
-{#if profile}
-  <!-- Profile Content: Main container for avatar, user info, and status. -->
-  <div class="profile-content mx-2 mb-8 relative">
-    <!-- Mobile: Stack vertically, Desktop: Side by side -->
-    <div class="flex flex-col sm:flex-row sm:items-start text-left sm:gap-6">
-      <!-- Profile Avatar -->
-      <img
-        src={profile?.avatar}
-        alt="{profile?.displayName || 'User'}'s avatar"
-        class="rounded-none shadow-lg hover:transform-none flex-shrink-0 relative z-10
-               w-24 h-24 -mt-12 mx-auto mb-4
-               sm:w-32 sm:h-32 sm:-mt-16 sm:mx-0 sm:mb-0"
-      />
-      
-      <!-- User Information: Display name, handle, DID, description, status -->
-      <div class="flex-1 min-w-0 p-4 rounded-none overflow-hidden" style="background: var(--card-bg);">
-        <div class="mb-3">
-          <h4 class="text-lg font-semibold mb-1 leading-tight truncate text-center sm:text-left">{profile?.displayName}</h4>
-          <h6 class="mb-2 text-center sm:text-left">
-            <a
-              href="https://bsky.app/profile/{profile?.handle}"
-              class="text-link hover:text-link-hover text-sm truncate block">@{profile?.handle}</a
-            >
-          </h6>
-          <h6 class="opacity-40 mb-3 text-center sm:text-left">
-            <span class="text-xs font-mono overflow-hidden text-ellipsis whitespace-nowrap hidden sm:block">{profile?.did}</span>
-          </h6>
-        </div>
-        
-        <!-- Profile Description -->
-        {#if profile?.description}
-          <div class="mb-3">
-            <p class="text-sm leading-relaxed text-center sm:text-left">{profile?.description}</p>
-          </div>
-        {/if}
-        
-        <!-- Display consolidated status/music using the updated Status component -->
-        <div class="text-center sm:text-left">
-          <Status {profile} />
-        </div>
-      </div>
-    </div>
-  </div>
-{:else}
-  <!-- Placeholder for app.bsky.actor.profile -->
-  <div
-    class="profile-content flex flex-col items-center justify-center text-center mx-2 p-4 relative rounded-none"
-    style="background: var(--card-bg);"
-  >
-    <p class="text-center text-sm italic opacity-75">
-      create a `app.bsky.actor.profile` record at <a
-        href="https://bsky.app/"
-        class="text-link hover:text-link-hover">https://bsky.app/</a
-      >
-    </p>
-  </div>
-{/if}

src/lib/components/profile/Status.svelte

···
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { env } from "$env/dynamic/public";
-  import { fade } from "svelte/transition";
-
-  /**
-   * The profile object is passed as a prop to this component.
-   * It should contain at least 'displayName', 'handle', or 'did' fields.
-   */
-  export let profile: any;
-
-  // RecentFM-related state
-  let musicLoading = false;
-  let musicError: string | null = null;
-  let trackData: {
-    name: string;
-    artist: string;
-    url: string;
-  } | null = null;
-  let showContent = false;
-
-  /**
-   * Fetches recent music from Last.fm via RecentFM API
-   */
-  async function fetchRecentMusic(): Promise<void> {
-    const lastfmUsername = env.PUBLIC_LASTFM_USERNAME;
-
-    if (!lastfmUsername) {
-      return;
-    }
-
-    musicLoading = true;
-    musicError = null;
-
-    try {
-      const params = new URLSearchParams({
-        username: lastfmUsername,
-        emoji: "🎧",
-        nomoji: "false",
-      });
-
-      const url = `https://recentfm.rknight.me/now.php?${params.toString()}`;
-
-      const response = await fetch(url);
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
-      if (data.content) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(data.content, "text/html");
-        const link = doc.querySelector("a");
-
-        if (link) {
-          const fullText = link.textContent || "";
-          const url = link.href;
-
-          const match = fullText.match(/^(.+?) by (.+)$/);
-          if (match) {
-            trackData = {
-              name: match[1].trim(),
-              artist: match[2].trim(),
-              url: url,
-            };
-          }
-        }
-      }
-    } catch (err) {
-      console.error("[RecentFM] Error fetching RecentFM data:", err);
-      musicError = "Failed to load recent tracks";
-    } finally {
-      musicLoading = false;
-    }
-  }
-
-  // Load data on mount
-  onMount(async () => {
-    await fetchRecentMusic();
-
-    // Introduce a delay before showing content
-    setTimeout(() => {
-      showContent = true;
-    }, 2000); // 2 second delay
-  });
-</script>
-
-<!-- Last.fm Music Display -->
-{#if showContent && profile}
-  <div transition:fade={{ duration: 500 }}>
-    <div class="py-2">
-      {#if trackData}
-        <!-- Music Display -->
-        <div class="recent-track-info">
-          <p class="text-xs opacity-60 text-center sm:text-left">
-            {profile.displayName || profile.handle || profile.did} was last listening
-            to
-          </p>
-          <p class="text-xs font-medium text-center sm:text-left mt-0.5">
-            <a
-              href={trackData.url}
-              class="text-link hover:text-link-hover"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              "{trackData.name}" by {trackData.artist}
-            </a>
-          </p>
-        </div>
-      {:else if musicError}
-        <p class="text-xs opacity-60 text-center sm:text-left text-red-500">
-          {musicError}
-        </p>
-      {/if}
-
-      {#if musicLoading}
-        <p class="text-xs opacity-60 italic text-center sm:text-left">
-          Loading recent tracks...
-        </p>
-      {/if}
-    </div>
-  </div>
-{/if}

src/lib/components/profile/index.ts

···
-export { default as Profile } from "./Profile.svelte";
-export { default as Status } from "./Status.svelte";

src/lib/components/profile/profile.ts

···
 }
 
 export async function getProfile(fetch: typeof globalThis.fetch): Promise<Profile> {
-  const cacheKey = `profile_${env.PUBLIC_ATPROTOCOL_USER}`;
+  const cacheKey = `profile_${env.DIRECTORY_OWNER}`;
   let profile: Profile | null = getCache<Profile>(cacheKey);
 
   if (profile) {
···
 
   try {
     const fetchProfile = await safeFetch(
-      `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${env.PUBLIC_ATPROTOCOL_USER}`,
+      `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${env.DIRECTORY_OWNER}`,
       fetch
     );
     const split = fetchProfile["did"].split(":");

src/lib/components/shared/NotFoundMessage.svelte

···
 <div class="flex justify-center items-center min-h-[50vh]">
   <h1 class="text-center pt-4 pb-4">
-    it's either loading or the post doesn't exist
+    It's either loading or the user doesn't exist
   </h1>
 </div>

src/lib/components/shared/interfaces.ts

···
-/**
- * Represents a blog post with its content and metadata.
- */
-export interface Post {
-  postNumber?: number;
-  title: string; // The title of the post.
-  rkey: string; // A unique key for the post.
-  createdAt: Date; // The date and time the post was created.
-  content: string; // The content of the post, parsed to HTML.
-  excerpt: string; // A plain text excerpt for meta descriptions.
-  wordCount: number; // The word count for reading time calculation.
-}
-
-/**
- * Represents a blog post in its raw Markdown format.
- */
-export interface MarkdownPost {
-  title: string; // The title of the post.
-  rkey: string; // A unique key for the post.
-  createdAt: Date; // The date and time the post was created.
-  mdcontent: string; // The raw Markdown content of the post.
-}
-
 // Define the type for the fetched links data
 /**
  * Represents a single link card with a URL, text, and an emoji.
···
 }
 
 /**
+ * Represents the properties for the DynamicHead component.
+ */
+export interface DynamicHeadProps {
+  title: string;
+  description: string;
+  keywords: string;
+  ogUrl?: string;
+  ogTitle: string;
+  ogDescription: string;
+  ogImage?: string;
+  ogImageWidth?: string;
+  ogImageHeight?: string;
+  twitterCard?: string;
+  twitterUrl?: string;
+  twitterTitle: string;
+  twitterDescription: string;
+  twitterImage?: string;
+}
+
+/**
  * Represents a board containing multiple link cards.
  */
 export interface LinkBoard {
···
  * Represents public environment variables.
  */
 export interface PublicEnv {
-  PUBLIC_ATPROTOCOL_USER: string; // Public user for ATProtocol.
-  PUBLIC_ACTIVITYPUB_USER: string; // Public user for ActivityPub.
+  DIRECTORY_OWNER: string; // Public user for ATProtocol.
 }
 
 /**
···
 }
 
 /**
- * Represents a status update or a short message.
- */
-export interface StatusUpdate {
-  text: string; // The content of the status update.
-  createdAt: Date; // The date and time the status update was created.
-  tid: string; // A unique identifier for the status update.
-}
-
-/**
- * Properties for displaying recent content, possibly from a feed or similar source.
- */
-export interface RecentFMProps {
-    nomoji?: boolean; // Optional flag to disable emojis.
-    displayName?: string; // Optional display name.
-  }
-
-/**
- * Represents the result of the BlogService, containing posts, profile, and utility functions.
+ * Represents a user with basic details.
  */
-export interface BlogServiceResult {
-  posts: Map<string, Post>;
-  profile: Profile;
-  sortedPosts: Post[];
-  getPost: (rkey: string) => Post | null;
-  getAdjacentPosts: (rkey: string) => { previous: Post | null; next: Post | null };
+export interface User {
+  did: string;
+  handle?: string;
+  displayName?: string;
+  avatar?: string;
+  description?: string;
 }

src/lib/config/linkat-users.ts

···
+import { env } from "$env/dynamic/public";
+
+/**
+ * Configuration for Linkat users to display
+ * 
+ * Users can be configured via environment variables:
+ * - PUBLIC_LINKAT_USERS: Comma-separated list of DIDs (e.g., "did:plc:abc123,did:web:example.com")
+ * - DIRECTORY_OWNER: Primary user DID (fallback if no users configured)
+ * 
+ * Format: "did:plc:xxxxxxxxxxxxxxxxxxxxxxxx" or "did:web:xxxxxxxxxxxxxxxxxxxxxxxx"
+ * The first user will be treated as the primary user
+ */
+
+function parseUsersFromEnv(): string[] {
+  const users: string[] = [];
+  
+  // Always include DIRECTORY_OWNER as the primary user if configured
+  if (env.DIRECTORY_OWNER) {
+    users.push(env.DIRECTORY_OWNER);
+  }
+  
+  // Add additional users from PUBLIC_LINKAT_USERS, avoiding duplicates
+  if (env.PUBLIC_LINKAT_USERS) {
+    const envUsers = env.PUBLIC_LINKAT_USERS.split(',')
+      .map(did => did.trim())
+      .filter(did => did.startsWith('did:') && did !== env.DIRECTORY_OWNER);
+    users.push(...envUsers);
+  }
+  
+  return users;
+}
+
+export const LINKAT_USERS = parseUsersFromEnv();
+
+// Maximum number of users to display (1-10)
+export const MAX_USERS = 10;

src/lib/css/app.css

···
 @import "$css/variables.css";
 
-/* Minimalist flat styles with gentle dark pastel green theme */
+/* Linkat Directory - Core CSS Styles */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
 
-  /* Scrollbar styling */
+  /* Custom scrollbar styling for webkit browsers */
   ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
···
   body {
     background-color: var(--background-color);
     color: var(--text-color);
-    font-family: "Recursive", sans-serif;
-    font-variation-settings: "MONO" 0, "CASL" 0, "wght" 300, "slnt" 0,
-      "CRSV" 0.5;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   }
 
   h1 {
     @apply text-4xl font-bold;
-    font-variation-settings: "MONO" 0, "CASL" 0.8, "wght" 700, "slnt" 0,
-      "CRSV" 0.9;
   }
 
   h2 {
     @apply text-3xl font-bold;
-    font-variation-settings: "MONO" 0, "CASL" 0.7, "wght" 650, "slnt" 0,
-      "CRSV" 0.85;
   }
 
   h3 {
     @apply text-2xl font-bold;
-    font-variation-settings: "MONO" 0, "CASL" 0.6, "wght" 600, "slnt" 0,
-      "CRSV" 0.8;
   }
 
   h4 {
     @apply text-xl font-semibold;
-    font-variation-settings: "MONO" 0, "CASL" 0.5, "wght" 550, "slnt" 0,
-      "CRSV" 0.75;
   }
 
   h5 {
     @apply text-lg font-semibold;
-    font-variation-settings: "MONO" 0, "CASL" 0.4, "wght" 500, "slnt" 0,
-      "CRSV" 0.7;
   }
 
   h6 {
     @apply text-sm font-semibold;
-    font-variation-settings: "MONO" 0, "CASL" 0.3, "wght" 450, "slnt" 0,
-      "CRSV" 0.6;
   }
 
   a {
     @apply text-[var(--link-color)] hover:text-[var(--link-hover-color)] no-underline;
-    font-variation-settings: "MONO" 0, "CASL" 0, "wght" 450, "slnt" 0,
-      "CRSV" 0.5;
-    /* Reduced transition complexity */
+    /* Simplified hover transitions */
     transition: color 0.2s ease;
   }
 
   a:hover {
-    font-variation-settings: "MONO" 0, "CASL" 0, "wght" 600, "slnt" 0,
-      "CRSV" 0.5;
+    @apply font-semibold;
   }
 
   a,
···
     text-decoration: none !important;
   }
 
-  /* Last.FM info styles */
-  .recent-played {
-    @apply text-center;
-  }
-
-  .recent-track-info {
-    @apply space-y-0.5;
-  }
-
   /* Header links - simplified transitions */
   header a,
   a.font-medium {
···
     transform: scale(1.1);
   }
 
-  /* Typography styles for blog content */
+  /* Typography styles for blog/prose content using Tailwind Typography plugin */
   .prose {
     @apply max-w-none;
   }
···
     text-decoration: none;
   }
 
-  /* Update prose elements to use variables */
+  /* Prose element styling with CSS variables for theme consistency */
   .prose a {
     color: var(--link-color);
     text-decoration: none;
···
   .prose pre code {
     @apply bg-transparent p-0;
   }
-
-  /* Post grid and cards - simplified animations */
-  .post-card {
-    @apply border-0 rounded-none p-4 shadow-md;
-    background-color: var(--card-bg);
-    color: var(--text-color);
-    /* Only animate specific properties on hover */
-    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-  }
-
-  .post-card:hover {
-    background-color: var(--header-footer-bg);
-    transform: scale(1.05);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-  }
-
-  /* Profile banner - simplified */
-  .profile-banner {
-    @apply bg-cover bg-center rounded-md border-0;
-    transition: opacity 0.2s ease;
-  }
-
-  .profile-banner:hover {
-    opacity: 0.95;
-  }
-
-  /* Profile section elements */
-  .flex-wrap {
-    @apply gap-4 items-center;
-  }
-
-  div.items-center {
-    @apply p-3;
-  }
-
-  .rounded-full {
-    @apply shadow-none;
-    transition: transform 0.2s ease;
-  }
-
-  .rounded-full:hover {
-    transform: scale(1.05);
-  }
-
-  /* Account handle and related info */
-  h4.content-around,
-  h6.content-around {
-    @apply my-2 text-left;
-  }
-
-  /* Links styling within the profile section - simplified */
-  .profile-banner a,
-  .flex-wrap a,
-  div.items-center a,
-  h4.content-around a,
-  h6.content-around a {
-    @apply no-underline hover:no-underline inline-block;
-    color: var(--link-color);
-    transition: color 0.2s ease, transform 0.2s ease;
-  }
-
-  .profile-banner a:hover,
-  .flex-wrap a:hover,
-  div.items-center a:hover,
-  h4.content-around a:hover,
-  h6.content-around a:hover {
-    color: var(--link-hover-color);
-    transform: scale(1.1);
-  }
-
-  /* Remove any borders throughout profile section */
-  .profile-banner,
-  .profile-banner *,
-  .flex-wrap *,
-  div.items-center *,
-  .rounded-full,
-  h4.content-around *,
-  h6.content-around * {
-    @apply border-0;
-  }
-
-  /* Comments section styling */
-  :global(.comments-section) {
-    @apply mt-8 p-4 border-0 rounded-md bg-[var(--header-footer-bg)];
-  }
-
-  :global(.comments-section input, .comments-section button) {
-    @apply bg-[var(--button-bg)] border-0 rounded-sm;
-  }
-}
-
-.prose+.flex.justify-between {
-  @apply mt-12 mb-8;
-}
-
-.prose+.flex.justify-between a {
-  @apply max-w-[45%] truncate;
-}
-
-.prose+.flex.justify-between a:first-child {
-  @apply text-left;
-}
-
-.prose+.flex.justify-between a:last-child {
-  @apply text-right;
 }
 
 .text-link {

src/lib/css/variables.css

···
-/* Default mono theme - dark mode */
-:root {
-  font-family: sans-serif, system-ui;
-  --background-color: #1a1a1a;
-  --text-color: #f0f0f0;
-  --header-footer-bg: #2a2a2a;
-  --button-bg: #4a4a4a;
-  --button-hover-bg: #6a6a6a;
-  --link-color: #9a9a9a;
-  --link-hover-color: #b0b0b0;
-  --card-bg: #2a2a2a;
+@media (prefers-color-scheme: dark) {
+  /* Default mono theme - dark mode */
+  :root {
+    font-family: sans-serif, system-ui;
+    --background-color: #1a1a1a;
+    --text-color: #f0f0f0;
+    --header-footer-bg: #2a2a2a;
+    --button-bg: #4a4a4a;
+    --button-hover-bg: #6a6a6a;
+    --link-color: #9a9a9a;
+    --link-hover-color: #b0b0b0;
+    --card-bg: #2a2a2a;
+    --border-color: #404040;
+    --error-color: #ff6b6b;
+    --placeholder-color: #666666;
+    --secondary-text-color: #b0b0b0;
+    --muted-bg: #333333;
+  } 
 }
 
-/* Default mono theme - light mode */
-:root.light {
-  --background-color: #f0f0f0;
-  --text-color: #1a1a1a;
-  --header-footer-bg: #e0e0e0;
-  --button-bg: #b0b0b0;
-  --button-hover-bg: #9a9a9a;
-  --link-color: #6a6a6a;
-  --link-hover-color: #4a4a4a;
-  --card-bg: #e0e0e0;
+@media (prefers-color-scheme: light) {
+  /* Default mono theme - light mode */
+  :root {
+    --background-color: #f0f0f0;
+    --text-color: #1a1a1a;
+    --header-footer-bg: #e0e0e0;
+    --button-bg: #b0b0b0;
+    --button-hover-bg: #9a6a6a;
+    --link-color: #6a6a6a;
+    --link-hover-color: #4a4a4a;
+    --card-bg: #e0e0e0;
+    --border-color: #cccccc;
+    --error-color: #dc2626;
+    --placeholder-color: #999999;
+    --secondary-text-color: #4a4a4a;
+    --muted-bg: #d0d0d0;
+  }
 }

src/lib/themeLoader.ts

···
-import type { Theme } from "$components/shared/interfaces";
-
-// Theme configuration - single source of truth
-export const THEMES: Theme[] = [
-  { id: "default", name: "Green (Default)" },
-];
-
-export const THEME_STORAGE_KEYS = {
-  MODE: "theme-mode",
-  COLOR: "color-theme",
-} as const;
-
-export type ThemeMode = "light" | "dark";
-
-/**
- * Applies theme classes to the document element
- */
-export function applyTheme(isDarkMode: boolean, themeId: string): void {
-  // Remove all existing theme classes
-  document.documentElement.classList.remove("light");
-  THEMES.forEach((theme) => {
-    if (theme.id !== "default") {
-      document.documentElement.classList.remove(theme.id);
-    }
-  });
-
-  // Apply light mode class if needed
-  if (!isDarkMode) {
-    document.documentElement.classList.add("light");
-  }
-
-  // Apply color theme class if not default
-  if (themeId !== "default") {
-    document.documentElement.classList.add(themeId);
-  }
-}
-
-/**
- * Gets the user's theme preferences from localStorage and system
- */
-export function getThemePreferences(): { isDarkMode: boolean; themeId: string } {
-  const savedThemeMode = localStorage.getItem(THEME_STORAGE_KEYS.MODE);
-  const savedColorTheme = localStorage.getItem(THEME_STORAGE_KEYS.COLOR);
-
-  let isDarkMode: boolean;
-  if (savedThemeMode) {
-    isDarkMode = savedThemeMode === "dark";
-  } else {
-    // Use system preference as default
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    isDarkMode = prefersDark;
-  }
-
-  const themeId = savedColorTheme || "default";
-
-  return { isDarkMode, themeId };
-}
-
-/**
- * Saves theme preferences to localStorage
- */
-export function saveThemePreferences(isDarkMode: boolean, themeId: string): void {
-  localStorage.setItem(THEME_STORAGE_KEYS.MODE, isDarkMode ? "dark" : "light");
-  localStorage.setItem(THEME_STORAGE_KEYS.COLOR, themeId);
-}
-
-/**
- * Updates the theme-color meta tag for browser UI
- */
-export function updateThemeColorMeta(): void {
-  const themeColor = getComputedStyle(document.documentElement)
-    .getPropertyValue("--background-color")
-    .trim();
-
-  let metaTag = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement;
-  if (!metaTag) {
-    metaTag = document.createElement("meta");
-    metaTag.setAttribute("name", "theme-color");
-    document.head.appendChild(metaTag);
-  }
-  metaTag.setAttribute("content", themeColor);
-}
-
-/**
- * Dispatches a custom event when theme changes
- */
-export function dispatchThemeChangeEvent(isDarkMode: boolean, themeId: string): void {
-  document.dispatchEvent(
-    new CustomEvent("themeChanged", {
-      detail: { isDarkMode, theme: themeId },
-    })
-  );
-}
-
-/**
- * Sets up system theme change listener
- */
-export function setupSystemThemeListener(): void {
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", (e) => {
-      // Only apply system preference if user hasn't set a manual preference
-      if (localStorage.getItem(THEME_STORAGE_KEYS.MODE) === null) {
-        const { themeId } = getThemePreferences();
-        applyTheme(e.matches, themeId);
-        updateThemeColorMeta();
-        dispatchThemeChangeEvent(e.matches, themeId);
-      }
-    });
-}
-
-/**
- * Initializes theme system - should be called as early as possible
- */
-export function initializeTheme(): void {
-  const { isDarkMode, themeId } = getThemePreferences();
-  applyTheme(isDarkMode, themeId);
-  
-  // Update meta tag when DOM is ready
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", updateThemeColorMeta);
-  } else {
-    updateThemeColorMeta();
-  }
-}
-
-// Auto-initialize when script loads (for inline usage)
-if (typeof window !== "undefined") {
-  initializeTheme();
-}

src/lib/utils/formatters.ts

···
-/**
- * Returns the ordinal suffix for a given number (e.g., "st", "nd", "rd", "th").
- * @param num The number to get the ordinal suffix for.
- * @returns The ordinal suffix.
- */
-export function getOrdinalSuffix(num: number): string {
-  const lastDigit = num % 10;
-  const lastTwoDigits = num % 100;
-
-  if (lastTwoDigits >= 11 && lastTwoDigits <= 13) {
-    return 'th';
-  }
-
-  switch (lastDigit) {
-    case 1:
-      return 'st';
-    case 2:
-      return 'nd';
-    case 3:
-      return 'rd';
-    default:
-      return 'th';
-  }
-}
-
-export function formatDate(
-  date: Date | string,
-  locale: string = typeof window !== "undefined"
-    ? window.navigator.language
-    : "en-GB"
-): string {
-  const dateObj = new Date(date);
-
-  const options: Intl.DateTimeFormatOptions = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  };
-
-  const formattedDate = new Intl.DateTimeFormat(locale, options).format(
-    dateObj
-  );
-
-  // Only add ordinal suffix for English locales
-  if (locale.startsWith("en")) {
-    const day = dateObj.getDate();
-    return formattedDate.replace(/(\d+)/, `$1${getOrdinalSuffix(day)}`);
-  }
-
-  return formattedDate;
-}
-
-export function formatMonthYear(
-  date: Date | string,
-  locale: string = typeof window !== "undefined"
-    ? window.navigator.language
-    : "en-GB"
-): string {
-  const dateObj = new Date(date);
-
-  const options: Intl.DateTimeFormatOptions = {
-    year: "numeric",
-    month: "long",
-  };
-
-  return new Intl.DateTimeFormat(locale, options).format(dateObj);
-}
-
-// Function to format a date relative to the current time (e.g., '2 hours ago')
-export function formatRelativeTime(
-  date: Date | string,
-  locale: string = typeof window !== "undefined"
-    ? window.navigator.language
-    : "en-GB"
-): string {
-  const dateObj = new Date(date);
-  const now = new Date();
-  const diffInSeconds = Math.round((now.getTime() - dateObj.getTime()) / 1000);
-
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-
-  const units: { unit: Intl.RelativeTimeFormatUnit; seconds: number }[] = [
-    { unit: "year", seconds: 31536000 },
-    { unit: "month", seconds: 2592000 },
-    { unit: "week", seconds: 604800 },
-    { unit: "day", seconds: 86400 },
-    { unit: "hour", seconds: 3600 },
-    { unit: "minute", seconds: 60 },
-    { unit: "second", seconds: 1 },
-  ];
-
-  for (const { unit, seconds } of units) {
-    if (Math.abs(diffInSeconds) >= seconds) {
-      const value = Math.round(diffInSeconds / seconds);
-      return rtf.format(-value, unit);
-    }
-  }
-
-  return rtf.format(0, "second"); // Should ideally not happen if date is in the past
-}
-
-/**
- * Formats a number according to the specified locale and options.
- * @param value The number to format.
- * @param locale The locale to use for formatting (e.g., 'en-GB', 'en-US'). Defaults to 'en-GB'.
- * @param options Options for number formatting, conforming to Intl.NumberFormatOptions.
- * @returns The formatted number string.
- */
-export function formatNumber(value: number, locale: string = 'en-GB', options?: Intl.NumberFormatOptions): string {
-  if (typeof value !== 'number') {
-    return String(value); // Return as string if not a number
-  }
-  try {
-    return new Intl.NumberFormat(locale, options).format(value);
-  } catch (error) {
-    console.error(`Error formatting number for locale ${locale}:`, error);
-    return value.toLocaleString(locale); // Fallback to basic toLocaleString on error
-  }
-}

src/lib/utils/milestones.ts

···
-import { formatNumber, getOrdinalSuffix } from './formatters';
-
-
-export interface Milestone {
-  text: string;
-  emoji: string;
-  type: 'special' | 'major' | 'minor';
-}
-
-/**
- * Determines if a post number represents a milestone and returns milestone info
- */
-export function getMilestone(postNumber: number): Milestone | null {
-  // Special milestones defined in a more maintainable structure.
-  const specialMilestones: { number: number; text: string; emoji: string; }[] = [
-    { number: 1, text: "First Post!", emoji: "🎉" },
-    { number: 100, text: "Centennial Post!", emoji: "💯" },
-    { number: 365, text: "Daily Dose Complete!", emoji: "�" },
-    { number: 500, text: "Half Thousand!", emoji: "🏆" },
-    { number: 1000, text: "One Thousand Posts!", emoji: "🌟" },
-    { number: 10000, text: "Ten Thousand Posts!", emoji: "🚀" },
-    { number: 200, text: "Double Century!", emoji: "🎉🎉" },
-    { number: 250, text: "Quarter Thousand!", emoji: "✨✨" },
-    { number: 750, text: "Three-Quarter Thousand!", emoji: "💫💫" },
-  ];
-
-  for (const milestone of specialMilestones) {
-    if (postNumber === milestone.number) {
-      return {
-        text: milestone.text,
-        emoji: milestone.emoji,
-        type: 'special'
-      };
-    }
-  }
-  
-  // Major milestones (every 50 posts after 100)
-  if (postNumber > 100 && postNumber % 250 === 0) {
-    return {
-      text: `${formatNumber(postNumber)} Posts!`,
-      emoji: "�",
-      type: 'major'
-    };
-  }
-
-  if (postNumber > 100 && postNumber % 50 === 0) {
-    return {
-      text: `${formatNumber(postNumber)} Posts!`,
-      emoji: "🎯",
-      type: 'major'
-    };
-  }
-
-  // Specific major milestone that doesn't fit the general rule.
-  if (postNumber === 150) {
-    return {
-      text: "One Hundred Fifty Posts!",
-      emoji: "🎉",
-      type: 'major'
-    };
-  }
-  
-  // Minor milestones (every 10 posts, but not major milestones).
-  // This check should come after special and major milestones to ensure correct precedence.
-  if (postNumber % 10 === 0 && postNumber % 50 !== 0) {
-    const ordinal = getOrdinal(postNumber);
-    return {
-      text: `${ordinal} Post!`,
-      emoji: "✨",
-      type: 'minor'
-    };
-  }
-  
-  // Very special fun ones that are not part of the main special milestones array.
-  const funMilestones: { number: number; text: string; emoji: string; }[] = [
-    { number: 404, text: "Post Not Found!", emoji: "🔍" },
-    { number: 123, text: "One Two Three!", emoji: "🔢" },
-    { number: 333, text: "Triple Three!", emoji: "✨✨✨" },
-  ];
-
-  for (const milestone of funMilestones) {
-    if (postNumber === milestone.number) {
-      return {
-        text: milestone.text,
-        emoji: milestone.emoji,
-        type: 'special'
-      };
-    }
-  }
-  
-  return null;
-}
-
-/**
- * Converts a number to its ordinal form (1st, 2nd, 3rd, etc.)
- */
-function getOrdinal(num: number): string {
-  const formatted = formatNumber(num);
-  return formatted + getOrdinalSuffix(num);
-}

src/lib/utils/tally.ts

···
-/**
- * Calculates the total read time for a given array of posts.
- * Assumes an average reading speed of 200 words per minute.
- * @param posts - An array of post objects, each with a 'wordCount' property.
- * @returns The total read time in minutes, rounded up.
- */
-export function calculateTotalReadTime(posts: { wordCount: number }[]): number {
-  return posts.reduce((total, post) => {
-    return total + Math.ceil(post.wordCount / 200);
-  }, 0);
-}
-
-/**
- * Calculates the total word count for a given array of posts.
- * @param posts - An array of post objects, each with a 'wordCount' property.
- * @returns The total word count.
- */
-export function calculateTotalWordCount(posts: { wordCount: number }[]): number {
-  return posts.reduce((total, post) => total + post.wordCount, 0);
-}
-
-/**
- * Formats a given number of minutes into a human-readable string (e.g., "2 hours", "3 days").
- * @param minutes - The total number of minutes.
- * @returns A formatted string representing the time.
- */
-export function formatReadTime(minutes: number): string {
-  if (minutes < 60) {
-    return `${minutes} min`;
-  } else if (minutes < 60 * 24) {
-    const hours = Math.round(minutes / 60);
-    return `${hours} hour${hours === 1 ? '' : 's'}`;
-  } else if (minutes < 60 * 24 * 7) {
-    const days = Math.round(minutes / (60 * 24));
-    return `${days} day${days === 1 ? '' : 's'}`;
-  } else {
-    const weeks = Math.round(minutes / (60 * 24 * 7));
-    return `${weeks} week${weeks === 1 ? '' : 's'}`;
-  }
-}

src/lib/utils/textProcessor.ts

···
-import remarkParse from "remark-parse";
-import remarkGfm from "remark-gfm";
-import remarkRehype from "remark-rehype";
-import rehypeStringify from "rehype-stringify";
-import { unified } from "unified";
-import type { Node } from "unist";
-
-type TextNode = Node & { type: "text"; value: string };
-type ParentNode = Node & { children: Node[] };
-
-/**
- * Extracts plain text from markdown content and truncates it to a specified length.
- * @param markdown The markdown content to process.
- * @param maxLength The maximum length of the extracted text (default: 160).
- * @returns A promise that resolves to the extracted and truncated plain text.
- */
-export async function extractTextFromMarkdown(
-  markdown: string,
-  maxLength: number = 160
-): Promise<string> {
-  // Process the markdown to get plain text
-  const plainText = String(
-    await unified()
-      .use(remarkParse, { fragment: true })
-      .use(remarkGfm)
-      .use(() => (tree) => {
-        // Simple transformer that visits all nodes and removes everything but text
-        const visit = (node: Node): string => {
-          if (node.type === "text") {
-            const textNode = node as TextNode;
-            return textNode.value;
-          }
-          if ("children" in node) {
-            const parentNode = node as ParentNode;
-            return parentNode.children.map(visit).filter(Boolean).join(" ");
-          }
-          return "";
-        };
-
-        // Replace tree with just text content
-        return {
-          type: "root",
-          children: [{ type: "text", value: visit(tree) }],
-        };
-      })
-      .use(remarkRehype)
-      .use(rehypeStringify)
-      .process(markdown)
-  );
-
-  // Clean up the text
-  let cleaned = plainText.replace(/\s+/g, " ").trim();
-
-  // Truncate to maxLength if necessary
-  if (cleaned.length > maxLength) {
-    cleaned = cleaned.substring(0, maxLength) + "...";
-  }
-
-  return cleaned;
-}
-
-/**
- * Calculates the word count of a given string.
- * @param text The input string.
- * @returns The number of words in the string.
- */
-export function calculateWordCount(text: string): number {
-  return text.split(/\s+/).filter((word) => word.length > 0).length;
-}

src/routes/+layout.svelte

···
 <script lang="ts">
   import "$css/app.css";
-  import { getStores } from "$app/stores";
-  const { page } = getStores();
-  import Profile from "$components/profile/Profile.svelte";
-  import { Navigation, Footer } from "$components/layout";
+  import { Footer } from "$components/layout";
+  import DirectoryHeader from "$lib/components/layout/DirectoryHeader.svelte";
 
   let { data, children } = $props();
-
-  // Check if we're on the home page or blog page using $derived
-  const showProfile = $derived(
-    $page.route.id ? ["/", "/blog"].includes($page.route.id) : false
-  );
-  const isHomePage = $derived($page.route.id === "/");
-  const isBlogIndex = $derived($page.route.id === "/blog");
 </script>
 
-<div class="box-border mx-auto px-4 sm:px-8 max-w-[1000px] pb-8">
-  <Navigation {isHomePage} {isBlogIndex} />
-
-  {#if showProfile}
-    <Profile profile={data.profile} />
-  {/if}
-
-  {@render children()}
+<div class="min-h-screen">
+  <DirectoryHeader />
+  
+  <div class="box-border mx-auto px-4 sm:px-8 max-w-[1000px] pb-8">
+    {@render children()}
 
-  <Footer profile={data.profile} posts={data.posts} />
+    <Footer profile={data.profile} posts={data.posts} />
+  </div>
 </div>

src/routes/+layout.ts

···
-import { getProfile } from "$components/profile/profile";
-import { getLatestPosts } from "$services/blogService";
+import { getProfile, safeFetch } from "$components/profile/profile";
 import type { Profile, LinkBoard } from "$components/shared";
+import { LINKAT_USERS } from "$lib/config/linkat-users";
+import { env } from "$env/dynamic/public";
 
 // Profile data cache
-let profile: Profile;
+let profile: Profile | undefined;
 let dynamicLinks: LinkBoard | undefined;
 
 export async function load({ fetch }) {
-  if (profile === undefined) {
-    profile = await getProfile(fetch);
+  const userDids = LINKAT_USERS;
+  
+  // If no users configured, return empty state
+  if (userDids.length === 0) {
+    return {
+      profile: null,
+      pdsUrl: null,
+      did: null,
+      posts: new Map(),
+      dynamicLinks: null,
+      userLinkBoards: {},
+      linkatUsers: [],
+      noUsersConfigured: true,
+    };
+  }
+  
+  // Use the first user as primary if not already cached
+  const primaryUserDid = userDids[0];
+  if (!profile || profile.did !== primaryUserDid) {
+    // Create a mock profile if we can't fetch the real one
+    try {
+      // Temporarily set env to the primary user for getProfile
+      const originalEnv = env.DIRECTORY_OWNER;
+      env.DIRECTORY_OWNER = primaryUserDid;
+      profile = await getProfile(fetch);
+      if (originalEnv) env.DIRECTORY_OWNER = originalEnv;
+    } catch (error) {
+      console.error("Error fetching primary user profile:", error);
+      // Create fallback profile
+      profile = {
+        avatar: "",
+        banner: "",
+        displayName: "Linkat User",
+        did: primaryUserDid,
+        handle: primaryUserDid,
+        description: "Linkat directory user",
+        pds: "https://bsky.social",
+      };
+    }
   }
 
-  // Fetch dynamic links only if not already cached
-  if (dynamicLinks === undefined) {
+  const userLinkBoards: { [did: string]: LinkBoard | undefined } = {};
+  
+  // Fetch dynamic links for all configured users
+  for (const userDid of userDids) {
     try {
-      const rawResponse = await fetch(
-        `${profile.pds}/xrpc/com.atproto.repo.listRecords?repo=${profile.did}&collection=blue.linkat.board&rkey=self`
-      );
-      const response = await rawResponse.json();
-      if (response && response.records && response.records.length > 0) {
-        dynamicLinks = response.records[0].value as LinkBoard;
+      // Get user's PDS
+      const split = userDid.split(":");
+      let pdsurl;
+      if (split[0] === "did") {
+        if (split[1] === "plc") {
+          const diddoc = await safeFetch(`https://plc.directory/${userDid}`, fetch);
+          for (const service of diddoc["service"]) {
+            if (service["id"] === "#atproto_pds") {
+              pdsurl = service["serviceEndpoint"];
+              break;
+            }
+          }
+        } else if (split[1] === "web") {
+          pdsurl = `https://${split[2]}`;
+        }
+      }
+      
+      if (pdsurl) {
+        const rawResponse = await fetch(
+          `${pdsurl}/xrpc/com.atproto.repo.listRecords?repo=${userDid}&collection=blue.linkat.board&rkey=self`
+        );
+        const response = await rawResponse.json();
+        if (response && response.records && response.records.length > 0) {
+          userLinkBoards[userDid] = response.records[0].value as LinkBoard;
+        }
       }
     } catch (error) {
-      console.error("Error fetching dynamic links:", error);
+      console.error(`Error fetching dynamic links for ${userDid}:`, error);
     }
   }
 
-  // Fetch latest blog posts using the consolidated service
-  const latestPosts = await getLatestPosts(fetch, 3);
+  // For backward compatibility, keep the single dynamicLinks
+  dynamicLinks = profile ? userLinkBoards[profile.did] : undefined;
 
   return {
     profile,
-    pdsUrl: profile.pds,
-    did: profile.did,
-    posts: new Map(), // Keep this for compatibility with existing Footer component
+    pdsUrl: profile?.pds,
+    did: profile?.did,
+    posts: new Map(),
     dynamicLinks,
-    latestPosts,
+    userLinkBoards,
+    linkatUsers: userDids,
+    noUsersConfigured: false,
   };
 }

src/routes/+page.svelte

···
   import { onMount } from "svelte";
   import { getStores } from "$app/stores";
   const { page } = getStores();
-  import { DynamicLinks, LatestBlogPost } from "$components/layout/main";
+  import UserDirectory from "$lib/components/archive/UserDirectory.svelte";
+  import DynamicHead from "$lib/components/layout/DynamicHead.svelte";
 
   let { data } = $props();
 
···
       localeLoaded = true;
     }, 10);
   });
-</script>
 
-<svelte:head>
-  <title>Site Name</title>
-  <meta
-    name="description"
-    content="Welcome to Site Name - A personal space where I share my thoughts on coding, technology, and life."
-  />
-  <meta
-    name="keywords"
-    content="Ewan, personal website, coding, technology, programming, tech blog, Site Name"
-  />
+  import { getProfile } from "$lib/components/profile/profile";
+  let profile = $state<{ displayName?: string; handle?: string } | null>(null);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
 
-  <!-- Open Graph / Facebook -->
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page.url.origin + $page.url.pathname} />
-  <meta property="og:title" content="Site Title" />
-  <meta
-    property="og:description"
-    content="Welcome to Site Name - A personal space where I share my thoughts on coding, technology, and life."
-  />
-  <meta property="og:site_name" content="Site Name" />
-  {#if $page.url.origin}
-    <meta property="og:image" content={$page.url.origin + "/embed/main.png"} />
-{/if}
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="630" />
+  $effect(() => {
+    if (import.meta.env.DIRECTORY_OWNER) {
+      loading = true;
+      getProfile(fetch)
+        .then((p) => {
+          profile = p;
+          error = null;
+        })
+        .catch((err) => {
+          console.error('Failed to load profile:', err);
+          error = err.message;
+          profile = null;
+        })
+        .finally(() => {
+          loading = false;
+        });
+    } else {
+      loading = false;
+    }
+  });
+</script>
 
-  <!-- Twitter -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:url" content={$page.url.origin + $page.url.pathname} />
-  <meta name="twitter:title" content="Site Title" />
-  <meta
-    name="twitter:description" content="A personal space where I share my thoughts on coding, technology, and life."
-  />
-  {#if $page.url.origin}
-    <meta name="twitter:image" content={$page.url.origin + "/embed/main.png"} />
-{/if}
-</svelte:head>
-
-<!-- Latest Blog Post section (only show if we have posts) -->
-{#if data.latestPosts && data.latestPosts.length > 0}
-  <LatestBlogPost posts={data.latestPosts} {localeLoaded} />
-{/if}
+<DynamicHead
+  title={profile?.displayName || "Linkat Directory"}
+  description={profile?.displayName ? `Discover users' links curated by ${profile.displayName}` : "Discover amazing users curated by the Linkat community"}
+  keywords={`Linkat, directory, links, Bluesky, community, curation${profile?.displayName ? `, ${profile.displayName}` : ''}`}
+  ogTitle={profile?.displayName || "Linkat Directory"}
+  ogDescription={profile?.displayName ? `Discover users' links curated by ${profile.displayName}` : "Discover amazing users' links curated by the Linkat community"}
+  twitterTitle={profile?.displayName || "Linkat Directory"}
+  twitterDescription={profile?.displayName ? `Discover users' links curated by ${profile.displayName}` : "Discover amazing users' links curated by the Linkat community"}
+/>
 
-<DynamicLinks data={data.dynamicLinks} />
+<div class="container mx-auto px-4 py-8">
+  {#if data.noUsersConfigured}
+    <div class="text-center py-12">
+      <div class="max-w-md mx-auto">
+        <p class="text-lg mb-4 opacity-75">
+          Welcome to Linkat Directory! No users are currently configured.
+        </p>
+        <div class="bg-[var(--muted-bg)] rounded-lg p-6 text-left">
+          <h3 class="font-semibold mb-2">To get started:</h3>
+          <ol class="list-decimal list-inside space-y-2 text-sm">
+            <li>Create a <code>.env</code> file in your project root</li>
+            <li>Add your user DID: <code>DIRECTORY_OWNER=did:plc:your-did-here</code></li>
+            <li>Or add multiple users: <code>PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2</code></li>
+            <li>Restart the development server</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  {:else}
+    <UserDirectory users={data.linkatUsers.map(did => ({ did }))} />
+  {/if}
+</div>

src/routes/user/[did]/+layout.ts

···
+import type { LayoutLoad } from "./$types";
+
+export const load: LayoutLoad = async ({ params, fetch }) => {
+  const { did } = params;
+
+  try {
+    // Fetch user profile
+    const profileResponse = await fetch(
+      `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${did}`
+    );
+    
+    if (!profileResponse.ok) {
+      return {
+        did,
+        profile: null,
+        dynamicLinks: undefined,
+        error: "User not found"
+      };
+    }
+    
+    const profile = await profileResponse.json();
+
+    // Get user's PDS and fetch Linkat links
+    const split = did.split(":");
+    let pdsurl: string | null = null;
+    let dynamicLinks = undefined;
+
+    if (split[0] === "did") {
+      if (split[1] === "plc") {
+        const diddocResponse = await fetch(`https://plc.directory/${did}`);
+        if (diddocResponse.ok) {
+          const diddoc = await diddocResponse.json();
+          for (const service of diddoc["service"] || []) {
+            if (service["id"] === "#atproto_pds") {
+              pdsurl = service["serviceEndpoint"];
+              break;
+            }
+          }
+        }
+      } else if (split[1] === "web") {
+        pdsurl = `https://${split[2]}`;
+      }
+    }
+
+    if (pdsurl) {
+      try {
+        const linksResponse = await fetch(
+          `${pdsurl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=blue.linkat.board&rkey=self`
+        );
+        
+        if (linksResponse.ok) {
+          const result = await linksResponse.json();
+          if (result.records && result.records.length > 0) {
+            dynamicLinks = result.records[0].value;
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching dynamic links:", error);
+      }
+    }
+
+    return {
+      did,
+      profile,
+      dynamicLinks,
+      error: null
+    };
+  } catch (error) {
+    return {
+      did,
+      profile: null,
+      dynamicLinks: undefined,
+      error: error instanceof Error ? error.message : "An error occurred"
+    };
+  }
+};

src/routes/user/[did]/+page.svelte

···
+<script lang="ts">
+  import DynamicLinks from "$lib/components/layout/main/DynamicLinks.svelte";
+  import DynamicHead from "$lib/components/layout/DynamicHead.svelte";
+  import { getStores } from "$app/stores";
+  const { page } = getStores();
+  
+  let { data } = $props();
+  
+  let profile = $derived(data.profile);
+  let dynamicLinks = $derived(data.dynamicLinks);
+  let error = $derived(data.error);
+  let did = $derived(data.did);
+</script>
+
+<DynamicHead
+  title={profile?.displayName || did + " - Linkat Directory"}
+  description={"View " + (profile?.displayName || did) + "'s curated Linkat links"}
+  ogTitle={profile?.displayName || did + " - Linkat Directory"}
+  ogDescription={"View " + (profile?.displayName || did) + "'s curated Linkat links"}
+  twitterTitle={profile?.displayName || did + " - Linkat Directory"}
+  twitterDescription={"View " + (profile?.displayName || did) + "'s curated Linkat links"}
+  keywords={`Linkat, directory, links, Bluesky, curation, ${profile?.displayName || did}`}
+/>
+
+<div class="container mx-auto px-4 py-8">
+  {#if error}
+    <div class="text-center py-8">
+      <h1 class="text-2xl font-bold mb-4">Error</h1>
+      <p class="text-[var(--error-color)]">{error}</p>
+    </div>
+  {:else if !profile}
+    <div class="text-center py-8">
+      <h1 class="text-2xl font-bold mb-4">User Not Found</h1>
+      <p class="text-[var(--placeholder-color)]">The user with DID {did} was not found.</p>
+    </div>
+  {:else}
+    <div class="max-w-4xl mx-auto">
+      <!-- Profile Header -->
+      <div class="bg-[var(--card-bg)] rounded-lg shadow-md p-6 mb-6">
+        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-4">
+          {#if profile.avatar}
+            <img 
+              src={profile.avatar} 
+              alt={profile.displayName || profile.handle}
+              class="w-20 h-20 rounded-full object-cover"
+            />
+          {:else}
+            <div class="w-20 h-20 rounded-full bg-[var(--muted-bg)] flex items-center justify-center">
+              <span class="text-3xl font-bold text-[var(--text-color)]">
+                {(profile.displayName || profile.handle || '?').charAt(0).toUpperCase()}
+              </span>
+            </div>
+          {/if}
+          
+          <div class="text-center sm:text-left">
+            <h1 class="text-2xl font-bold">{profile.displayName || profile.handle}</h1>
+            <p class="text-[var(--secondary-text-color)]">@{profile.handle}</p>
+            <code class="text-[var(--secondary-text-color)] text-sm">{did}</code>
+            {#if profile.description}
+              <p class="text-[var(--text-color)] mt-2">{profile.description}</p>
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <!-- Links Section -->
+      <div class="bg-[var(--card-bg)] rounded-lg shadow-md p-6">
+        <h2 class="text-xl font-bold mb-4">Links</h2>
+        <DynamicLinks data={dynamicLinks} />
+      </div>
+    </div>
+  {/if}
+</div>

static/.well-known/atproto-did

···
-placeholder - replace with your DID

static/scripts/themeLoader.js

···
-// Inline theme loader - compiled from themeLoader.ts
-// This runs immediately when the script loads
-(function() {
-  'use strict';
-  
-  // Theme configuration - single source of truth
-  const THEMES = [
-    { id: "default", name: "Green (Default)" }
-  ];
-
-  const THEME_STORAGE_KEYS = {
-    MODE: "theme-mode",
-    COLOR: "color-theme",
-  };
-
-  /**
-   * Applies theme classes to the document element
-   */
-  function applyTheme(isDarkMode, themeId) {
-    // Remove all existing theme classes
-    document.documentElement.classList.remove("light");
-    THEMES.forEach((theme) => {
-      if (theme.id !== "default") {
-        document.documentElement.classList.remove(theme.id);
-      }
-    });
-
-    // Apply light mode class if needed
-    if (!isDarkMode) {
-      document.documentElement.classList.add("light");
-    }
-
-    // Apply color theme class if not default
-    if (themeId !== "default") {
-      document.documentElement.classList.add(themeId);
-    }
-  }
-
-  /**
-   * Gets the user's theme preferences from localStorage and system
-   */
-  function getThemePreferences() {
-    const savedThemeMode = localStorage.getItem(THEME_STORAGE_KEYS.MODE);
-    const savedColorTheme = localStorage.getItem(THEME_STORAGE_KEYS.COLOR);
-
-    let isDarkMode;
-    if (savedThemeMode) {
-      isDarkMode = savedThemeMode === "dark";
-    } else {
-      // Use system preference as default
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      isDarkMode = prefersDark;
-    }
-
-    const themeId = savedColorTheme || "default";
-
-    return { isDarkMode, themeId };
-  }
-
-  /**
-   * Initializes theme system - runs immediately
-   */
-  function initializeTheme() {
-    const { isDarkMode, themeId } = getThemePreferences();
-    applyTheme(isDarkMode, themeId);
-  }
-
-  // Initialize theme immediately
-  initializeTheme();
-  
-  // Make theme functions available globally for the Svelte component
-  window.__themeLoader = {
-    THEMES,
-    THEME_STORAGE_KEYS,
-    applyTheme,
-    getThemePreferences,
-    initializeTheme
-  };
-})();

svelte.config.js

···
 			'$css': './src/lib/css',
 			'$services': './src/lib/services',
 			'$utils': './src/lib/utils'
+		},
+		env: {
+			publicPrefix: ''
 		}
 	}
 };