【ポートフォリオ①】なぜポートフォリオにAstroを選んだのか？その理由と、設定した４つのチャレンジ項目

このサイトは、テックブログとポートフォリオを兼ねて制作しました。

当初は、以前に勉強してたNext.jsとmicroCMSを使ってポートフォリオ作ろうかな？と思っていました。もしくは、コンタクトフォームも使えるし、WordPressでさくっと作るのもいいかな？とも思いました。

だけど、それだとなんだかいつものフリーランスの仕事の延長みたいで、つまらないかも。せっかく数年ぶりにポートフォリオを作り直すなら、何か新しいことにチャレンジしながら作った方が面白い！

と、いうことで今回はポートフォリオにAstroを使うことにしました。

と、いろいろ書きましたが、要は、単純に「スゴイぞ！」と噂のAstroをがっつり触ってみたいという好奇心からです（笑）

ちなみにこの時のAstroの知識は、ほぼ全くのノー知識。ただ、UdemyのAstro講座をセールの時に購入していて、それ観ながらちょこっとv2を触ってみた程度だったと思います。

さて、話は変わって、今回はAstroを使うという他に、4点の縛りを設けました。

【頑張りポイント】
１：ヘッドレスCMS
２：モダン開発環境
３：vanillaJS
４：スピードインサイトの点数

反対に、ここはこだわらないというポイントも、作っておきました。

【後回しポイント】
１：デザイン、ブログのアイキャッチ画像とか
２：アニメーション
３：メタなど他OGP設定とか
４：microCMSのタグ機能つけるなど

時間をかけるとそれだけいいものができるのはわかるけど、エンドを決めた方がいい。
デザイナーとして見せるためでないならここは最低限にとどめて他のことにその時間をまわそうと、自分の中で優先順位をつけました。

ちなみに、アニメーションについて。
何度となくSNSで盛り上がる「ふわっと表示嫌い」問題(笑)

今回どうしようか悩みました。

ユーザー目線では、私もあまりいらないかな？と思ってしまう方です。情報を早く読みたいときは特に、スクロール時間がかかってちょっとイライラします。
でもクライアント目線では、リッチにみせたい場合にピッタリだし、必要かなと思うときもあります。

ということで、動きもちょっとだけ作る。でも最低限にする。ScrollTriggerなどのライブラリーは使わない。全部、素のJavaScriptで書く！という縛りでポートフォリオを作ってみました。

この後のブログで、Astro勉強したロードマップなども紹介しているので、もしよろしければそちらも読んでいただけると幸いです。