Added demo profile page

body {

  background: var(--background);

  color: var(--foreground);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  font-family:

    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,

    Cantarell, sans-serif;

}

@layer components {

  .profile-container {

    @apply mx-auto flex h-svh max-w-4xl flex-col content-center justify-center p-8;

  }

  .profile-header {

    @apply mb-8 flex gap-8 rounded-2xl p-8 text-white;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  }

  .avatar-section {

    @apply flex-shrink-0;

  }

  .avatar {

    @apply mx-auto h-30 w-30 rounded-full object-cover;

    border: 4px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

  }

  .user-info {

    @apply flex flex-1 flex-col justify-center;

  }

  .user-name {

    @apply mb-2 text-4xl font-bold;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    margin: 0 0 0.5rem 0;

  }

  .user-handle {

    @apply mb-4 text-xl font-medium;

    opacity: 0.9;

  }

  .user-bio {

    @apply text-lg leading-relaxed;

    opacity: 0.95;

    margin: 0;

  }

  .profile-content {

    @apply grid gap-8;

  }

  .info-card {

    @apply rounded-xl border bg-background p-8 text-foreground;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    border-color: rgba(0, 0, 0, 0.05);

  }

  .info-card h3 {

    @apply mb-6 text-2xl font-semibold;

    margin: 0 0 1.5rem 0;

  }

  .info-grid {

    @apply grid gap-4;

  }

  .info-item {

    @apply flex flex-col justify-between border-b py-3;

    border-color: rgba(0, 0, 0, 0.05);

  }

  .info-item:last-child {

    @apply border-b-0;

  }

  .info-label {

    @apply text-sm font-semibold;

    color: color-mix(in srgb, var(--foreground) 60%, transparent);

  }

  .fedify-anchor {

    @apply h-6 rounded-md bg-sky-300 px-1 py-0.5 font-medium text-white;

    &:before {

      @apply mr-1 mb-1 inline-block size-4 align-middle;

      content: "";

      background-image: url("/fedify-logo.svg");

      background-size: 16px 16px;

    }

  }

  /* 반응형 스타일 */

  @media (max-width: 768px) {

    .profile-container {

      @apply p-4;

    }

    .profile-header {

      @apply flex-col content-center gap-4 text-center;

    }

    .user-name {

      @apply text-3xl;

    }

    .info-item {

      @apply flex-col items-start gap-1;

    }

  }

}

          alt="Next.js"

          class="inline-block w-24"

        />

      </a></span

    >

      </a>

    </span>

  </div>

  <p>

    This small federated server app is a demo of

    <a href="https://fedify.dev" class="text-blue-600">

      <img

        src="/fedify-logo.svg"

        alt="Fedify logo"

        class="inline w-4 pb-1"

      />Fedify</a

    <a href="https://fedify.dev" class="fedify-anchor" target="_blank">Fedify</a

    >. The only one thing it does is to accept follow requests.

  </p>

  <p>

<script lang="ts">

  import type { PageProps } from "./$types";

  import { browser } from "$app/environment";

  import type { Person } from "@fedify/fedify";

  let { params }: PageProps = $props();

  const { identifier } = params;

  $effect(() => {

    console.log(identifier);

  });

  const data = browser

    ? fetch(`/users/${identifier}`, {

        headers: { Accept: "application/activity+json" },

      }).then(

        (res) => res.json() as Promise<Person & { icon: { url: string } }>,

      )

    : Promise.resolve(null);

</script>

{#await data}

  <!-- promise is pending -->

  <div class="flex h-svh w-svw items-center justify-center">

    <svg

      class="mr-3 -ml-1 size-24 animate-spin text-blue-500"

      xmlns="http://www.w3.org/2000/svg"

      fill="none"

      viewBox="0 0 24 24"

      ><circle

        class="opacity-25"

        cx="12"

        cy="12"

        r="10"

        stroke="currentColor"

        stroke-width="4"

      ></circle><path

        class="opacity-75"

        fill="currentColor"

        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"

      ></path></svg

    >

  </div>

{:then user}

  {#if user}

    <div class="profile-container">

      <div class="profile-header">

        <div class="avatar-section">

          <img

            src={user.icon?.url ?? "/demo-profile.png"}

            alt="{user.name}'s profile"

            class="avatar"

          />

        </div>

        <div class="user-info">

          <h1 class="user-name">{user.name}</h1>

          <p class="user-handle">@{identifier}@{window.location.host}</p>

          {#if user.summary}

            <p class="user-bio">{user.summary}</p>

          {/if}

        </div>

      </div>

      <div class="profile-content">

        <div class="info-card">

          <h3>Profile Information</h3>

          <div class="info-grid">

            <div class="info-item">

              <span class="info-label">Information</span>

              <span class="info-value"

                >This profile is demo for

                <a

                  href="https://fedify.dev"

                  class="fedify-anchor"

                  target="_blank"

                >

                  Fedify

                </a>–<a href="https://svelte.dev/">

                  <img

                    src="/svelte-horizontal.svg"

                    alt="Next.js"

                    class="inline-block h-5"

                  />

                </a> integration.

              </span>

            </div>

          </div>

        </div>

      </div>

    </div>

  {/if}

{:catch}

  <h1>404 Not found</h1>

{/await}

  // Consult https://svelte.dev/docs/kit/integrations

  // for more information about preprocessors

  preprocess: vitePreprocess(),

  kit: {

    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.

    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.