# やま (Yama) — Portfolio

> フルスタックエンジニア「やま」のポートフォリオ。Next.js / React / TypeScript / Three.js (React Three Fiber) / WebGPU / AI SDK を使った実験的な Web デモと実績を公開しています。

## Main pages
- [Home](https://www.yama-apps.com/): トップページ。Bento レイアウトの作品一覧。
- [Profile](https://www.yama-apps.com/profile): 経歴・スキル・キャリア。
- [Output](https://www.yama-apps.com/output): デモ・作品ギャラリー。

## Works & Demos
- [養鶏場にIoTの土台をつくる](https://www.act-node.com/iot-foundation-for-poultry-farms/): アクト・ノードの企業ブログ記事。山口県「こっこ」様の養鶏場にStarlink衛星インターネットを設置し、IoTシステムの基盤を構築した現地作業レポート。山奥の通信環境の課題を克服し、最終的に220Mbpsの高速通信環境を実現しました。 (IoT, Starlink, ネットワーク構築)
- [React学習教材](https://react-lesson.yama-apps.com/): 友人に React の基本的な概念や使い方を教えるために作った学習教材。視覚的にわかりやすいインタラクティブな教材でコンポーネントの作成、状態管理、イベントハンドリングなど、React の基礎を実践的に学べます。 (React, TypeScript)
- [3D 太宰府天満宮デモ](https://www.yama-apps.com/output/3d-room-demo): AI画像生成（Nano Banana Pro）× AI 3Dモデル生成（Meshy.ai）× React Three Fiber で構築した太宰府天満宮 仮殿の3Dジオラマ。藤本壮介設計の「屋根に森が生える」建築をインタラクティブに体験できます。 (Three.js, React Three Fiber, React, TypeScript)
- [墨流し (Suminagashi) デモ](https://www.yama-apps.com/output/suminagashi-demo): 水面に落とした墨を漂わせる日本の伝統技法「墨流し」を、WebGL2 の流体シミュレーション（Stable Fluids）で再現。Navier–Stokes を GPU で解いて墨を流れに乗せ、Beer–Lambert で和紙に滲ませます。なぞると墨と色が溶け合うインタラクティブ体験。 (WebGL, GLSL, Canvas API, React, TypeScript)
- [AI NEWS APP](https://ai-feed.yama-apps.com/public/news/2026-09-11): AIが毎日自動で公式ブログやGit Hub から情報を取得し、要約をしてSlackのチャンネルにニュースを発信するアプリケーション。障害情報も通知するように設定。 (Next.js, TypeScript, AI SDK, Google Gemini, Drizzle ORM, Mantine UI, Better Auth, RSS, Slack)
- [Tanstack Start & Convex](https://tanstack-start-convex.yama-apps.com/): Tanstack StartとConvexを使用して、リアルタイムアプリケーションのデモを作成。データは定期的に削除されるので複数ブラウザを立ち上げて遊んでみてください。 (Tanstack Start, Convex, TypeScript, Mantine UI)
- [SVG Beam 解説デモ](https://www.yama-apps.com/output/svg-beam-demo): SVG path + mask + radialGradient + CSS offset-path を使った光るビームアニメーションの仕組みをステップバイステップで解説。スライダーやボタンでインタラクティブに体験できます。 (SVG, CSS Motion Path, React, TypeScript)
- [3D Marquee 解説デモ](https://www.yama-apps.com/output/3d-marquee-demo): CSS 3D Transform と Motion を使った3Dマーキーの仕組みをステップバイステップで解説。perspective、rotateX/Y/Z、アニメーションの各要素をインタラクティブに体験できます。 (CSS 3D Transform, Motion, React, TypeScript)
- [MCP Apps デモ](https://www.yama-apps.com/output/mcp-apps-demo): MCP（Model Context Protocol）の公式UI拡張「MCP Apps」を使ったインタラクティブUIデモ。AIチャット内にiframeサンドボックスで安全に描画されるUIを構築。Anthropic + OpenAI共同策定のStable仕様に基づく実装。 (TypeScript, React, MCP Apps, MCP Server)
- [3D My Desk](https://www.yama-apps.com/output/3d-desk-demo): 自分の作業デスクをMeshy AIで個別パーツごとに3D生成し、React Three Fiberで組み立てた3Dデスク。gltf-transformでDraco+WebP圧縮し、PC/モバイル別アセットで最適化。 (Meshy AI, Three.js, React Three Fiber, TypeScript)
- [ローカル LLM チャットデモ](https://www.yama-apps.com/output/local-llm-demo): LLM をサーバーではなく「あなたのブラウザの中」で実行するチャットデモ。WebLLM が WebGPU 経由で端末の GPU を直接使い、モデルのダウンロードから推論まで全て端末内で完結。API キー不要・通信ゼロ・入力はどこにも送信されません。 (WebLLM, WebGPU, React, TypeScript)
- [HTML-in-Canvas デモ](https://www.yama-apps.com/output/html-in-canvas-demo): 「canvas に本物の HTML は描けない」という Web の20年来の壁を壊す新 API(Chrome origin trial 中)のデモ。生きた DOM を WebGL テクスチャとして毎フレーム転送し、シェーダーで歪ませる。非対応ブラウザには SVG foreignObject の古典技法で自動フォールバック。 (HTML-in-Canvas, WebGL, GLSL, React, TypeScript)
- [建てられる量 — 斜線・日影シミュレータ](https://www.yama-apps.com/output/buildable-volume-demo): 土地の価値は「そこに何が建てられるか」で決まる。用途地域・前面道路・季節を動かすと、斜線制限と日影で建てられる最大ボリュームがリアルタイムに変わる3Dシミュレータ。不動産DX・物件査定の核心を体感できる。 (Three.js, React Three Fiber, React, TypeScript)
- [Web Haptics 体験デモ](https://www.yama-apps.com/output/web-haptics-demo): 和太鼓・花火・餅つきの3つのインタラクティブ振動体験。タップに連動してデバイスが振動するモバイルWebの触覚フィードバックを体感できます。 (Vibration API, Web Audio API, Canvas API, React, TypeScript)
- [Claude Code Permission Popup](https://github.com/yama-shoki/claude-code-popup): Claude Codeの権限リクエストをmacOSネイティブポップアップで表示するツール。コマンドの内容を日本語で解説し、リスクレベルを5段階で色分け表示。許可/拒否をポップアップから直接操作できます。 (Swift, SwiftUI, Shell Script, macOS)
- [freee 退勤通知 Chrome 拡張機能](https://github.com/yama-shoki/freee-work-time-notifier): freeeでの8時間勤務をサポートするChrome拡張機能。複数回の休憩にも対応し、退勤前に自動でデスクトップ通知します。 (JavaScript, Chrome Extension)
- [生成画像スクロールデモ](https://www.yama-apps.com/output/scrollytelling-demo): チップが分解・組み立てされるスクロール連動アニメーション。Google Whisk と Flow で生成したフレームを Canvas で滑らかに描画。スクロールして体験してみてください。 (Canvas API, TypeScript, React, Google Whisk, Google Flow)
- [AI Podcast App](https://drive.google.com/file/d/1l3JYUa35j1V6HE7mB6HJ87zqhoVYWjqk/view?usp=sharing): AIがSlackチャンネルの動きを要約して、1週間のまとめをPodcastで発信するアプリケーション。クリックすると、AIが生成したサンプルのポッドキャストを聴くことができます。 (Bun, TypeScript, AI SDK, ChatGPT, Vercel, 音声生成, Slack)
- [MCP AI Chat App](https://www.yama-apps.com/mcp-todos): AIとチャットを通してTODOの状態を更新するアプリケーション。MCPサーバーを自作して、AIと連携することで、チャットでTODOの状態を更新を実現。 (Next.js, AI SDK, TypeScript, MCP Server)
- [商品管理・在庫管理・購入履歴管理システム](https://www.yama-apps.com/shop-dashboard/products): Shopify を参考に商品管理画面を作成。Next.js + Drizzle + Stripeを使用して作成。商品登録のエディタにこだわりUXを最大限向上。 (Next.js, TypeScript, Drizzle ORM, Better Auth, Stripe, Resend, Shadcn UI)

## Contact
- GitHub: https://github.com/yama-shoki