Github-Portfolio-Mobile を制作し、完成させました。
GitHub 上で公開している制作物を、作品集としてモバイル端末で見られるようにしたいと考え、Next.js と Tailwind CSS を用いて制作しました。
各作品の詳細な説明については、GitHub の README をそのまま表示できるようにしたいと考えました。GitHub API を利用する方法も検討しましたが、構成が複雑になるため、今回は README を raw URL から直接取得する方法を採用しています。
export const readmeRawUrl = (slug: string) =>
`https://raw.githubusercontent.com/${GITHUB_USER}/${slug}/${GITHUB_BRANCH}/README.md`;
作品一覧のデータは、データベースの代わりとして works.ts に works[] 配列を用意し、以下のような型で管理しています。
export type Work = {
slug: string;
title: string;
};
ここに slug と title を記述することで、シンプルに作品を追加できる構成にしました。
README の表示には react-markdown を使用し、フェッチした Markdown をそのまま整形して表示しています。また、global.css にてフォントサイズや余白などを微調整し、モバイルでの可読性を意識して仕上げました。
このプロジェクトは、これで完成とします。