愛媛県の酒蔵マップ
2026-08-12 ~ 現在
Claude Designのデザイン案をAstro 7の静的サイトに移した日本酒フェスティバルのガイドです。
Mapboxの地図に参加銘柄と商品資料をつなぎ、検索・地域フィルター・好みの選択で試飲候補を絞り込みます。
Tech Stack
TypeScript
Astro
Tailwind CSS
Mapbox
shadcn/ui
Docker
Playground
Diary Gallery ver3
2026-06-29 ~ Present
旅の懐かしさを感じるDiary Gallery ver3 — 航空郵便のポストカード・フィルムスライド・旅行日記の3種類を比較。
Tech Stack
TypeScript
React
Framer Motion
Diary Sectionの開発記録
2026-02-14 ~ 2026-02-20
日記投稿用の画像ギャラリーを開発する中での試行錯誤。Three.js WebGL → CSS 3D → R3Fリングカルーセル → シンプルなカルーセル
Tech Stack
TypeScript
React
Three.js
Framer Motion
AI Tetris
2025-10-22 ~ 2025-10-22
Perplexity AIのコード生成機能を使い、ワンクリックで作ったNuxt 3ベースのテトリスです。
Nuxt UI 4とTailwind CSSでスタイリングし、SSGで公開したクライアントサイドのゲームです。
Tech Stack
TypeScript
Vue
Nuxt.js
Tailwind CSS
Netlify
Uplot Test
2025-04-09 ~ 2025-04-10
UplotとWeb Workerを使い、大量のデータを処理してチャートを作るテストです。
Tech Stack
TypeScript
Vue
Zorn - Video Player Test
2025-03-30 ~ 2025-04-01
Astro専用のVideo Player、zornをテストします。
Tech Stack
Astro
Live 2d Widget
2025-03-07 ~ 2026-02-19
Web Page Live2D Widgetの実装テストページです。
Tech Stack
TypeScript
Astro
コンポーネントテスト - Counter
2025-03-06 ~ 2025-03-06
AstroではClient Islandを通じて他のフレームワークを使えます。
そこでVue・Svelte・ReactでCounterを実装し、正しく動くかをテストします。
Tech Stack
TypeScript
Astro
Vue
Svelte
React
D3 Test
2025-03-06 ~ Present
D3.js Cookbookを読みながら実践しています。
Tech Stack
TypeScript
React
D3
日本酒紹介 ver2
2024-04-21 ~ 2024-04-23
Slidevで作った日本酒紹介のプレゼンテーションです。
ver1で使った頃からSlidevに多くの更新が入りました。
それを反映し、新しく追加されたさまざまなプレゼンテーション用APIを活用しました。
各スライドは基本的にMarkdownで書き、一部にVueコンポーネントを使っています。
Tech Stack
TypeScript
Vue
Slidev
Netlify
日本酒紹介 ver1
2023-05-02 ~ 2023-05-12
Slidevで作った日本酒紹介のプレゼンテーションです。
各スライドは基本的にMarkdownで書き、一部にVueコンポーネントを使っています。
Tech Stack
TypeScript
Vue
Slidev
Netlify