個人制作
ポートフォリオサイト
フロントエンドエンジニアとしての技術力と作品をまとめたポートフォリオサイトです。 Next.js × microCMS × Zenn API を活用し、作品紹介だけでなく技術記事の管理・検索機能を備えた統合的なプラットフォームとして構築しました。 SCSS + FLOCSS + CSS Modules による保守性の高いスタイル設計と、HubSpot連携によるお問い合わせ管理を実装しています。
サイトURL
https://kaze-portfolio-iwamoto-hayates-projects.vercel.app/GitHub URL
https://github.com/kaze-wind-dev/kaze-portfolioデザインURL
https://www.figma.com/design/0MtRojOlNv57X8bYad5z0X/MyPortfolios?node-id=195-2089&t=O8dILXW5Lzz5pomT-1制作期間
2025/07/07 ～ 2025/08/17
制作時間
110時間（約1ヶ月半）時間
制作背景・課題
フロントエンドエンジニアへの転職活動において、技術力と実績を効果的にアピールできるポートフォリオサイトとして制作いたしました。 ■課題設定 ・作品を体系的に整理・紹介できるプラットフォーム ・採用担当者が知りたい情報を効率的に伝えられるサイト構成 ・実務レベルを意識した技術スタックによる開発
学んだこと・成果
■複雑な状態管理 記事検索機能や並び替え機能の実装は初めての挑戦でしたが、複数の状態を適切に管理し、ユーザーの操作に応じてリアルタイムで結果を更新する仕組みを構築できました。特に検索条件とソート条件の組み合わせ処理について深く理解できました。 ■Next.js 15の新機能対応 Next.js 15以降で変更されたparamsの取得方法など、最新の仕様に対応した実装を行うことで、フレームワークの進化に対応できる技術力を身につけることができました。 ■API設計とデータフロー管理 microCMS・Zenn API・HubSpotという3つの異なるサービスを連携させ、それぞれのデータ形式に応じた取得・表示処理を実装できました。
技術スタック
- Next.js
- microCMS
- Vercel
- GitHub
- Sass
- TypeScript