Create index

2025-01-06 19:02:24 +09:00
1 parent a3335d1583
commit 1db48b4c9a
@@ -0,0 +1,25 @@
+{
+	// Place your cannorin.net workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+  "Import Simple Icon": {
+    "scope": "javascript,typescript,svelte",
+    "prefix": "importSi",
+    "body": [
+      "import Si${1:name} from \"@icons-pack/svelte-simple-icons/icons/Si${1:name}\";"
+    ]
+  }
+}
@@ -0,0 +1,5 @@
+# run `yarn gen:env` at the project root to generate
+
+PUBLIC_WEB_DOMAIN="www.cannorin.net"
+PUBLIC_WEB_TURNSTILE_SITEKEY="1x00000000000000000000BB"
+WEB_TURNSTILE_SECRET_KEY="1x0000000000000000000000000000000AA"
@@ -14,6 +14,7 @@
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "3.3.1",
+    "@sveltejs/enhanced-img": "0.4.4",
    "@sveltejs/kit": "2.15.1",
    "@sveltejs/vite-plugin-svelte": "4.0.4",
    "autoprefixer": "10.4.20",
@@ -24,6 +25,12 @@
    "vite": "5.4.11"
  },
  "dependencies": {
-    "@tailwindcss/typography": "0.5.15"
+    "@fontsource/poiret-one": "5.1.1",
+    "@fontsource/zen-kaku-gothic-new": "5.1.1",
+    "@icons-pack/svelte-simple-icons": "4.0.1",
+    "@tailwindcss/typography": "0.5.15",
+    "deepmerge": "4.3.1",
+    "svelte-seo": "1.6.1",
+    "tailwind-merge": "2.6.0"
  }
 }
