RikutoNakao-Portfolio

担当制作範囲

ディレクション / 企画・ワイヤーフレーム / デザイン / 実装

使用ツール

Figma / Visual Studio Code

選定技術

Astro / Tailwind CSS

制作の意図等

本サイトはAstroで実装しています。Next.jsとは異なるフレームワークを選定することで、用途に応じた技術選定ができることをアウトプットとして示したいと考えました。加えて、AstroはデフォルトでJavaScriptの配信を最小化する設計になっていることから、コンテンツ中心のポートフォリオサイトにおいてパフォーマンス面でも適した選択肢であると思い、選定しました。

各作品はMarkdownファイルで管理し、Content CollectionとgetStaticPathsを用いて動的ルーティングを実装しています。config.tsでスキーマの型管理を行うなど、保守性にも配慮した構成にしています。いずれも初めて扱う概念でしたが、公式ドキュメントを読み進めながらAIも活用しつつキャッチアップしました。

デザインはVS Codeのエディター画面を彷彿とさせるビジュアルで、エンジニアリングへの関心が一目で伝わるよう意識しています。またページ遷移時のカクつきを防ぐなど、UIとUXにも配慮しています。

制作期間

2週間