この記事はAIと一緒に書いています。
概要
ポートフォリオサイトを大幅にリニューアルしました。 技術基盤の刷新、ブログ機能の強化、モバイル表示の改善、そして作品紹介ページの新設を行っています。
Next.js への移行
- サイト全体を React + Vite（SPA）から Next.js（App Router）に移行
- 各ページが事前にHTMLとして生成されるようになり、SEOが大幅に改善
- ブログ記事が検索エンジンに個別にインデックスされるように
- SNSシェア時に記事ごとのプレビューが表示されるOGPタグを追加
sitemap.xmlとrobots.txtの自動生成
ブログ機能の強化
- 目次サイドバー: 記事内の見出しを自動抽出し、右サイドバーに表示。現在読んでいるセクションがハイライトされる
- SNS共有・URLコピーボタン: デスクトップでは記事左側にフローティング表示、モバイルでは画面下部に固定ツールバーとして表示
- 外部公開リンク: Qiitaなど外部プラットフォームでも公開している記事にリンクバナーを表示
- 記事タイプ・タグの色分け: 更新履歴は青、技術記事は緑など、タイプごとに色を設定
モバイル表示の改善
- ヘッダーの縮小: モバイル時のヘッダー高さを約35%削減し、コンテンツ領域を拡大
- シェアバーのアイコン化: テキストラベルを非表示にし、アイコンのみのコンパクトなボタンに
- スクロール連動表示: スクロール中はシェアバーを非表示にし、停止後にフェードイン
- 記事一覧・記事ページの最適化: パディング・フォントサイズの調整、カードのコンパクト化
作品紹介ページの新設
- 「作ったもの」ページを新しく実装し、過去に作成したプロダクトを一覧・詳細表示できるようにした
- 一覧ページではカード形式でプロダクトのアイコン・名前・概要を表示
- 詳細ページでは概要・与える価値・技術スタック・リンク・スライド（PDF埋め込み）・受賞歴を閲覧できる
- 「メディア掲載」「過去の資料」はトグル形式で格納
- 現在掲載中のプロダクト: SuwaSystems（地方創生総合プラットフォーム）、Suwaaa（大学生向け地域店舗利用促進Webアプリ）