Add /music and /dev
This commit is contained in:
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSave": false,
|
||||
"svelte.enable-ts-plugin": true,
|
||||
"tailwindCSS.classAttributes": ["class", ".+Class"],
|
||||
"tailwindCSS.experimental.classRegex": [
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--foreground: 55 65 81 /* #374151 */;
|
||||
|
||||
146
apps/web/src/lib/components/card.svelte
Normal file
146
apps/web/src/lib/components/card.svelte
Normal file
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils";
|
||||
import type { Snippet } from "svelte";
|
||||
import type { Picture } from "vite-imagetools";
|
||||
|
||||
export interface CardProps {
|
||||
class?: string | undefined;
|
||||
image: Picture;
|
||||
title: Snippet;
|
||||
description: Snippet;
|
||||
links: Snippet;
|
||||
more?: "coming soon" | "back" | `/${string}` | undefined;
|
||||
}
|
||||
|
||||
let { image, title, description, links, more, ...rest }: CardProps = $props();
|
||||
</script>
|
||||
|
||||
<section class={cn("card", rest["class"])}>
|
||||
<enhanced:img
|
||||
src={image}
|
||||
sizes="min(400px, 100vw)"
|
||||
alt=""
|
||||
loading="eager"
|
||||
decoding="async" />
|
||||
<div class="body">
|
||||
<h3>{@render title()}</h3>
|
||||
<div>
|
||||
{@render description()}
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="links">
|
||||
{@render links()}
|
||||
{#if more === "coming soon"}
|
||||
<li class="more">
|
||||
<button disabled class="tooltip cursor-not-allowed">
|
||||
<span class="tooltip-text">coming soon™</span>
|
||||
More
|
||||
</button>
|
||||
</li>
|
||||
{:else if more === "back"}
|
||||
<li class="more">
|
||||
<a href="/">
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
{:else if !!more}
|
||||
<li class="more">
|
||||
<a href={more}>
|
||||
More
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
.card {
|
||||
@apply relative max-w-[400px] md:w-[240px] xl:w-[360px] rounded-2xl flex flex-col items-center shadow 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 h-7;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* カーソルを重ねる要素 */
|
||||
.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>
|
||||
7
apps/web/src/lib/global.d.ts
vendored
7
apps/web/src/lib/global.d.ts
vendored
@@ -43,3 +43,10 @@ interface ReadonlyArray<T> {
|
||||
interface Map<K> {
|
||||
has(key: Weaken<K>): key is K;
|
||||
}
|
||||
|
||||
declare module "*&enhanced" {
|
||||
import type { Picture } from "vite-imagetools";
|
||||
|
||||
const value: Picture;
|
||||
export default value;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import "../app.css";
|
||||
import "./webfont.css";
|
||||
|
||||
import { onNavigate } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
import Seo, { defaultSeo, mergeSeo } from "$components/seo";
|
||||
import { PUBLIC_WEB_DOMAIN } from "$env/static/public";
|
||||
@@ -15,6 +16,16 @@ let seo = $derived.by(() =>
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
onNavigate((navigation) => {
|
||||
if (!document.startViewTransition) return;
|
||||
return new Promise((resolve) => {
|
||||
document.startViewTransition(async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Seo {...seo} />
|
||||
|
||||
@@ -1,21 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { limitWidth } from "$lib/constants";
|
||||
import { cn } from "$lib/utils";
|
||||
import type { Snapshot } from "./$types";
|
||||
import CardDev from "./dev/card.svelte";
|
||||
import CardMath from "./math/card.svelte";
|
||||
import CardMusic from "./music/card.svelte";
|
||||
|
||||
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";
|
||||
|
||||
type SnapshotData = {
|
||||
scrollPosition: number;
|
||||
};
|
||||
|
||||
export const snapshot: Snapshot<SnapshotData> = {
|
||||
capture: () => ({
|
||||
scrollPosition: window.scrollY,
|
||||
}),
|
||||
restore: (value) => {
|
||||
setTimeout(() => {
|
||||
window.scroll(0, value.scrollPosition);
|
||||
}, 0);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Sections -->
|
||||
@@ -25,117 +36,11 @@ import SiZenn from "@icons-pack/svelte-simple-icons/icons/SiZenn";
|
||||
<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(400px, 100vw)"
|
||||
alt=""
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
class="animate-fade-in" />
|
||||
<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>
|
||||
<CardMusic more="/music" />
|
||||
|
||||
<section class="card">
|
||||
<enhanced:img
|
||||
src="../assets/images/static/icon/tapl.webp?w=1080;800;600;400;300"
|
||||
sizes="min(400px, 100vw)"
|
||||
alt=""
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
class="animate-fade-in" />
|
||||
<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>
|
||||
<CardDev more="/dev" />
|
||||
|
||||
<section class="card">
|
||||
<enhanced:img
|
||||
src="../assets/images/static/icon/logic-chang.webp?w=1080;800;600;400;300"
|
||||
sizes="min(400px, 100vw)"
|
||||
alt=""
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
class="animate-fade-in" />
|
||||
<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>
|
||||
<CardMath more="coming soon" />
|
||||
</section>
|
||||
|
||||
<section class="followme">
|
||||
@@ -178,96 +83,8 @@ import SiZenn from "@icons-pack/svelte-simple-icons/icons/SiZenn";
|
||||
</main>
|
||||
|
||||
<style lang="postcss">
|
||||
.card {
|
||||
@apply relative max-w-[400px] rounded-2xl flex flex-col items-center shadow 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 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>
|
||||
|
||||
@@ -3,8 +3,8 @@ import { RateLimiter } from "sveltekit-rate-limiter/server";
|
||||
|
||||
import { dev } from "$app/environment";
|
||||
import { MISSKEY_API_KEY } from "$env/static/private";
|
||||
import type { InviteListResponse } from "misskey-js/entities.js";
|
||||
import { sample } from "$lib";
|
||||
import type { InviteListResponse } from "misskey-js/entities.js";
|
||||
|
||||
const limiter = new RateLimiter({
|
||||
IP: [10, "d"], // IP address limiter
|
||||
|
||||
88
apps/web/src/routes/dev/+page.svelte
Normal file
88
apps/web/src/routes/dev/+page.svelte
Normal file
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { limitWidth } from "$lib/constants";
|
||||
import { cn } from "$lib/utils";
|
||||
|
||||
import Card from "./card.svelte";
|
||||
</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">
|
||||
<a href="/">cannorin.net</a>
|
||||
</h1>
|
||||
|
||||
<section class="flex flex-col items-center md:flex-row md:items-start gap-4 lg:gap-8">
|
||||
<h2 class="sr-only">自己紹介</h2>
|
||||
|
||||
<Card more="back" />
|
||||
|
||||
<section class="p-5 prose prose-sm prose-light">
|
||||
<p>
|
||||
何でも屋気味なフルスタックエンジニアです。
|
||||
</p>
|
||||
<p>
|
||||
実は<strong class="text-primary">コンパイラや開発ツール・フレームワーク自体の開発・修正が一番得意</strong>で、
|
||||
業務で使ってるツールの不具合の原因を特定して PR 送るとかを結構やります。
|
||||
</p>
|
||||
<p>
|
||||
コンピュータの理論面に関する一定の知識・理解もあります。
|
||||
</p>
|
||||
|
||||
<h3 id="skills">スキルセット</h3>
|
||||
|
||||
<p>業務経験のあるもののみを書いています。</p>
|
||||
|
||||
<h4 class="text-primary font-bold">プログラム言語</h4>
|
||||
<ul>
|
||||
<li>TypeScript, C#, F#, OCaml</li>
|
||||
<li>いわゆる宣言的プログラミングを得意としています。とはいえ業務で一番書いているのは TypeScript です。</li>
|
||||
<li>静的型付きの言語ならだいたい全て対応できると思います。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-primary font-bold">フロントエンド</h4>
|
||||
<ul>
|
||||
<li>Next.js, SvelteKit, Vite, Tailwind CSS</li>
|
||||
<li>いわゆる JAMstack アーキテクチャによるウェブサイト構築を得意としています。</li>
|
||||
<li>レスポンシブ対応は言わずもがな、Semantic HTML とかアクセシビリティにも結構こだわりがあります。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-primary font-bold">バックエンド</h4>
|
||||
<ul>
|
||||
<li>.NET, Node.js, PostgreSQL, SQLite, Headless CMS, OpenAPI</li>
|
||||
<li>最近は JAMstack 側になるべく押し付けるようにしています。</li>
|
||||
<li>.NET の内部実装とか OpenAPI の仕様とか結構詳しいです。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-primary font-bold">DevOps</h4>
|
||||
<ul>
|
||||
<li>Docker, Terraform, GitHub Actions, AWS, Cloudflare, Vercel</li>
|
||||
<li>DevOps 周りの整備はひととおりできます。</li>
|
||||
<li>最近は Cloudflare にお熱です。</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="works">つくったもの・関わったもの</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/ocsigen/ts2ocaml" target="_blank">ts2ocaml</a>, <a href="https://github.com/CoreTweet/CoreTweet" target="_blank">CoreTweet</a> (作者)</li>
|
||||
<li><a href="https://github.com/fsprojects/FSharpPlus" target="_blank">FSharpPlus</a>, <a href="https://github.com/ionide/Ionide-vim" target="_blank">Ionide-vim</a> (メンテナ)</li>
|
||||
<li><a href="https://xn--pckjp4dudxftf.xn--tckwe/" target="_blank">ゴーストクラブ.コム</a>, <a href="https://www.0b4k3.com" target="_blank">0b4k3.com</a> (インフラ構築・実装)</li>
|
||||
<li>
|
||||
他にもコンパイラやパッケージマネージャに対するデカめの PR を通したことがあります (<a href="https://github.com/fable-compiler/Fable/pull/2618" target="_blank">fable-compiler/Fable#2618</a>,
|
||||
<a href="https://github.com/ocaml/opam/pull/5171" target="_blank">ocaml/opam#5171</a>,
|
||||
<a href="https://github.com/rescript-lang/rescript/pull/5364" target="_blank">rescript-lang/rescript#5364</a>, ...)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="/" class="back mt-8 text-foreground no-underline font-normal">
|
||||
Back
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.back {
|
||||
@apply flex md:hidden items-center justify-center rounded-full px-3 py-2;
|
||||
background: linear-gradient(45deg, rgb(var(--primary) / 50%), rgb(var(--secondary) / 50%));
|
||||
}
|
||||
</style>
|
||||
39
apps/web/src/routes/dev/card.svelte
Normal file
39
apps/web/src/routes/dev/card.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import Card, { type CardProps } from "$components/card.svelte";
|
||||
|
||||
import IconTapl from "$assets/images/static/icon/tapl.webp?w=1080;800;600;400;300&enhanced";
|
||||
|
||||
import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub";
|
||||
import SiQiita from "@icons-pack/svelte-simple-icons/icons/SiQiita";
|
||||
import SiZenn from "@icons-pack/svelte-simple-icons/icons/SiZenn";
|
||||
|
||||
let { more }: Pick<CardProps, "more"> = $props();
|
||||
</script>
|
||||
|
||||
<Card image={IconTapl} more={more} class="[view-transition-name:card-dev]">
|
||||
{#snippet title()}
|
||||
Developer
|
||||
{/snippet}
|
||||
|
||||
{#snippet description()}
|
||||
フルスタックエンジニアとして働いており、いくつかの OSS に関わっています。また、趣味で Web サービスを運用しています。
|
||||
{/snippet}
|
||||
|
||||
{#snippet links()}
|
||||
<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>
|
||||
{/snippet}
|
||||
</Card>
|
||||
33
apps/web/src/routes/math/card.svelte
Normal file
33
apps/web/src/routes/math/card.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import Card, { type CardProps } from "$components/card.svelte";
|
||||
|
||||
import IconLogic from "$assets/images/static/icon/logic-chang.webp?w=1080;800;600;400;300&enhanced";
|
||||
|
||||
import SiOrcid from "@icons-pack/svelte-simple-icons/icons/SiOrcid";
|
||||
import SiResearchgate from "@icons-pack/svelte-simple-icons/icons/SiResearchgate";
|
||||
|
||||
let { more }: Pick<CardProps, "more"> = $props();
|
||||
</script>
|
||||
|
||||
<Card image={IconLogic} more={more} class="[view-transition-name:card-math]">
|
||||
{#snippet title()}
|
||||
Graduate Student
|
||||
{/snippet}
|
||||
|
||||
{#snippet description()}
|
||||
大学院において数理論理学を研究しており、非古典論理、特に様相論理を専門としています。2025年度より博士課程に進学します。
|
||||
{/snippet}
|
||||
|
||||
{#snippet 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>
|
||||
{/snippet}
|
||||
</Card>
|
||||
83
apps/web/src/routes/music/+page.svelte
Normal file
83
apps/web/src/routes/music/+page.svelte
Normal file
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { limitWidth } from "$lib/constants";
|
||||
import { cn } from "$lib/utils";
|
||||
|
||||
import Card from "./card.svelte";
|
||||
</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">
|
||||
<a href="/">cannorin.net</a>
|
||||
</h1>
|
||||
|
||||
<section class="flex flex-col items-center md:flex-row md:items-start gap-4 lg:gap-8">
|
||||
<h2 class="sr-only">自己紹介</h2>
|
||||
|
||||
<Card more="back" />
|
||||
|
||||
<section class="p-5 prose prose-sm prose-light">
|
||||
<p>ブレイクビーツと高速四つ打ちがメインです。以下のような雰囲気の DJ が得意です。</p>
|
||||
|
||||
<ul>
|
||||
<li><em>Atmospheric:</em> DnB, Jungle, Trance, IDM, ...</li>
|
||||
<li><em>Aggressive:</em> Crossbreed, Breakcore, Speedcore, ...</li>
|
||||
<li><em>Industrial:</em> Frenchcore, Schranz, Doomcore, ...</li>
|
||||
<li><em>Peak-time Hardcore:</em> Hardstyle, J-Core, Uptempo, ...</li>
|
||||
</ul>
|
||||
|
||||
<p>作る曲もだいたいこのへんのジャンルです。</p>
|
||||
|
||||
<h3 id="affiliation">主宰・所属</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
The Underground (VRChat, 主宰)
|
||||
</li>
|
||||
<li><a href="https://%E3%82%B4%E3%83%BC%E3%82%B9%E3%83%88%E3%82%AF%E3%83%A9%E3%83%96.%E3%82%B3%E3%83%A0/">GHOSTCLUB</a> (VRChat, レジデント)</li>
|
||||
<li>system crash (石橋 Bhanc, レジデント)</li>
|
||||
<li>戡殺硬核領域 -Kansai HARDCORE Field- (石橋 Bhanc, レジデント)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="guest-appearances">ゲスト出演歴</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://v-fes.sanrio.co.jp/">SANRIO Virtual Festival in Sanrio Puroland</a> (VRChat)
|
||||
<ul>
|
||||
<li>Vfes 2024 Summer Edition, ALT3</li>
|
||||
<li>Vfes 2024, ALT3 RED</li>
|
||||
<li>Vfes 2023, ALT3 RED/BLUE</li>
|
||||
<li>Vfes (2021), ALT3 RED/BLUE</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://oooto.otherman-records.com/4/" target="_blank">大音4</a> (中野 ヘビーシックゼロ)
|
||||
<ul>
|
||||
<li>サブフロアのキュレーションも担当しました。</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://x.com/cannorin3/status/1800402487771549782" target="_blank">4KICKS FOR GEEKS #4</a> (心斎橋 夜来香)</li>
|
||||
<li><a href="https://x.com/cannorin3/status/1655598762822365189" target="_blank">embodiment</a> (心斎橋 夜来香)</li>
|
||||
<li><a href="https://x.com/tohlpeaks/status/1570381932365434880" target="_blank">miracle☆sugar - sato♡shin & TohLPeaks Release Party</a> (難波 ベアーズ)</li>
|
||||
<li>
|
||||
and more...
|
||||
<ul>
|
||||
<li>関西圏とVRのパーティーを中心に、年間約30回ほど DJ 出演しています。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="/" class="back mt-8 text-foreground no-underline font-normal">
|
||||
Back
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.back {
|
||||
@apply flex md:hidden items-center justify-center rounded-full px-3 py-2;
|
||||
background: linear-gradient(45deg, rgb(var(--primary) / 50%), rgb(var(--secondary) / 50%));
|
||||
}
|
||||
</style>
|
||||
39
apps/web/src/routes/music/card.svelte
Normal file
39
apps/web/src/routes/music/card.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import Card, { type CardProps } from "$components/card.svelte";
|
||||
|
||||
import IconJakeko from "$assets/images/static/icon/jakeko.webp?w=1080;800;600;400;300&enhanced";
|
||||
|
||||
import SiBandcamp from "@icons-pack/svelte-simple-icons/icons/SiBandcamp";
|
||||
import SiMixcloud from "@icons-pack/svelte-simple-icons/icons/SiMixcloud";
|
||||
import SiSoundcloud from "@icons-pack/svelte-simple-icons/icons/SiSoundcloud";
|
||||
|
||||
let { more }: Pick<CardProps, "more"> = $props();
|
||||
</script>
|
||||
|
||||
<Card image={IconJakeko} more={more} class="[view-transition-name:card-music]">
|
||||
{#snippet title()}
|
||||
DJ / Composer
|
||||
{/snippet}
|
||||
|
||||
{#snippet description()}
|
||||
ワイヤードでは VRChat を拠点に、リアルワールドでは大阪を拠点にして、DJ や作曲などの音楽活動を行っています。
|
||||
{/snippet}
|
||||
|
||||
{#snippet 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>
|
||||
{/snippet}
|
||||
</Card>
|
||||
@@ -93,6 +93,14 @@ export default {
|
||||
"--tw-prose-td-borders": "rgb(var(--primary))",
|
||||
},
|
||||
},
|
||||
light: {
|
||||
css: {
|
||||
h1: { fontWeight: "400" },
|
||||
h2: { fontWeight: "400" },
|
||||
h3: { fontWeight: "400" },
|
||||
h4: { fontWeight: "400" },
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user