@@ -1,3 +1,48 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
+
+@layer base {
+  :root {
+    --foreground: 55 65 81 /* #374151 */;
+    --background: 250 250 250 /* #fafafa */;
+
+    --muted: 174 174 174 /* #aeaeae */;
+    --muted-foreground: 31 31 31 /* #1f1f1f */;
+
+    --popover: 245 248 255;
+    --popover-foreground: 12 0 0;
+
+    --card: 245 248 255;
+    --card-foreground: 12 0 0;
+
+    --border: 55 65 81 /* #374151 */;
+    --input: 55 65 81 /* #374151 */;
+    --ring: 55 65 81 /* #374151 */;
+
+    --primary: 219 96 114 /* DB6072 */;
+    --primary-foreground: 31 31 31 /* #1f1f1f */;
+
+    --secondary: 120 153 212 /* 7899D4 */;
+    --secondary-foreground: 31 31 31 /* #1f1f1f */;
+
+    --accent: 120 153 212 /* 7899D4 */;
+    --accent-foreground: 31 31 31 /* #1f1f1f */;
+
+    --destructive: 219 96 114 /* DB6072 */;
+    --destructive-foreground: 31 31 31 /* #1f1f1f */;
+
+    color-scheme: only light;
+    scrollbar-gutter: stable;
+    padding-left: calc(100vw - 100%);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground min-h-screen flex flex-col justify-normal;
+  }
+}
@@ -1,12 +1,15 @@
 <!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  %sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+  <div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><g stroke="#000"><path fill="#444" stroke-width="1.4" d="M301.6 116.1c-.6-3-7.6-3.7-11-3.5-15.7 1-23.6 17.2-30.1 28.5-9.5 16.3-27 18.3-39.1 33.3-12 12.6-12.8 30.1-.4 42.8 2.2 3.9 5.5 7.9 9.3 10.1 2 1 4.6 1.4 4.8.4-10.3-1.4-9.8-16-6.4-23.2.4-1.4 3-6.1 3.2-4.7.6 4.9 2 12.7 5.7 16.2 2 2 4.6 5.7 7.3 7 4 5 11.1 10.4 18 8.6.4-.2.6-1.2 0-1.1a6 6 0 0 1-5.6-1.1c-4.2-3-6.6-7.8-7.2-12.8a35 35 0 0 1 1.1-13.7c.4-1 1.2 1.4 1.6 2.4 3.2 7 6.9 13.3 15 14.3 1.8.1 4.5.4 5.7-1.1.8-1 .6-1.1-.4-.7-10 3-14.5-10-15.3-17.8-1.3-10.4 2.7-19 7.1-28.7 8.8-14.7 26-26.3 33.3-39.9 1.9-2.3 6.9-11.6 3.4-15.3zM221 214.8a39.5 39.5 0 0 1-3.3-19.7 28 28 0 0 1 12.2-18.3c1-.6 1-.5.4.5a51 51 0 0 0-9.3 37.5z"/><path fill="#2b121c" stroke-width="1.4" d="M270 164.5c-9.8 13.4-16 29.3-10 45.1l-5.9-4.3c-.5-.4 0 2-.2 2.2-1-.8-1.6-4.9-2.5-2.9a26.6 26.6 0 0 0-1.3 12.2c-4-21.4 5-39.8 18-54.1 10.2-10.3 21.6-21 29.9-33.2 4.6-6.8 3-13.2 2.2-14.8.4-.4.9 0 1.3 1 2.2 4.8-.7 10.9-2.8 14.8-3.5 5.1-5.9 9.1-12 15.5-5.8 6.4-15.7 16.6-16.8 18.5zM244.9 223c-7.8-2.8-13-12.4-13.6-20.7-.2-1.3-1.3 2-1.7 3.4-2.6 5.8-3.6 13.3-.3 19-5.5-2.3-6.2-8.4-6.5-13.7-.3-13.9 11.7-25.9 21.7-34.3.6-.1 3.2-4 3.3-2.7-10.3 13.7-13 34-3 49z"/><path fill="#e6cdd7" stroke-width="1.4" d="M304.3 235.7c-.8 0-2.4-.2-2.8.2-1.3 1-1.9 4.3.3 6.2 1.3-.7 3.4-1.4 4.5-1.8-.6-1.3-.7-3.8-2-4.6z"/><path fill="#dbb5b6" stroke-width="1.4" d="M398.6 298h-.2c-4.5 4.6-9.5 9-15 13.2-1.1.9-3.4 2-4.6 2.4-.2 0 3 19.7 3.2 19.5 4.1-3.6 8.5-8.3 11.8-12.7L406 304a16 16 0 0 1-7.5-6zm-44.9-51.6c2.6.9 4.4 2.7 5.2 5.3 1.3 3.9 1.7 8.1 1.3 12.8 0 0-4.7-3.2-6.3-4.7a48.8 48.8 0 0 1-5.2-6.8c-.8-1.7-1-3.8-2-5 2.2-1.3 5.5-2 7-1.6z"/><path fill="#403e4f" stroke-width="1.4" d="m394.3 331.8-1-1.5c.2-2.3 0-4.5-.6-6.5l-4.7-.6c-.3-.4-2.7-1.6-2.5-2.2.7-4.7-2.6-7.6-3.6-11.7-.5-3.8-4 .7-4.5 1.8-2.6 7.3.9 17.2 6.1 23 2.6 2 11 2.8 10.8-2.3zm-34.6-81.7c-4.7-6.4-12.5-6.5-14.8-6.4-4.9 2.7 13.2 27.4 18.2 27 0-7.4-.6-16.1-3.4-20.6z"/><path fill="#343443" stroke-width="1.4" d="M351.2 245c11.5 1 11.6 15.8 12 24.3-6.6-2.2-10-8.6-14.2-14 3 1.6 10.3 8 11 9.6 2.4 1.1.3-6.7 0-8.9-.8-2.9-1-3.5-2.2-6-2.1-3.4-7.7-4.9-6.6-5zm36.8 78.2 4.8.6c.6 2 .9 5.5.5 7.8-4.5 1-6.5-4.1-5.3-8.4zm-7.7 9.2c-.2-.2.7-.3.6-.8 1-2.6 8.4-.3 6.6 1.5l-7.2-.7z"/><g transform="scale(1.4)"><path fill="#dbb5b6" d="m244 476.1.5-.2v-1.6l-1-1.1-.5.4v1.2l1 1.3zm-55.4-26.3-.8-1-2.5-2.2-.9-.6c-.1-.5.4-2 .5-2l2 .7 2.5 1.2-.8 4z"/><path fill="#f4e7de" d="M281.2 270.7c0-1.8.4-4 .2-6-.4-3.6-2.7-7.1-3.7-10.8-1.2-4.4-2.5-8.8-4-13l-3.5-19.3c-1.2-5.2-3-10.3-5.3-15-.4-.9-.7-2.4-.7-3.2a80.5 80.5 0 0 0-.9-8.1c-2.2-2.1-4.3-4-6.2-6.6a32 32 0 0 0-3-4.5c-1.2-1.1-2.9-1.7-4.2-3.5-.5-1.3-1.1-2.3-1.8-3.2a10 10 0 0 1 4.4-1.5l-.5-.2a170 170 0 0 1-8.6-2.6 3 3 0 0 1-1.6-1.2c-1.4-2.1-.3-5.9.6-8-.5-.7-1.6-.3-2.8-.4h-.4c-.4-.2-.4-.4 0-.5a23 23 0 0 1-9.6-4.5v.3l-.1.2c-.1 0-.2 0-.2-.2h-.1l-.1.2c0 2.7-.1 5.2-.6 7.4-.9 1.6-2 2.7-3.5 3.4-2.4 1-5.8-.6-7.9.7a9.5 9.5 0 0 0-3 3.8c-2.8 6-3.7 12.8-5.5 19.1-3 10-6.2 20-9.9 29.9l10.1 4.6.3-.6c4.1-8.5 8-17.2 11.5-26.1l2.5 4.9c.6 1.1 1.2 2.2 1.6 3.4 2 6.2 5.3 11.5 8.3 17.1 1.2 2.4 2.1 4.6 2.3 7 .6 6.4-.5 12.4-3.3 18a207.4 207.4 0 0 0-5 11.2 54.7 54.7 0 0 0-3.5 18.8c0 6.7-.6 13.4-.6 20.1a485.6 485.6 0 0 0 2.3 32c.4 3 .5 6.3.6 9.4l-.4 4.5c-.7 3.4-3 4.7-6 6.2-2.9 1.6-4.8 2.6-7 5.1a58.9 58.9 0 0 0-8.9 14.3l-5.5 15.6-6.1 15c-2 3-4.1 4.5-6.7 6.5-4.3 3.3-3.1 8.2-2.2 12.7 1 4 .6 8-.3 12.2a15 15 0 0 0-.3 4c.1 2 .1 5.6 2 7 0 0 .5.3.6 0 .2-.2.3-1.4.3-1.4l.2.4c0 .7-.1 2 .2 2.6.2.5.5.8 1.3 1l.5-.3.1-2.1.2-.1c.2 0 .2 0 .2.2-.2 1.7-.5 4 2.3 3.5l.2-3.5a.1.1 0 1 1 .3 0l.2 3.7c.2.5.6.9 1 1.1h.5c.3 0 .6-.2.9-.5a19.3 19.3 0 0 1-.2-5.4l.1.1.7 5.5c1 .6 2.5.8 3-.7.5-1.4-.3-2.5-.4-3.7-.2-3-.4-6-.8-9.1-.4-4.4.2-8.7.8-13 1-5.3 1.2-10.8 3.7-15.6a299.5 299.5 0 0 1 25-35c2.2-2.8 4.3-4.8 6.2-6.3 3.2-2.4 6.1-4.7 7.6-8 .5-1 1-2 1.2-3.5l2.2-11c2-12.1 4.4-24 7.2-36h.6c-.1 1.2-.4 2.3-.4 3.4-.5 7.5-1 15-1.7 22.5-.3 4.6-.8 7.8-1.3 9.6-.9 3-1.6 6-2.2 8.9-.3 1.9-.3 4-.2 6.1a50 50 0 0 1-.3 12.8c-.7 3.5-1.3 7.1-1.7 10.7-.6 4.5-1.2 8.8-1.2 13.5 0 12.2-.3 24.6-2.6 36.5a29 29 0 0 1-2.8 8.3 8.4 8.4 0 0 0-1.7 6c0 1 0 1.7-.3 2.2a17 17 0 0 0-1.2 9c.2 1.4 0 2.5 0 3.8-.5 1.7-1.1 3.4-1.9 5a5 5 0 0 0-.5 2.2c0 3 .6 6 2 8.6.2.7.7 1 1 1 1.7.8 2.7.4 3-1.3l-.5-5v-.1h.3c.7 1.5 1.1 3 1.3 4.5 0 .2.2.3.3.4 1.4 1 2.5.8 3.6-.4 0-.2.2-.3.4-.3.8 0 1.6-.4 2.2-1 .2 0 .2-.2.1-.3l-.4-2c0-.3 0-.3.2 0 .3.5.4 1 .3 1.6a.4.4 0 0 0 .8.2c.2-.5.5-.8.9-.9.1 0 .2 0 .2-.2.7-1.4 1-2.9.7-4.4-.5-3.3-.8-6.4-1-9.4 0-2.9-.4-5.4-.8-8.2-.2-2.1 1.8-4 1.9-6.3.1-3.9.4-6.6.8-8.2l4-16.3c2-7.8 4.2-15 6.7-22.3 3-9 4.3-18.3 3.7-27.8l-.3-8a47 47 0 0 1 2.5-14.4c4.2-11.8 7.3-20.5 9.1-26.2 3.2-9.8 5.5-18.7 6.7-26.5 1-6.4 1.5-12 1.4-16.7l-.2-9.1zm-57-100.1z"/><path fill="#dbb5b6" d="m245.7 474.8-.3-.9c-.1-.5-.2-1.7 0-1.8l.3 1.7c0 .4.2.9 0 1zm-4.6 2.2-.3-.9c-.1-.5-.2-1.7 0-1.8l.4 1.7v1zm-4.4-114.7c.8-.7 1.4-1.8 2.4-2.6a22 22 0 0 1-7.6 8c-2 1.5-4 3.5-6.2 6.2a299.2 299.2 0 0 0-25 35c-2.5 4.8-2.7 10.4-3.7 15.7l-.1-1.5c0-.5-Line truncated
