index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tobisako — ポートフォリオ（GitHub Pages）</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#16181d;
    --blue:#2257d6;
    --dim:#5a6070;
    --line:#dfe2e8;
    --soft:#f5f7fa;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#fff;color:var(--ink);
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
    font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
  body{min-height:100vh}
  a{color:var(--blue)}
  .wrap{max-width:1060px;margin:0 auto;padding:0 24px}
  .mono{font-family:"JetBrains Mono",monospace}

  /* ---------- header ---------- */
  header{border-bottom:1px solid var(--line)}
  .topbar{display:flex;align-items:center;gap:14px;padding:20px 0;font-size:13px;
    letter-spacing:.16em;font-weight:700;color:var(--dim)}
  .topbar .sq{width:9px;height:9px;background:var(--blue)}
  .topbar a.gh{margin-left:auto;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;
    font-size:13px;letter-spacing:.08em;padding:8px 16px;border-radius:999px}
  .topbar a.gh:hover{background:var(--blue)}

  .hero{padding:44px 0 34px}
  .hero h1{font-size:40px;font-weight:900;line-height:1.3}
  .hero .en{margin-top:6px;font-size:13px;letter-spacing:.24em;color:var(--dim);font-weight:700}
  .hero .role{margin-top:18px;font-size:18px;line-height:1.9}
  .hero .role b{color:var(--blue)}
  .hero .links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
  .hero .links a{text-decoration:none;font-weight:700}
  .hero .links a:hover{text-decoration:underline}

  /* ---------- summary ---------- */
  section{margin-top:44px}
  h2.sec{font-size:24px;font-weight:900;display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  h2.sec::before{content:"";width:10px;height:10px;background:var(--blue);align-self:center}
  h2.sec .lbl{font-size:12px;letter-spacing:.22em;color:var(--dim);font-weight:700}
  .summary{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:22px 26px;
    font-size:17px;line-height:2.0}
  .summary b{color:var(--ink)}

  .hi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
  @media(max-width:860px){.hi{grid-template-columns:repeat(2,1fr)}}
  .hib{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px}
  .hib .num{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:21px;color:var(--blue)}
  .hib .cap{font-size:14.5px;line-height:1.65;color:#3c4150}

  /* ---------- portfolio banners ---------- */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:820px){.grid{grid-template-columns:1fr}}
  a.banner{display:block;text-decoration:none;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:12px;overflow:hidden;
    box-shadow:0 2px 6px rgba(22,24,29,.06);transition:transform .15s, box-shadow .15s}
  a.banner:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,24,29,.15)}
  .banner .shot{aspect-ratio:1200/640;overflow:hidden;background:var(--soft)}
  .banner .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .banner .shot.txt{display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#111 0 55%,#f16bc4 55%);color:#fff}
  .banner .shot.txt .t{font-size:30px;font-weight:900;text-shadow:2px 2px 0 rgba(0,0,0,.4)}
  .banner .meta{padding:13px 18px 15px;border-top:1px solid var(--line)}
  .banner .meta .t{font-size:17.5px;font-weight:900;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .banner .meta .t .tag{font-size:11px;letter-spacing:.06em;background:var(--blue);color:#fff;
    border-radius:4px;padding:2px 8px;font-weight:700}
  .banner .meta .t .tag.g{background:#0f9d58}
  .banner .meta .t .tag.k{background:var(--ink)}
  .banner .meta .d{margin-top:5px;font-size:14.5px;line-height:1.7;color:var(--dim)}
  .banner .meta .u{margin-top:6px;font-size:12.5px;color:var(--blue)}

  /* ---------- footer ---------- */
  .cvlink{margin-top:44px;background:var(--soft);border:1px solid var(--line);border-radius:10px;
    padding:20px 26px;font-size:17px;line-height:1.9}
  footer{margin-top:36px;background:var(--ink);color:#fff}
  footer .fl{display:flex;gap:0;font-size:13px;letter-spacing:.08em;padding:14px 24px 26px;
    max-width:1060px;margin:0 auto;flex-wrap:wrap}
  footer .fl span{flex:1;white-space:nowrap}
  footer .fl span:nth-child(2){text-align:center}
  footer .fl span:nth-child(3){text-align:right}
  footer a{color:#9db8ff;font-weight:700}
  @media(max-width:680px){.hero h1{font-size:30px}}
</style>
</head>
<body>
<header>
  <div class="wrap"><div class="topbar mono">
    <span class="sq" aria-hidden="true"></span><span>TOBISAKO — PORTFOLIO</span>
    <a class="gh" href="https://github.com/tobisako/cv" target="_blank" rel="noopener">↗ GITHUB</a>
  </div></div>
</header>

<main>
  <div class="wrap">
    <section>
      <h2 class="sec">ポートフォリオ<span class="lbl mono">GITHUB PAGES</span></h2>
      <div class="grid">
        <a class="banner" href="https://tobisako.github.io/OhakaToken/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/OhakaToken.jpg" alt="仮想お墓ゲーム OhakaToken" loading="lazy"></div>
          <div class="meta"><div class="t">仮想お墓ゲーム OhakaToken<span class="tag k">HACKATHON優勝</span></div>
            <div class="d">Decrypt Tokyo 2019 グランプリ作品。故人情報をERC721で記録し、仮想お墓参り・供養（投げ銭）・家族/友人のアクセス権管理。</div>
            <div class="u mono">tobisako.github.io/OhakaToken</div></div></a>
        <a class="banner" href="https://tobisako.github.io/LangChainViewer/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/LangChainViewer.jpg" alt="LangChainViewer" loading="lazy"></div>
          <div class="meta"><div class="t">LangChainViewer<span class="tag g">AI / AGENT</span></div>
            <div class="d">実行中のエージェントを1画面で見るビューア。LangGraph で書いたグラフが今どのノードを処理し、ローカルLLMと何をやり取りし、どのSQLを投げたかを、走っている最中に表示する。サーバーは Python 標準ライブラリのみで追加依存なし。同じ課題を解く CrewAI／AutoGen 実装と評価ハーネスも同梱し、共有層を固定して同一条件で測り直せる。サンプルデータは乱数の種を固定して生成するため第三者が同じ数値を再現できる。外部API費用ゼロ・MIT。</div>
            <div class="u mono">tobisako.github.io/LangChainViewer</div></div></a>
        <a class="banner" href="jev/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/Jev.jpg" alt="TypeSafe AI「Jev」× ゲーム5本" loading="lazy"></div>
          <div class="meta"><div class="t">TypeSafe AI「Jev」× ゲーム5本<span class="tag g">AI / GAME</span></div>
            <div class="d">TypeSafe AI の構造化意思決定モデル Jev（System One モデル）を使い、ゲーム（ヘビ・フラッピーバード・ミニマリオ・テトリス2D／3D）をAIにプレイさせた。進む向き・ジャンプ・ミノの置き場所などを Jev が選び、候補はプログラムが合法手から先読みで絞る。テトリス3Dでは、101個中92個が Jev の選んだ場所に置かれた。Jev は Vercel AI Gateway 経由で、AI SDK の evaluate から呼ぶ。録画13本・スクリーンショット4枚つき。</div>
            <div class="u mono">tobisako.github.io/cv/jev</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/gjHtmlSlideComposer/jp/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/gjHtmlSlideComposer.jpg" alt="GJ HTML SLIDE COMPOSER" loading="lazy"></div>
          <div class="meta"><div class="t">GJ HTML SLIDE COMPOSER<span class="tag g">macOS / OSS</span></div>
            <div class="d">バラバラのスライドHTMLから欲しい1枚だけを拾い集め、1つの自己完結HTMLにまとめ直すmacOSデスクトップアプリ。出力はページ送りビューア。MIT。（GridJapan名義・本人制作）</div>
            <div class="u mono">gridjapan.github.io/gjHtmlSlideComposer</div></div></a>
        <a class="banner" href="https://tobisako.github.io/cbquest/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/cbquest.jpg" alt="cbquest 講師教材アーカイブ" loading="lazy"></div>
          <div class="meta"><div class="t">cbquest — 講師教材アーカイブ<span class="tag k">BLOCKCHAIN</span></div>
            <div class="d">FLOCブロックチェーン大学校「スマートコントラクト開発科」全12回の講義スライド922ページと、NFT課題「cbquest」の解説。</div>
            <div class="u mono">tobisako.github.io/cbquest</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/gClaudeTokenMonitor/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/gClaudeTokenMonitor.jpg" alt="gClaudeTokenMonitor (ctm)" loading="lazy"></div>
          <div class="meta"><div class="t">gClaudeTokenMonitor (ctm)<span class="tag g">AI / Windows</span></div>
            <div class="d">Claude Code のセッションログを差分読みし、トークン消費とコストを1秒ごとに更新するターミナルモニター。Go標準ライブラリのみ・依存ゼロ・単一exe。タスクバー常駐UIと、公式プラン使用率との突き合わせ。M5Stack ATOMS3R を表示専用サブモニタとして駆動（ファーム書き込みもアプリから）。MIT。（GridJapan名義・本人制作）</div>
            <div class="u mono">gridjapan.github.io/gClaudeTokenMonitor</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/gjVideoEditor/jp/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/gjVideoEditor.jpg" alt="GJ VIDEO EDITOR" loading="lazy"></div>
          <div class="meta"><div class="t">GJ VIDEO EDITOR<span class="tag g">AI / OSS</span></div>
            <div class="d">日本語で動画を作り、字幕1つから手で直せる動画編集ツール。AIも人も同じ project.json を書き換えるので、手直しとAIへの再依頼が両立する。Python標準ライブラリ＋Pillow＋ffmpegのみ、クラウド・APIキー不要。MIT。（GridJapan名義・本人制作）</div>
            <div class="u mono">gridjapan.github.io/gjVideoEditor</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/gjPiPWindow/jp/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/gjPiPWindow.jpg" alt="gjPiP" loading="lazy"></div>
          <div class="meta"><div class="t">gjPiP<span class="tag g">macOS / OSS</span></div>
            <div class="d">仮想ディスプレイをPiPから操作するmacOSメニューバー常駐アプリ。2クリックでカーソルが移り、そのまま操作。無料・MIT。（GridJapan名義・本人制作）</div>
            <div class="u mono">gridjapan.github.io/gjPiPWindow</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/FreeDisplay/jp/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/FreeDisplay.jpg" alt="FreeDisplay" loading="lazy"></div>
          <div class="meta"><div class="t">FreeDisplay<span class="tag g">macOS / OSS</span></div>
            <div class="d">物理モニタなしでHiDPI仮想ディスプレイを作成する無料のメニューバーアプリ。公式版のバグ修正と機能追加を施したGridJapan fork。（本人制作）</div>
            <div class="u mono">gridjapan.github.io/FreeDisplay</div></div></a>
        <a class="banner" href="https://tobisako.github.io/GridWorldRAG/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/GridWorldRAG.jpg" alt="WinServerRAG" loading="lazy"></div>
          <div class="meta"><div class="t">WinServerRAG<span class="tag g">AI / MCP</span></div>
            <div class="d">Windows常駐のRAGサーバー。Google Driveの共有フォルダをセマンティック検索し、MCP経由でClaudeから遠隔検索。MITで公開。</div>
            <div class="u mono">tobisako.github.io/GridWorldRAG</div></div></a>
        <a class="banner" href="https://tobisako.github.io/ClipNotice/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/ClipNotice.jpg" alt="ClipNotice" loading="lazy"></div>
          <div class="meta"><div class="t">ClipNotice<span class="tag g">macOS / Windows</span></div>
            <div class="d">コピーした内容が付箋で3秒出る常駐ユーティリティ。履歴は持たない・Dockにもメニューバーにも出さない。Swift + C#。</div>
            <div class="u mono">tobisako.github.io/ClipNotice</div></div></a>
        <a class="banner" href="https://gridjapan.github.io/cambodia-nihongo-voice-check/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/NihongoVoiceCheck.jpg" alt="Cambodia Nihongo Voice Check" loading="lazy"></div>
          <div class="meta"><div class="t">Cambodia Nihongo Voice Check<span class="tag g">EDUCATION</span></div>
            <div class="d">カンボジア人スタッフ向けの日本語発音練習アプリ。クメール文字の当て字つきで、お手本を聞きマイク録音で発音を確認。（GridJapan名義・本人制作）</div>
            <div class="u mono">gridjapan.github.io/cambodia-nihongo-voice-check</div></div></a>
        <a class="banner" href="https://tobisako.github.io/RustOhkanGame/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/RustOhkanGame.jpg" alt="OhkanGame" loading="lazy"></div>
          <div class="meta"><div class="t">OhkanGame（Rust移植）<span class="tag">GAME</span></div>
            <div class="d">2013年のFlashゲーム「王冠を頭に10個積め」をRustで移植したmacOSアプリ。</div>
            <div class="u mono">tobisako.github.io/RustOhkanGame</div></div></a>
        <a class="banner" href="https://tobisako.github.io/TowerOfHanoi/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/TowerOfHanoi.jpg" alt="ハノイの塔" loading="lazy"></div>
          <div class="meta"><div class="t">ハノイの塔<span class="tag">HTML5リメイク</span></div>
            <div class="d">社内勉強会のお題として作ったFlash(AS3)ミニゲームを、プラグイン不要のHTML5に移植。ブラウザでそのまま遊べます。</div>
            <div class="u mono">tobisako.github.io/TowerOfHanoi</div></div></a>
        <a class="banner" href="https://tobisako.github.io/SagiJanken/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/SagiJanken.jpg" alt="詐欺ジャンケン" loading="lazy"></div>
          <div class="meta"><div class="t">詐欺ジャンケン SagiJanken<span class="tag">HTML5リメイク</span></div>
            <div class="d">詐欺機能を搭載したジャンケンゲーム。先に5回勝てば勝利、でもプレイヤーは絶対に勝てない。効果音はAI生成。</div>
            <div class="u mono">tobisako.github.io/SagiJanken</div></div></a>
        <a class="banner" href="https://tobisako.github.io/GununuSlot/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/GununuSlot.jpg" alt="ぐぬぬスロット" loading="lazy"></div>
          <div class="meta"><div class="t">ぐぬぬスロット GununuSlot<span class="tag">HTML5リメイク</span></div>
            <div class="d">2012年頃にC++/CLIで作ったスロットマシン。ドラムがゆっくり滑らかに停止する気持ちよさをそのまま移植。</div>
            <div class="u mono">tobisako.github.io/GununuSlot</div></div></a>
        <a class="banner" href="https://tobisako.github.io/BombMaster33/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/BombMaster33.jpg" alt="BombMaster33" loading="lazy"></div>
          <div class="meta"><div class="t">爆弾処理ゲーム BombMaster33<span class="tag">HTML5リメイク</span></div>
            <div class="d">2001年にVC++6.0/MFCで作った爆弾処理ゲームをHTML5に移植。同じ番号のツールで導火線が尽きる前に撤去。</div>
            <div class="u mono">tobisako.github.io/BombMaster33</div></div></a>
        <a class="banner" href="https://tobisako.github.io/work_JavaSwing/" target="_blank" rel="noopener">
          <div class="shot"><img src="assets/banners/work_JavaSwing.jpg" alt="SwingProject" loading="lazy"></div>
          <div class="meta"><div class="t">SwingProject — 2Dキャラ歩行デモ<span class="tag">HTML5リメイク</span></div>
            <div class="d">Java Swingのサンプル集から、スプライトシートの2Dキャラを歩かせるデモをHTML5に移植。デモ動画つき。</div>
            <div class="u mono">tobisako.github.io/work_JavaSwing</div></div></a>
      </div>
    </section>

    <div class="cvlink">
      職務経歴書の全文（スキルセット・職歴詳細・実績年表）は
      <a href="https://github.com/tobisako/cv" target="_blank" rel="noopener"><b>GitHubリポジトリ（tobisako/cv）</b></a>
      で公開しています。
    </div>
  </div>

  <footer>
    <div class="fl mono">
      <span>TOBISAKO RYUICHI</span>
      <span>CV / PORTFOLIO — GITHUB PAGES</span>
      <span><a href="https://github.com/tobisako/cv" target="_blank" rel="noopener">↗ SOURCE / 職務経歴書</a></span>
    </div>
  </footer>
</main>
</body>
</html>