katzkawai.github.io

ポートフォリオサイト

ようこそ、わたしのポートフォリオサイトへ！このリポジトリはGitHub Pagesを使用して公開されているウェブサイトのソースコードを含んでいます。

サイトの特徴

カード型デザイン

• すべてのプロジェクトをカード形式で美しく表示
• カテゴリーバッジ（サイトサンプル、アプリサンプル、SSG）で一目で分類
• レスポンシブデザインで様々なデバイスに対応

フィルター機能

• カテゴリー別にプロジェクトを絞り込み可能
• スムーズなアニメーション効果
• ワンクリックで目的のプロジェクトを探せる

サイトの内容

サイトサンプル（7プロジェクト）

• 派手なサンプル
• 名古屋観光ガイド
• YouTubeビデオページ
• 個人サイトサンプル
• 個人ブログ
• 素敵なパピちゃん
• ポートフォリオサイト

アプリサンプル（7プロジェクト）

• Reactクロック
• AIアシスタント
• 3D形状エクスプローラー
• 備忘録
• 自動献立生成アプリ
• 地図情報アプリ
• 割り勘アプリ

SSG（2プロジェクト）

• Astroサンプル
• VitePressサンプル

使用技術

フロントエンド

• HTML5
• CSS3
• Bootstrap 4.6
• JavaScript (ES6+)

PWA技術

• Progressive Web App (PWA)
• Service Worker（オフライン対応）
• Web App Manifest

デプロイ

• GitHub Pages
• 自動デプロイメント

外部ライブラリ

• jQuery 3.5.1
• Popper.js 1.16.1
• Bootstrap 4.6.0

実装機能

UI/UX

• カード型レイアウトシステム
• インタラクティブなフィルター機能
• スムーズなアニメーション効果
• レスポンシブデザイン（モバイル対応）
• ダークテーマ対応のナビゲーションバー

パフォーマンス最適化

• 画像の遅延読み込み（lazy loading）
• リソースヒント（preconnect）の活用
• 外部リソースの最適化
• スムーズスクロール実装

アクセシビリティ

• キーボードナビゲーション対応
• スクリーンリーダー対応（ARIA属性）
• スキップリンクの実装
• セマンティックHTML構造

PWA機能

• オフライン対応
• ホーム画面への追加
• アプリライクなユーザー体験
• プッシュ通知の準備

将来の改善案

静的サイトジェネレーター（SSG）の導入

現在のサイトは手動でHTMLを管理していますが、以下のSSGの導入を検討しています：

1. Hugo - 高速で柔軟なSSG

   • 利点：ビルドが非常に高速、豊富なテーマ
   • 適用：ブログやドキュメントサイト

2. Jekyll - GitHub Pages標準サポート

   • 利点：GitHub Pagesとの統合が簡単
   • 適用：ポートフォリオサイト

3. Astro - モダンなSSG

   • 利点：複数のフレームワークに対応、パフォーマンス重視
   • 適用：インタラクティブなサイト

SSG導入により期待される効果：

• コンテンツ管理の効率化
• テンプレートによる一貫性の確保
• ビルドプロセスの自動化
• Markdownでのコンテンツ作成

更新履歴

2025年11月

• 11月9日: ホームページをカード型レイアウトに全面リニューアル
  • 「最近の活動」セクションを削除してページをスリム化
  • すべてのプロジェクトをカード型デザインに変更
  • カテゴリーバッジ（サイトサンプル、アプリサンプル、SSG）を実装
  • カテゴリー別フィルター機能を追加
  • フィルターアニメーション効果を実装
  • モバイル・タブレット向けレスポンシブレイアウトを改善

2025年4月

• AIアシスタントページを追加
• ナビゲーションバーにSSGドロップダウンメニューを追加
• 名古屋一泊二日観光プランを追加

2025年3月

• シンプルなカレンダーを追加

2025年2月

• サイト全体の更新と統一
• サイトデザインをリニューアル（2月26日）

2025年1月

• シンプルなカレンダーを追加

2024年12月

• Reactサンプルを追加

2024年10月

• PWAサンプルを追加
• 初期リリース

連絡先

詳細についてはAboutページをご覧ください。