ポートフォリオ

作った経緯

今のポートフォリオを公開する以前に、Gatsby で作ったものがありました。
作った当時は React の勉強を始めたいと思っていた頃で、ブログなどに適した Gatsby を選びました。

Gatsby 自体はとても良いツールで React の勉強にもなりましたが、自分の作りたいポートフォリオにはオーバースペックかもしれない、と思うように……。
新しい技術の勉強をしたかったのと、もっとシンプルなものを作りたいと思い、Astro で作り直すことにしました。

2023 年現在のデザインツールとしては Figma がスタンダードだと考え、選んでいます。

またFriends of Figma Nagoyaというコミュニティのアドボケートをしたり、入門用の書籍を出版したりしています。そのため、布教活動も含めて、ポートフォリオ制作でも Figma を使うことにしました。

私が作ろうとしているものは、ほとんどブログサイトのようなものです。記事や外部へのリンクがあるばかりで、動的に変化するような要素はほとんどありません。

そのため、React や Vue、あるいはそれらを用いたフレームワークはオーバースペックだと考え、Astro を選びました。

直接的に Astro の話ではありませんが、Content Collections の機能ともあわせて、記事のスキーマも Zod で定義しています。

Astro にはデフォルトで TypeScript のサポートが組み込まれているため、利用しない手は無いと考えました。

ロジックはほとんど書かないのですが、Figma を用いてコンポーネントベースでデザインを組むなら、props の型を定義しておいた方が安心できると思っています。

世間でかなり使われていることは認識していたのですが、日頃の業務や個人開発でなかなか使うことがありませんでした。

というのも、ちょっとした新規サービスなら 1 から書いた方が早く、既存のサービスでは新たに導入する決定には至らない、という状況だったからです。

これだけスタンダードになりつつある技術を触っていないのは問題かもしれないと思い、半ば強制的に導入することにしました。

ポートフォリオ制作においても、正直言って Astro によるスコープ設定だけを活かした素の CSS を書く方が早かったのですが、ひとまず練習中です。

ここ最近はクリエイティブコーディングに興味があり、canvas 関連のインプットをしていることが多かったです。

そんな中、素の canvas や three.js は何度か試したことがありましたが、p5.js は触ったことがなかったので、今回はそれを使ってみることにしました。

トップページのノイズアニメーションは p5.js を用いて実装して、Qiita で記事にもしています。

Astro の公式ドキュメントでは最初に Netlify が紹介されているのですが、Vercel を選びました。

以前のポートフォリオで Netlify を使っていましたが、若干パフォーマンスが悪かったです。最初はなんとなく感じた程度でしたが、調べると以下のような記事も見つかり、乗り換えることにしました。

デプロイ周りは自分の知識がほとんどないため、有名なものやドキュメントが豊富そうなものを選ぶことしました。

そんな中、Vercel は Astro の公式ドキュメントで 2 番目に記載されているのと、Astro のスポンサーもしているので安心感があり選びました。

Transition API を使った画面遷移や、Instagram の投稿との連動などを実装したいと考えています。

2023 年 9 月 18 日追記:
Transition API を使って簡単な画面遷移を実装しました。