@@ -0,0 +1,38 @@
+import type { ComponentProps } from "svelte";
+import type SvelteSeo from "svelte-seo";
+
+import deepmerge from "deepmerge";
+
+export type Seo = ComponentProps<SvelteSeo>;
+
+export const defaultSeo: Seo = {
+  title: "cannorin.net",
+  description: "cannorin's website",
+  themeColor: "#fafafa",
+
+  openGraph: {
+    title: "cannorin.net",
+    type: "website",
+    description: "cannorin's website",
+    locale: "ja_JP",
+  },
+
+  twitter: {
+    title: "cannorin.net",
+    description: "cannorin's website",
+    card: "summary",
+    creator: "cannorin3",
+  },
+};
+
+export const mergeSeo = (
+  target: Seo,
+  ...sources: (Seo | undefined | false)[]
+) =>
+  sources.reduce<Seo>(
+    (acc, current) =>
+      deepmerge(acc, current || {}, {
+        arrayMerge: (_target, source) => source,
+      }),
+    target,
+  );
@@ -0,0 +1,2 @@
+export const limitWidth =
+  "mx-auto w-full lg:max-w-[904px] xl:max-w-[1264px] px-6 lg:px-8";
@@ -0,0 +1,45 @@
+interface String {
+  concat<S extends string>(string: S): `${this}${S}`;
+  concat<S1 extends string, S2 extends string>(
+    s1: S1,
+    s2: S2,
+  ): `${this}${S1}${S2}`;
+  startsWith<S extends string>(searchString: S): this is `${S}${string}`;
+  endsWith<S extends string>(searchString: S): this is `${string}${S}`;
+  includes<S extends string>(
+    searchString: S,
+    position?: number,
+  ): this is `${string}${S}${string}`;
+}
+
+type LiteralUnionLike<T> = T extends string
+  ? T extends ""
+    ? T
+    : T extends `${T}${T}`
+      ? never
+      : T
+  : T extends number
+    ? `${T}0` extends `${number}`
+      ? T
+      : never
+    : T extends null | undefined
+      ? T
+      : never;
+
+interface Array<T> {
+  includes(
+    searchElement: T extends LiteralUnionLike<T> ? unknown : never,
+    fromIndex?: number,
+  ): searchElement is T extends LiteralUnionLike<T> ? T : never;
+}
+
+interface ReadonlyArray<T> {
+  includes(
+    searchElement: T extends LiteralUnionLike<T> ? unknown : never,
+    fromIndex?: number,
+  ): searchElement is T extends LiteralUnionLike<T> ? T : never;
+}
+
+interface Map<K> {
+  has(key: Weaken<K>): key is K;
+}
@@ -1 +1,7 @@
-// place files you want to import through the `$lib` alias in this folder.
+export function tryOneOf<const T>(
+  value: T extends LiteralUnionLike<T> ? unknown : never,
+  consts: readonly T[],
+) {
+  if (consts.includes(value)) return value;
+  return undefined;
+}
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { page } from "$app/state";
+import { limitWidth } from "$lib/constants";
+import { cn } from "$lib/utils";
+
+const codeNames: Record<number, string> = {
+  400: "Bad Request",
+  401: "Unauthorized",
+  402: "Payment Required",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  406: "Not Acceptable",
+  407: "Proxy Authentication Required",
+  408: "Request Timeout",
+  409: "Conflict",
+  410: "Gone",
+  411: "Length Required",
+  412: "Precondition Required",
+  413: "Payload Too Large",
+  414: "URI Too Long",
+  415: "Unsupported Media Type",
+  416: "Range Not Satisfiable",
+  417: "Expectation Failed",
+  429: "Too Many Requests",
+  451: "Unavailable For Legal Reasons",
+  500: "Internal Server Error",
+  501: "Not Implemented",
+  502: "Bad Gateway",
+  503: "Service Unavailable",
+  504: "Gateway Timeout",
+  505: "HTTP Version Not Supported",
+};
+</script>
+
+<main class={cn("flex grow flex-col items-center justify-center gap-10 py-10 relative overflow-hidden", limitWidth)}>
+  <section class="flex min-w-full flex-col items-center gap-6 ">
+    <h1 class="text-center text-5xl font-display leading-[1.125]">
+      <span>{page.status}</span>
+      <span class="whitespace-nowrap">
+        {codeNames[page.status] ?? "Unknown Error"}
+      </span>
+    </h1>
+
+    <div class="text-sm">
+      {#if page.status === 400}
+        <p>リクエストの結果エラーが発生しました。</p>
+      {:else if page.status === 401}
+        <p>このページを表示するにはログインする必要があります。</p>
+      {:else if page.status === 403}
+        <p>このページを閲覧する権限がありません。</p>
+      {:else if page.status === 404}
+        <p>お探しのページは見つかりませんでした。</p>
+      {:else}
+        <p>{page.error?.message}</p>
+      {/if}
+    </div>
+  </section>
+</main>
@@ -1,6 +1,23 @@
 <script lang="ts">
 import "../app.css";
+import "./webfont.css";
+
+import { page } from "$app/state";
+import { PUBLIC_WEB_DOMAIN } from "$env/static/public";
+import { defaultSeo, mergeSeo } from "$lib/common/seo";
+import SvelteSeo from "svelte-seo";
+
 let { children } = $props();
+let seo = $derived.by(() =>
+  mergeSeo(defaultSeo, page.data.seo, {
+    canonical: `https://${PUBLIC_WEB_DOMAIN}${page.url.pathname}`,
+    openGraph: {
+      url: `https://${PUBLIC_WEB_DOMAIN}${page.url.pathname}`,
+    },
+  }),
+);
 </script>

+<SvelteSeo {...seo} />
+
 {@render children()}
@@ -1,2 +1,255 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+import { limitWidth } from "$lib/constants";
+import { cn } from "$lib/utils";
+
+import SiBandcamp from "@icons-pack/svelte-simple-icons/icons/SiBandcamp";
+import SiDiscord from "@icons-pack/svelte-simple-icons/icons/SiDiscord";
+import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub";
+import SiKeybase from "@icons-pack/svelte-simple-icons/icons/SiKeybase";
+import SiMisskey from "@icons-pack/svelte-simple-icons/icons/SiMisskey";
+import SiMixcloud from "@icons-pack/svelte-simple-icons/icons/SiMixcloud";
+import SiOrcid from "@icons-pack/svelte-simple-icons/icons/SiOrcid";
+import SiQiita from "@icons-pack/svelte-simple-icons/icons/SiQiita";
+import SiResearchgate from "@icons-pack/svelte-simple-icons/icons/SiResearchgate";
+import SiSoundcloud from "@icons-pack/svelte-simple-icons/icons/SiSoundcloud";
+import SiSteam from "@icons-pack/svelte-simple-icons/icons/SiSteam";
+import SiTwitch from "@icons-pack/svelte-simple-icons/icons/SiTwitch";
+import SiX from "@icons-pack/svelte-simple-icons/icons/SiX";
+import SiZenn from "@icons-pack/svelte-simple-icons/icons/SiZenn";
+</script>
+
+<!-- Sections -->
+<main class={cn(limitWidth, "flex grow flex-col items-center gap-12 lg:gap-16 py-8")}>
+  <h1 class="font-display text-4xl md:text-5xl lg:text-6xl animate-fade-in">cannorin.net</h1>
+
+  <section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8">
+    <h2 class="sr-only">自己紹介</h2>
+
+    <section class="card">
+      <enhanced:img src="../assets/images/static/icon/jakeko.webp?w=1080,800,600,400,300" sizes="min(100vw, 400px)" alt="" />
+      <div class="body">
+        <h3>DJ / Composer</h3>
+        <p>ワイヤードでは VRChat を拠点に、リアルワールドでは大阪を拠点にして、DJ や作曲などの音楽活動を行っています。</p>
+        <nav>
+          <ul class="links">
+            <li>
+              <a href="https://cannorin.bandcamp.com/" target="_blank">
+                <SiBandcamp title="Bandcamp" />
+              </a>
+            </li>
+            <li>
+              <a href="https://soundcloud.com/cannorin" target="_blank">
+                <SiSoundcloud title="Soundcloud" />
+              </a>
+            </li>
+            <li>
+              <a href="https://mixcloud.com/cannorin" target="_blank">
+                <SiMixcloud title="Mixcloud" />
+              </a>
+            </li>
+            <li class="more">
+              <button disabled class="tooltip cursor-not-allowed">
+                <span class="tooltip-text">coming soon™</span>
+                More
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+
+    <section class="card">
+      <enhanced:img src="../assets/images/static/icon/tapl.webp?w=1080,800,640,400,320" sizes="min(100vw, 400px)" alt="" />
+      <div class="body">
+        <h3>Developer</h3>
+        <p>フルスタックエンジニアとして働いており、いくつかの OSS に関わっています。また、趣味で Web サービスを運用しています。</p>
+        <nav>
+          <ul class="links w-full">
+            <li>
+              <a href="https://github.com/cannorin" target="_blank">
+                <SiGithub title="GitHub" />
+              </a>
+            </li>
+            <li>
+              <a href="https://qiita.com/cannorin" target="_blank">
+                <SiQiita title="Qiita" />
+              </a>
+            </li>
+            <li>
+              <a href="https://zenn.dev/cannorin" target="_blank">
+                <SiZenn title="Zenn" />
+              </a>
+            </li>
+            <li class="more">
+              <button disabled class="tooltip cursor-not-allowed">
+                <span class="tooltip-text">coming soon™</span>
+                More
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+
+    <section class="card">
+      <enhanced:img src="../assets/images/static/icon/logic-chang.webp?w=1080,800,600,400,300" sizes="min(100vw, 400px)" alt="" />
+      <div class="body">
+        <h3>Graduate Student</h3>
+        <p>大学院において数理論理学を研究しており、非古典論理、特に様相論理を専門としています。2025年度より博士課程に進学します。</p>
+        <nav>
+          <ul class="links">
+            <li>
+              <a href="https://orcid.org/0009-0009-3946-4260" target="_blank">
+                <SiOrcid title="ORCiD" />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.researchgate.net/profile/Yuta-Sato-22" target="_blank">
+                <SiResearchgate title="ResearchGate" />
+              </a>
+            </li>
+            <li class="more">
+              <button disabled class="tooltip cursor-not-allowed">
+                <span class="tooltip-text">coming soon™</span>
+                More
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+  </section>
+
+  <section class="followme">
+    <h2 class="font-display text-2xl">Follow me on:</h2>
+    <nav>
+      <ul class="flex flex-row flex-nowrap items-center gap-4 text-sm">
+        <li>
+          <a href="https://keybase.io/cannorin" target="_blank">
+            <SiKeybase title="Keybase" />
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/cannorin3" target="_blank">
+            <SiX title="X (Twitter)" />
+          </a>
+        </li>
+        <li>
+          <a href="https://misskey.cannorin.net/@cannorin" target="_blank">
+            <SiMisskey title="Misskey" />
+          </a>
+        </li>
+        <li>
+          <a href="https://www.twitch.tv/cannorin" target="_blank">
+            <SiTwitch title="Twitch" />
+          </a>
+        </li>
+        <li>
+          <a href="https://discord.com/users/497190979216867329" target="_blank">
+            <SiDiscord title="Discord" />
+          </a>
+        </li>
+        <li>
+          <a href="https://steamcommunity.com/id/cannorin/" target="_blank">
+            <SiSteam title="Steam" />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </section>
+</main>
+
+<style lang="postcss">
+  .card {
+    @apply relative max-w-[400px] rounded-2xl flex flex-col items-center shadow animate-fade-in overflow-clip;
+
+    &::before {
+      @apply absolute top-0 left-0 right-0 bottom-0 rounded-2xl border border-transparent;
+      z-index: -1;
+      content: "";
+      background: linear-gradient(transparent, rgb(var(--foreground) / 10%), rgb(var(--foreground) / 20%), rgb(var(--foreground) / 100%)) border-box border-box;
+      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
+      mask-composite: exclude;
+    }
+
+    picture {
+      @apply w-full;
+      mask: linear-gradient(rgb(0 0 0 / 100%), rgb(0 0 0 / 90%), rgb(0 0 0 / 80%), transparent);
+
+      img {
+        @apply aspect-video md:aspect-square object-cover;
+      }
+    }
+
+    .body {
+      @apply h-full p-5 flex flex-col gap-4;
+
+      h3 {
+        @apply text-2xl font-display;
+      }
+
+      > :last-child {
+        margin-top: auto;
+      }
+
+      .links {
+        @apply flex flex-wrap items-center gap-4 text-sm;
+        .more {
+          @apply flex items-center ml-auto rounded-full;
+          background: linear-gradient(45deg, rgb(var(--primary) / 50%), rgb(var(--secondary) / 50%));
+          > * {
+            @apply px-3 py-1;
+          }
+        }
+      }
+    }
+  }
+
+  .followme {
+    @apply flex flex-row flex-wrap items-center justify-center gap-4 px-10 py-4 animate-fade-in rounded-full;
+    background: linear-gradient(45deg, rgb(var(--primary) / 50%), rgb(var(--secondary) / 50%));
+  }
+
+  /* カーソルを重ねる要素 */
+  .tooltip {
+    position: relative; /* ツールチップの位置の基準に */
+  }
+
+  /* ツールチップのテキスト */
+  .tooltip-text {
+    opacity: 0; /* はじめは隠しておく */
+    visibility: hidden; /* はじめは隠しておく */
+    position: absolute; /* 絶対配置 */
+    left: 50%; /* 親に対して中央配置 */
+    transform: translateX(-50%); /* 親に対して中央配置 */
+    bottom: 34px; /* 親要素下からの位置 */
+    display: inline-block;
+    padding: 5px; /* 余白 */
+    white-space: nowrap; /* テキストを折り返さない */
+    font-size: 0.8rem; /* フォントサイズ */
+    line-height: 1.3; /* 行間 */
+    background: rgb(var(--foreground) / 1); /* 背景色 */
+    color: rgb(var(--background) / 1); /* 文字色 */
+    border-radius: 8px; /* 角丸 */
+    transition: 0.3s ease-in; /* アニメーション */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 25px;
+      left: 50%;
+      margin-left: -7px;
+      border: 7px solid transparent;
+      border-top: 7px solid rgb(var(--foreground) / 1);
+    }
+  }
+
+  /* ホバー時にツールチップの非表示を解除 */
+  .tooltip:hover .tooltip-text {
+    opacity: 1;
+    visibility: visible;
+  }
+</style>
@@ -1,11 +1,78 @@
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";

 export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],

  theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: "2rem",
