Create index
This commit is contained in:
59
apps/web/src/routes/+error.svelte
Normal file
59
apps/web/src/routes/+error.svelte
Normal file
@@ -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>
|
||||
|
||||
1237
apps/web/src/routes/webfont.css
Normal file
1237
apps/web/src/routes/webfont.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user