kouta.shimura
AboutSkillsProjectsTech StackContact
© ---- kouta.shimura
Contact
読み込み中...
技術スタック

使用技術とこだわり

このポートフォリオサイトは、モダンなウェブ技術を活用して構築されています。

パフォーマンス、保守性、ユーザーエクスペリエンスを重視し、最新のベストプラクティスに基づいて開発しました。

技術スタック

フレームワーク

Next.js 16 icon

Next.js 16

React ベースのフルスタックフレームワーク。App Router を採用し、サーバーコンポーネントとクライアントコンポーネントを適切に使い分けています。

React 19.2 icon

React 19.2

最新の React を使用し、コンポーネントベースの UI を構築。パフォーマンスとメンテナンス性を両立しています。

スタイリング

Tailwind CSS v4 icon

Tailwind CSS v4

ユーティリティファーストの CSS フレームワーク。OKLCH カラースペースを使用した洗練された色彩設計を実現しています。

カスタムアニメーション icon

カスタムアニメーション

CSS keyframes を使用した、スムーズで洗練されたアニメーション効果。タイピングアニメーションやフェードイン効果など。

開発言語

TypeScript 5 icon

TypeScript 5

型安全性を確保し、開発効率を向上。インターフェースと型定義により、バグを未然に防ぎます。

AI機能

Groq API icon

Groq API

OpenAI GPT-OSS 20B モデルを使用したインタラクティブなチャットボット。ページコンテキストを認識し、適切な情報を提供します。

react-markdown icon

react-markdown

チャットボットの応答を Markdown 形式でレンダリング。remark-gfm により GitHub Flavored Markdown にも対応。

設計時のこだわり

1

パフォーマンス最適化

Next.js 16 の Cache Components 機能を活用し、静的コンポーネントをキャッシュ。ページロード時間を大幅に短縮しています。

  • •Server Components / Client Components
  • •Static / Dynamic balance
  • •Image optimization

AI チャットボットについて

このサイトには、訪問者の質問に答える AI アシスタントが組み込まれています。

主な機能

コンテキスト認識

現在閲覧中のページを認識し、そのページに関連する情報を優先的に提供します。

技術詳細

Modelopenai/gpt-oss-20b
Temperature0.7
Max Tokens500

Next.js API Routes (/app/api/chat/route.ts) で実装され、Groq API と統合されています。