+    },
+    extend: {
+      colors: {
+        border: "rgb(var(--border) / <alpha-value>)",
+        input: "rgb(var(--input) / <alpha-value>)",
+        ring: "rgb(var(--ring) / <alpha-value>)",
+        background: "rgb(var(--background) / <alpha-value>)",
+        foreground: "rgb(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "rgb(var(--primary) / <alpha-value>)",
+          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          DEFAULT: "rgb(var(--secondary) / <alpha-value>)",
+          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
+        },
+        destructive: {
+          DEFAULT: "rgb(var(--destructive) / <alpha-value>)",
+          foreground: "rgb(var(--destructive-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "rgb(var(--muted) / <alpha-value>)",
+          foreground: "rgb(var(--muted-foreground) / <alpha-value>)",
+        },
+        accent: {
+          DEFAULT: "rgb(var(--accent) / <alpha-value>)",
+          foreground: "rgb(var(--accent-foreground) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "rgb(var(--popover) / <alpha-value>)",
+          foreground: "rgb(var(--popover-foreground) / <alpha-value>)",
+        },
+        card: {
+          DEFAULT: "rgb(var(--card) / <alpha-value>)",
+          foreground: "rgb(var(--card-foreground) / <alpha-value>)",
+        },
+      },
+      fontFamily: {
+        sans: ["Zen Kaku Gothic New", ...fontFamily.sans],
+        display: ["Poiret One"],
+      },
+      animation: {
+        blink: "blink 0.6s ease both",
+        "fade-in": "fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both",
+      },
+      keyframes: {
+        blink: {
+          "0%,50%,to": {
+            opacity: "1",
+          },
+          "25%,75%": {
+            opacity: "0",
+          },
+        },
+        "fade-in": {
+          "0%": {
+            opacity: "0",
+          },
+          to: {
+            opacity: "1",
+          },
+        },
+      },
+    },
  },

  plugins: [typography],
@@ -1,6 +1,7 @@
+import { enhancedImages } from "@sveltejs/enhanced-img";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";

 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [enhancedImages(), sveltekit()],
 });
@@ -7,7 +7,7 @@
  },
  "files": {
    "ignoreUnknown": false,
-    "ignore": [".env", ".env.*", ".yarn/**/*"]
+    "ignore": [".env", ".env.*", ".yarn/**/*", "*.*css"]
  },
  "formatter": {
    "enabled": true,
@@ -6,7 +6,8 @@
    "dev": "turbo run dev",
    "check": "turbo run check",
    "lint": "turbo run lint",
-    "fix": "turbo run fix"
+    "fix": "turbo run fix",
+    "gen:env": "bash scripts/generate_env_for_apps.sh"
  },
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+SCRIPT_DIR=$(dirname "$0")
+
+# Ensure that the working directory is the project root
+cd $SCRIPT_DIR/../
+
+# Read Terraform outputs and format it as .env
+ENV_FILE_CONTENT=$(cd terraform && terraform output -json | jq -r "to_entries |map(\"\(.key)=\\\"\(.value.value)\\\"\")|.[]")
+
+# Put .env files to each app directory
+for d in apps/*/ ; do
+  [ -L "${d%/}" ] && continue # Skip symlinks
+  printf "$ENV_FILE_CONTENT" > $d/.env
+  printf "$ENV_FILE_CONTENT" > $d/.dev.vars
+done
@@ -0,0 +1,12 @@
+output "PUBLIC_WEB_TURNSTILE_SITEKEY" {
+  value = cloudflare_turnstile_widget.web.id
+}
+
+output "PUBLIC_WEB_DOMAIN" {
+  value = local.web_domain
+}
+
+output "WEB_TURNSTILE_SECRET_KEY" {
+  value     = cloudflare_turnstile_widget.web.secret
+  sensitive = true
+}
@@ -113,6 +113,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@emnapi/runtime@npm:^1.2.0":
+  version: 1.3.1
+  resolution: "@emnapi/runtime@npm:1.3.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/060ffede50f1b619c15083312b80a9e62a5b0c87aa8c1b54854c49766c9d69f8d1d3d87bd963a647071263a320db41b25eaa50b74d6a80dcc763c23dbeaafd6c
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.21.5":
  version: 0.21.5
  resolution: "@esbuild/aix-ppc64@npm:0.21.5"
@@ -274,6 +283,205 @@ __metadata:
  languageName: node
  linkType: hard

+"@fontsource/poiret-one@npm:5.1.1":
+  version: 5.1.1
+  resolution: "@fontsource/poiret-one@npm:5.1.1"
+  checksum: 10c0/109b0d7de84430b4c94aa7c043e402ba4a0b67e0a90215c239c15ead354877e4e6cd8aed0f5c400dace474b30a0193b1dba17e2621e7bb39734b3a07067a8752
+  languageName: node
+  linkType: hard
+
+"@fontsource/zen-kaku-gothic-new@npm:5.1.1":
+  version: 5.1.1
+  resolution: "@fontsource/zen-kaku-gothic-new@npm:5.1.1"
+  checksum: 10c0/4c9f47849c41247c05655eab9363de5a112fd7a827614d7560bcf36f0b352f2f338359c8caaefaa74c6e109b506cb91554499acdbc31937de5cc33f98d3583fa
+  languageName: node
+  linkType: hard
+
+"@icons-pack/svelte-simple-icons@npm:4.0.1":
+  version: 4.0.1
+  resolution: "@icons-pack/svelte-simple-icons@npm:4.0.1"
+  peerDependencies:
+    "@sveltejs/kit": 2.5.0
+    svelte: 4.2.0
+  checksum: 10c0/d20b7cd2502bfc0c38a5b4fff49f4e3c2e6587067bc8dd98a839511df6127f8fbc88b819f2d8cce036240f44e7c0e20ced0ec8d6f7992cc9ee3b7efa9eca87ed
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-s390x@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-s390x@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-s390x@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-wasm32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-wasm32@npm:0.33.5"
+  dependencies:
+    "@emnapi/runtime": "npm:^1.2.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-ia32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-ia32@npm:0.33.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-x64@npm:0.33.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
  version: 8.0.2
  resolution: "@isaacs/cliui@npm:8.0.2"
@@ -402,6 +610,22 @@ __metadata:
  languageName: node
  linkType: hard

+"@rollup/pluginutils@npm:^5.0.5":
+  version: 5.1.4
+  resolution: "@rollup/pluginutils@npm:5.1.4"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-walker: "npm:^2.0.2"
+    picomatch: "npm:^4.0.2"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10c0/6d58fbc6f1024eb4b087bc9bf59a1d655a8056a60c0b4021d3beaeec3f0743503f52467fd89d2cf0e7eccf2831feb40a05ad541a17637ea21ba10b21c2004deb
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.29.1":
  version: 4.29.1
  resolution: "@rollup/rollup-android-arm-eabi@npm:4.29.1"
@@ -546,6 +770,22 @@ __metadata:
  languageName: node
  linkType: hard

+"@sveltejs/enhanced-img@npm:0.4.4":
+  version: 0.4.4
+  resolution: "@sveltejs/enhanced-img@npm:0.4.4"
+  dependencies:
+    magic-string: "npm:^0.30.5"
+    sharp: "npm:^0.33.5"
+    svelte-parse-markup: "npm:^0.1.5"
+    vite-imagetools: "npm:^7.0.1"
+    zimmerframe: "npm:^1.1.2"
+  peerDependencies:
+    svelte: ^5.0.0
+    vite: ">= 5.0.0"
+  checksum: 10c0/ff41a1cfdc93460985667fbb3fae9c00c4dee45c20fdf252b7d3cff670adc454150175a529fcf46c3c9f1794b07d8a8069916def8fb24e7899f4ba061a96e041
+  languageName: node
+  linkType: hard
+
 "@sveltejs/kit@npm:2.15.1":
  version: 2.15.1
  resolution: "@sveltejs/kit@npm:2.15.1"
@@ -623,7 +863,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
+"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
  version: 1.0.6
  resolution: "@types/estree@npm:1.0.6"
  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
@@ -879,13 +1119,33 @@ __metadata:
  languageName: node
  linkType: hard

-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
  version: 1.1.4
  resolution: "color-name@npm:1.1.4"
  checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
  languageName: node
  linkType: hard

+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: "npm:^1.0.0"
+    simple-swizzle: "npm:^0.2.2"
+  checksum: 10c0/b0bfd74c03b1f837f543898b512f5ea353f71630ccdd0d66f83028d1f0924a7d4272deb278b9aef376cacf1289b522ac3fb175e99895283645a2dc3a33af2404
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+    color-string: "npm:^1.9.0"
+  checksum: 10c0/7fbe7cfb811054c808349de19fb380252e5e34e61d7d168ec3353e9e9aacb1802674bddc657682e4e9730c2786592a4de6f8283e7e0d3870b829bb0b7b2f6118
+  languageName: node
+  linkType: hard
+
 "commander@npm:^4.0.0":
  version: 4.1.1
  resolution: "commander@npm:4.1.1"
@@ -932,13 +1192,20 @@ __metadata:
  languageName: node
  linkType: hard

-"deepmerge@npm:^4.3.1":
+"deepmerge@npm:4.3.1, deepmerge@npm:^4.3.1":
  version: 4.3.1
  resolution: "deepmerge@npm:4.3.1"
  checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
  languageName: node
  linkType: hard

+"detect-libc@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "detect-libc@npm:2.0.3"
+  checksum: 10c0/88095bda8f90220c95f162bf92cad70bd0e424913e655c20578600e35b91edc261af27531cf160a331e185c0ced93944bc7e09939143225f56312d7fd800fdb7
+  languageName: node
+  linkType: hard
+
 "devalue@npm:^5.1.0":
  version: 5.1.1
  resolution: "devalue@npm:5.1.1"
@@ -1114,6 +1381,13 @@ __metadata:
  languageName: node
  linkType: hard

+"estree-walker@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "estree-walker@npm:2.0.2"
+  checksum: 10c0/53a6c54e2019b8c914dc395890153ffdc2322781acf4bd7d1a32d7aedc1710807bdcd866ac133903d5629ec601fbb50abe8c2e5553c7f5a0afdd9b6af6c945af
+  languageName: node
+  linkType: hard
+
 "exponential-backoff@npm:^3.1.1":
  version: 3.1.1
  resolution: "exponential-backoff@npm:3.1.1"
@@ -1316,6 +1590,13 @@ __metadata:
  languageName: node
  linkType: hard

+"imagetools-core@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "imagetools-core@npm:7.0.2"
+  checksum: 10c0/e0115391b5f7d35449f11909d5e9db7b13db334baac3004c9aa20cf5c97f55f80e0afe806f4e3fc11ee2a5f7425a71df4101f6a491b03fd06812c6f1c19b3439
+  languageName: node
+  linkType: hard
+
 "import-meta-resolve@npm:^4.1.0":
  version: 4.1.0
  resolution: "import-meta-resolve@npm:4.1.0"
@@ -1340,6 +1621,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 10c0/f59b43dc1d129edb6f0e282595e56477f98c40278a2acdc8b0a5c57097c9eff8fe55470493df5775478cf32a4dc8eaf6d3a749f07ceee5bc263a78b2434f6a54
+  languageName: node
+  linkType: hard
+
 "is-binary-path@npm:~2.1.0":
  version: 2.1.0
  resolution: "is-binary-path@npm:2.1.0"
@@ -1811,6 +2099,13 @@ __metadata:
  languageName: node
  linkType: hard

+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
 "pify@npm:^2.3.0":
  version: 2.3.0
  resolution: "pify@npm:2.3.0"
@@ -2113,7 +2408,16 @@ __metadata:
  languageName: node
  linkType: hard

-"semver@npm:^7.3.5":
+"schema-dts@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "schema-dts@npm:1.1.2"
+  peerDependencies:
+    typescript: ">=4.1.0"
+  checksum: 10c0/bcca8719b1bb1cd71ba2b01a5126b3579e917a2f193e10fcffe020fa42fef911776ed9d2197c9f376780e703994b3ab854db3f962c47064f7282f41eff0f1d24
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.3.5, semver@npm:^7.6.3":
  version: 7.6.3
  resolution: "semver@npm:7.6.3"
  bin:
@@ -2129,6 +2433,75 @@ __metadata:
  languageName: node
  linkType: hard

+"sharp@npm:^0.33.4, sharp@npm:^0.33.5":
+  version: 0.33.5
+  resolution: "sharp@npm:0.33.5"
+  dependencies:
+    "@img/sharp-darwin-arm64": "npm:0.33.5"
+    "@img/sharp-darwin-x64": "npm:0.33.5"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+    "@img/sharp-linux-arm": "npm:0.33.5"
+    "@img/sharp-linux-arm64": "npm:0.33.5"
+    "@img/sharp-linux-s390x": "npm:0.33.5"
+    "@img/sharp-linux-x64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-x64": "npm:0.33.5"
+    "@img/sharp-wasm32": "npm:0.33.5"
+    "@img/sharp-win32-ia32": "npm:0.33.5"
+    "@img/sharp-win32-x64": "npm:0.33.5"
+    color: "npm:^4.2.3"
+    detect-libc: "npm:^2.0.3"
+    semver: "npm:^7.6.3"
+  dependenciesMeta:
+    "@img/sharp-darwin-arm64":
+      optional: true
+    "@img/sharp-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+    "@img/sharp-linux-arm":
+      optional: true
+    "@img/sharp-linux-arm64":
+      optional: true
+    "@img/sharp-linux-s390x":
+      optional: true
+    "@img/sharp-linux-x64":
+      optional: true
+    "@img/sharp-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-linuxmusl-x64":
+      optional: true
+    "@img/sharp-wasm32":
+      optional: true
+    "@img/sharp-win32-ia32":
+      optional: true
+    "@img/sharp-win32-x64":
+      optional: true
+  checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
  version: 2.0.0
  resolution: "shebang-command@npm:2.0.0"
@@ -2152,6 +2525,15 @@ __metadata:
  languageName: node
  linkType: hard

+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: "npm:^0.3.1"
+  checksum: 10c0/df5e4662a8c750bdba69af4e8263c5d96fe4cd0f9fe4bdfa3cbdeb45d2e869dff640beaaeb1ef0e99db4d8d2ec92f85508c269f50c972174851bc1ae5bd64308
+  languageName: node
+  linkType: hard
+
 "sirv@npm:^3.0.0":
  version: 3.0.0
  resolution: "sirv@npm:3.0.0"
@@ -2297,6 +2679,24 @@ __metadata:
  languageName: node
  linkType: hard

+"svelte-parse-markup@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "svelte-parse-markup@npm:0.1.5"
+  peerDependencies:
+    svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
+  checksum: 10c0/7f4a614df3f7dff0ee82e1a5766a7f1bc5a12b846c800d893edb7d73cd9d4ba2ff5ddd58f248fbd01c0c98355d63a45ce9c503df8ae0a1110dc1422a128af251
+  languageName: node
+  linkType: hard
+
+"svelte-seo@npm:1.6.1":
+  version: 1.6.1
+  resolution: "svelte-seo@npm:1.6.1"
+  dependencies:
+    schema-dts: "npm:^1.1.2"
+  checksum: 10c0/508e761289bed359fbd363a1a2bf032c432ae01350cb0817d4cc38765dcbdb92c37b177ca56e0fbef4c61922fecba8f5815b4afffa05302f92dc12beadcb6745
+  languageName: node
+  linkType: hard
+
 "svelte@npm:5.16.1":
  version: 5.16.1
  resolution: "svelte@npm:5.16.1"
@@ -2319,6 +2719,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tailwind-merge@npm:2.6.0":
+  version: 2.6.0
+  resolution: "tailwind-merge@npm:2.6.0"
+  checksum: 10c0/fc8a5535524de9f4dacf1c16ab298581c7bb757d68a95faaf28942b1c555a619bba9d4c6726fe83986e44973b315410c1a5226e5354c30ba82353bd6d2288fa5
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:3.4.17":
  version: 3.4.17
  resolution: "tailwindcss@npm:3.4.17"
@@ -2417,6 +2824,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tslib@npm:^2.4.0":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
+  languageName: node
+  linkType: hard
+
 "turbo-darwin-64@npm:2.3.3":
  version: 2.3.3
  resolution: "turbo-darwin-64@npm:2.3.3"
@@ -2547,6 +2961,17 @@ __metadata:
  languageName: node
  linkType: hard

+"vite-imagetools@npm:^7.0.1":
+  version: 7.0.5
+  resolution: "vite-imagetools@npm:7.0.5"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.0.5"
+    imagetools-core: "npm:^7.0.2"
+    sharp: "npm:^0.33.4"
+  checksum: 10c0/223ba4a6a8df344fa12d0a4104fd783d7da21d256e92311bca8488cdd5de2690406bcf63fd7c15bb504ef89149f68306eb0a101888e2ab336d65e58c91b8bb7e
+  languageName: node
+  linkType: hard
+
 "vite@npm:5.4.11":
  version: 5.4.11
  resolution: "vite@npm:5.4.11"
@@ -2606,13 +3031,20 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "web@workspace:apps/web"
  dependencies:
+    "@fontsource/poiret-one": "npm:5.1.1"
+    "@fontsource/zen-kaku-gothic-new": "npm:5.1.1"
+    "@icons-pack/svelte-simple-icons": "npm:4.0.1"
    "@sveltejs/adapter-auto": "npm:3.3.1"
+    "@sveltejs/enhanced-img": "npm:0.4.4"
    "@sveltejs/kit": "npm:2.15.1"
    "@sveltejs/vite-plugin-svelte": "npm:4.0.4"
    "@tailwindcss/typography": "npm:0.5.15"
    autoprefixer: "npm:10.4.20"
+    deepmerge: "npm:4.3.1"
    svelte: "npm:5.16.1"
    svelte-check: "npm:4.1.1"
+    svelte-seo: "npm:1.6.1"
+    tailwind-merge: "npm:2.6.0"
    tailwindcss: "npm:3.4.17"
    typescript: "npm:5.7.2"
    vite: "npm:5.4.11"
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><g stroke="#000"><path fill="#444" stroke-width="1.4" d="M301.6 116.1c-.6-3-7.6-3.7-11-3.5-15.7 1-23.6 17.2-30.1 28.5-9.5 16.3-27 18.3-39.1 33.3-12 12.6-12.8 30.1-.4 42.8 2.2 3.9 5.5 7.9 9.3 10.1 2 1 4.6 1.4 4.8.4-10.3-1.4-9.8-16-6.4-23.2.4-1.4 3-6.1 3.2-4.7.6 4.9 2 12.7 5.7 16.2 2 2 4.6 5.7 7.3 7 4 5 11.1 10.4 18 8.6.4-.2.6-1.2 0-1.1a6 6 0 0 1-5.6-1.1c-4.2-3-6.6-7.8-7.2-12.8a35 35 0 0 1 1.1-13.7c.4-1 1.2 1.4 1.6 2.4 3.2 7 6.9 13.3 15 14.3 1.8.1 4.5.4 5.7-1.1.8-1 .6-1.1-.4-.7-10 3-14.5-10-15.3-17.8-1.3-10.4 2.7-19 7.1-28.7 8.8-14.7 26-26.3 33.3-39.9 1.9-2.3 6.9-11.6 3.4-15.3zM221 214.8a39.5 39.5 0 0 1-3.3-19.7 28 28 0 0 1 12.2-18.3c1-.6 1-.5.4.5a51 51 0 0 0-9.3 37.5z"/><path fill="#2b121c" stroke-width="1.4" d="M270 164.5c-9.8 13.4-16 29.3-10 45.1l-5.9-4.3c-.5-.4 0 2-.2 2.2-1-.8-1.6-4.9-2.5-2.9a26.6 26.6 0 0 0-1.3 12.2c-4-21.4 5-39.8 18-54.1 10.2-10.3 21.6-21 29.9-33.2 4.6-6.8 3-13.2 2.2-14.8.4-.4.9 0 1.3 1 2.2 4.8-.7 10.9-2.8 14.8-3.5 5.1-5.9 9.1-12 15.5-5.8 6.4-15.7 16.6-16.8 18.5zM244.9 223c-7.8-2.8-13-12.4-13.6-20.7-.2-1.3-1.3 2-1.7 3.4-2.6 5.8-3.6 13.3-.3 19-5.5-2.3-6.2-8.4-6.5-13.7-.3-13.9 11.7-25.9 21.7-34.3.6-.1 3.2-4 3.3-2.7-10.3 13.7-13 34-3 49z"/><path fill="#e6cdd7" stroke-width="1.4" d="M304.3 235.7c-.8 0-2.4-.2-2.8.2-1.3 1-1.9 4.3.3 6.2 1.3-.7 3.4-1.4 4.5-1.8-.6-1.3-.7-3.8-2-4.6z"/><path fill="#dbb5b6" stroke-width="1.4" d="M398.6 298h-.2c-4.5 4.6-9.5 9-15 13.2-1.1.9-3.4 2-4.6 2.4-.2 0 3 19.7 3.2 19.5 4.1-3.6 8.5-8.3 11.8-12.7L406 304a16 16 0 0 1-7.5-6zm-44.9-51.6c2.6.9 4.4 2.7 5.2 5.3 1.3 3.9 1.7 8.1 1.3 12.8 0 0-4.7-3.2-6.3-4.7a48.8 48.8 0 0 1-5.2-6.8c-.8-1.7-1-3.8-2-5 2.2-1.3 5.5-2 7-1.6z"/><path fill="#403e4f" stroke-width="1.4" d="m394.3 331.8-1-1.5c.2-2.3 0-4.5-.6-6.5l-4.7-.6c-.3-.4-2.7-1.6-2.5-2.2.7-4.7-2.6-7.6-3.6-11.7-.5-3.8-4 .7-4.5 1.8-2.6 7.3.9 17.2 6.1 23 2.6 2 11 2.8 10.8-2.3zm-34.6-81.7c-4.7-6.4-12.5-6.5-14.8-6.4-4.9 2.7 13.2 27.4 18.2 27 0-7.4-.6-16.1-3.4-20.6z"/><path fill="#343443" stroke-width="1.4" d="M351.2 245c11.5 1 11.6 15.8 12 24.3-6.6-2.2-10-8.6-14.2-14 3 1.6 10.3 8 11 9.6 2.4 1.1.3-6.7 0-8.9-.8-2.9-1-3.5-2.2-6-2.1-3.4-7.7-4.9-6.6-5zm36.8 78.2 4.8.6c.6 2 .9 5.5.5 7.8-4.5 1-6.5-4.1-5.3-8.4zm-7.7 9.2c-.2-.2.7-.3.6-.8 1-2.6 8.4-.3 6.6 1.5l-7.2-.7z"/><g transform="scale(1.4)"><path fill="#dbb5b6" d="m244 476.1.5-.2v-1.6l-1-1.1-.5.4v1.2l1 1.3zm-55.4-26.3-.8-1-2.5-2.2-.9-.6c-.1-.5.4-2 .5-2l2 .7 2.5 1.2-.8 4z"/><path fill="#f4e7de" d="M281.2 270.7c0-1.8.4-4 .2-6-.4-3.6-2.7-7.1-3.7-10.8-1.2-4.4-2.5-8.8-4-13l-3.5-19.3c-1.2-5.2-3-10.3-5.3-15-.4-.9-.7-2.4-.7-3.2a80.5 80.5 0 0 0-.9-8.1c-2.2-2.1-4.3-4-6.2-6.6a32 32 0 0 0-3-4.5c-1.2-1.1-2.9-1.7-4.2-3.5-.5-1.3-1.1-2.3-1.8-3.2a10 10 0 0 1 4.4-1.5l-.5-.2a170 170 0 0 1-8.6-2.6 3 3 0 0 1-1.6-1.2c-1.4-2.1-.3-5.9.6-8-.5-.7-1.6-.3-2.8-.4h-.4c-.4-.2-.4-.4 0-.5a23 23 0 0 1-9.6-4.5v.3l-.1.2c-.1 0-.2 0-.2-.2h-.1l-.1.2c0 2.7-.1 5.2-.6 7.4-.9 1.6-2 2.7-3.5 3.4-2.4 1-5.8-.6-7.9.7a9.5 9.5 0 0 0-3 3.8c-2.8 6-3.7 12.8-5.5 19.1-3 10-6.2 20-9.9 29.9l10.1 4.6.3-.6c4.1-8.5 8-17.2 11.5-26.1l2.5 4.9c.6 1.1 1.2 2.2 1.6 3.4 2 6.2 5.3 11.5 8.3 17.1 1.2 2.4 2.1 4.6 2.3 7 .6 6.4-.5 12.4-3.3 18a207.4 207.4 0 0 0-5 11.2 54.7 54.7 0 0 0-3.5 18.8c0 6.7-.6 13.4-.6 20.1a485.6 485.6 0 0 0 2.3 32c.4 3 .5 6.3.6 9.4l-.4 4.5c-.7 3.4-3 4.7-6 6.2-2.9 1.6-4.8 2.6-7 5.1a58.9 58.9 0 0 0-8.9 14.3l-5.5 15.6-6.1 15c-2 3-4.1 4.5-6.7 6.5-4.3 3.3-3.1 8.2-2.2 12.7 1 4 .6 8-.3 12.2a15 15 0 0 0-.3 4c.1 2 .1 5.6 2 7 0 0 .5.3.6 0 .2-.2.3-1.4.3-1.4l.2.4c0 .7-.1 2 .2 2.6.2.5.5.8 1.3 1l.5-.3.1-2.1.2-.1c.2 0 .2 0 .2.2-.2 1.7-.5 4 2.3 3.5l.2-3.5a.1.1 0 1 1 .3 0l.2 3.7c.2.5.6.9 1 1.1h.5c.3 0 .6-.2.9-.5a19.3 19.3 0 0 1-.2-5.4l.1.1.7 5.5c1 .6 2.5.8 3-.7.5-1.4-.3-2.5-.4-3.7-.2-3-.4-6-.8-9.1-.4-4.4.2-8.7.8-13 1-5.3 1.2-10.8 3.7-15.6a299.5 299.5 0 0 1 25-35c2.2-2.8 4.3-4.8 6.2-6.3 3.2-2.4 6.1-4.7 7.6-8 .5-1 1-2 1.2-3.5l2.2-11c2-12.1 4.4-24 7.2-36h.6c-.1 1.2-.4 2.3-.4 3.4-.5 7.5-1 15-1.7 22.5-.3 4.6-.8 7.8-1.3 9.6-.9 3-1.6 6-2.2 8.9-.3 1.9-.3 4-.2 6.1a50 50 0 0 1-.3 12.8c-.7 3.5-1.3 7.1-1.7 10.7-.6 4.5-1.2 8.8-1.2 13.5 0 12.2-.3 24.6-2.6 36.5a29 29 0 0 1-2.8 8.3 8.4 8.4 0 0 0-1.7 6c0 1 0 1.7-.3 2.2a17 17 0 0 0-1.2 9c.2 1.4 0 2.5 0 3.8-.5 1.7-1.1 3.4-1.9 5a5 5 0 0 0-.5 2.2c0 3 .6 6 2 8.6.2.7.7 1 1 1 1.7.8 2.7.4 3-1.3l-.5-5v-.1h.3c.7 1.5 1.1 3 1.3 4.5 0 .2.2.3.3.4 1.4 1 2.5.8 3.6-.4 0-.2.2-.3.4-.3.8 0 1.6-.4 2.2-1 .2 0 .2-.2.1-.3l-.4-2c0-.3 0-.3.2 0 .3.5.4 1 .3 1.6a.4.4 0 0 0 .8.2c.2-.5.5-.8.9-.9.1 0 .2 0 .2-.2.7-1.4 1-2.9.7-4.4-.5-3.3-.8-6.4-1-9.4 0-2.9-.4-5.4-.8-8.2-.2-2.1 1.8-4 1.9-6.3.1-3.9.4-6.6.8-8.2l4-16.3c2-7.8 4.2-15 6.7-22.3 3-9 4.3-18.3 3.7-27.8l-.3-8a47 47 0 0 1 2.5-14.4c4.2-11.8 7.3-20.5 9.1-26.2 3.2-9.8 5.5-18.7 6.7-26.5 1-6.4 1.5-12 1.4-16.7l-.2-9.1zm-57-100.1z"/><path fill="#dbb5b6" d="m245.7 474.8-.3-.9c-.1-.5-.2-1.7 0-1.8l.3 1.7c0 .4.2.9 0 1zm-4.6 2.2-.3-.9c-.1-.5-.2-1.7 0-1.8l.4 1.7v1zm-4.4-114.7c.8-.7 1.4-1.8 2.4-2.6a22 22 0 0 1-7.6 8c-2 1.5-4 3.5-6.2 6.2a299.2 299.2 0 0 0-25 35c-2.5 4.8-2.7 10.4-3.7 15.7l-.1-1.5c0-.5-Line truncated